Solved

ul positioning/margins with IE 7

Posted on 2007-11-19
1
1,472 Views
Last Modified: 2013-12-08
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
Comment
Question by:JWeb Admin
1 Comment
 
LVL 43

Accepted Solution

by:
Chris Stanyon earned 500 total points
ID: 20316854
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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

If you are a web developer, you would be aware of the <iframe> tag in HTML. The <iframe> stands for inline frame and is used to embed another document within the current HTML document. The embedded document could be even another website.
In threads here at EE, each comment has a unique Identifier (ID). It is easy to get the full path for an ID via the right-click context menu. However, we often want to post a short link within a thread rather than the full link. This article shows a…
Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch the Search Engine Menu: In chrome, via you…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

828 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question