new to css - starting to hate IE - CSS forum at WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

new to css - starting to hate IE

silent1643

4:09 pm on Oct 31, 2007 (gmt 0)

arge - just started using css and learning fairly fast along the way but for some reason IE does not like my code. Even opera displays the page correctly. Anybody have any clue?

sidebars to not line up right in IE and overlap my content. Here is my code for the sidebars.

most everything validates from w3.org except for a few yahoo store tags that come up as an error on the validator

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

}
table.sidebar {
position: absolute;
background: url(./images/sidebar.png) 100%;
margin-top: 50px;
margin-left: 20px;
width: 189px;
height: 362px;
border: 0px;
}
table.adbar {
position: absolute;
background: url(./images/adbar.png) 100%;
margin-top: 50px;
margin-left: 20px;
width: 189px;
height: 201px;
}

[edited by: tedster at 9:19 pm (utc) on Nov. 5, 2007]
[edit reason] no urls please [/edit]

HOTmike

5:22 pm on Oct 31, 2007 (gmt 0)

Welcome to the club of IE haters. We are many, and our numbers are growing. anyway...

try "position:relative;" instead of absolute, or if the layout works without positioning that's even better. You may also consider omitting the height and let the content define how much vertical space element gets, though that may require you to handle your background images in some other way.

silent1643

5:24 pm on Oct 31, 2007 (gmt 0)

thanks, relative will offset the position in all the browsers - height or width if taken away only shortens my menu which doesn't show the complete background image. here is my complete css - validated from w3

HTML {
font-family : Georgia, "Times New Roman", Times, serif;
margin-top : 0;
margin-left : 30px;
margin-right : 30px;
}
BODY {
background : #666 url(./images/1.jpg) 30% 0%;
margin : 0 30px 0 0;
height : 100%;
}
img {
border : none;
border : 0;
border-width : 0;
margin : 0;
padding : 0;
}
a:link, a:visited {
color : #000;
text-decoration : none;
font-weight : normal;
}
a:hover {
color : #ff0000;
text-decoration : underline;
font-weight : normal;
}
table.header {
background : #fff;
display : block;
color : #000;
width : 800px;
margin : 0;
font-size : 45px;
}
table.topg {
padding : 5px;
background : #fff url(./images/top.png) 100% no-repeat;
height : 10px;
background-position : bottom;
}
table.sidebar {
position : absolute;
background : url(./images/sidebar.png) 100% 0%;
margin-top : 50px;
margin-left : 20px;
width : 189px;
height : 362px;
border : 0;
}
table.feature {
margin-top : 50px;
margin-left : 220px;
background : url(./images/box.png) 100% 0%;
width : 565px;
height : 431px;
border : 3px #000;
padding : 10px;
table-layout : fixed;
}
table.adbar {
position : absolute;
background : url(./images/adbar.png) 100% 0%;
margin-top : 50px;
margin-left : 20px;
width : 189px;
height : 201px;
}
table.bottomg {
margin-top : -12px;
margin-bottom : -60px;
background : #fff url(./images/bottom.png) no-repeat 100% 0%;
height : 75px;
width : 800px;
}
table.content {
background : #6f4938;
display : block;
vertical-align : middle;
width : 800px;
height : 1110px;
}