Jump to content

Ordered List not working in IE7

elementalgrace

By elementalgrace
in HTML/XHTML

Recommended Posts

elementalgrace Member

elementalgrace

Posted
Posted

Hey,Been a while since I came on here ... busy busy :) I'm having a problem with an ordered list. Works fine in firefox, opera, safari (beta version for PC) but does ie7 work? No, of course not!In all the other browsers the list is showing as 1.2.3 etc but in IE7, all it does is show as 1.1.1.1. etc. I haven't tested in ie6 yet though. Does anyone have any idea why it's doing this or how to get around it? I've been trawling the web for hours and I'm cluless.The HTML for the list is:

<div id="right-top"><h1>Title Goes Here</h1><ol>	<li><a href="">Lorem Ipsum</a></li>	<li><a href="">Lorem Ipsum</a></li>	<li><a href="">Lorem Ipsum</a></li>	<li><a href="">Lorem Ipsum</a></li>	<li><a href="">Lorem Ipsum</a></li>	<li><a href="">Lorem Ipsum</a></li>	<li><a href="">Lorem Ipsum</a></li>	<li><a href="">Lorem Ipsum</a></li>	<li><a href="">Lorem Ipsum</a></li>	<li><a href="">Lorem Ipsum</a></li>			</ol><div class="viewall">view all <img src="images/viewall.gif" width="32" height="11" alt="View All Bands"/></div></div>

The related CSS (just incase it's useful) is 

#right-top{border-left: 1px dotted #fff;width: 94%;padding:5px;}#right-top ol{	margin: 0;	padding: 0 0px 10px 35px;	}#right-top ol li{list-style-type:decimal;	color:White;font: normal 70% verdana, sans-serif;height:18px;text-transform:capitalize;}	#right-top ol li a{text-decoration:none;	color:Aqua;	}

Any help would be really appreciated...

Link to comment
Share on other sites
Err Dedicated Member

Err

Posted
Posted

Try putting list-style-type:decimal; in just the <ol> tag. Don't add it to the <li>. See if that changes anything.

Link to comment
Share on other sites
elementalgrace Member

elementalgrace

Posted
  • Author
Posted
Try putting list-style-type:decimal; in just the <ol> tag. Don't add it to the <li>. See if that changes anything.
Thanks for the suggestion. I just gave that a go but it's still not working for IE.I'm working on an offline version at the mo but here's the full code so far for both the HTML and CSS:HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head>	<title>:: AOR FM :: Template</title>  <link rel="Stylesheet" href="styles.css" media="screen" type="text/css"/> <meta content="" name="keywords" />  	<meta content="" name="description" />	<meta content="" name="abstract" />	<meta content="Create Solutions (UK) Ltd" name="author" /></head><body><div id="all"><div class="header"> </div><div class="header2"><div class="search"><ul><li><label for="txtSearch"> </label><input type="text" name="txtSearch" id="txtSearch" /></li><li><label for="ddCategory"> </label>	<select id="ddCategory" name="ddCategory">		<option value="0">Search all of AOR FM</option>		</select></li></ul></div><div class="browse"> </div></div><!--MAIN--><!--LEFT SIDE--><div id="left"><div id="nav"><ul>	<li><a href="#"  class="on">home</a></li>	<li><a href="#">about</a></li>	<li><a href="#">news</a></li>	<li><a href="#">charts</a></li>	<li><a href="#">forum</a></li>	<li><a href="#">contact</a></li>		</ul></div></div><!--CONTENT--><div class="main"> </div><!--RIGHT HAND SIDE--><div id="right"><!--RIGHT: TOP POD--><div id="right-top"><h1>top viewed bands</h1><ol>	<li><a href="">Lorem Ipsum</a></li>	<li><a href="">Lorem Ipsum</a></li>	<li><a href="">Lorem Ipsum</a></li>	<li><a href="">Lorem Ipsum</a></li>	<li><a href="">Lorem Ipsum</a></li>	<li><a href="">Lorem Ipsum</a></li>	<li><a href="">Lorem Ipsum</a></li>	<li><a href="">Lorem Ipsum</a></li>	<li><a href="">Lorem Ipsum</a></li>	<li><a href="">Lorem Ipsum</a></li>			</ol><div class="viewall"><a href="#">view all <img alt="View All Bands" height="11" src="images/viewall.gif" title="View All Bands" width="32" /></a></div></div>	<!--RIGHT: MIDDLE POD--><div id="right-mid">	<h1>		top downloaded</h1>	<ol>		<li><a href="">Lorem Ipsum</a></li>		<li><a href="">Lorem Ipsum</a></li>		<li><a href="">Lorem Ipsum</a></li>		<li><a href="">Lorem Ipsum</a></li>		<li><a href="">Lorem Ipsum</a></li>		<li><a href="">Lorem Ipsum</a></li>		<li><a href="">Lorem Ipsum</a></li>		<li><a href="">Lorem Ipsum</a></li>		<li><a href="">Lorem Ipsum</a></li>		<li><a href="">Lorem Ipsum</a></li>	</ol>	<div class="viewall">		<a href="#">view all			<img alt="View All Downloads" height="11" src="images/viewall.gif" title="View All Downloads" width="32" /></a></div></div>	<!--RIGHT: BOTTOM POD IF REQUIRED<div id="right-bottom">	<br />	<br />	<br /></div>--></div> <div class="clear"> </div><!--FOOTER-->	<div class="footer"><a href="#">Terms and Conditions</a> | <a href="#">Privacy Policy</a> | <a href="#">Contact</a></div></div></body></html>

CSS:

body{	margin: 0;	padding: 0;	background-color: Black;}/*ALL*/#all{	margin: auto;	width: 986px;}/*HEADINGS, TEXT & LINKS*/h1{text-transform:uppercase;	color:#f0ebab;	font: normal 100% georgia, times new roman, serif}h2{}h3{}p{}a {border:none;}a:hover{}/*HEADER*/.header{   background-image:url(images/header.jpg);	background-repeat:no-repeat;	height: 185px;	width: 986px;}/*HEADER2*/.header2{	background-image:url(images/header2.jpg);	background-repeat:no-repeat;	height: 185px;	width: 986px;	margin-bottom:10px;}/*SEARCH*/.search{}.search ul{}.search li{padding-bottom:8px;}.search input{}.search select{}.search img{}/*BROWSE*/.browse{}/*LEFT*/#left{	width: 200px;	min-height: 600px;	height: auto !important;	height: 600px;	float: left;	background-color: black;}#nav{	border-right: 1px dotted #fff;	width: 99%;	min-height:250px;	height:auto !important;	height:250px;}#nav ul{	margin: 0;	padding: 0;}#nav ul li{	font: normal 100% georgia, times new roman, serif;	text-transform: uppercase;	list-style-type: none;	height: 36px;	text-indent: 35px;	vertical-align: middle;}#nav ul li a{	text-decoration: none; 	display: block; 	color:White;	background-image:url(images/nav.gif);	background-repeat:no-repeat;}	 #nav ul li a:hover, #nav ul li a.on{	background-image:url(images/nav_on.gif);	background-repeat:no-repeat;	color:#b4bbc3;}/*CONTENT*/.main{	width: 570px;	min-height: 600px;	height: auto !important;	height: 600px;	float: left;	background-image: url(images/maincontent.jpg);	background-repeat:no-repeat;	background-position:top;}/*RIGHT*/#right{	width: 200px;	min-height: 600px;	height: auto !important;	height: 600px;	float: right;}/*RIGHT TOP*/#right-top{border-left: 1px dotted #fff;width: 94%;padding-left:25px;	min-height:250px;	height:auto !important;	height:250px;}#right-top ol{	margin: 0;	padding: 0 0px 10px 35px;	list-style-type:decimal;	}#right-top ol li{	color:White;font: normal 70% verdana, sans-serif;height:18px;text-transform:capitalize;}	#right-top ol li a{text-decoration:none;	color:Aqua;	}/*RIGHT MID*/#right-mid{width: 90%;padding-left:25px;margin-top: 10px;}#right-mid ol{	margin: 0;	padding: 0 0px 10px 35px;	}#right-mid ol li{color:White;font: normal 70% verdana, sans-serif;height:18px;text-transform:capitalize;}	#right-mid ol li a{text-decoration:none;	color:Aqua; }/*RIGHT BOTTOM*/#right-bottom{width: 90%;padding-left:25px;margin-top: 10px;}/*FOOTER*/.footer{	width: 986px;	height: 35px;	text-align: center;	padding: 10px 0 0 0;	font: normal 72% verdana, sans-serif;	color: #565759;}.footer a{	color: #565759;	text-decoration: none;}.footer a:hover{	color: #af080f;}/*MISC*/.clear{	clear: both;	height: 0px;}.viewall{   text-transform:uppercase;	color:#ffffff;	height:28px;	font: normal 100% georgia, times new roman, serif;	text-align:right;	} .viewall a {color:#fff;	text-decoration:none;	}     .viewall img   {border:none;}

Disclaimer: The site is a work in progress so I know that there are other bits that aren't finished yet but it's just this irritating ordered list that I'm struggling with. The section in question is #right-top.Thanks.

Link to comment
Share on other sites
jlhaslip Devoted Member

jlhaslip

Posted
Posted

This is a strange one because usually the problem is giving an element 'haslayout', but in your case, it is necessary to remove the 'haslayout' from the OL/LI, so try this CSS for size:

#right-top ol li{	color:White;		font: normal 70% verdana, sans-serif;		text-transform: capitalize;		line-height: 18px; // removes haslayout from the OL and the numbers happen}

For comparison, only change the ol/li for the right-top list and display the page. the ol below it will still have the problem. Changing the height to a line-height will remove the 'haslayout' and the decimal numbers appear.http://www.brunildo.org/test/IEul1.htmlCheck out example 3.2 and you might need to play with the numbers to get IE and FF to agree on the display...14px works okay in FF2, but 16px looks good in IE6, so probably use an IE conditional comment to change the line-height for IE6 would work.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...