Div position problem

HTML & CSS
1

I am trying to position a div within a within a <li>. It should produce a navigation with a drop down menu. I am using jquery to dynamically show or hide the div.

I got it working fine but I have a problem that is driving me crazy. In my css i have this:


ul#menu li.subMenu div {
	border: 1px solid #fff;
	width: 130px;
	position: absolute;
	top: 15px;
	left: 0px;
	padding: 0px;
	background: #ccc;
	color: #FFF;
}

Using this code, my div displays as it should, exactly where I want it. However, in IE8, the div is about 5 pixels above where I want it to display. I think the problems lies with (top: 15px;). I know that IE and FF and Chrome all can render differently but how can I fix this? I have trawled through the net and tried different solutions, none have worked.

Anyone got a possible way to fix it?

Cheers

2

Hard to say in isolation. Posting all HTML and CSS may help.

3

Or maybe just post the link so we can see it ourself and help you!

4

Either a link, or all your code. Including doctype. And what do IE6/7 do?

Turn Javascript off. Does the problem persist? Then we know we can ignore your Javascript and focus on the CSS. Otherwise, if the only problem exists when Javascript is enabled, then Javascript is the problem and this belongs over in the Javascript forum.

I am using jquery to dynamically show or hide the div.

Just curious: why?