help with navigation!!!

[olibar]

Hello, I have been working on this site, but one little problem stops to complete it.
Fist I have to say that all work ok in Firefox, it is IE where the problem manifest.
I am planning to have three different styles to offer, and the navigation for it causes the main content to crop when the mouse pointer is over the links. The links to switch the styles are three blue small squares. Now, to bring the main content back, the mouse just needs to go over the options and only these options: house and hardware.

http://www2.bc.edu/~olibar/web3dnews/

This is the css code involved in the sections described above:

/* Styles navigation */
ul#styleNav {
	float:right;
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}
ul#styleNav li{
	float: left;
	width: 20px;
	height: 15;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFF;
}
ul#styleNav a {
	background-image: url(switcherB.gif);
	background-repeat: no-repeat;
	display: block;
	text-decoration: none;
	color: #FFF;
	background-position: 4px 3px;
}

ul#style nav a:link {
	background-image: url(switcherB.gif);
	background-repeat: no-repeat;
	background-position: 4px 3px;
	
}
ul#styleNav a:hover {
	background-image: url(switcherOverB.gif);
	background-repeat: no-repeat;
	background-position: 4px 2px;
}
ul#styleNav span {
	visibility: hidden;
}
ul#mNav li{
	float: left;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 17px;
	color: #FFF;
}
ul#mNav span{
		visibility: hidden;
}
ul#mNav li#home a{
	position:relative;
	height:36px;
	width:65px;
	background-image: url(homeB.jpg);
	background-repeat: no-repeat;
	display: block;
	background-position: 3px;
	text-decoration:none;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #E0DA1B;
}
ul#mNav li#home a:link{
	background-image: url(homeB.jpg);
	background-repeat: no-repeat;
}
ul#mNav li#home a:hover{
	background-image: url(homeOverB.jpg);
	background-repeat: no-repeat;
	background-position: 2px;
}
ul#mNav li#hardware a{
	height:36px;
	width:108px;
	background-image: url(hardwareB.jpg);
	background-repeat: no-repeat;
	background-position: 1px;
	display: block;
	text-decoration:none;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #E0DA1B;
}
ul#mNav li#hardware a:link{
	background-image: url(hardwareB.jpg);
	background-repeat: no-repeat;
}
ul#mNav li#hardware a:hover{
	background-image: url(hardwareOverB.jpg);
	background-repeat: no-repeat;
	background-position: -1px;
}

Thank your very much

[Paul O'B]

Hi,

Sounds like the position:relative bug

Add position relative to your global id.

#global{
 width:725px;
 padding:0px;
 margin:0px auto;
 text-align:center;
 position:relative;
}

That should do the trick

Paul

[olibar]

hello Paul, I tried the position relative rule but it did not work, still does the cropping.

Is there something else I can do?
And is IE the problem or my css rules? ( Wondering why it does not do the same in Firefox )

Thank you.
Ramiro

Hi,

Sounds like the position:relative bug

Add position relative to your global id.

#global{
 width:725px;
 padding:0px;
 margin:0px auto;
 text-align:center;
 position:relative;
}

That should do the trick

Paul

[physt]

I had this problem 2...never found a way to fix it and ended up altering the design..if you can help him id appreciate it!

[Paul O'B]

Sorry I picked the wrong element.

Just add it to this one and not the one I mentioned above.

#leftContent{
 background-color: #FFF;
 margin: 0px;
 padding: 0px;
 float: left;
 height: 100%;
 width: 485px;
 border-top-width: 2px;
 border-top-style: solid;
 border-top-color: #333333;
 position:relative;
}

I should have tested the first one but I knew it was the position:relative bug.

Its a common problem with ie and its called the peek-a-boo bug and the fix is to add position:relative to one of the elements in question or ro the elements parent. Sometimes you have to follow through from parent to child.

Its most common on floats (and images) and floats with negative margins but does crop up in odd places.

The above should sort it now

Paul

[Paul O'B]

I had this problem 2...never found a way to fix it and ended up altering the design..if you can help him id appreciate it!

I can fix anything Show me your code and I'll fix it for you

Paul

(hope I can fix it now I've said that)

[olibar]

Thank you Paul, it worked.
I always learn something new when you help me.



Ramiro

Sorry I picked the wrong element.

Just add it to this one and not the one I mentioned above.

#leftContent{
 background-color: #FFF;
 margin: 0px;
 padding: 0px;
 float: left;
 height: 100%;
 width: 485px;
 border-top-width: 2px;
 border-top-style: solid;
 border-top-color: #333333;
 position:relative;
}

I should have tested the first one but I knew it was the position:relative bug.

Its a common problem with ie and its called the peek-a-boo bug and the fix is to add position:relative to one of the elements in question or ro the elements parent. Sometimes you have to follow through from parent to child.

Its most common on floats (and images) and floats with negative margins but does crop up in odd places.

The above should sort it now

Paul

[olibar]

Well, the position: relative rule solved the cropping problem, but as a side effect
it removed the background image (a black and grey horizontal line on top below the date ) and the background of the post content (light grey) resizes in a weird way when I scroll down.

Ramiro

Sorry I picked the wrong element.

Just add it to this one and not the one I mentioned above.

#leftContent{
 background-color: #FFF;
 margin: 0px;
 padding: 0px;
 float: left;
 height: 100%;
 width: 485px;
 border-top-width: 2px;
 border-top-style: solid;
 border-top-color: #333333;
 position:relative;
}

I should have tested the first one but I knew it was the position:relative bug.

Its a common problem with ie and its called the peek-a-boo bug and the fix is to add position:relative to one of the elements in question or ro the elements parent. Sometimes you have to follow through from parent to child.

Its most common on floats (and images) and floats with negative margins but does crop up in odd places.

The above should sort it now

Paul

[Paul O'B]

Hi,

Sometimes you have to follow through from parent to child.

Being unfamiliar with your design I'm sorry that i didn't notice the image was missing. However the answer is still the same.

You need to add position:relative here also.

.post {position:relative}

Ie especially likes children of positioned elements to have a position defined also.

Hopefully that will be the last of the problems but if you see any more just shout

paul

[olibar]

Thank you very much, it worked. Next time into this problem I'll know what to do.
And I can also help others.

Ramiro

Hi,

Being unfamiliar with your design I'm sorry that i didn't notice the image was missing. However the answer is still the same.

You need to add position:relative here also.

.post {position:relative}

Ie especially likes children of positioned elements to have a position defined also.

Hopefully that will be the last of the problems but if you see any more just shout

paul