Have Geek Brain

Visual CSS click

My knowledge of CSS is very limited, so I posed my problem here hoping for the best.

I am using this square: http://www.456bereastreet.com/lab/flexible_custom_corners_borders/ on my website and I need to display content in two columns.

I tried with a simple table and using divs with a set of floats (need a clearfix for the parent to get its height). My problem is a visual error that appears on the left side.

Only happens to table and div. p, h1, etc. works great.

Here is a picture of the error: http://img18.imageshack.us/img18/8783/imagem2hdp.png

thanks

edit: Here's the code: http://dl.getdropbox.com/u/178438/css_test.zip

0


a source to share


1 answer


You have to set the background color for .content

this will hide that part of the frame image.

- below -

The extra white space between the gradient and the border looks like the element is nudged sideways when in fact all of the background image of the left border, which is the second main div.



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

Since some of the window content is inside the left border of the div, and the border background image is sprite-style with multiple images gathered together in a large image, the only CSS-only solution for this is to apply a background color to the area content to cover the left background image (for example , the left background div makes the right background div)

There are other ways to deal with situations like splitting images into separate files or moving the content of a div outside the left border margin, but at this point you are no longer using the same box.

+1


a source






More articles:


All Articles