IE text-align not working and other problem

HTML & CSS
1

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:


<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:


#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!

2

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 -

<!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

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 :frowning:

4

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

I guess I’ll keep it the way it is then, any suggestions for my second problem?

6

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

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:


<a href="#">nieuws </a>
<a href="#">opruiming </a>
<a href="#">contact </a>

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 >_>

8

Wrong :slight_smile: 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.:slight_smile:

9

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 :slight_smile:

10

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.:slight_smile: