Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

ul positioning/margins with IE 7

Posted on 2007-11-19
1
Medium Priority
?
1,505 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 44

Accepted Solution

by:
Chris Stanyon earned 1500 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 does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
When you put your credit card number into a website for an online transaction, surely you know to look for signs of a secure website such as the padlock icon in the web browser or the green address bar.  This is one way to protect yourself from oth…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

824 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