[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1514
  • Last Modified:

ul positioning/margins with IE 7

If you take a look at the homepage of http://www.pgh-casa.org/cms - you'll notice that the items in the right column align perfectly in Firefox, and IE 6.  With IE 7, however, the first menu item displays too far to the left (Under where it says CASA In The News) - it seems to disappear underneath the Flash movie.

Can anyone help me troubleshoot my CSS / HTML?

I've attached the HTML and CSS to this message.  Some of the HTML might look a bit strange because I'm using the Joomla CMS for this project.
<td width="200" valign="top" class="rightborder"><div id="rightborder"><span class="homeheading">CASA In The News</span> <div class="hr"><hr /></div><ul class="latestnews">
	<li class="latestnews">
		
			<a href="http://www.pgh-casa.org/cms/index.php?option=com_content&amp;task=view&amp;id=85&amp;Itemid=77" class="latestnews">Plates With Purpose</a>
	</li>
		<li class="latestnews">
		
			<a href="http://www.pgh-casa.org/cms/index.php?option=com_content&amp;task=view&amp;id=84&amp;Itemid=77" class="latestnews">CASA Holiday Cards on Sale</a>
 
	</li>
		<li class="latestnews">
		
			<a href="http://www.pgh-casa.org/cms/index.php?option=com_content&amp;task=view&amp;id=82&amp;Itemid=77" class="latestnews">Court seeks Blacks to be advocates for Black children</a>
	</li>
	</ul>	<link href="http://www.pgh-casa.org/cms/modules/mod_events_latest.css" rel="stylesheet" type="text/css" />
<table class="mod_events_latest_table" width="100%" border="0" cellspacing="0" cellpadding="0" align="center"><span class="homeheading">On The CASA Calendar</span><div class="hr"><hr /></div><tr><td class="mod_events_latest_first"><span class="mod_events_latest_date">Mon, Nov 19th, @6:00pm</span> - <span class="mod_events_latest_date">08:00PM</span><br/><span class="mod_events_latest_content"><a href="http://www.pgh-casa.org/cms/index.php?option=com_events&amp;task=view_detail&amp;agid=3&amp;year=2007&amp;month=11&amp;day=19&amp;Itemid=68">Steelers Tailgate Party</a></span></td></tr>
 
<tr><td class="mod_events_latest"><span class="mod_events_latest_date">Wed, Nov 28th, @6:00pm</span> - <span class="mod_events_latest_date">07:00PM</span><br/><span class="mod_events_latest_content"><a href="http://www.pgh-casa.org/cms/index.php?option=com_events&amp;task=view_detail&amp;agid=4&amp;year=2007&amp;month=11&amp;day=28&amp;Itemid=68">CASA Open House</a></span></td></tr>
<tr><td class="mod_events_latest"><span class="mod_events_latest_date">Tue, Dec 4th, @6:00pm</span> - <span class="mod_events_latest_date">06:45PM</span><br/><span class="mod_events_latest_content"><a href="http://www.pgh-casa.org/cms/index.php?option=com_events&amp;task=view_detail&amp;agid=7&amp;year=2007&amp;month=12&amp;day=04&amp;Itemid=68">CASA Information Session</a></span></td></tr>
<tr><td class="mod_events_latest"><span class="mod_events_latest_date">Wed, Dec 19th, @6:00pm</span> - <span class="mod_events_latest_date">07:00PM</span><br/><span class="mod_events_latest_content"><a href="http://www.pgh-casa.org/cms/index.php?option=com_events&amp;task=view_detail&amp;agid=6&amp;year=2007&amp;month=12&amp;day=19&amp;Itemid=68">CASA Open House</a></span></td></tr>
 
</table>
</div></td>
 
<!-- here's the CSS -->
 
ul.latestnews {
	list-style-type: none;
	color: gray; 	
	margin-left: -3.4em; 
	margin-top: 3px; 
	font-family: Georgia, "Times New Roman", Times, serif;
}
 
ul.latestnews li { 
	font-size:12px; 
	color: gray; 
	margin-left: -5px; 
	line-height: 14px; 
	border-bottom: 1px dotted #7c7c7c;
	font-family: Georgia, "Times New Roman", Times, serif;
}
 
.latestnews a {
	color: #56493b;
	text-decoration: underline;
}
 
.latestnews a:visited {
	text-decoration: underline;
	color: #56493b;
}
 
.latestnews a:hover {
	color: gray;
	text-decoration: none;	
}

Open in new window

0
JWeb Admin
Asked:
JWeb Admin
1 Solution
 
Chris StanyonCommented:
The margin-left:-3.4em; on the ul.latestnews moves the whole of the UL to the left by 3.4 ems, in effect 'hiding' the UL under the flash movie.

If you set the margin-left to 0 then it should line up in IE7, but unfortunately it then won't work in FireFox. You will need to set the padding-left to 0 as well. Haven't got IE6 any more so can't remember the effect it will have in that browser. Can't wait for ALL browsers to do what they're supposed to :)

0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now