Different view in IE or Mozilla

[toplisek]

I have code for steps with css and div:


<div id="steps" align="center" >

<img src="Images/step1_on.gif" width="29" height="29" align="absmiddle" />

<span class="step_label">Account information</span>


<img src="Images/step2_off.gif" width="29" height="29" align="absmiddle" />

<span class="step_label">E-mail with link to activate account</span>


<img src="Images/step3_off.gif" width="29" height="29" align="absmiddle" />


<span class="step_label">Activate your account</span>

<img src="Images/step4_off.gif" width="29" height="29" align="absmiddle" />

<span class="step_label2">Finish</span>


</div>


and css like e.g.:


#steps {background-image:url('slike/step_bg.gif');background-repeat:repeat-x; height:29px; margin:0px 0px 20px 0px;}
.step_label {height:29px; padding:8px 15px 0px 3px; font-weight:bold; color:#1e4e7f;}
.step_label2 {height:29px; padding:8px 0px 0px 3px; font-weight:bold; color:#1e4e7f;}


why is text not in the middle (vertical) of colour in IE? In Mozzila it works. :)

[Twey]

You're relying on pixel values. The position will differ depending on resolution and window size.

[toplisek]

What I should change that it will work vertical postion of text in the middle? I have the same code for IE and Mozilla and the same resolution. So, window resolution should not be problem.

[Twey]

Well yes, actually, it should.
#steps {background-image:url('slike/step_bg.gif');background-repeat:repeat-x; height:29px; margin:0px 0px 20px 0px; text-align:center; }

[toplisek]

I have changed as your code. It is the same result in IE. Text is not in the middle 8vertical).

[Twey]

Ah, vertically? Try:
#steps {background-image:url('slike/step_bg.gif');background-repeat:repeat-x; height:29px; margin:0px 0px 20px 0px; text-align:center; vertical-align: center; }

[toplisek]

Ah, vertically? Try:
#steps {background-image:url('slike/step_bg.gif');background-repeat:repeat-x; height:29px; margin:0px 0px 20px 0px; text-align:center; vertical-align: center; }

I have tried also vertical-align: center; and vertical-align: middle; but there is no change in IE. Even vertical-align: top has no results.

[Twey]

It could be due to that margin... try removing it.

[toplisek]

I have removed margin:0px 0px 20px 0px;
but the same story.