CSS - List Positioning Problem

Hi guys,

I have a small list positioning problem in IE 6/7 which I was hoping someone might be able to advise me on!

List Positioning is fine in Firefox, but for some reason is adding about 50px on the left margin in IE...

I know my page isn't quite valid because of the sIFR bits I have on it, but I'm working on this too!

The page in question is here

Here's my list css code;

#services_home_container {
width: 265px;
height: 274px;
padding: 0px 0px 0px 0px;
float: left;
color: #666666;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.7em;
line-height: 130%;
}


#services_home ul {
list-style-type: none;
width: 235px;
padding: 0px 0px 0px 0px;
}

#services_home li {
margin: 10px 0px 0px 0px;
}

#services_home li a {
color: #4f2f9c;
display: block;
font: bold 120% Arial, Helvetica, sans-serif;
padding: 0px 0px 0px 0px;
text-decoration: none;
}

* html #services_home li a { /* make hover effect work in IE */
width: 235px;
}

#services_home li a:hover {
background: #bcfbc6;
}

#services_home a em {
color: #666666;
display: block;
font: normal 85% Verdana, Helvetica, sans-serif;
line-height: 125%;
width: 235px;
padding: 5px 0px 5px 0px;
}

#services_home a span {
color: #125F15;
font: normal 70% Verdana, Helvetica, sans-serif;
line-height: 150%;
}


#services_home img {
float: left;
padding:2px 0px 2px 0px;
margin: 0px 5px 0px 2px;
border: none;
}


If anyone has a moment to take a look and help me, it would be very much appreciated!

Best regards

Jon

Hey all,

can't seem to figure out what the deal is with this menu...looks fine in FF, but I can't seem to get the menu to line up with the background image in IE6.

Here's what i've got;
Code:

<div id="header_bg">
<ul id="header_top">
	<li><a href="index.php"><img src="images/menu_top.gif" alt="Windsor Harley Owners Group header image"></a></li>
</ul>
<ul id="menu_top">
	<li id="leftspc"></li>
	<li id="links"><a href="links.php"></a></li>
	<li id="contact"><a href="contact.php"></a></li>
	<li id="news"><a href="newsletter.php"></a></li>
	<li id="home"><a href="index.php"></a></li>
	<li id="about"><a href="about.php"></a></li>
	<li id="events"><a href="events.php"></a></li>
	<li id="join"><a href="join.php"></a></li>
	<li id="pix"><a href="pix.php"></a></li>
	<li id="rightspc"></li>
</ul>
<ul id="header_bottom">
	<li><img src="images/menu_bottomleft.gif" alt="Bottom Left spacer image"></li>
	<li id="admin"><a href="admin_login.php"></a></li>
	<li id="members"><a href="members.php"></a></li>
	<li><img src="images/menu_bottomright.gif" alt="Bottom right spacer image"></li>
</ul>
</div>
<div class="clear"></div>

and the CSS;
Code:

#header_bg {
width:100%;
position:relative;
background:black url(images/header_bg.gif) repeat-x bottom;
height:166px;
}

/*
* html #header_bg {
height:156px;
}
*/
#header_top {
width:800px;
height:59px;
margin:auto;
list-style:none;
background-color:black;
}

/*#header_top li#logo {
width:800px;
height:59px;
margin:auto;
}*/

#menu_top {
position:relative;
margin:auto;
list-style:none;
height:71px;
width:800px;
background-color:transparent;
margin-top:-5px;
}

* html #menu_top {
padding-left:18px;
margin-top:-8px;
}

#menu_top li {
height:71px;
float:left;
}

#menu_top a {
text-decoration:none;
display:block;
height:71px;
}

#menu_top li#leftspc {
width:100px;
background:black url(images/menu_leftspc.gif) no-repeat;
}

#menu_top li#rightspc {
width:100px;
background:black url(images/menu_rtspc.gif) no-repeat;
}


/* LINK BUTTONS */
#menu_top li#links a { background-image:url(images/linksbut_off.jpg); }
#menu_top li#links a:hover { background:transparent; }
#menu_top li#links { background-image:url(images/linksbut_roll.jpg); width:75px; }

/* CONTACT BUTTONS */
#menu_top li#contact a { background-image:url(images/contactbut_off.jpg); }
#menu_top li#contact a:hover { background:transparent; }
#menu_top li#contact { background-image:url(images/contactbut_roll.jpg); width:75px; }

/* NEWS BUTTONS */
#menu_top li#news a { background-image:url(images/newsbut_off.jpg); }
#menu_top li#news a:hover { background:transparent; }
#menu_top li#news { background-image:url(images/newsbut_roll.jpg); width:75px; }

/* HOME BUTTONS */
#menu_top li#home a { background-image:url(images/homebut_off.jpg); }
#menu_top li#home a:hover { background:transparent; }
#menu_top li#home { background-image:url(images/homebut_roll.jpg); width:75px; }

/* ABOUT BUTTONS */
#menu_top li#about a { background-image:url(images/aboutbut_off.jpg); }
#menu_top li#about a:hover { background:transparent; }
#menu_top li#about { background-image:url(images/aboutbut_roll.jpg); width:75px; }

/* EVENTS BUTTONS */
#menu_top li#events a { background-image:url(images/eventsbut_off.jpg); }
#menu_top li#events a:hover { background:transparent; }
#menu_top li#events { background-image:url(images/eventsbut_roll.jpg); width:75px; }

/* JOIN BUTTONS */
#menu_top li#join a { background-image:url(images/joinbut_off.jpg); }
#menu_top li#join a:hover { background:transparent; }
#menu_top li#join { background-image:url(images/joinbut_roll.jpg); width:75px; }

/* PIX BUTTONS */
#menu_top li#pix a { background-image:url(images/pixbut_off.jpg); }
#menu_top li#pix a:hover { background:transparent; }
#menu_top li#pix { background-image:url(images/pixbut_roll.jpg); width:75px; }

#header_bottom {
width:600px;
height:35px;
margin:auto;
margin-top:-5px;
background-color:transparent;
}

* html #header_bottom {
padding-left:18px;
margin-top:-4px;
}

#header_bottom li {
float:left;
height:35px;
list-style:none;
}

#header_bottom a {
text-decoration:none;
display:block;
height:35px;
}

/* admin BUTTONS */
#header_bottom li#admin a{
background-image:url(images/admin_button_off.gif);
}
#header_bottom li#admin a:hover {
background:transparent;
}
#header_bottom li#admin {
background-image:url(images/admin_button_roll.gif);
width:150px;
}

/* members BUTTONS */
#header_bottom li#members a{
background-image:url(images/members_button_off.gif);
}
#header_bottom li#members a:hover {
background:transparent;
}
#header_bottom li#members {
background-image:url(images/members_button_roll.gif);
width:150px;
}

Can't see that this has been addressed before, but I am having a problem with using images as bullets in a ul list. The text is aligned to the bottom of the image, such that the image looks too high up. Is there a way to sort this out?

Also, while we're on the subject, the left margins of the list are completely different in IE and firefox, with IE putting a much larger margin to the left of the bullet, and less of a margin between the bullet and the list item. Is there a way to sort this out, or make the stylesheet browser-specific? (OK i'm really showing my stylesheet ignorance here!!)

Code snippet is posted below. Cheers.

from stylesheet:
.bulletList li

{
margin-bottom: 1.5em;

padding-left: 0.75em;
list-style-image:url(../images/hsdmini.jpg);
color: #547A98;

}

from page:

<table width="100%" >
<tr>
<td align="left">
<ul class="bulletList"><strong>
<li>Credit cards accepted</li>
<li>Cheques accepted</li>
<li>Delivery to europe</li>
<li>40,000 products in store!</li>
</strong>
</ul>
</td>
</tr>
</table>

OK, I'm back for another CSS lesson - this time on lists.

My site is designed with typical three-column layout. The left and right columns are floated and
the center column contains most of my content. Sometimes in the center column of a page I want
to include a list, either ordered or unordered. This page is a splendid example:
http://stallinswebdesign.com/vs/general_OfficersContactInfo.php.

I do not yet know how to manipulate the positioning of a list (and lots of other block-level things,
truth be told).

1. Can you share with me how to nudge this unordered list (with list-style-type set to none) to
the left a wee bit so that it lies about 1em to the right of that left border?

2. Can you share with me a CSS standards-based technique for marking up the first element of a
list so that it is left-adjusted and all of the following list elements are indented from it (and I
can adjust the amount of indentation), so the list looks like this:
Code:

My Team Euskaltel-Euskadi 2005 Orbea Orca is a kick-tail bike because
     every cyclist knows that orange and black are the fastest colors
     any bike that wins Frame of the Year and Bike of the Year is a winner
     the frame stiffness is top-shelf, and the power transfer is amazing

Or, if one can do that with semantic markup other than lists, please let me know.

Thank you all for looking; I appreciate your effort.

Hello,

I am a current beginner to the web design game, and I am currently making my first website using CSS. As you may already know, I am having difficulties rendering my web site in Internet Explorer 7/8. My two main problems a

1.) IE won't resize the font size that I need to display my navigation bar correctly

2.) IE is positioning my wrapper slightly left of center pushing my navigation list off the template

Here is a link to my page http://www.kyjocro.com/IAO/navproblem.html

Here is the HTML

HTML
Code:

<html>

<head>
	<title>Title</title>

<html xmlns="http://www.w3.org/1999/xhtml">

	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<link href="styletest.css" rel="stylesheet" type="text/css">
</head>

<body>



<div id="wrapper">
<div id="container">

<div id="top"></div>
<div id="bod">
	<div id="wrapHeader">
		<div class="headerLeft"></div>
		<div class="headerRight"><p>Call Now 888-467-6650</p></div>
	</div>
	
<div id="navWrap">
	<ul id="navigation">

	<li><a href="#"><span class="currentTab">Independent Agents Online</span></a></li>

	<li><a href="#"><span>Link</span></a>
	<ul>
	<li><a href="#">Sub-Link</a></li>
	<li><a href="#">Sub-Link</a></li>
	<li><a href="#">Sub-Link</a></li>
	<li><a href="#">Sub-Link</a></li>
	<li><a href="#">Sub-Link</a></li>
	<li><a href="#">Sub-Link</a></li>
	<li><a href="#">Sub-Link</a></li>
	<li><a href="#">Sub-Link</a></li>
	</ul>
	</li>

	<li><a href="#"><span>Link</span></a>
	<ul>
	<li><a href="#">Sub-Link</a></li>
	<li><a href="#">Sub-Link </a></li>
	<li><a href="#">Sub-Link</a></li>
	<li><a href="#">Sub-Link</a></li>
	<li><a href="#">Sub-Link</a></li>
	<li><a href="#">Sub-Link</a></li>
	<li><a href="#">Sub-Link</a></li>
	<li><a href="#">Sub-Link</a></li>
	</ul>
	</li>

	<li><a href="#"><span>Link</span></a>
	<ul>
	<li><a href="#">Sub-Link</a></li>
	<li><a href="#">Sub-Link</a></li>
	<li><a href="#">Sub-Link</a></li>
	</ul>
	</li>

	<li><a href="#"><span>Link</span></a>
	<ul>
	<li><a href="#">Sub-Link</a></li>
	<li><a href="#">Sub-Link</a></li>
	<li><a href="#">Sub-Link</a></li>
	<li><a href="#">Sub-Link</a></li>
	</ul>
	</li>

	<li><a href="#"><span>Link</span></a>
	<ul>
	<li><a href="#">Sub-Link</a></li>
	<li><a href="#">Sub-Link</a></li>
	<li><a href="#">Sub-Link</a></li>
	<li><a href="#">Sub-Link</a></li>
	<li><a href="#">Sub-Link</a></li>
	<li><a href="#">Sub-Link</a></li>
	<li><a href="#">Sub-Link</a></li>
	<li><a href="#">Sub-Link</a></li>
	</ul>
	</li>

	<li><a href="#"><span>Information & Insurance Resource Center</span></a>
	<ul>
	<li><a href="#">Sub-Link</a></li>
	<li><a href="#">Sub-Link</a></li>
	<li><a href="#">Sub-Link</a></li>
	<li><a href="#">Sub-Link</a></li>
	<li><a href="#">Sub-Link</a></li>
	<li><a href="#">Sub-Link</a></li>
	<li><a href="#">Sub-Link</a></li>
	<li><a href="#">Sub-Link</a></li>
	</ul>
	</li>


	<li><a href="#"><span>Link</span></a></li>

	</ul>
	</div>
	
	<div id="contentMain">
	<h2>Welcome to Independent Agents Online!</h2> 
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis ante volutpat nunc adipiscing at dictum orci mollis. Proin nec tincidunt urna. Phasellus placerat lorem at enim auctor nec imperdiet lectus tempor. Nullam arcu nisi, tristique in vestibulum et, suscipit at velit. Nunc ligula massa, fringilla laoreet pellentesque a, consequat at eros. Suspendisse sem justo, ultrices ac hendrerit eget, porttitor eget arcu. Cras volutpat accumsan odio ut cursus. Integer a ipsum at libero semper eleifend at ac mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ultrices, augue sed rhoncus auctor, ligula lorem rutrum enim, nec congue ipsum mi eu massa. Vestibulum imperdiet interdum sodales. Ut condimentum consequat fringilla. Proin vestibulum porttitor porta. Integer elit turpis, sodales lacinia blandit sed, egestas at augue. Vestibulum ut felis sed eros pharetra interdum nec ut sapien.</p>

	</div>

	
	<div id="wrapColumn">
		<div id="columnLeft">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis ante volutpat nunc adipiscing at dictum orci mollis. Proin nec tincidunt urna. Phasellus placerat lorem at enim auctor nec imperdiet lectus tempor. Nullam arcu nisi, tristique in vestibulum et, suscipit at velit. 
			<center><img src="images/handshake.jpg" width="150" height="150" alt="" border="0" /></center>
			
		</div>
		<div id="columnMid">
		
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis ante volutpat nunc adipiscing at dictum orci mollis. Proin nec tincidunt urna. Phasellus placerat lorem at enim auctor nec imperdiet lectus tempor. Nullam arcu nisi, tristique in vestibulum et, suscipit at velit. 
		</div>
		<div id="columnRight">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis ante volutpat nunc adipiscing at dictum orci mollis. Proin nec tincidunt urna. Phasellus placerat lorem at enim auctor nec imperdiet lectus tempor. Nullam arcu nisi, tristique in vestibulum et, suscipit at velit. Nunc ligula massa, fringilla laoreet pellentesque a, consequat at eros. Suspendisse sem justo, ultrices ac hendrerit eget, porttitor eget arcu. 
			
		</div>
	</div>

</div>
<div id="bottom"></div>
<div id="footer">Site Map LegalAbout Us</p></div>
</div>
</div> 


</body>
</html>

Here is the CSS http://www.kyjocro.com/IAO/styletest.css

Code:

body{ margin:0; padding:0; background: rgb(26,124,54); background-image:url(images/bg.png); background-repeat: repeat-x; text-align:center; /*IE POS Comp.*/}
h2{	font-family:Verdana, Arial, Helvetica, sans-serif;	font-size:18px;	color:#FF0000;	padding: 4px;	padding-left: 0px; text-align:center;}
img { border:none;}

/*Containers*/
#wrapper{margin:0 auto; padding:0; height:auto; display:block; background-image: url(images/bg.png) repeat-x;}
#container{ margin:0 auto; padding:0; width:960px; height:100%;}
#top{ margin:10px 0 0 0; padding:0; float:left; display:block; width:100%; height:22px; background-image:url(images/top.png); background-repeat:no-repeat; text-align:left;}
#bod{ margin:0; padding:0; float:left; display:block; width:100%; height:auto; background-image:url(images/bgc.png); background-repeat:repeat-y; text-align:left;}
#bottom{ margin:0; padding:0; float:left; display:block; width:100%; height:22px; background-image:url(images/bottom.png); background-repeat:no-repeat; text-align:left;}


/*Logo Header*/
#wrapHeader{margin:0px auto; width: 960px;	height:128px;	background: url(images/bgc.png) repeat-y;}
.headerLeft{width:566px;	float:left; background:url(images/logo.png) no-repeat; height:128px;}
.headerRight{width:382px;	float:left;	background:url(images/headerRight.jpg) no-repeat;	height:128px;}
.headerRight p{	font-family:"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;	font-size:24px;	color:#FF0000;	padding:60px 0 0 100px;}


/*Navigation Bar Code*/
#navWrap {margin: 0 auto;	width: 940px; font-size: 12px;}
#navigation {overflow: visible; font-size: 13px; font-family: verdana, arial, helvetica, sans-serif; padding:1px; width: 960px; margin: 0 auto; font-variant: small-caps; }
#navigation li { float: left; list-style: none; background-color: rgb(26,124,54);repeat-x; width: 115px; border: 1px solid black;}
#navigation a {display: block; background-position: top right; background-repeat: no-repeat; color: white; text-decoration: none; font-weight: bold; }
#navigation span {display: block; background: url(images/navbg.png) repeat-x; padding: 1px 0px; text-align: center; min-height: 50px; font-variant: small-caps; height: 50px;}
#navigation span.currentTab {background: url(images/navbghover.png) repeat-x; border-bottom:none;}
#navigation a:hover {background-position: right -198px; }
#navigation a:hover span {background-position: 0 -198px; background-color: red; background: url(images/navbghover.png) repeat-x; }
#navigation li ul {position: absolute; width: 115px; left: -999em; margin-left: -41px; font-size: 12px; color: black; font-weight: normal; font-variant: normal;}
#navigation li ul a, #navigation li ul a:link {background-image: none; padding: 2px 0px; width: 115px; background-color: rgb(173,204,239); color: black;}
#navigation li ul a:hover {background-color: rgb(128,187,150);}
#navigation li:hover ul, #navigation li.sfhover ul {left: auto;}
.contactBreak  p {line-height: 3px;}

  
/*Main Body*/
#contentMain {margin: 0px auto;	width: 960px; float: left; padding: 10px;}
#contentMain p {padding: 10px 30px; text-indent: 30px;}
#contentMain img {float: left; padding: 0px 10px;}
.getQuote {width: 200px; float:left; padding:5px; border: 1px solid black;}
.getInfo {width: 200px; float:left; padding:5px; border: 1px solid black;}
.getManage {width:200px; float:left; padding 5px; border: 1px solid black;}


/*COLUMN WRAPPER AND DIVS */

#wrapColumn{
overflow: auto;
float: left;
width:960px;
margin: 0px auto;
background-image: url(images/bgc.png);
}

#columnLeft {
border-top: 2px solid #046004;
padding: 10px;
margin-left: 10px;
width:230px;
float: left;
background-color:white;
min-height: 600px;
}

#columnMid {
border-top: 2px solid #046004;
padding: 10px;
width: 404px;
float: left;
background-color: white;
min-height: 600px;
}

#columnRight {
border-top: 2px solid #046004;
padding: 10px;
width:230px;
float: left;
background-color:white;
min-height: 600px;
}


/* Footer Copyright Legal*/
#footer {margin: 0 auto; display:inline-block;}

I realize that my drop down doesn't work in IE either, but that might be too complicated for me to understand at this point since I kind of frankensteined it from various examples.

Much thanks in advance