CSS layout.. few pixels not matching up

[nofx1728]

I'm designing my site with css for the first time. Most of the layout is how I want it. However on my #banner my #bannernav is not filling up the entire div even though it is set to 100%, there are a few pixels to the very right that are not being filled with background color. Underneath it is my #dlfbanner. This image size is 700 x 100, which is the same as my div, however there are a few pixel at the very bottom that are showing. I've been trying to fix it, but nothing is working. This is probably a very simple problem that i'm over looking. Can someone please help me? You can view the page at

http://home.bellsouth.net/p/PWP-dlfmedia

. This is the onlly page created, so the links wont work.

Here is my css code for this section:

#banner {
border: #999999 solid 1px;
color: #666666;
display: block;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
margin-bottom:15px;
float: left;
width: 700px;
}

#bannernav {
background-color: #3f3E74;
border-color: #ffffff;
border-style: none none solid;
border-width: medium medium 1px;
color: #ffffff;
display: block;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight:500;
height: 23px;
padding: 4px 0px 0px;
float:left;
width: 100%;
text-align:left;
}

#bannernav a {
color:#FFFFFF;
padding: 0px 2px;
}

#bannernav a:hover {
color:#FFCC00;
text-decoration:underline;
}

#dlfbanner {
background-color:#CAEDFF;
border:#666666 solid 1px;
clear:both;
color:#666666;
display:block;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
height: 100%;
width:100%;
}

Thanks,

nofx1728

 

[mbrooks]

This is the best you are going to get it without having to do a rewrite.

Basically IE's support for CSS sucks.

#banner {
    background-color: #3f3E74;
    border: #999999 solid 1px;
    color: #666666;
    display: block;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 12px;
    margin-bottom:5px;
    padding: 0px;
    float: left;
    width: 700px;
}

#bannernav {
    background-color: #3f3E74;
    border: 1px solid #ffffff;
    color: #ffffff;
    display: block;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight:500;
    height: 23px;
    padding: 4px 0px 0px 0px;
    float:left;
    width: 100%;
    text-align:center;
}

M. Brooks

http://mbrooks.info

 

[Vragabond]

To begin with, your code is overly complex and has many many many needless declaration which prevent you from seeing the whole picture. The problem with the gaps is in the fact that your stuff does not fit your containers. Your #container is 700px wide, however your picture is also 700px plus it has 2px of border on each side plus the #banner has 2px border on each side. Now IE will expand the container to fit the content and effectively making the container 704px wide. Since you explicitly state your #banner is 700px wide, there's a discrepancy of 2px, which are left blank.

This has much to do with your overly complex code. Divs are block level elements (no need to specify display: block that will be as wide as the container if not specified a width. Also, you have a myriad of floated elements on the page that are not really floating (they are alone in the line). When I was changing your code, the #dlfbanner only had the [tt]border: #666666 solid 1px;[/tt] command. That is how much you can simplify. And it was working in both IE and FF.

 

[Vragabond]

And I forget about the bottom gap. That comes from IE not understanding whitespace correctly and actually trying to render that. Remove all the whitespace between the div and the image and you should be fine:

<div id="dlfbanner"><img src="assets/banner.jpg" alt="DLF Media Banner" width="700" height="100" /></div>

 

[nofx1728]

I updated the html for the dlfbanner, and eliminated the bottom pixels that were showing. However, I am still not able to fix the pixels to the right of the navigation. I tried making the banner 696px instead of 700px, but that just left pixels showing to the right of both the banner and the nav. I also tried making thing banner 100%, but that did not work. As for the CSS being overly complex, most of the reason I have that extra stuff in there is for the css validator that always warns about colors. Even with all them colors being specified when they're not needed, I still get warnings of color when I validate. Also, I read that using the display:block; is safe because if an xml only browser comes out it will be able to display your site correctly. That is why I used that code. Is there anything you can see... that can help me lose them pixels to the right of the nav? It's very annoying when looking at it.

Thanks,

nofx1728

 

[Vragabond]

Phew, quick and dirty fix?

#container {
background-color: #ffffff;
color: #666666;
font-family: Arial, Helvetica, sans-serif;
font-size:70%;
margin: 0px auto;
[blue][b]width: 704px;[/b][/blue]
min-height: 100%;
}

#banner {
border: #999999 solid 1px;
color: #666666;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
margin-bottom:5px;
float: left;
[s][red]width: 700px;[/red][/s]
}

#bannernav {
background-color: #3f3E74;
border-color: #ffffff;
border-style: none none solid;
border-width: medium medium 1px;
color: #ffffff;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight:500;
height: 23px;
padding: 4px 0px 0px;
float:left;
[s][red]width: 100%;[/red][/s]
text-align:left;
}

#dlfbanner {
background-color:#CAEDFF;
border:#666666 solid 1px;
clear:both;
color:#666666;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
[s][red]height: 100%;
width:100%;[/red][/s]
}

Change the following (red strikethrough means delete or comment out and blue means change) and you should be ok.

 

[nofx1728]

You're the man bro, I can't thank you enough for taking the time to help me.

-nofx1728

 

[ChrisHunt]

Incidentally, I'd be wary of naming important parts of your site "banner". I've heard that some ad blocking software will look for names like this and not display it, assuming that it's a banner advert.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd