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?
CSSHTMLWeb Development

Avatar of undefined
Last Comment
Larry Vollmer

8/22/2022 - Mon
LZ1

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

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

ASKER
I did that, but i dont't think it worked.
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23
Larry Vollmer

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

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

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.
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
LZ1

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 
Jen0910

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."
Larry Vollmer

ASKER
lmao. unfortunately I don't even have IE here to test. Maybe I will scrap the img border and just use CSS.
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
LZ1

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.  
Larry Vollmer

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?
Jen0910

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.
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
ASKER CERTIFIED SOLUTION
LZ1

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Larry Vollmer

ASKER
thanks