Solved

ul positioning/margins with IE 7

Posted on 2007-11-19
1
1,456 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 42

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

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Suggested Solutions

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This Micro Tutorial will demonstrate how to add subdomains to your content reports. This can be very importing in having a site with multiple subdomains.
How to create a custom search shortcut to site-search Experts Exchange using Google in the Firefox browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch your Bookmark Menu: Press 'Ctrl +…

707 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now