CSS Question

[psiegesmund]

I'm having trouble getting CSS to look consistent across browsers. My site is www.siegesmund.org (http://www.siegesmund.org).

The problem is this: I have a blue header with a 1px white border on the bottom that spans the top of my site. It looks correct in Firefox, Safari and IE 7. However, when I've looked at it on IE 6, there's no white border and the blue field doesn't span the entire page. As most people still use IE 6, this is a problem to me.

Any advice from the CSS experts here would be appreciated. Thanks!

[Andy]

:wave welcome to Dgrin.

I will look at your site http://siegesmund.smugmug.com/

FYI we do not support in any way IE7 beta, things may work, they may not. We will fully support it when it is out of beta.

[Andy]

Ivar coming to the rescue, standby.


<div id="Layer1" style="position:absolute; left:0px; top:0px; width:100%; height:40px; z-index:1; background-color: #14284B; layer-background-color: #14284B; border: 1px solid #FFFFFF;">

<br><p align="left" class="style1"><span class="style3">peter</span>

<span class="style2">siegesmund.org</span></div>

<div id="Layer2" style="position:absolute; left:0px; top:0px; width:100%; height:41px; z-index:0; background-color: #FFFFFF; layer-background-color: #FFFFFF; border: 0px solid #000000;"></div>



Ivar that's #Layer1 and #Layer2 code in the header section.

[ivar]

Ivar coming to the rescue, standby.


<div id="Layer1" style="position:absolute; left:0px; top:0px; width:100%; height:40px; z-index:1; background-color: #14284B; layer-background-color: #14284B; border: 1px solid #FFFFFF;">

<br><p align="left" class="style1"><span class="style3">peter</span>

<span class="style2">siegesmund.org</span></div>

<div id="Layer2" style="position:absolute; left:0px; top:0px; width:100%; height:41px; z-index:0; background-color: #FFFFFF; layer-background-color: #FFFFFF; border: 0px solid #000000;"></div>


Ivar that's #Layer1 and #Layer2 code in the header section.
Right, there is so much html things in there.... toooo much, i don't do HTML :D, let's make this into a nice xhtml/css header.

In your header, change ALL of the above to <div id="my_banner"><span class="style1">peter</span><span class="style2">siegesmund.org</span></div>
then add this to your CSS#my_banner {
height: 26px;
padding-top: 20px;
margin-bottom: 0;
background-color: #14284B;
border-bottom: 1px solid #fff;
font-size: 20px;
}

.style1, .style2 {
font-family: Arial, Helvetica, sans-serif;
color: #333333;
}

.style2 {
color: #CCCCCC
} and remove the previous style1 and style2 statements. That will give you your banner from left to right in IE too.

Oh, and welcome to dgrin :wave

[psiegesmund]

Thanks for the help!


Right, there is so much html things in there.... toooo much, i don't do HTML :D, let's make this into a nice xhtml/css header.

In your header, change ALL of the above to <div id="my_banner"><span class="style1">peter</span><span class="style2">siegesmund.org</span></div>
then add this to your CSS#my_banner {
height: 26px;
padding-top: 20px;
margin-bottom: 0;
background-color: #14284B;
border-bottom: 1px solid #fff;
font-size: 20px;
}

.style1, .style2 {
font-family: Arial, Helvetica, sans-serif;
color: #333333;
}

.style2 {
color: #CCCCCC
} and remove the previous style1 and style2 statements. That will give you your banner from left to right in IE too.

Oh, and welcome to dgrin :wave

[ivar]

Thanks for the help!No problem, now if you want to get the header touching the borders, just change thisbody { margin: 5px 5px 5px 5px; background-color: #181818;} to thisbody { margin: 0; background-color: #181818;}

[ivar]

No problem, now if you want to get the header touching the borders, just change thisbody { margin: 5px 5px 5px 5px; background-color: #181818;} to thisbody { margin: 0; background-color: #181818;}

you missed a div closure in the code i gave you. This is what you have just now
<div id="my_banner"><span class="style1">peter</span><span class="style2">siegesmund.org</span></div>

<div id="navcontainer">
<ul>
<li><a href="http://www.siegesmund.org">home</a></li>
<li><a href="http://www.siegesmund.org/gallery/1475763">color</a></li>
<li><a href="http://www.siegesmund.org/gallery/1466023">black &amp; white</a></li>
<li><a href="http://www.siegesmund.org/Travel">travel, family &amp; other</a></li>
<li><a href="mailto:%20psiege@gmail.com">contact</a></li>
</ul>
</div>
</div>
<br>
<br>
remove the red, and add the green, that should take care of it