Centered Properly In Firefox - IE alignment issue

Discussion in 'CSS' started by byteventures, Jan 13, 2009.

0
  1. #1
    There appears to be quite a few alignment questions on here. Unfortunately, I could not find an answer that resolved my issue.

    The alignment is centered properly in Firefox. Internet Explorer only works if I use the following code.

    body {
    margin-top: 0px;
    padding: 0;
    color: #A1A1A1;
    font-family: Verdana, Georgia, Sans-Serif;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
    }

    The problem here is that, although it does center the page in IE, the text is also aligned in the center. Using text-align: left in the container does not work.

    Does anyone have a suggestion that would correct this alignment issue? Either the text or page alignment; doesn't matter to me.

    Thanks in advance for your help.
     
    byteventures, Jan 13, 2009 IP
  2. katendarcy

    katendarcy Peon

    Messages:
    115
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Hmm... Usually when I use that fix, (text-align:center), I reset the text on the next div, which for me is always a container/wrapper div, and it works. Can you post the HTML?
     
    katendarcy, Jan 13, 2009 IP
  3. rikun

    rikun Peon

    Messages:
    85
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #3
    if you want to center the layout, you should add
    
div#container {
    margin: 0 auto;
    width: 760px;
}
    Code (markup):
    then create a div with the id "container" and put all of your page content in that. of course you can change the id of the div and the specified width. I just put in arbitrary stuff.

    then just take out the text-align: center from the body definition and it should be fine.

    hope that helps
     
    rikun, Jan 13, 2009 IP
  4. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Lemme guess: you don't have a doctype, have a sh*tty or incomplete doctype, or some space or comments or something before the doctype.

    Katendarcy is referring to IE5.5 and below, which no matter what need "text-align: center" to center a page, because they are old and stupid browsers. However IE6, 7 and 8 will center just like Firefox using the automargin example rikun posted, so long as there is a proper doctype at the very top of the document!!
     
    Stomme poes, Jan 15, 2009 IP
  5. katendarcy

    katendarcy Peon

    Messages:
    115
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #5
    To be honest, I wasn't talking about IE5. The lowest I code for is IE6. Here's the doctype I use:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    I still have to use "text-align:center" for IE. If you know something about that issue with the above doctype, I'd be happy to hear about it. : )
     
    katendarcy, Jan 15, 2009 IP
  6. katendarcy

    katendarcy Peon

    Messages:
    115
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #6
    I didn't want to keep this thread going unnecessarily, but I had to post back. Stomme poes got me thinking, so I went and did some checking. Turns out, he's right. Not that I didn't believe him, but I was sure I had to use the fix. But, as it turns out, 'having' to do something, and being in the habit of doing something are totally different. Thanks for the clarification Stomme poes.
     
    katendarcy, Jan 15, 2009 IP
  7. rjd22

    rjd22 Peon

    Messages:
    63
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #7
    on the top of your CSS alway put 
    
* {
	margin: 0;
	padding:0;	
}
    HTML:
    Then in the first main div should look something like this:
    
.main {
	margin: 0 auto;
	margin-left:auto;
	margin-right:auto;
}
    HTML:
    	
margin-left:auto;
margin-right:auto;
    HTML:
    doesn't really need to be there but its to make sure for some browsers
     
    rjd22, Jan 17, 2009 IP
  8. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #8
    None of those are bad things, but some warnings:
    
* {
    margin: 0;
    padding:0; 
}
    Code (markup):
    this is great, so long as you don't have any forms on your site. If you have a form, you don't want to strip the padding from the form controls (mostly drop-down selects and check-radios). If you have a form, it's better to use this:
    
* {
  margin: 0;
}
html, body, div, p, ul, li, any other [b]blocks[/b] on your site, form, fieldset {
  padding: 0;
}
    Code (markup):
    even though it's sure uglier than the regular reset. But Opera and someone else won't let you add the stripped padding back on and without it some of your form controls are unreadable (the text inside gets clipped off).

    
.main {
    margin: 0 auto;
    margin-left:auto;
    margin-right:auto;
}
    Code (markup):
    you meant:
    
.main {
    margin: 0 auto;
}
    Code (markup):
    The individual marign-left: auto, margin-right: auto thing is not needed because you've already said it in the first line:
    margin: 0 is the top and bottom, auto is the sides. You're good to go. Writing it out longer is just something some people do to keep things straight in their heads or whatever... once you work long enough with the shorthands, you'll find debugging easier.

    You may have once had a doctype but with comments or whitespace above it or a small typo somewhere, and saw IE needing the fix even though you "had a doctype". 'Cause IE's picky that way-- you're using XHTML so you may have even had the <?xml prologue thingie at the top (which IE7 has been trained to ignore but not IE6) at some point. The Doctype has to be damn near perfect to keep IE out of Quirks mode. Why I copy-pasta : )
     
    Stomme poes, Jan 30, 2009 IP