SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Centring text in IE

    Hi guys,
    I'm trying to centre the text in this menu but IE doesn't want to play the game. Itís centres in chrome, safari and FF. Any ideas?

    http://buildinternet.com/live/smooth...ated-menu.html

  2. #2
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am assuming that you mean centers vertically!

    I have viewed it in IE8 and it does center vertically but I also get a list disc. Switch the browser to emulate IE7 and the text is positioned at the top.

    In chrome the <p> tag has a margin-top of 1em set by the default attributes of the browser and that is why it appears to center vertically.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your help.

    Yes i mean center vertically.

    "In chrome the <p> tag has a margin-top of 1em set by the default attributes of the browser and that is why it appears to center vertically"

    So to fix this if remove <p> tag and margin-top of 1em this will position text at top in chrome. I then start again with re-positioning?

  4. #4
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Alternatively in the style sheet set margin-top: to 1em for p.

    All browsers including IE should then appear correct.

    There is a chance that it will not make any difference at all in IE and there is something else going on. But we can investigate further if that is the case.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Usually to center non wrapping text in a block like that the easiest way is to set the line-height to the same as the height of the block that you want to centre it in. You don't have to guess then as long as you know the height.

    e.g.
    Code:
    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    div {
        height:50px;
        background:blue;
    }
    p.test {
        margin:0;
        padding:0 10px;
        line-height:50px;
        color:#fff;
    }
    </style>
    </head>
    <body>
    <div>
        <p class="test">Test</p>
    </div>
    </body>
    </html>
    Of course the same effect can be done with trial and error by adding margins or padding to move the element into position.

  6. #6
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    *** Thanks PhilipToop. I removed the <p> altogether then used margin-top: which worked a treat! Thanks for your help mate!

    *** Paul O'B - What a great tip! Thanks, I'll give it a go. I thought if you did this the text would sit to the bottom... why does it center it?

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    It just does lol . You'd have to understand the inline formatting model to really understand why.

    Basically if the line height matches the height then it will vertically center it.

    Though it doesn't work for more then 1 line of text
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  8. #8
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Awsome!! Thanks heaps

  9. #9
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    PS. X browser too?

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    If you are asking if line-height method will work cross browser then yes .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  11. #11
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes thank you

  12. #12
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    By the way... congrats on the CSS Guru of the Year!! Nice work!

  13. #13
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Thank you .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •