View Full Version : IE6 and Firefox - 3 problems

May 3rd, 2010, 04:09 PM
Hi there - I am encountering three problems with the site I am working on...I am considering myself a novice in CSS so hopefully these are easy fixes!


Issue 1:
In IE 6, the positioning of the rotating content should be right underneath the navigation bar...instead there is a space, and when the menu drops down, it increases the space even more. The positioning and drop down menu is functioning correctly in Firefox.

Issue 2:
I was able to get a blue border around the navigation headings in Firefox...when I attempt this for IE6, the alignment goes wonky.

Issue 3:
The rotating centre image is pushed a bit far down in Firefox...this time it looks fine in IE6.

Any help would be greatly appreciated!

May 4th, 2010, 09:41 AM
Always validate and fix all the errors in your markup before asking for help here, see http://validator.w3.org/check?uri=http://www.ladyluxeinvitations.com/burl/index2.html

May 4th, 2010, 03:05 PM
Thanks abduraooft - I have validated and corrected all of the errors. Sorry about that.

May 4th, 2010, 05:18 PM
Guess I should have mentioned that I am still having the same issues...
Thanks again.

May 5th, 2010, 03:04 PM
Okay, I have fixed Issue 3...my major concern now is how the dropdown menu pushes the content down in IE...everything is working out nicely in Firefox.


May 6th, 2010, 05:19 PM
I've made a few more adjustments and re-validated...
can anyone assist with the two remaining issues - the jumping content in IE and the inability to put a border around the nav buttons in IE?
Thanks so much!

May 7th, 2010, 10:15 AM
Try removing the two <br> tags in between menuWrapper and contentWrapper. After that change your CSS to

width: 931px;
margin: 0 auto;
padding-left: 28px;
/* padding-top: 20px; */
margin-top: 20px;
width: 920px;
padding: 0px;
margin: 0px 30px 0 38px;
padding: 0px;
padding-left: 10px;
padding-top: 10px;


May 18th, 2010, 04:46 PM
Thank you so much! That worked great! :thumbsup:

Now the only issue is the border around the nav buttons in IE6...still not able to make them blue...

May 18th, 2010, 05:11 PM
#menu li a{
border:1px solid #003479;
#menu li div a{
#menu .lrga{width:182px;}
#menu .lrgb{width:193px;}
#menu .lrgc{width:108px;}
#menu .meda{width:105px;}
#menu .medb{width:99px;}
#menu .medc{width:98px;}

PS: Apply all the styles to the drop down elements, required at the time of their their display in their normal CSS selectors (and not inside any :hovers). The only thing you need to specify in the :hover selector would be a display:block; or a few such properties. In that way, you could simplify the things considerably!

For example, your code
#menu .one:hover div{width:184px;}
#menu .two:hover div{width:368px;}
#menu .three:hover div{width:552px;}
#menu .four:hover div{width:736px;}
#menu .five:hover div{width:931px;} can be replaced with the following

#menu .one div{width:184px;}
#menu .two div{width:368px;}
#menu .three div{width:552px;}
#menu .four div{width:736px;}
#menu .five div{width:931px;}

May 18th, 2010, 08:30 PM
Gulp...I feel like I'm making a mess of things now...I managed to get the border appearing in IE6 but now I have a number of issues...please see attached image.



May 20th, 2010, 04:41 PM
Wasn't sure if I should start a new thread or not...but apart from my issues mentioned in my last post, I was wondering if there is a way to add a delay on the hover using CSS to ensure that the menu doesn't disappear when the user moves the mouse diagonally from the menu item to one of the subitems. For example, if they are hovering over Enjoying Burlington and want to go to Fast Facts...currently they need to move the mouse down in to the panel and the move to the right...as opposed to moving straight to Fast Facts on a diagonal line.

May 21st, 2010, 09:31 AM
Hey lk19

How did you sort out the menu pushing down content? Im having a similar problem in IE6.


May 21st, 2010, 10:10 AM
Hey lk19

How did you sort out the menu pushing down content? Im having a similar problem in IE6.

Cheers It might be better for you to start a new thread and provide much more details, like your code or a link to your page.