CSS visual flick

Question

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

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

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

Случается только с таблицей и разделителем. p, h1 и т. д. отлично работает.

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

Благодаря

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

Answer 1

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

--edit below--

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

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 за пределами левой границы div, но в этот момент вы больше не используете тот же самый ящик.