CSS Forum

**imafrknninja** · 04:06 AM

I am coding my first webpage with CSS and I am running into a problem with the padding. I have researched it on the web and on this forum and I have seen I am not alone in this problem but I still can't find a solution.

The problem is the text lines up differently on IE and Firefox. From what I have read it sounds like IE does not conform to the standards for the box model.

Here are some screenshots of the website I am working on:
http://andybearwalters.com/images/iess.jpg IE
http://andybearwalters.com/images/firefoxss.jpg Firefox

The website can be found at http://andybearwalters.com/home.html .

Here is the code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Andy Walters Memorial Website</title>
<style type="text/css">
body {
background: #27282c;
font-family: verdana;
font-size: 80%
}
h1 {
text-align: center
}
#container {
background: url(http://andybearwalters.com/images/background.jpg) repeat-y;
width: 770px;
margin: 0 auto;
}
#header {
height: 175px;
background: url(http://andybearwalters.com/images/header.jpg) no-repeat;
}
#footer {
background: url(http://andybearwalters.com/images/footer.jpg) no-repeat;
height: 37px;
padding-left: 535px;
clear: both;
}
#content {
width: 485px;
float: left;
margin-top: -30px;
padding-left: 17px;
}
#navigation {
width: 190px;
float: left;
margin-top: -10px;
padding-left: 40px;
}
</style>

</head>
<body>

<div id="container">
<div id="header">
</div>
<div id="navigation">
<b>Navigation</b>
<p>Home
<br>Pictures
<br>Videos
<br>Obituary
<br>Etc
<br>Etc
<br>Etc
</p>
</div>
<div id="content">
<h1>Andy Walters Memorial Website</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla facilisi.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla facilisi.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla facilisi.</p>
</div>
<div id="footer">Copyright &copy; <a href="mailto:tyler@tylerwalters.com">Tyler W. Walters</a>
</div>
</div>

</body>
</html>

I would appreciate any help with this. The website is very important to me and I want to get it right. A lot of family members will be visiting the site when it is done and they mostly use IE.

**SmokyMo** · 12-12-2007, 06:39 AM

I ve had the same problems and I think you better use % instead of px.
I am a begginer myself with css but this what people here suggested to me.

**chrishirst** · 12-12-2007, 06:54 AM

use a full, valid doctype to put IE into strict mode and it will improve

http://www.w3.org/QA/2002/04/valid-dtd-list.html

**imafrknninja** · 12-12-2007, 05:26 PM

Thanks for the replies. I really appreciate the help. chrishirst, I added the full doctype and it worked perfectly. Completely fixed the problem. Thanks again for the help.

**imafrknninja** · 12-13-2007, 01:11 AM

Hmm, it turns out it fixed it for me on IE7 but previous versions are still not lining up right. I am going to try a few things but if anyone has any more ideas please let me know.

**imafrknninja** · 12-13-2007, 02:42 AM

I found a solution that worked for IE6. Just wanted to say so here so no one goes out of their way trying to help me out.

If anyone is interested or runs across a similar problem I found the solution here: http://www.webcredible.co.uk/user-fr...etection.shtml.

Basically, it calls for inserting a code that IE can't read so I can set certain padding and width for IE then overwrite that with code for Firefox, Opera, Netscape, etc. Check out that website. They explain it very well.

**chrishirst** · 12-13-2007, 05:52 AM

They are called "CSS hacks" and it's not something we recommend as a good practice.

Using IE's conditional comments is a much safer way to tackle IEs "quirks"

http://www.webmaster-talk.com/css-fo...s-for-ie6.html

**imafrknninja** · 12-13-2007, 06:40 PM

I changed it again and got it to work with conditional comments. Thanks again.