This CSS code not centered in Internet Explorer [Archive]

View Full Version : This CSS code not centered in Internet Explorer

nWo Sting

12-29-2009, 02:32 AM

I will copy and past my exact CSS code, can anyone please type in what to change and I will copy and paste yours and put it into my code? The site looks fine in Firefox on a widescreen monitor, but on Internet Explorer it is lined to the far left of the screen. maybe I need some basic centering code? Thanks, here it the current code........

* { padding: 0; margin: 0; }

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #FFFFFF;
background-color: #000000;}
a:link{
text-decoration: none;
color: #66CCFF;
}
a:visited{
text-decoration: none;
color: #66CCFF;
}
a:hover{
text-decoration: none;
color: #FF0000;
}
li a:active{
text-decoration: none;
color: #66CCFF;
}

#wrapper {
margin: 0 auto;
width: 990px;
}
#header {
width: 900px;
float: center;
padding: 10px;
margin: 10px 0px 5px 0px;
}
#leftcolumn {
margin: 0px 5px 5px 0px;
padding: 10px;
width: 210px;
float: left;
}
#rightcolumn {
float: left;
margin: 0px 0px 5px 0px;
padding: 10px;
width: 678px;
display: inline;
}
#footer {
width: 900px;
clear: both;
margin: 0px 0px 10px 0px;
padding: 10px;
}

the_pm

12-29-2009, 09:52 AM

HostXNow

12-29-2009, 10:33 AM

I think this is the problem * { padding: 0; margin: 0; }

http://css-tricks.com/margin-0-padding-0-no-longer-cool/

nWo Sting

12-29-2009, 10:40 AM

What does your HTML code look like? If you're not using a proper doctype (or any doctype at all) or you have a line break at the top of your markup, IE shifts into quirks mode, which will not recognize margin:auto. Hence the issue you're seeing.

Also, float:center is meaningless to browsers :)

Most of the pages have something like this:

<html>

<head>
<meta http-equiv="Content-Language" content="en-us">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title></title>


<link rel="stylesheet" type="text/css" href="http://www.mysite.com.css" />
</style>
</head>

<div id="wrapper">
<div id="header">

</div>
<div id="leftcolumn">

</div>
<div id="rightcolumn">

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

</div>
</div>

</html>

nWo Sting

12-29-2009, 10:41 AM

I think this is the problem * { padding: 0; margin: 0; }

http://css-tricks.com/margin-0-padding-0-no-longer-cool/

Are you saying I should delete that? Or change it? Because I removed it before I made this post originally and it did not change the alignment that much, still off to the left on IE.

the_pm

12-29-2009, 10:48 AM

I think this is the problem * { padding: 0; margin: 0; }

http://css-tricks.com/margin-0-padding-0-no-longer-cool/

No, this is perfectly fine. In fact, it is a good thing, because it resets padding and margins across all objects and allows the author to set his or her own. Leave that in there.

Most of the pages have something like this:

<html>

...Yep, there's your problem - no doctype (one might argue that another big problem has to do with the use of FrontPage, but I'll leave that alone for now)!

Add in a proper doctype, and IE will do what it's supposed to do. If you don't know how to select a doctype or what it is, this article will help: http://www.alistapart.com/articles/doctype/

nWo Sting

12-29-2009, 12:47 PM

Yep, there's your problem - no doctype (one might argue that another big problem has to do with the use of FrontPage, but I'll leave that alone for now)!

Add in a proper doctype, and IE will do what it's supposed to do. If you don't know how to select a doctype or what it is, this article will help: http://www.alistapart.com/articles/doctype/

I had a feeling it had to do with Front Page. I had been using Adobe GoLive but I used Front Page on this particular site since I did not write it in php. When I add the Doc Tag at the top do you think I should remove all of this:

<meta http-equiv="Content-Language" content="en-us">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

Or would removing that not allow me to view the site in Front Page? I am basically using Front Page as something to preview the site in, not write code. Do you know of a better program I can use besides Front Page? thanks

the_pm

12-29-2009, 02:33 PM

The Content-Type meta information is useful. The rest are not. Pretty much anything is better than FrontPage, especially considering Microsoft killed it six years ago :)

If you MUST use WYSIWYG software like this, Dreamweaver is probably the best, but I've seen Dreamweaver put out some pretty second-rate code as well. Nothing beats doing it by hand, and you can always just preview in browsers as you go.

nWo Sting

12-30-2009, 04:15 AM

The Content-Type meta information is useful. The rest are not.

Thanks, I selected this doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

However this has uncovered another problem that was causing my page to be spaced incorrectly in IE. My left menu is a navigation menu, and I had the link codes right on the buttons, so for example on my Home Button I had <a href="http://www.mysite.com/home.htm">

I need to put the link in the CSS stylesheet right? so in my "Home" button I have to add something like this?

<id="home" href="#" title="Home">

Is that correct? Then what is the exact code I put in my CSS stylesheet to make the #home id link to my site's home page?

Thanks for all your help, I could not find a tutorial on making my #home id become a link in the Stylesheet.

The-Host

12-30-2009, 06:23 AM

It should be <a id="home" href="#" title="Home"></a>.

nWo Sting

12-30-2009, 10:35 AM

It should be <a id="home" href="#" title="Home"></a>.

Thanks, but what do I put in my CSS Style Sheet to make "home" become a link?

#home {
}

What do I put in here? How do I put my actual link in the sheet to make #home go to www.mysite.com/home?

thanks guys

the_pm

12-30-2009, 10:39 AM

Umm, you don't put links in Style Sheets. Style sheets are only for presentation, not for structural aspects of your site.

<a id="home" href="http://www.mysite.com/home" title="Home"></a>

nWo Sting

12-30-2009, 10:44 AM

Umm, you don't put links in Style Sheets. Style sheets are only for presentation, not for structural aspects of your site.

<a id="home" href="http://www.mysite.com/home" title="Home"></a>

thanks I will try that. I was using:

<a href="http://www.mysite.com/home.htm">

but this is the first site I designed completely in CSS and was not aware that you had to do the links different.

the_pm

12-30-2009, 10:53 AM

Well, you're not really doing anything different with your links. All you're doing is allowing a separate document to apply style to them. They're still just links, linking to somewhere else. Functionally, nothing has changed :)

The-Host

12-30-2009, 12:38 PM

#home a { text-decoration: none; } is probably what you're looking for.