Float Issue in IE!

[dai.hop]

Hi all,

I'm trying to make a hover menu. It works perfectly in FF and looks absolutely terrible in IE.

www.outlookimages.co.uk/v6/ (http://www.outlookimages.co.uk/v6/) - hover over the "Photo Gifts" menu item.

Could someone help me diagnose and fix this problem please?

Thanks!

dai.hop

[Fang]

.dropItem {white-space:nowrap; width:116px; background-color:rgb(237, 237, 237); padding:10px 17px; z-index:-10; }

<div style="white-space: nowrap;border-right: 1px solid rgb(204, 204, 204); padding: 10px; text-align: center; cursor: pointer;">
Photo Gifts <sup style="color: rgb(255, 0, 0); font-size: 10px;">New!</sup>
</div>

[dai.hop]

Thanks for the code Fang.

I integrated it this morning and have been tinkering around with it all day. In the end I re-wrote my navigation bar to div positioning instead of tables but now I seem to have a very unique problem.

The bar renders perfectly in FF (Mac), Safari (Mac), and Safari (Win) however the entry on the far right is out by a single pixel in IE (Win), Chrome (Win), FF (Win), and Opera (Win).

Any suggestions on why this is happening?

URL is still: http://www.outlookimages.co.uk/v6/

[Fang]

Rounding error. If you Zoom In (Ctrl++) the bar will line up correctly.

[dai.hop]

Looks like this is true for FF, but IE and Opera still display the 'misaligned' menu item when zooming in to 400% (Chrome doesn't appear to have any zoom controls).

When you say rounding error - what do you mean, and how can I fix it?

[Fang]

Afaik you have not fixed the height of the menubar.

[dai.hop]

I thought this would do the trick (height set in first line)?

<table width="100%" border="0" cellpadding="0" cellspacing="0" style="margin:0; padding:0; text-align:center; height:34px;">
<tr>
<td>
<form method="GET" action="status.php">
<input type="text" name="orderId" value="<?php echo ($_SESSION['orderId']) ? $_SESSION['orderId'] : 'Order Number'; ?>" style="text-align:center; width:100px; color:#666666;" onfocus="this.value = (this.value == 'Order Number') ? this.value = '' : this.value = this.value;" onblur="this.value = (this.value == '') ? this.value = 'Order Number' : this.value = this.value;" height="22" />
<input type="submit" value="Get Status" style="width:80px;" height="22" />
</form>
</td>
</tr>
</table>

[Fang]

That only does it for the table not for the other menu items.
The invalid markup isn't helping either.

[dai.hop]

Yes I currently have it in the table but I have experimented with placing it in its inner and outer divs as well. After some experimentation it seems that if I set the height CSS to 35px the item renders correctly in the browsers where it didn't work before - however, this also has the effect of the item rendering incorrectly in the browsers where it did work before!

Based on this, there has to be something creating the extra space somewhere! Any ideas?

I appreciate the markup is invalid but I'm afraid I'm in a situation where I'm stuck modifying someone elses code.

[Fang]

Work in all browsers except Opera <div id="mro" class="rndOut" style="float: right; width: 243px; z-index: 2; position: relative; padding-top: 0pt; padding-bottom: 0pt;" onmouseover="display(false);"><b class="niftycorners" style="background: transparent none repeat scroll 0% 0%; margin-left: -1px; margin-right: -1px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: -1px;"><b style="border-color: rgb(255, 255, 255); background-color: transparent; border-left-width: 0pt; margin-left: 0pt;" class="ts1"></b><b style="border-color: rgb(255, 255, 255); background-color: transparent; border-left-width: 0pt; margin-left: 0pt;" class="ts2"></b></b>
<div id="mri" style="background: rgb(237, 237, 237) url(../images/menu-back.png) repeat-x scroll center top; text-align: center; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; padding-top: 0pt; padding-bottom: 0pt;" align="center"><b class="niftycorners" style="background: transparent none repeat scroll 0% 0%; margin-left: 0px; margin-right: 0px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: -2px;"><b style="border-color: rgb(204, 204, 204); background-color: transparent; border-left-width: 0pt; margin-left: 0pt;" class="ts1"></b><b style="border-color: rgb(204, 204, 204); background-color: transparent; border-left-width: 0pt; margin-left: 0pt;" class="ts2"></b></b>
<div style="padding:6px 0 5px; text-align:center;xfloat:left; padding-right:0;overflow:hidden; ">
<form method="get" action="status.php">
<input name="orderId" value="Order Number" style="margin-left:20px;float:left;text-align: center; width: 100px; color: rgb(102, 102, 102);" onfocus="this.value = (this.value == 'Order Number') ? this.value = '' : this.value = this.value;" onblur="this.value = (this.value == '') ? this.value = 'Order Number' : this.value = this.value;" type="text">
<input value="Get Status" style="margin-left:5px;float:left;width: 80px;" type="submit">
</form>
</div>
<b class="niftycorners" style="background: transparent none repeat scroll 0% 0%; margin-left: 0px; margin-right: 0px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-top: -2px;"><b style="border-color: rgb(204, 204, 204); background-color: transparent; border-left-width: 0pt; margin-left: 0pt;" class="ts2"></b><b style="border-color: rgb(204, 204, 204); background-color: transparent; border-left-width: 0pt; margin-left: 0pt;" class="ts1"></b></b></div>