Link to home
Start Free TrialLog in
Avatar of Larry Vollmer
Larry Vollmer

asked on

CSS border problem

I have this page: http://s130859622.onlinehome.us/sr/home.html

the borders on the top, bottom, and left are working fine, but the right border is not displaying 100% - can anyone tell what I am doing wrong?
Avatar of LZ1
LZ1
Flag of United States of America image

It looks like your .container may not be wide enough.  Try something like 696px
Borders add width to your div. Subtract the border widths from your overall width set in your CSS.
Avatar of Larry Vollmer
Larry Vollmer

ASKER

I did that, but i dont't think it worked.
Jen - subtract the image with from the border with in the CSS?
Your width on the .container is now 695px, which is showing all borders correctly. Unless your talking about a different border.
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.
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 
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."
lmao. unfortunately I don't even have IE here to test. Maybe I will scrap the img border and just use CSS.
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.  
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?
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
Avatar of LZ1
LZ1
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
thanks