Caution: Web work ahead

November 24th, 2005

Here’s a snapshot of the site I’m working on for my employer.

Click for larger view.

This is potentially the first of 3 designs for them to pick from. I had one previous to this, but I no longer like it, so it’s out of the running.

There is a problem, though. I guess it’s because I’m still learning the tricks of CSS. It doesn’t render exactly the way I want it to in Internet Explorer. It renders like this:

Click for larger view.

Here’s the relevant CSS:

#pageHeader {
position:absolute;
left:5%;
top:0px;
width:90%;
height:100px;
z-index:1;
background-color: #FF0000;
background-image: url(../images/keating-bg.png);
background-repeat: repeat-x;
overflow: hidden;
margin: 0px;
border: 0px;
}
#navbar {
position:absolute;
left:5%;
top:100px;
width:90%;
height:25px;
z-index:2;
background-color: #425968;
margin: 0px;
border: 0px;
}
#main {
position:absolute;
left:5%;
top:125px;
width:90%;
height: 100%;
z-index:3;
background-color: #FFFFFF;
margin: 0px;
border: 0px;
}
#news {
position:relative;
float:right;
background-color: #E0E7EB;
z-index:4;
margin: 10px;
padding:4px;
width: 150px;
height: 120px;
left:10px;
top:10px;
right: 10px;
}
#newsHeader {
background-color:#FF0000;
position:relative;
float:left;
z-index:5;
width:100%;
top:0px;
left:0px;
}

Anyone want to take a stab and tell me what I’m doing wrong?

Filed Under Design, Shop Talk
Trackback URI


2 Responses to “Caution: Web work ahead”

Comments

  1. engel on November 25th, 2005 10:51 am

    Did you set body{height:100%}?

  2. Brian Mayzure on November 28th, 2005 7:15 am

    It would be in the #main div. Checking again, yes, it’s set to 100%. But I think that’s one of those things IE doesn’t render well.

Leave a Reply