IE positioning VS Firefox

[ShawnMolloy]

Hi,

Why does the following code behave differently in ie vs firefox?

<div class="movie_title">
    <b>&quot;<%#Eval("VideoTitle")%>&quot;</b>
    <span style="font: 9px; color: #333333; float: right; position: relative; vertical-align: middle; top: -25; padding-right: 20px;"><a href="edit.aspx">Edit</a></span> <br>
</div>

In IE the "Edit" link is in the middle of the div, but in Firefox its at the top.



Shawn Molloy
Seattle, WA

 

[BillyRayPreachersSon]

Welcome to the world of standards. IE lets you get away with saying "top: -25"... but is that 25 monkeys? 25 rashers of bacon? 25 used teabags?

Try "top: -25[!]px[/!]". Firefox prefers you specify a unit for values - it doesn't go guessing.

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[ShawnMolloy]

Hey Dan,

Good point on being more explicit with property values; that always seems to be a good practice in CSS. I plugged in the 'px' to my top attribute. Now in IE it performs exatcly the same, but in Firefox the span progressively gets lower and lower with each repeating item. Its funny; at the first item it show up at the top of the div, and by the end (about 20 down) its 100px below. It must be relative to some other containing item...

I think I might have to come at this design with a different approach.

Thanks,


Shawn Molloy
Seattle, WA

 

[ChrisHunt]

It's probably something to do with the combination of floating and relative positioning. When you relatively position something, the browser retains the space where the positioned element should have been, as well as moving it to the new position. So my guess is that each successive element is being pushed down in order to clear its predecessor's original place. Perhaps if you temporarily removed the relative positioning you'd be able to test this hypothesis.

Incidentally, what DOCTYPE are you using for the document? That can explain a lot of different renderings between browsers.

Also, you don't need the span - just apply the styling to the <a>. In fact, you can mark it up like this:

<div class="movie_title">
&quot;<%#Eval("VideoTitle")%>&quot;
<a href="edit.aspx">Edit</a>
</div>

and put all the styling in your stylesheet

.movie_title {
  font-weight: bold;
}

.movie_title a {
  font: 9px normal;
  color: #333;
  float: right;
  position: relative;
  vertical-align: middle;
  top: -25;
  padding-right: 20px;
}

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd