I am trying my hardest to use CSS instead of tables for peoplearray.com. But since every browser gets to interpret CSS and “standards” in their own way, I (and all web designers/developers alike) get to hack up our CSS files to make our pages look the same in most of the major browsers.

Here is a screen shot of my issue:

Notice the little line of white? That is where my header class is being divided between two parts: id=header-image and id=header-text.

Here is my CSS code:
.header {
background:#DAE0D2 repeat-x bottom;
width:100%;
margin:0;
padding:0;
}
#header-text {
text-align:right;
float:right;
width:80%;
height:68px;
}
#header-logo {
float:left;
width:20%;
height:68px;
}

Anybody have any ideas as to how to get rid of this small white line? It is only visible in Opera9 as far as I know. I only have access to IE6/7beta, Firefox 1.5.0.4 and Opera9.

Filed under: CSS • PeopleArray • Web Development • Website

Like this post? Subscribe to my RSS feed and get loads more!