Forum Moderators: not2easy
One of the things I read during my initial research is that you should design a page to look and operate properly in Firefox/Mozilla and/or Opera since they are CSS compliant, while IE is not. Also, using an external style sheet is benficial to reduce the amount of adjustments needed in the event of design tweaks. So, that's the route I took.
I got the idea to contain the main body text and headings inside a wrapper. I set up the margins per the recommendations of a couple of sites I visited, and it turned out perfect in Firefox. However, I opened the page in IE, and the wrapper and all of its contents are flush against the left side of the window.
Basically, I'm going for this simple layout with only these elements:
Centered home page image
Centered nav bar (created with CSS)
Centered wrapper containing site text, kind of a blog style
I am at a loss as to how to correct the situation. I would figure that there is some sort of rules I could toss into my CSS code, so I've posted it below for your perusal.
Any help would be much appreciated.
-Dustin
------------begin code
body {
background-color: #000000;
color: #E6E6E6;
font-size:10px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
h3 {
color: #b58654;
font-size:28px;
font-variant: small-caps;
font-family:Verdana, Arial, Helvetica, sans-serif;
{text-align: center}
}
h6 {
color: #b58654;
text-decoration:underline;
}
p {
color: #e6e6e6
}
div#wrapper {
width: 770px;
background-color:#000000;
margin-top: 65px;
margin-left: 0 auto;
margin-right: 0 auto;
border: medium double rgb(50,50,50)
}
div#nav {
width: 25%;
padding: px;
margin-top: 1px;
float: left;
}
div#main {
margin-left: 0%;
margin-top: 1px;
padding: 5px;
}
div#footer {
padding: 15px;
margin: 0 auto 0 auto;
border-top: thin solid #000000;
}
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
.reg A:link {text-decoration: #b58654}
.reg A:visited {text-decoration: none}
.reg A:active {text-decoration: none}
.reg A:hover {text-decoration: underline; color: #e6e6e6;
}
.nav a
{
float:center;
width:6em;
text-decoration:none;
color:black;
background-color:white;
padding:0.2em 0.6em;
border-right:1px solid white;
}
.nav a:hover {background-color:#e6e6e6}{text-color:#000000}
li {display:inline}
Before I posted, I did a quick look at DOCTYPEs and saw that what I had wasn't the proper declaration, that the URI was missing. Fixing that has apparently caused the centering issue to go away. I now have this in place of what I typed above:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Everything looks OK now, would changing that really make all the difference? Forgive my ignorance. :)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Your page changed because you changed the rules, and for the better as you saw.
there is plenty of info about quirks mode both on WebmasterWorld and the internet, just search for it using your fav search engine.
