Jump to content

Welcome to Geeks to Go - Register now for FREE

Geeks To Go is a helpful hub, where thousands of volunteer geeks quickly serve friendly answers and support. Check out the forums and get free advice from the experts. Register now to gain access to all of our features, it's FREE and only takes one minute. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, post status updates, manage your profile and so much more.

Create Account How it Works
Photo

Help from CSS gurus


  • Please log in to reply

#1
coljung

coljung

    Member

  • Member
  • PipPip
  • 47 posts
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.
  • 0

Advertisements


#2
Major Payne

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
It may be related to IE's 3-pixel Bug.

Ron
  • 0

#3
coljung

coljung

    Member

  • Topic Starter
  • Member
  • PipPip
  • 47 posts
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.
  • 0

#4
Major Payne

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
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.

  • 0

#5
Major Payne

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
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
  • 0






Similar Topics

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP