• Locked
1 reply [Last post]
Fri, 2010-08-13 23:32
rgurdwara
rgurdwara's picture
User offline. Last seen 1 year 40 weeks ago. Offline
newbie
Timezone: GMT-7
Joined: 2009-10-19
Posts: 7
Points: 9

Hello once again,

I'm still very new to the forum and still not all that great with CSS yet. I'm slowly making the move from tables to CSS but in small strides. I've got a sample page set up as an example to show you the problem I'm having so rather than post all the code here, perhaps someone with more knowledge than me can have a look at this and tell me what I have done wrong:

http://members.shaw.ca/frustration/

On this test page, you'll see a vertical CSS "LI" navigation section in the left hand sidebar (Home, On To Page 2, On To Page 3, etc.) - nothing fancy and it works great in every Mac browser I try it on (very latest Mac versions of Opera, Firefox, Safari, Chrome, Camino, Omniweb, etc.). You'll notice a white, 1-pixel horizontal spacer/separator between each link in the left sidebar which is supposed to be 220 pixels wide. It is 220 pixels wide on all the Mac browsers I try it on but for some reason, as soon as I try the web page in IE 7 or IE 8 (haven't tried IE 6 but I would imagine it is much the same if it even works at all), the white horizontal 1-pixel divider line is much shorter and nowhere close to 220 pixels wide. It ends up being only 195 pixels wide and throws the whole, nice and "even" look off.

Talk about frustrating. If I didn't have to work with IE, I think I'd be doing everything in CSS by now. Can anyone offer any insight as to what the fix may be or what I've done wrong? I'm just lost on this one.

Thanks so much,
Raj

Top
Tags:
Fri, 2010-08-13 23:47
#1
rgurdwara
rgurdwara's picture
User offline. Last seen 1 year 40 weeks ago. Offline
newbie
Timezone: GMT-7
Joined: 2009-10-19
Posts: 7
Points: 9

Sorry, I should have posted

Sorry, I should have posted the code here for the LI navigation. Here it is:

#navlist  {
	padding-left: 25px;
	margin-left: 0;
	width: 220px;
}
#navlist li  {
	list-style: none;
	margin: 0;
	padding: 0.25em;
	border-top: 1px solid white;
}
#navlist li a  {
	background: transparent url(../images/list_off.gif) left center no-repeat;
	padding-left: 15px;
	text-align: left;
	font-family: Arial, Helvetica, Verdana, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #277eb1;
	text-decoration: none;
	line-height: 30px;
}
#navcontainer ul li a:hover  {
	background: transparent url(../images/list_on.gif) left center no-repeat;
	color: #da251c;
}
#navcontainer ul li a#current  {
	background: transparent url(../images/list_active.gif) left center no-repeat;
	color: #999999;
}

Thanks so much,
Raj

Top
  • Locked