[coljung]

Hi there, well as i said i need some help from any CSS gurus.

I've been using the Trifecta rollever code ever since i found it in almost every page i've done. Just this week i found out that for some reason in IE when i use the vertical version of it, there's a 3px margin above the menu. I've tried changing every setting and resetting most elements margins, padding, and borders to 0 to no avail. I keep getting that ugly 3px margin.

Here's the latest example:

Example

You'll see the problem in the left and right hand menus, under Bussiness and under Client Zone, in both, the distance between the image and the first menu item should be zero. But IE shows an ugly 3 px margin ( btw, in the Bussiness side there's a bigger margin because i set it like that, but still there's an extra 3px..).

Here's the code used which is the exact code i took from the web and i just adapt it whenever.
This is from the menu on the right ( CLient Zone ), if you check it under IE, be it version 6 or 7 you'll see a 3 px margin on top of the menu...

#menu2{
			margin-bottom:6px;
			padding:0;
			border:0;
		}
		
		
		/* NAVIGATION BUTTONS 2*/
			.cssnav2	{
						position:relative;
						font-family: arial, helvetica, sans-serif;
						background-image:  url(../images/menus/menu2_on_1.gif);
						background-repeat: no-repeat;
						white-space: nowrap;
						display: block;
						width: 165px;
						height: 28px;
						margin: 0; 
						padding: 0; 
			}
			.cssnav2 a {
						display: block;
						color: #000000;
						font-size: 11px;
						width: 165px;
						height: 28px;
						display: block;
						float: left;
						color: black; 
						text-decoration: none;
			}

			.cssnav2 img {width: 165px; height: 28px; border: 0; }
			* html a:hover {visibility:visible}
			.cssnav2 a:hover img{visibility:hidden}

			.cssnav2 span {
						position: absolute;
						left: 40px;
						top: 0;
						line-height:28px;
						margin: 0px;
						padding: 0px;
						cursor: pointer;
						width: 118px;
						height: 28px;
						text-align: left;
						color:#646565;
						font-family:Arial, Helvetica, sans-serif;
			}

Thanks for any help.

[Advertisements]

It may be related to IE's 3-pixel Bug.

Ron

[Major Payne]

It may be related to IE's 3-pixel Bug.

Ron

[coljung]

thanks !!

although i dont know if it applies in this case because first im not using floats and secondly that bug is supposed to be gone in IE 7.

I'll give it a try anyways.

[Major Payne]

It's just a shot of a suggestion until I can look at your code in more depth. Sometimes the addition of the Universal Selector
at the very beginning of your CSS will clear problems up:


* { margin: 0; padding: 0; border: 0; }


This will set everything to zero in all browsers and allow only your styling to take effect.


Ron

Edited by Major Payne, 23 February 2008 - 08:08 PM.

[Major Payne]

One very minor CSS code problem: body Value Error : color 646565 is not a color value : 646565

You must have gotten your problem fixed as I've been switching between Firefox and IE from the top of your page to the both and didn't notice but the usual shift because of font size differences. Margins for your menus are as close to identical as possible that I can tell.

BTW, glad to see a well made page with no coding problems in HTML and CSS (except for one noted above). You could use JavaScript to embed the flash file and eliminate the "error" by validator for the embed tag. Also, there is no closing embed tag (</embed>.

Ron