[BenignDesign]

This is my menu as displayed in Firefox... and as displayed in IE... not that IE being a pain is a surprise to anyone.


Here's the code:

The PHP

$linktype = '<table>
      <tr>
         <td class="icon"><center><img src="'.$item->menu_image.'" alt="'.$item->title.'" /></center></td>
         <td class="icon_title"><span class="image-title">'.$item->title.'</span></td>
      </tr>
      <tr>	
         <td colspan="2" class="icon_separator"><hr /></td>
      </tr>
   </table>' : $linktype = '<img src="'.$item->menu_image.'" alt="'.$item->title.'" />';
//Followed shortly after by:
<a <?php echo $class; ?>href="<?php echo $link; ?>" <?php echo $title; ?>><?php echo $linktype; ?></a>

There is also a page of code that generates an unordered list around what you see above. It's Joomla. I'm trying to make due and work with what I have been given. Don't judge me!

The CSS

#right {width:180px;position:relative;float:right;margin:2px 25px 0 0;font-size:12px;letter-spacing:-0.5px;}
#right table {width:180px;height:35px;}
#right td.icon {vertical-align:middle;width:59px;height:32px;padding-left:2px;}
#right td.icon_title {vertical-align:middle;text-align:left;padding-left:2px;}
#right td.icon_separator {height:1px;padding-left:15px;}
#right hr {width:130px;color:#79766f;background:#79766f;height:1px;padding:none;}
#right a:link, #right a:active, #right a:visited {color:#79766f;text-decoration:none;}
#right a:hover {text-decoration:underline;}

And the generated HTML

<div id='right'>
	<ul class="menu">
		<li class="item-331">
			<a href="/your-right-to-know" >
				<table>
					<tr>
						<td class="icon"><center><img src="/images/menu_icons/rt_question.jpg" alt="Your Right to Know" /></center></td>
						<td class="icon_title"><span class="image-title">Your Right to Know</span></td>
					</tr>
					<tr>
						<td colspan="2" class="icon_separator"><hr /></td>
					</tr>
				</table>
			</a>
		</li>
		<li class="item-332">
			<a href="#" >
				<table>
					<tr>
						<td class="icon"><center><img src="/images/menu_icons/rt_county.jpg" alt="Garrett County Scholarship" /></center></td>
						<td class="icon_title"><span class="image-title">Garrett County Scholarship</span></td>
					</tr>
					<tr>
						<td colspan="2" class="icon_separator"><hr /></td>
					</tr>
				</table>
			</a>
		</li>
		<li class="item-333">
			<a href="#" >
				<table>
					<tr>	
						<td class="icon"><center><img src="/images/menu_icons/rt_blackboard.jpg" alt="Blackboard" /></center></td>
						<td class="icon_title"><span class="image-title">Blackboard</span></td>
					</tr>
					<tr>
						<td colspan="2" class="icon_separator"><hr /></td>
					</tr>
				</table>
			</a>
		</li>
		<li class="item-334">
			<a href="#" >
				<table>
					<tr>
						<td class="icon"><center><img src="/images/menu_icons/rt_email.jpg" alt="Laker Mail" /></center></td>
						<td class="icon_title"><span class="image-title">Laker Mail</span></td>
					</tr>
					<tr>
						<td colspan="2" class="icon_separator"><hr /></td>
					</tr>
				</table>
			</a>
		</li>
		<li class="item-335">
			<a href="#" >
				<table>
					<tr>
						<td class="icon"><center><img src="/images/menu_icons/rt_gc.jpg" alt="Student Portal" /></center></td>
						<td class="icon_title"><span class="image-title">Student Portal</span></td>
					</tr>
					<tr>
						<td colspan="2" class="icon_separator"><hr /></td>
					</tr>
				</table>
			</a>
		</li>
		<li class="item-336">
			<a href="#" >
				<table>
					<tr>
						<td class="icon"><center><img src="/images/menu_icons/rt_carc.jpg" alt="Community Aquatic &amp; Recreation Complex" /></center></td>
						<td class="icon_title"><span class="image-title">Community Aquatic &amp; Recreation Complex</span></td>
					</tr>
					<tr>
						<td colspan="2" class="icon_separator"><hr /></td>
					</tr>
				</table>
			</a>
		</li>
	</ul>
</div>

Yes, this IS only half the code - the other half looks strikingly similar. Yes, it IS tiny little tables nested inside list items. Yes, it IS ugly. Yes, it CAN be done better. However, as I mentioned earlier, I'm working within the constraints of the Joomla system I've been told to use for this. I tried editing the original code to turn the unordered list into a table, but the entire site breaks when I edit that file. So I'm making due with the severe ugliness that is this jumbled mess of hell.

The problem is, I need this menu to display all nice and table-like across all browsers, as shown in the Firefox side of the screenshot. It's not playing nearly as nice in IE. I need to figure out what's causing the weird indent pattern in IE. I realize it's probably to due with nesting tables inside unordered list items and it's probably going to require a massive rewrite of a chunk of code and it's probably going to push back my launch date by a week... but just in case there's something glaringly obvious that I'm not seeing, could one or two of you lovely people please take a peek for me?

A million and one thanks!

[BenignDesign]

Nevermind. I devised a work-around. It's not perfect, but it'll do.