CSS визуальный щелчок

Question

Мои знания CSS очень ограничены, поэтому я ставлю свою проблему здесь, надеясь на лучшее.

Я использую это поле: http://www.456bereastreet.com/lab/flexible_custom_corners_borders/ на моем веб-сайте, и мне нужно отображать содержимое в формате двух столбцов.

Я пытался использовать простую таблицу и использовать div с набором чисел с плавающей запятой (необходим clearfix, чтобы родительский элемент получил свою высоту). Моя проблема - визуальная ошибка, которая появляется с левой стороны.

происходит только с таблицей и с плавающей точкой. p, h1 и т. д. отлично работает.

Вот изображение ошибки: http://img18.imageshack.us/img18/8783/imagem2hdp.png

Спасибо

редактировать: Вот код: http://dl.getdropbox.com/u/178438/css_test.zip

Answer 1

Вы должны установить цвет фона для .content, это скроет эту часть изображения границы.

- редактировать ниже -

Дополнительный пробел между градиентом и границей выглядит как элемент, который перемещается вбок, когда он действительно является частью фонового изображения левой границы, которое является вторым основным делителем.

div // Right border
    div // Top border with corner sub divs
    div // Left border
        div // Content
    div // Bottom border with corner sub divs

Поскольку часть содержимого блока находится внутри левой границы элемента div, а фоновое изображение границы выполнено в стиле спрайт с несколькими изображениями, объединенными в увеличенное изображение, единственное решение для CSS - это применить цвет фона к содержимому. область, чтобы покрыть левое фоновое изображение (как левый фон делает div с правым фоновым div)

Есть и другие способы исправить это, например, разделить изображения на отдельные файлы или переместить div Content за пределы div левой границы, но в этот момент вы больше не используете этот же блок.