0

I have a page that looks fine in ff, but doesn't look good in ie. I the problem is that ie displays the images in the side bar on a different line then the text.:( Here is my code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<title>Simple 2 column CSS layout, final layout | 456 Berea Street</title>

	
	
	<style type="text/css">
	body,
	html {
		
		padding:0;
		background:#000000;
		color:#000;
		
	}
	body {
		min-width:810px;
	}
	#wrap {
		background:#000000;
		margin: 0 auto;
		width:810px;
		
	}
	#header {
	background-color:#000000;
	height:75px;
		
	}
	
	
	
	#header h1 {
    	margin:0;
		line-height:75px;
		font-family:"Comic Sans MS";
		margin-left:80px;
		color:#00CC00;
    }
	
	#main {
		background:#000000;
		float:right;
		width:560px;
		color:#00FF00;
	}
	#main h2, #main h3, #main p {
		padding:0 10px;
    }
	#sidebar {
		background:#000000;
		float:left;
		width:240px;
		
	}
	#sidebar ul {
		margin-bottom:0;
		margin:0 0 0 0; padding: 0 0 0 0; list-style-type: none; text-align:left;
    }
	
    #sidebar h3, #sidebar p {
		padding:0 0 0 0;
		margin-top:5px;
		margin-left:3px;
		margin-bottom:3px;
		text-align:center;
		color:#00FF00;
	
    }
	#sidebar a
	{
	text-decoration:none;
	margin-left:3px;
	
	}
	#footer {
	clear:both;
	color:#00ff00;
	background-color: #000000;
	font-size:13px;
	}
	#footer p {
		
		margin:0;
    }
	#sidebar a
	{
	color:#00FF00;
	}
	#sidebar a:hover
	{
	color:#00FF00;
	font-size:23px;
	}
	#sidebar img 
	{
	margin-left:3px;
	}
	</style>
</head>
<body>

<div id="wrap">
	<div id="header"><img src="green-planet.gif" width="75" height="75" align="left"><h1>Your Website</h1></div>
	
	<div id="main">
		<h2>Column 1</h2>
		

		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna. Mauris risus nunc, tristique varius, gravida in, lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
		<p>Nulla a lacus. Nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce pulvinar lobortis purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec semper ipsum et urna. Ut consequat neque vitae felis. Suspendisse dapibus, magna quis pulvinar laoreet, dolor neque lacinia arcu, et luctus mi erat vestibulum sem. Mauris faucibus iaculis lacus. Aliquam nec ante in quam sollicitudin congue. Quisque congue egestas elit. Quisque viverra. Donec feugiat elementum est. Etiam vel lorem.</p>
		<p>Aenean tempor. Mauris tortor quam, elementum eu, convallis a, semper quis, purus. Cras at tortor in purus tincidunt tristique. In hac habitasse platea dictumst. Ut eu lectus eu metus molestie iaculis. In ornare. Donec at enim vel erat tempor congue. Nullam varius. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla feugiat hendrerit risus. Integer enim velit, gravida id, sollicitudin at, consequat sit amet, leo. Aliquam nec ante in quam sollicitudin congue. Quisque congue egestas elit. Quisque viverra. Quisque congue egestas elit. Quisque viverra.</p>

		

	</div>
	<div id="sidebar">
		<h3>Column 2</h3>
		
		<ul>
			<li><a href="#"><img src="glowing-green-button.gif" width="20" height="20" border="0" align="left"></a><div style="font-size:20px;"><a href="#">Link 1</a></div></li>
			<li><a href="#"><img src="glowing-green-button.gif" width="20" height="20" border="0" align="left"></a><div style="font-size:20px;"><a href="#">Link 2</a></div></li>
			<li><a href="#"><img src="glowing-green-button.gif" width="20" height="20" border="0" align="left"></a><div style="font-size:20px;"><a href="#">Link 3</a></div></li>
			<li><a href="#"><img src="glowing-green-button.gif" width="20" height="20" border="0" align="left"></a><div style="font-size:20px;"><a href="#">Link 4</a></div></li>
			<li><a href="#"><img src="glowing-green-button.gif" width="20" height="20" border="0" align="left"></a><div style="font-size:20px;"><a href="#">Link 5</a></div></li>
			<li><a href="#"><img src="glowing-green-button.gif" width="20" height="20" border="0" align="left"></a><div style="font-size:20px;"><a href="#">Link 6</a></div></li>
			<li><a href="#"><img src="glowing-green-button.gif" width="20" height="20" border="0" align="left"></a><div style="font-size:20px;"><a href="#">Link 7</a></div></li>
			<li><a href="#"><img src="glowing-green-button.gif" width="20" height="20" border="0" align="left"></a><div style="font-size:20px;"><a href="#">Link 8</a></div></li>
		</ul>
	</div>
	<div id="footer">
		<p>Portions of this website were created using the free web resources available at www.elated.com and are copyright Elated Communications Ltd 1996-2002 Designed by Curtis LeBlanc</p>
	</div>
</div>
</body>
</html>

Sorry that it's kind of messy, but I'm new at this.
Could someone help me?

3
Contributors
2
Replies
3
Views
9 Years
Discussion Span
Last Post by MidiMagic
0

The problem lies where you are using the divisions for the second anchors in your list. The only purpose of these divisions I see is for font sizing, so I think you should move this sizing to css and remove the divs.

0

It's the usual case if IE making up its own rules, instead of following the standard.

IE renders a block object of a defined size by putting the margin, border, and padding INSIDE the defined size.

FF renders a block object of a defined size by putting the margin, border, and padding OUTSIDE the defined size.

The only way to get both to work the same is to nest divs, one with the defined size, and the other with the margin, border, and padding you want. Nest them with the margin, border, and padding div on the side (inside or outside) of the defined size div that you want it on.

Set the margins, borders, and padding of the image itself to 0.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.