SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Addict Kokos's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE text-align not working and other problem

    Hey Sitepointers,

    I've got two problems with a site I am designing. These problems occur in IE7 and IE8.

    First of all I have a div that contains some text and for some reason won't center the text like in the other browsers.

    HTML:

    Code HTML4Strict:
    <div id="info_block">
     
    d&eacute; haarlemse <br/><a href="#">woonwinkel</a><br/>
    <div id="info_block_divide"></div>
    <a href="#">ontwerpstudio</a>
     
    </div>

    (I put the br's in there to try and fix it but this did nothing)

    CSS:

    Code CSS:
    #info_block {
    	text-align:center;
    	width:140px;
    	height:110px;
    	background:url(../images/info_block_bg.png);
    	color:#fff;
    	position:absolute;
    	left:70px;
    	top:50px;
    	font-size:18px;
    	font-style:italic;
    	z-index:2;
    	padding:15px;
    	text-shadow:2.5px 2.5px 5px #000;
    	-moz-text-shadow:2.5px 2.5px 5px #000;
    }
    #info_block_divide {
    	height:40px;	
    }
    #info_block a{
    	color:#fff;
    	text-decoration:none;
    	text-shadow:2.5px 2.5px 5px #000;
    	-moz-text-shadow:2.5px 2.5px 5px #000;
    }
    #info_block a:hover {
    	text-shadow:0 0 5px #FF9;
    	-moz-text-shadow:0 0 5px #FF9;
    }

    I do have one extra css addition for IE only (whitespace:nowrap because of italics problems) but when I remove this it still won't center the text.
    I've also tried adding !important and this doesn't work (it shouldn't in my situation but trying everything).

    The weird thing is, when I change all the text to: text it does work, so for some reason the text is too wide to be centered and it just puts it on the left.

    Secondly I've got some links under each other that should get a check mark to a margin from their right on hovering. The links have variable widths depending on the text so I can't use display:block.
    What I tried doing is display:inline with a padding-right and then on hover adding a background image. This works in FF/Safari/Chrome but not IE.

    Halp!

    Taking over the web one pixel at a time.
    Currently working @ CodeCreators

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    It looks like you have an unneeded <br> tag above that dividing div in your html. In fact I would eliminate that dividing div and just wrap your inline elements in a <p> tag. Then set a large bottom padding on the first p tag.

    IE7 is also a little buggy with italic font, it is going to shift it more to the left.

    I would get rid of the pixel fractions you are using on the text-shadow also, either use 2px or 3px rather than 2.5px.

    Something like this -
    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Test Page</title>
     
    <style type="text/css">
     
    #info_block {
        position:absolute;
        left:70px; top:50px;
        width:140px;
        height:110px;
        padding:15px;
        background:#CCC url(../images/info_block_bg.png);
        z-index:2;
    }
    #info_block p {
        margin:0;
        font-size:18px;
        font-style:italic;
        color:#fff;
        text-align:center;
        text-shadow:3px 3px 5px #000;
        -moz-text-shadow:3px 3px 5px #000;
        background:red;  
    }
    #info_block p:first-child {
        padding-bottom:40px;
        background:green;    
    }
    #info_block a{
        color:#fff;
        text-decoration:none;
    }
    #info_block a:hover {
        text-shadow:0 0 5px #FF9;
        -moz-text-shadow:0 0 5px #FF9;
    }
    </style>
     
    </head>
    <body>
     
    <div id="info_block">           
        <p>d&eacute; haarlemse<br><a href="#">woonwinkel</a></p>
        <p><a href="#">ontwerpstudio</a></p>     
    </div>
     
    </body>
    </html>

  3. #3
    SitePoint Addict Kokos's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hm, I didn't know about that :first-child selector. But aren't these also very horribly supported in IE? Or is that just :after and such.

    I'm going to test your code now.

    EDIT:
    Although that did clean up my code and taught me something new, it didn't fix my problem as it displays exactly the same.
    I guess it's just horrible italics support in IE

    Taking over the web one pixel at a time.
    Currently working @ CodeCreators

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    As Ray said in IE the italics will shift to the left by about 3px.

    The italics are made by slanting the existing text and that makes the text about 3px wider and IE keeps the last character on the line where it is and then just tips the text back resulting in the three pixel jog backwards. This is why italics will break fixed width containers in IE.

    You could add padding to try and offset the difference but I could hardly notice the difference so I don't think it's worth the effort.

  5. #5
    SitePoint Addict Kokos's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I guess I'll keep it the way it is then, any suggestions for my second problem?

    Taking over the web one pixel at a time.
    Currently working @ CodeCreators

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    It depends on how you have it set up bit you could float the links and that will allow you to apply height so that the image will show if that's what you meant.

    Or you could use display:inline-block which will also allow height to be applied.

    If the links should have a check mark to the right when hovered then make sure they already have some padding to the right so that there is no re-flow of the page. Use display-inline:block or floats when using vertical margin or padding.

  7. #7
    SitePoint Addict Kokos's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't need height because it's irrelevant to the layout of both the links and the check marks. Display:inline-block isn't supported in IE right? So that would defeat the purpose. And I already have padding before the hover.

    EDIT:
    Here is an image to show you what I'm trying to achieve.
    Just to clarify again, the check should be the same distance from the text on all lines so not on a fixed x.



    EDIT2:
    And here is my current code, I also tried stuff with lists which I couldn't get to work either. The spaces are behind the text because without that only Firefox reads the padding.

    HTML:

    Code HTML4Strict:
    <a href="#">nieuws </a>
    <a href="#">opruiming </a>
    <a href="#">contact </a>

    CSS:

    Code CSS:
    #navigation_left a {
    	display:inline;
    	padding-right:15px;
    	color:#fff;
    	text-decoration:none;
    	line-height:24px;
    }
    #navigation_left a:hover {
    	text-shadow:3px 3px 5px #000;
            -moz-text-shadow:3px 3px 5px #000;
    	background:url(../images/check.png) no-repeat right;
    }


    EDIT
    Nevermind! I found a fix thanks to http://www.adipalaz.com/linksbg.html, simply putting a position:relative on the links was enough to make it work >_>

    Taking over the web one pixel at a time.
    Currently working @ CodeCreators

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Kokos View Post
    I don't need height because it's irrelevant to the layout of both the links and the check marks. Display:inline-block isn't supported in IE right?
    Wrong but glad you found a fix anyway.

    Display:inline-block works fine in all flavours of IE when used on native inline element like anchors and would have fixed your issue.

    Position:relative will also fix the problem partially as long as your image is not taller than the text and that your text isn't going to wrap. Looking at your image you should be ok with just position:relative.

  9. #9
    SitePoint Addict Kokos's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Wrong but glad you found a fix anyway.

    Display:inline-block works fine in all flavours of IE when used on native inline element like anchors and would have fixed your issue.

    Position:relative will also fix the problem partially as long as your image is not taller than the text and that your text isn't going to wrap. Looking at your image you should be ok with just position:relative.
    I don't know where I got the impression that inline-block doesn't work in IE, maybe I tried using it on something that wasn't a native inline element.

    Thanks for your help and insight

    Taking over the web one pixel at a time.
    Currently working @ CodeCreators

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    No problem you probably tried it on a block level element (where it's supposed to work) and therefore most people think it doesn't work at all.

    You can make inline-block work for block level elements in IE7 and under with a little trick.


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
  •