CSS border problem

8/10/2011

8/10/2011

It looks like your .container may not be wide enough. Try something like 696px

8/10/2011

Borders add width to your div. Subtract the border widths from your overall width set in your CSS.

8/10/2011

ASKER

I did that, but i dont't think it worked.

8/10/2011

ASKER

Jen - subtract the image with from the border with in the CSS?

8/10/2011

Your width on the .container is now 695px, which is showing all borders correctly. Unless your talking about a different border.

8/10/2011

As an example: If your overall page width is 600px, and you have a header container you want to take up the entire width, you'd set the width of that container to 600px (or 100%). Then, you decide a 5px border would look nice around all of it. that makes the width of the container 610px, pushing it out on the side (depending on how you have your floats set). So, to compensate, you would set your container width to 590px, and the borders will no longer get cut off. Borders are always counted (and maybe LZ1 can confirm this) as part of the overall div width.

8/10/2011

Borders are counted in determining widths, however IE does things a little differently, as it always does.

http://upload.wikimedia.org/wikipedia/commons/6/64/W3C_and_Internet_Explorer_box_models.svg

8/10/2011

Heard a great joke regarding IE once: "How many Internet Explorer software engineers does it take to change a lightbulb? None, they just ignore it and try to redefine darkness as the new standard."

8/10/2011

ASKER

lmao. unfortunately I don't even have IE here to test. Maybe I will scrap the img border and just use CSS.

8/10/2011

Love the joke Jen. Fits IE perfectly.

@Ivollmer: IMHO I would skip image borders all together right now if you can. CSS3 does support them, but I'm afraid it will be too long before EVERYONE is on board. Plus, if you don't have IE to test with, your days are ultimately numbered.

8/10/2011

ASKER

ok thanks - what is the best way to use traditional CSS to put a grey border on the container div, that is compatible in both IE and firefox?

8/10/2011

I would scrap the image border, honestly. CSS3 is awesome but unfortunately a long wait until we can realistically use it. Possibly use a tiled background image in it's place. I've done that many times and it always works well.

ASKER CERTIFIED SOLUTION

8/10/2011

THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial