CSS

After having put web coding on hiatus for a couple of years, I recently started getting back into not just designing sites but also attempting to code them.

In the years I've been away from this scene CSS has risen to quite the standard in coding for the layout of sites which is understandable considering how handy it makes things (as I'm sure you all know already).

I seem to be running into a problem though when I try to code my own website. I'm using absolute positioning instead of relatives or floats and setting images within the divs as background images.

It works fine in all browsers I've tested in so far except for IE which does not seem to load any aspect of the stylesheet apart from background color and font style.

All the content simply gets slapped onto the center of the screen, without loading any of the images embedded in the styesheet. Being new to the concept of CSS I can't seem to figure out how to make this site fully cross browser.

I'm sure the fix is easy... I just can't seem to figure it out.

Below is the stylesheet for the site and if anyone could give me some pointers, it would be greatly appreciated.

body {
background-color:#000000;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;"
}

#container {
position:absolute;
left:0px;
top:0px;
width:1024px;
height:768px;
}

#left_spacer {
position:absolute;
left:0px;
top:0px;
width:57px;
height:768px;
background-image: url(images/index_01.jpg);
}

#header {
position:absolute;
left:57px;
top:0px;
width:910px;
height:253px;
background-image: url(images/index_02.jpg);
}

#right_spacer {
position:absolute;
left:967px;
top:0px;
width:57px;
height:768px;
background-image: url(images/index_03.jpg);
}

#head_spacer {
position:absolute;
left:57px;
top:253px;
width:910px;
height:23px;
background-image: url(images/index_04.jpg);
}

#center_left_edge {
position:absolute;
left:57px;
top:276px;
width:98px;
height:492px;
background-image: url(images/index_05.jpg);
}

#print {
position:absolute;
left:155px;
top:276px;
width:324px;
height:167px;
background-image: url(images/index_06.jpg);
text-align: left;
text-indent: 15px;
}

#center_spacer {
position:absolute;
left:479px;
top:276px;
width:36px;
height:492px;
background-image: url(images/index_07.jpg);
}

#identity {
position:absolute;
left:515px;
top:276px;
width:319px;
height:167px;
background-image: url(images/index_08.jpg);
}

#center_right_edge {
position:absolute;
left:833px;
top:276px;
width:133px;
height:492px;
background-image: url(images/index_09.jpg);
}

#category_divider1 {
position:absolute;
left:155px;
top:443px;
width:324px;
height:32px;
background-image: url(images/index_10.jpg);
}

#category_divider2 {
position:absolute;
left:515px;
top:443px;
width:319px;
height:32px;
background-image: url(images/index_11.jpg);
}

#web {
position:absolute;
left:155px;
top:475px;
width:324px;
height:165px;
background-image: url(images/index_12.jpg);
}

#conceptual {
position:absolute;
left:515px;
top:475px;
width:319px;
height:165px;
background-image: url(images/index_13.jpg);
vertical-align: bottom;
}

#b_left {
position:absolute;
left:155px;
top:640px;
width:324px;
height:33px;
background-image: url(images/index_14.jpg);
}

#b_right {
position:absolute;
left:515px;
top:640px;
width:319px;
height:33px;
background-image: url(images/index_15.gif);
}

#b_spacerL {
position:absolute;
left:155px;
top:673px;
width:324px;
height:95px;
background-image: url(images/index_16.jpg);
}

#b_spacerR {
position:absolute;
left:515px;
top:673px;
width:319px;
height:95px;
background-image: url(images/index_17.jpg);
}

#content {
text-align: right;
}

Seems like the culprit was the fact that I was running a js script on the site that had its own separate css stylesheet that was in the head of the code to load after the main one.

I'm assuming that IE simply disregarded the main css and only looked at the last one to load... this correct?

I merged the two anyway and all seems to be working fine now.

Thanks

it doesnt ignore the other ones..

this is all part of the Cascade.. (Cascading Style Sheets)

any styles with the same classname, or styles attached to the same elements will be overridden by styles lower down the page - in the header. All those will in turn be overridden by any inline styles on the elements..

ie. <p style="blah....

afaik anyhow
sure someone will correct me if im talking nonsense

hth

nat