Positioning differ in ie7 and ie6 as compared to standard browsers

HTML & CSS
1

I have following code in stylesheet.

in IE6 and 7 div with id content start after div#sidebar content finishes but in IE8, FF, Safari, Chrome, Opera div#sidebar and div#content appear side by side. is it some IE bug or am i doing something wrong.

please help


#wrapper {
height:inherit;
position:relative;
width:100%;
}

#Sidebar {
float:left;
}


#Content  {
margin-left:170px;
padding:8px 8px 8px 4px;
position:relative;
}

thanks

2

Hi, since you have widthless floats there a number of reasons could pop up. Although all of which would be guesses unless we have your full code to work with :).

Since you have under 5 posts, post your link to your site as such. We will decipher it :slight_smile:

sitehere dot com slash page dot php

Also note that the value “inherit” isn’t supported in IE7 and down except on a few properties.

3

Hi,

Unfortunately the code you posted produces the same results in Ie6,7 and Firefox so it’s hard to guess what the problem may be as there is probably another trigger in code not shown.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
* {
    margin:0;
    padding:0
}
#wrapper {
    height:inherit;
    position:relative;
    width:100&#37;;
}
#Sidebar {
    float:left;
}
#Content {
    margin-left:170px;
    padding:0px 8px 8px 4px;
    position:relative;
}
</style>
</head>
<body>
<div id="wrapper">
    <div id="Sidebar">sidebar</div>
    <div id="Content">content</div>
</div>
</body>
</html>

As Ryan said the widthless Sidebar will not be a lot of use as fluid content will eventually push it to 100% wide.

IE6 and 7 don’t understand “inherit” and indeed you would not want the height inherrited into that element anyway as that would limit the element to a fixed height (should it be able to reconcile it’s height from a fixed height parent of course.)

Have you got a link to the problem so we can debug further?