I'm having real CSS woes today! Hopefully someone can sort me out with this one as well..
Below is a stripped down version of what I'm trying to do; a page with a sidebar of information, with "float: left" so that the rest of the page flows around it. But I'm coming up against a problem in IE with <li> items.
If I put in a list then the bullet points get lost behind the sidebar. If I change the list-style-position to inside then the bullet point is visible again, but if the list item doesn't fit on one line then it gets wrapped underneath the bullet point. Ugly.
I can't use padding or margins because of the float (I tried it and it doesn't work correctly in IE or Firefox due to the way the item bounding box is calculated).
So I thought I'd use relative positioning and shift the list item over a little bit (and give it a right margin so it doesn't get pushed off the side of the screen).
This works perfectly in FireFox. In Internet Explorer the text looks fine but the bullet point symbol has disappeared! I'm going a bit mental on this one, if someone could either solve this problem or suggest another route to take to get the desired effect it would be very much appreciated!
Cheers,
Dan.
Below is a stripped down version of what I'm trying to do; a page with a sidebar of information, with "float: left" so that the rest of the page flows around it. But I'm coming up against a problem in IE with <li> items.
If I put in a list then the bullet points get lost behind the sidebar. If I change the list-style-position to inside then the bullet point is visible again, but if the list item doesn't fit on one line then it gets wrapped underneath the bullet point. Ugly.
I can't use padding or margins because of the float (I tried it and it doesn't work correctly in IE or Firefox due to the way the item bounding box is calculated).
So I thought I'd use relative positioning and shift the list item over a little bit (and give it a right margin so it doesn't get pushed off the side of the screen).
This works perfectly in FireFox. In Internet Explorer the text looks fine but the bullet point symbol has disappeared! I'm going a bit mental on this one, if someone could either solve this problem or suggest another route to take to get the desired effect it would be very much appreciated!
Code:
<html>
<head>
<style type="text/css">
#sidebar {
background-color: gray;
width: 200;
height: 400;
float: left;
margin-right: 32px;
}
#content ul {
}
#content ul li {
position: relative;
left: 1em;
margin-right: 1em;
}
</style>
</head>
<body>
<div id="sidebar">Sidebar</div>
<div id="content">
<ul>
<li>Item1</li>
<li>Item2</li>
</ul>
</div>
</body>
</html>Dan.
![[infinity]](/data/assets/smilies/infinity.gif "[infinity] [infinity]")
