1.
Originally Posted by
kuroi
This seems to me to be most likely because you have a sprinkling of <p></p> (and occasionally <div></div>) pairs being generated and included in your HTML. This is not normal, so I can't tell you where they are coming from, but for example, a couple appear just above your breadcrumbs. When they appear FF and IE treat them differently. FF recognises that they are empty tags that in its view shouldn't be there and strips them out. IE treats them with more respect and gives them each the height that would be given to normal content if it existed.
That's great! I was able to track down the problem. The code for the dropdowns was actually enveloped in paragraph code. Removed it and IE and firefox look near similar in regards to the spacing. amazing! thank you.
2.
Originally Posted by
kuroi
You don't say whether you had "positioned" the sidebox container. z-indices only work on positioned elements. BTW, your javascript declaration looks faulty to me. "<script type="text/javascript">" would be more normal, though this doesn't seem to be causing any obvious problems.
This is still not fixed unfortunately...I am looking at the dropdowns styling and noticing that some of the styles have z-indices but no positioning. I am thinking this may be thee problem but I don't have a clue how to resolve it...
hoping that if I post the styles you or someone can give me some direction...
Code:
#nav { color: #fff; font-size: 10px; font-weight: bold; line-height: 1px; background-color: #000; list-style-type: none; list-style-position: outside; margin: -1px 0 0; padding: 0; position: relative; z-index: 1000; top: 0; width: 800px; height: 15px; border-top: 1px solid #000000; border-bottom: 1px solid #000000 }
#nav ul { color: #fff; font-size: 10px; line-height: 1px; background-color: #000; text-align: center; list-style: none; margin: 0; padding: 0; position: relative; z-index: 1000 }
#nav a { color: #fff; font-size: 10px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; font-weight: bold; line-height: 140%; background-color: #000; text-decoration: none; text-align: center; display: block; z-index: 1000; width: auto; height: auto }
#nav a:link, #nav a:visited, #nav a:active { color: #fff; background-color: #000; z-index: 1000 }
#nav a:hover, #nav a:focus { color: #000; background-color: #9A7664; z-index: 1000 }
#nav li { text-align: left; z-index: 1000; width: 160px; float: left }
#nav li ul { background-color: #fff; position: absolute; z-index: 1000; left: -999em; width: 159px; border-top: 1px solid #000000; border-right: 1px solid #000000; border-left: 1px solid #000000 }
#nav li ul.leftside { background-color: #fff; margin-left: -1px; position: absolute; z-index: 1000; left: -999em; width: 159px; border-top: 1px solid #000000; border-right: 1px solid #000000; border-left: 1px solid #000000 }
#nav li ul.rightside { background-color: #fff; margin-left: 1px; position: absolute; z-index: 1000; left: -999em; width: 159px; border-top: 1px solid #000000; border-right: 1px solid #000000; border-left: 1px solid #000000 }
#nav li ul li { background-color: #fff; z-index: 1000; width: 159px; border-bottom: 1px solid #000000 }
#nav li ul li a:hover { z-index: 1000; border-style: none }
#nav li:hover ul, #nav li.sfhover ul { z-index: 1000; left: auto }
#nav li ul ul { margin: -16px 0 0 158px; position: absolute; z-index: 1000 }
#nav li ul ul.two_lines { margin: -31px 0 0 158px; position: absolute; z-index: 1000 }
#nav li ul ul.left_popout { margin: -31px 0 0 -158px; position: absolute; z-index: 1000 }
#nav li:hover ul ul, #nav li.sfhover ul ul { z-index: 1000; left: -999em }
#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul { z-index: 1000; left: auto }
/* extra positioning rules for limited noscript keyboard accessibility */
#nav li a:focus + ul { margin-left: 0; z-index: 1000 }
#nav li li a:focus + ul { margin-left: 200px; z-index: 1000 }
#nav li li a:focus { color: #9A7664; background: #000; margin-left: 1000em; z-index: 1000 }
#nav li li li a:focus { color: #fff; background: #000; margin-left: 200px; z-index: 1000 }
#nav li:hover a:focus, #nav li.sfhover a.sffocus { color: #9A7664; background-color: #000; margin-left: 0; z-index: 1000 }
#nav li li:hover a:focus + ul, #nav li li.sfhover a.sffocus + ul { color: #9A7664; background-color: #000; margin-left: 10em; z-index: 1000 }
I am thinking that it might be in the "extra positioning rules" where there's a problem. I think those are included for IE compatibility. Any ideas?
3.
Originally Posted by
kuroi
You can achieve this by forcing IE to calculate a height for the container. Do this by adding the styling in red below to your CSS
Again, amazing! Worked perfectly.
Thank you so much...
If I could just get that dropdown styling set up properly now.... :)
Bookmarks