SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2004
    Location
    Minneapolis
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Text-Align: Center Moving Block Elements in IE

    I have a left-hand navigation column on a template where text-align: center is moving block elements slightly in Internet Explorer (looks fine in FF, Opera, etc.) - it's moving the entire block, not just the text.

    If I remove the text-align rule from my stylesheet it looks fine in IE but then the margins aren't correct that I've got set up in all other browsers (I prefer not to write any custom browser rules if possible).

    It's happening in IE7 on down.

    Anyone know how to get around this?

  2. #2
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Are you using a list for your menu? Any chance you could post your code?

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2004
    Location
    Minneapolis
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, I fixed it. I had the text-align center in the container but moved it to the link (a) identifier.
    Last edited by Bjorn2404; Jul 8, 2008 at 11:20. Reason: Fixed

  4. #4
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmm the only thing I can see is the double margin bug but that doesn't affect IE7.
    Code:
    #left-column
    {
    		float: left;
    		margin-top: 10px;
    		margin-left: 8px;
    		width: 230px;
    		height: 499px;
    		background: url(../images/left-column-back.png);
    }
    Should be
    Code:
    #left-column
    {
    		float: left;
    		margin-top: 10px;
    		margin-left: 8px;
    		width: 230px;
    		height: 499px;
                    display: inline;
    		background: url(../images/left-column-back.png);
    }
    Otherwise IE6 will add 16px left margin instead of 8px.

    Could you post all your code here or better yet to a live server? I think the problem lies somewhere else in your code.

  5. #5
    SitePoint Enthusiast
    Join Date
    Nov 2004
    Location
    Minneapolis
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, I edited my post above with a fix.

    I moved the text-align rule to the link identifier and that worked.


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
  •