PDA

Click to See Complete Forum and Search --> : IE disregard for BG, container margins

positronic
07-09-2007, 11:55 AM
I just realized the site I've been working on for ages and thought was done with doesn't render correctly in IE. I started another site with the same layout type and it's doing the same thing.

The site:
http://people.virginia.edu/~nnw4n/rpgmaker/

The CSS

* {
padding:0px;
margin:0px;
}
html {
background: transparent url(bg.jpg) repeat-x;

}
body {
margin: 0px;
padding: 0px;
background: url(header.jpg) no-repeat center top;
font-family: arial;
}

#container {
position: relative;
margin: 0px auto;
padding: 0px;
width: 770px;
border: none;
text-align: left;
}
#main {
position:relative;
background-color: #FFFFFF;
top:145px;
left:auto;
right:auto;
width: 730px;
padding:20px;
}
ul {
margin-left:35px;
padding:5px;
}
ol {
margin-left:35px;
padding:5px;
}
dl {
margin-left:35px;
padding:5px;
}
dd {
margin-left:55px;
}
h1 {
padding:5px;
}
h2 {
padding:5px;
}
h3 {
padding:5px;
}
p {
padding:5px;
}

It looks correct in Firefox, but not in IE. Here are my problems:


IE seems to completely disregard the background image I've set for html in the stylesheet.

While Firefox reads the container margin with auto and centers everything nicely inside the container, IE seems to shove it all over to the left no matter what I try.


Is this covered at Position is Everything? I looked through some of the sections but I'm confused on what the problem actually is. Any help would be greatly appreciated!
Fang
07-09-2007, 12:20 PM
It's surprising what a DTD can do:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

http://www.alistapart.com/stories/doctype/
positronic
07-09-2007, 12:30 PM
Wow!! Worked like a charm. I never really knew what those things were for..

Thanks again, Fang =)
positronic
07-09-2007, 12:37 PM
Hm.. is there one that will work for this guy?

http://japan.marioncarnegielibrary.org/
WebJoel
07-09-2007, 02:08 PM
#main {
position:relative;
background-color: #FFFFFF;
top:145px;
left:auto;
right:auto;
width: 730px;
padding:20px;
border:3px solid black
} What are the purpose of these? Do they even do anything at all? If you are trying to center this 730px-wide container, use margin:0 auto;. auto-right/auto-left aren't doing anything here at all...
Fang
07-09-2007, 02:59 PM
Hm.. is there one that will work for this guy?

http://japan.marioncarnegielibrary.org/
The same, then cleanup the errors in the css (http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A%2F%2Fjapan.marioncarnegielibrary.org%2F) and the html (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fjapan.marioncarnegielibrary.org%2F)
positronic
07-10-2007, 09:20 AM
Wow!! I'm a pretty amateur webdesigner.. I don't think I ever understood the importance of doctypes or having clean, validated code, but it makes such a huge difference across browsers! Thanks for showing me the light!

And WebJoel, thank you for pointing that out. I think I tend to pick up pieces of code and tricks I find on sites I like, test them out, and use them without really knowing what they do and why.. so thanks so much for explaining that one!

I appreciate all your help!
WebJoel
07-10-2007, 10:44 AM
Another 'biggie' is that the centering of an element using the "margin:0 auto;" (DIV, in this case), you must have a width="", and a valid !doctype or else IE won't do it right. Without a valid !doctype (any !doctype will do), IE goes into 'quirks mode' whereby strange, bizarre things can happen to your code... :eek: (well, ..it just doesn't work right sometimes)..

Also, -you have a small 'error' here:

....<div id="container">
<div id="main">
<h2>Basic Tutorials</h1>
<ul>
<li><a href="page1/page1.html">Page 1 - The Very Basics</a></li>....

That "</h1>" should be an "</h2>"

(correctly though, H1 should always come before H2, then H3, H4, etc... but this will solve the validation error)