Positioning with Firefox vs. IE

[Benjamin]

Hello,

I just recently installed a CSS menu (http://www.dynamicdrive.com/style/csslibrary/item/glossy-vertical-menu/) from Dynamic Drive on my website (http://www.rosspestcontrol.com), and although it looks great in Firefox, I'm having trouble getting it to look right in IE. In the CSS code, I have the width set to "auto", but in IE it doesn't span the whole width of the column. I tried "100%" but that overlaps the black edge.

The main problem is that on the longer pages (such as this one (http://www.rosspestcontrol.com/pestcontrol.php)) the menu is positioned in the middle of the column instead of at the top, even though the table cell is valign="top".

Any suggestions? My website URL is rosspestcontrol.com (http://rosspestcontrol.com). If you're not sure what I mean by all this, just open the website in both Firefox and IE, and you'll see what I'm talking about.

Thank you,

-Benjamin

:confused:

[jscheuer1]

I don't think you can get IE to do a table like that unless you set the height of the cell. I'm referring to the rowspan=2 of the neighboring cell, in IE that makes the preceding two rows equal unless both or at least the second one has its height specified. Change the background color of #leftbar to red and you will see clearly what is happening.

Other than that, on the width, this worked here:


* html .glossymenu li a{ /*IE only. Actual menu width minus left padding of A element (10px) */
width: 100%;
}

[jscheuer1]

Looking at this a bit more, why not get rid of the rowspan=2 altogether:


<table border="0" cellspacing="0" cellpadding="0" id="maintable" align="center">
<tr>
<td colspan="2" id="banner"><img src="images/logo.gif" alt="" height="121" width="280" hspace="30" vspace="13" autolowsrc="autolowsrc" livesrc="../web-data/Components/rossLogo.png" lowsrc="images/logols.gif" /></td>
</tr>
<tr>
<td valign="top" id="leftbar">
<img src="images/random/img_0125.jpg" alt="" height="145" width="194" border="0" livesrc="../web-data/Components/house%20photos/IMG_0125.jpg" />
<p>&nbsp;</p>
<ul class="glossymenu">
<li><a href="index.php">Home</a></li>
<li><a href="pestcontrol.php">Pest Control Services</a></li>
<li><a href="weedcontrol.php">Weed Control Services</a></li>
<li><a href="links.php">Links</a></li>
<li><a href="contactus.php">Contact us</a></li>
</ul>
<p>&nbsp;</p>
</td>
<td id="cuerpo" valign="top"><!-- InstanceBeginEditable name="body" -->
<h1>Ross Pest Control</h1>
<h4>Serving Parker County and western Tarrant County, Texas</h4>
<p><img src="images/familyphoto.jpg" alt="Family Owned and Operated - Kevin &amp;&nbsp;Ginger McKee" height="183" width="175" align="right" hspace="15" livesrc="../web-data/Components/Ross%20Pest%20Control%20050930.pdf" />Are weeds, disease and insects affecting your home and lawn? We offer a number of treatment programs for:</p>
<ul>
<li>General Pest Control</li>
<li>Lawn &amp;&nbsp;Garden Pests</li>
<li>Weed Control</li>
<li>Termites</li>
</ul>
<h4>Call us for <strong>all</strong> your pest control needs!</h4>
<ul>
<li>Local, Family-Owned and Operated</li>
<li>Residential and Commercial Programs</li>
<li>Pre- and Post-Construction Treatments</li>
<li>Written Warranty Provided</li>
<li>Call today! 817-602-4818</li>
</ul>
<h2>&nbsp;</h2>
<h1>817-602-4818</h1>
<!-- InstanceEndEditable --></td>
</tr>
</table>

[Benjamin]

Thanks, that did the trick. I should have noticed that extra thing in the CSS code, I just copied it from Dynamic Drive!

Thanks for your help.

-Benjamin