Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

ul positioning/margins with IE 7

Posted on 2007-11-19
1
Medium Priority
?
1,495 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
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…
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).

661 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