...

View Full Version : Navigation Collapsing



dameonjamie
04-13-2009, 08:43 AM
I'm having a bit of trouble in IE with my navigation bar at the bottom of a web page i just created. Works ok in FF

Page is here:
http://www.villamoderncyprus.com/

CSS is Here:
http://www.villamoderncyprus.com/css/styles.css

You can see (In IE) when you hover over the nav at the bottom of the page it collapses. I can't see what I'm doing wrong.

Thanks for your help!

abduraooft
04-13-2009, 12:04 PM
Validate and fix the errors in your markup first, see http://validator.w3.org/check?uri=http%3A%2F%2Fwww.villamoderncyprus.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

dameonjamie
04-13-2009, 12:28 PM
abduraooft said:


Validate and fix the errors in your markup first...

Thanks for your reply. Ok I did that:

Validate (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.villamoderncyprus.com%2F&charset=(detect+automatically)&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.654)

Problem is still occurring in IE.

abduraooft
04-13-2009, 12:48 PM
Alright! now try

#Navigation2 {
text-align: center;
margin-top: 1em;
margin-right: 0em;
margin-bottom: 2em;
margin-left: 0em;
padding: 0em;
}
#Navigation2 ul {
margin: 0px;
padding: 0px;
border: 1px solid #D4D9F7;
background-color: #191F44;
}

PS: Here is a bbcode tip for you

abduraooft said:

Validate and fix the errors in your markup first...

http://www.codingforums.com/showpost.php?p=795746&postcount=5

dameonjamie
04-13-2009, 01:00 PM
#Navigation2 {
text-align: center;
margin-top: 1em;
margin-right: 0em;
margin-bottom: 2em;
margin-left: 0em;
padding: 0em;
}
#Navigation2 ul {
margin: 0px;
padding: 0px;
border: 1px solid #D4D9F7;
background-color: #191F44;
}

Ok! Thank you!

That's works in IE and FF.

I don't understand why...I don't have those properties on
Navigation1 ul

Would you let me know why this works and why what I had does not.

:)

abduraooft
04-13-2009, 04:03 PM
Well, that's the collapsible margin peekaboo box model issue ... Lol

Really don't know the reason, but it came accidentally to my attention that, when I add a border around that #Navigation2 ul (which is my favourite debugging technique), it becomes OK. So, I just moved that border (and background, to keep the look and feel) from the #Navigation2 to this one. :thumbsup:

dameonjamie
04-13-2009, 05:00 PM
Thank you abduraooft.
You are certainly a Master Coder.

I will use this whenever it is called for.

btw...I have another site that has this same sort of layout but it never gave me the same problem...if you're curious have a look at:

http://www.paperpossibilities.com.au/



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum