ie not displaying same as firefox

curt22 · October 14, 2007

Why does ie put the text on a separate line then the picture in my sidebar? Firefox displays it fine.

Note: I know that the colors don't match, and it's messy, but It's not done yet and I'm new at this.

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>My Page</title>



<style type="text/css">
body,
html {
	margin:0;
	padding:0;
	background:#a7a09a;
	color:#000;
}
body {
	min-width:750px;
}
#wrap {
	background:#000000;
	margin:0 auto;
	width:750px;
}
#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:#9c9;
	float:right;
	width:500px;
}
#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;
    }

    #sidebar h3, #sidebar p {
	padding:0 0 0 0;
	margin-top:5px;
	margin-left:3px;
	margin-bottom:3px;

    }
#sidebar a
{
text-decoration:none;
margin-left:3px;

}
#footer {
	background:#cc9;
	clear:both;
}
#footer p {
	padding:5px;
	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. Fusce imperdiet condimentum velit. Phasellus nonummy interdum est. Pellentesque quam.</p>
	<h3>Consectetuer adipiscing elit</h3>
	<p>Nulla dictum. Praesent turpis libero, pretium in, pretium ac, malesuada sed, ligula. Sed a urna eu ipsum luctus faucibus. Curabitur fringilla. Suspendisse sit amet quam. Sed vel pede id libero luctus fermentum. Vestibulum volutpat tempor lectus. Vivamus convallis tempus ante. Nullam adipiscing dui blandit ipsum. Nullam convallis lacus ut quam. Mauris semper elit at ante. Vivamus tristique. Pellentesque pharetra ante at pede. In ultrices arcu vitae purus. In rutrum, erat at mollis consequat, leo massa consequat libero, ac vestibulum libero tellus sed risus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
	<p>Maecenas eu velit nec magna venenatis consequat. In neque. Vivamus pellentesque, lacus eu aliquet semper, lorem metus rhoncus metus, a ornare orci ante a diam. Nunc sem nisl, aliquet quis, elementum nec, imperdiet in, wisi. Proin in lorem. Etiam molestie diam eget ante. Morbi quis tortor id lacus mollis venenatis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam vel orci sit amet tellus mollis eleifend. Donec urna diam, viverra eget, ultricies gravida, ultrices eu, erat. Proin vel arcu. Sed diam. Cras hendrerit arcu sed augue. Sed justo felis, luctus a, accumsan in, tincidunt facilisis, libero. Phasellus eu eros.</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>Footer</p>
</div>
</div>
</body>
</html>

lemke411 · October 16, 2007

You will find your self asking the question at least 100 times a day especially if you are a web designer. Firefox follows the book on html and css rendering and IE does not. What this means you will have a headache from IE being non-compliant. Try putting the <div id='sidebar'></div> above the main div tag. I am not much of a designer since I am a programmer, but what you are working on may become a major pain. I recommend working with tables it is a lot easier work with and to debug.

I hope this helps you out.

ToonMariner · October 17, 2007

if you use a strict doctype you may find it solves a lot of issues with IE's boxmodel implementation.

bronzemonkey · October 17, 2007

You are on the right track using html 4.01 strict and css (this question would be better suited to the css forum). What you should always do when you have a problem is check your html (markup) and css using the w3c validator tools - http://www.w3.org/QA/Tools/. They will point out errors that you can go about fixing and will help you to learn what is required with the doctype you are using. Once the code is all valid then you can go about trying to find out why it doesn't look the way you want it to in certain browsers!

Using css in the head of the document is better than using it inline. Try to keep the styling separate from the html (the structure)...you can even move it into a stylesheet that you can link to in the head of every page. This way, you can change things across your entire site by changing just one file. So all the stuff you have in <div style=""> should be moved into the head of the document with the rest of your css. Some recurring images, like those found in your list of links, can be inserted using css background images!

Floated elements, like your main content and sidebar, should also be cleared. I have included a method of clearing in the code I've provided below. Please look through the code and compare it to what you had before and then test it in whatever version of IE was giving you problems. If it is still not rendering as you wished please say which version of IE is the problem and I'll try some testing in that browser

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>My Page</title>

<style type="text/css">

/* BASIC CSS RESET
----------------------------------- */

html, body, div, span, object, h1, h2, h3, h4, h5, h6, p, blockquote, a, abbr, acronym, cite, code, em, img, small, strike, strong, dl, dt, dd, ol, ul, li {margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline;}
/* remember to define focus styles! */
:focus {outline:0;}

ol, ul {list-style:none;}

blockquote:before, blockquote:after, q:before, q:after {content:"";}
blockquote, q {quotes:"" "";}

/* YOUR STYLES
----------------------------------- */

body {color:#000; background:#a7a09a; font-family:arial, sans-serif;}

#wrap {width:750px; margin:0 auto; background:#000;}

#header {height:75px; padding-left:75px; background:#000 url(green-planet.gif) 0 0 no-repeat;;}
#header h1 {line-height:75px; color:#0c0; font-family:"Comic Sans MS", sans-serif;}

#main {float:right; width:500px; background:#9c9; }
#main h2, #main h3, #main p {padding:0 10px;}

#sidebar {float:left; width:240px; background:#000;}
#sidebar h3, #sidebar p {padding:0;	margin:5px 0 3px 3px;}
#sidebar ul {padding:0;	margin:0; list-style-type:none;}
#sidebar ul li a {height:20px; padding-left:25px; background:#000 url(glowing-green-button.gif) 0 0 no-repeat;}
#sidebar a:link, #sidebar a:visited {margin-left:3px; text-decoration:none; color:#0f0; font-size:140%}
#sidebar a:hover, #sidebar a:focus, #sidebar a:active {color:#0f0; font-size:170%;}
#sidebar img {margin-left:3px;}

#footer {clear:both; background:#cc9;}
#footer p {padding:5px;	margin:0;}

/* SELF CLEARING FLOATS
----------------------------------- */

#wrap:after {content: "."; display:block; height:0; font-size:0; clear:both; visibility:hidden;}
/*IE6 only*/
* html #wrap {height:1%;}
/*Ie7 only*/
*:first-child+html #wrap {min-height:1px;}

</style>

</head>
<body>

<div id="wrap">
<div id="header">
	<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. Fusce imperdiet condimentum velit. Phasellus nonummy interdum est. Pellentesque quam.</p>

	<h3>Consectetuer adipiscing elit</h3>
	<p>Nulla dictum. Praesent turpis libero, pretium in, pretium ac, malesuada sed, ligula. Sed a urna eu ipsum luctus faucibus. Curabitur fringilla. Suspendisse sit amet quam. Sed vel pede id libero luctus fermentum. Vestibulum volutpat tempor lectus. Vivamus convallis tempus ante. Nullam adipiscing dui blandit ipsum. Nullam convallis lacus ut quam. Mauris semper elit at ante. Vivamus tristique. Pellentesque pharetra ante at pede. In ultrices arcu vitae purus. In rutrum, erat at mollis consequat, leo massa consequat libero, ac vestibulum libero tellus sed risus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
	<p>Maecenas eu velit nec magna venenatis consequat. In neque. Vivamus pellentesque, lacus eu aliquet semper, lorem metus rhoncus metus, a ornare orci ante a diam. Nunc sem nisl, aliquet quis, elementum nec, imperdiet in, wisi. Proin in lorem. Etiam molestie diam eget ante. Morbi quis tortor id lacus mollis venenatis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam vel orci sit amet tellus mollis eleifend. Donec urna diam, viverra eget, ultricies gravida, ultrices eu, erat. Proin vel arcu. Sed diam. Cras hendrerit arcu sed augue. Sed justo felis, luctus a, accumsan in, tincidunt facilisis, libero. Phasellus eu eros.</p>
</div>

<div id="sidebar">
	<h3>Column 2</h3>
	<ul>
		<li><a href="#" title="Link Title">Link 1</a></li>
		<li><a href="#" title="Link Title">Link 2</a></li>
		<li><a href="#" title="Link Title">Link 3</a></li>
		<li><a href="#" title="Link Title">Link 4</a></li>
		<li><a href="#" title="Link Title">Link 5</a></li>
		<li><a href="#" title="Link Title">Link 6</a></li>
		<li><a href="#" title="Link Title">Link 7</a></li>
		<li><a href="#" title="Link Title">Link 8</a></li>
	</ul>
</div>

<div id="footer">
	<p>Footer</p>
</div>
</div>

</body>
</html>

I am a programmer, but what you are working on may become a major pain. I recommend working with tables it is a lot easier work with and to debug.

Tables are not the way to go at all. This guy is making an effort to work towards web standards and with just a little bit of tinkering to his existing code everything will work out fine.

Sign In

ie not displaying same as firefox

Recommended Posts

curt22

Link to comment

Share on other sites

lemke411

Link to comment

Share on other sites

ToonMariner

Link to comment

Share on other sites

bronzemonkey

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information