CSS Image Border expanded

[WardenWFW]

Hello all,

I think this is probably easy, but it is eluding me. I have placed my banner on my webpage, and instructed CSS to position it and place a border around it. Everything worked fine except for the border. For some reason, the border expands to both sides of the web page far outside of the banner.

The code I used on the stylesheet is:
#banner {
float: center;
margin-left: 0;
margin-right: 0;
border: 3px solid #a0522d;
}

Thanks for any suggestions.

[edited by: jatar_k at 4:15 pm (utc) on Oct. 18, 2005]
[edit reason] no urls thanks [/edit]

[SilkyStuff]

Hi

I am a bit of a beginner when it comes to CSS but I do know that the "margin" statements are part, if not all, of the problem. You are specifiying the margins to be Zero which means the "div", therefore the border of this "div", will be Zero distance from the left and right hand sides of the browser window. In other words, you are instructing the browser to extend the border of this "div" to the extreme LHS and RHS edges of the window (which is the visual effect you describe).

If you simply remove these statements you will probably have the desired effect. However, because of my limitations, I don't know what you could replace the statements with to ensure you always get the result you want in all browsers.

Steve

[limbo]

Welcome to WebmasterWorld :)

I'd wrap the page in a centrally aligned div with auto and then give your banner width: 646px;

But thats just my approach

[WardenWFW]

Thanks much for the welcome. :)

What both of you says makes sense. I am so new to this, here is what I have for my CSS (below):

I also noticed that in IE (I use Mozilla) there is a small 1 or 2 pixel gap at the bottom between images and their borders where it shows the background color. Any idea how to fix that?

So, if I were to wrap all this into one div (I've tried doing that before with less than pretty results) does anyone have any hints to make it work smoothely? Even pointing to a CSS for idiots tutorial would be great. hehe

Thanks again.

Warden WFW

body {
margin: 0;
padding: 5px;
background-image: url('images/greenbg.jpg');
color: #46330f;
font: 10pt Ariel, Georgia, serif;
text-align: center;
}

#banner {
float: center;
margin-left: 0;
margin-right: 0;
border: 3px solid #a0522d;
}

#tabmenu {
color: #000;
margin: 12px 0px 0px 0px;
padding: 0px;
z-index: 1;
padding-left: 10px }

#tabmenu li {
display: inline;
overflow: hidden;
list-style-type: none; }

#tabmenu a, a.active {
color: #DEDECF;
background: #898B5E;
font: bold 1em "Trebuchet MS", Arial, sans-serif;
border: 2px solid #a0522d;
padding: 2px 5px 2px 5px;
margin: 0px;
text-decoration: none; }

#tabmenu a.active {
background: #fefef2;
border-bottom: 4px solid #fefef2; }

#tabmenu a:hover {
color: #fff;
background: #ADC09F; }

#tabmenu a:visited {
color: #E8E9BE; }

#tabmenu a.active:hover {
background: #ABAD85;
color: #DEDECF; }

#content {
margin-top: 3px;
margin-left: 115px;
margin-right: 115px;
padding: 10px;
border: 3px solid #a0522d;
background-color: #fefef2;
text-align: justify;
}

#img {
float: left;
margin-left: 0;
margin-right: 5;
border: 3px solid #a0522d;
}

h1 {color: #46330f; text-align: center; font-variant: small-caps; top: 190px}
h2 {color: #46330f;}
p {color: #46330f}

[bradshjw]

In addition to what everyone else has already mention, there is no "float: center;". As far as I am aware of, your only options for floating are: left, right, and none.

[limbo]

try adding these:

body {
text-align: center;
}

#wrapper { /* wrap you content with this */
width: 700px ; /* your central column width */
margin: 0 auto; /* to auto align the page center */
text-align: left;
}

#banner {
float: center;
margin-left: 0;
margin-right: 0;
border: 3px solid #a0522d;
width: 700px; /* to the width of your header image */
}

Should work (not tested)

[WardenWFW]

Hey thanks!

When I read your suggestions it suddenly became clear that I needed to add the width to #banner, so I added width: 646px and the border is perfect.

Thanks so much for the help all!