4 replies [Last post]
adventurex
adventurex's picture
Offline
newbie
Last seen: 16 years 7 weeks ago
Joined: 2003-09-24
Posts: 10
Points: 0

Hi,

I'm trying to move over from table to pure CSS based navigation menu system. But the problem I'm facing is that the line height is rendered correctly in Firebird but not in IE [6 sp1].

Can anyone point out what I'm mising ? I'm attaching both css and html file alongwith the post.

Thanks

blakems
blakems's picture
Offline
Enthusiast
UTah, USA
Last seen: 16 years 31 weeks ago
UTah, USA
Timezone: GMT-7
Joined: 2003-04-07
Posts: 60
Points: 0

Navigation menu line height problem

Remove the <?xml version="1.0" encoding="UTF-8"?> in your code at the top.
This makes IE render a page in quirks mode.
You can define the character set encoding in a meta tag instead, Example:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Let me know if this helps

-bMs-
http//www.blakems.com !important;

adventurex
adventurex's picture
Offline
newbie
Last seen: 16 years 7 weeks ago
Joined: 2003-09-24
Posts: 10
Points: 0

Navigation menu line height problem

Thanks blakems, tried that but of no use. Rendering is the same in IE. Anywayz trying something new for the problem. thanks anywayz.

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 16 years 2 days ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

Navigation menu line height problem

I had a similar problem - I used 'height' instead and it worked in both IE6 and Firebird

Regards
Day

The only way to learn is to do it yourself

adventurex
adventurex's picture
Offline
newbie
Last seen: 16 years 7 weeks ago
Joined: 2003-09-24
Posts: 10
Points: 0

Navigation menu line height problem

I tried height also but it looked little awkward. The workaround I found was to limit the width of <li> less then that of the container and giving a bottom border which has same color as the background color. And it worked. Here is what the css code looks now:

#navcontainer
{
	position: absolute;	
	float: left;
	width: 183px;
	top: 83px;
	height: 100%;
	margin: 0;
	font-family: Verdana, Lucida, Geneva, sans-serif;
	font-size: 10px;
	color: #333;
}

#navcontainer ul
{
	width: 159px;
	list-style: none;
	margin: 0;
	padding-left: .8em;
	border: none;
}

#navcontainer li
{
	display: block;
	width: 100%;
	border-bottom: 1px solid #E6E6E6;
	border-width: auto;
	margin: 0;
}

Although there are some issues regarding the width in IE & Firebird, so for that using 2 different CSS is the best method untill a more appropriate solution is found.

thanks