Cross Browser Compatibility HELP!

Hey Guys, hopefully someone can help me out. Having a bunch of problems in ie6 and ie7 and I don’t know where to start fixing. http://revolveclothing.com/html/b/3.0/slide_show_test.html

This is the site, I’ve validated all the HTML and CSS. Just need to know what the next steps are.

Any help is appreciated. Let me know if you need anything else from me.

Whew, that page had some nasty bugs in it ;).

#wrap{height:auto;}
#footer_wrap div#footer_inner ul{margin:0}
.subnav{position:absolute;}
#copyright{clear:both;}

THe position:absolute; there is more of a quick fix. You position your subneav using floats and as a result it breaks the layout of the menu.

You’d need to use position:absolute and then I’m guessing you want it like a regular dropdown? Hide it via a margin-left:-999em an dthen on hover bring it back to 0 to show it :slight_smile:

I made the changes and nothing happened…

Got the footer looking ok, but there is some extra spacing above it and the top nav is still being pushed into 2 lines…

Well if nothing happened then you are seeing a cached version of the page. The code I gave you makes the page perfect.

Every issue you just said is fixed by my code. THe nav is because of the .subnav which I explained.

The footer is fixed in my code as well

If I say something fixes it then (not to sound rude) it works ;).

I removed the subnav completely for the meanwhile so I can get the main nav fixed. Do you know why the main nav’s to last buttons are still being pushed to another line in ie6?

also do you know what would be causing that extra spacing between the footer and bottom content?

Again, the navigation issue and everything else is solved with my code.

Put the subnav back and add my code. If you say it still isn’t working then leave the page be and I’ll see what went wrong (Though I can show you my local copy that is working :))

Do you know how I would get rid of the extra spacing at the bottom of the page, above the footer?

#footer_gradient {

    width: 990px;

    background: url(../images/bottom_gradient.jpg) no-repeat;

    height: 87px;

    float: left;

    display: inline;

}




<div id="footer_gradient"></div>


The above needs to be removed from your HTML and CSS.

I need that bottom gradient image, how can I still use it??

Apply it to a differnet element :). Make the most use out of your elements that you can.
I’m leaving now for a couple hours but hopefully that should point you in the right direction.

You could consider absolute positioning it if you need it :slight_smile:

You can apply it to #inner_wrap.

Something like…


#inner_wrap {
   background:url(mygradient.png) repeat-x bottom;
   padding-bottom:84px; /* whatever value you need to make the gradient show */
}

I applied it the way you suggested and now it is visible in ie6 but not firefox…

I think it’s displaying but on top behind the top nav…

I can hardly see the gradient on my screen so it’s difficult for me to debug.

Add “clear:both;” to your #inner_wrap and see if that works.

no, it didn’t work. In firefox there isn’t even a space for it, the bottom content is flush with the footer. But in ie it look’s fine

Ok then, you can remove the clear:both. Instead contain the floats by adding “overflow:hidden” to your #inner_wrap. That should work.

Hey Guys, thanks for everything. Got everything looking pretty good. I’m working my way down the site.

I need help on the main feature slideshow. - http://revolveclothing.com/html/b/3.0/source_test/slide_show_test.html ie6 is moving the text around on the main features bottom nav. Any help is appreciated.

Need Help… Ie6 is displaying the features bottom nav all screwed up…

http://revolveclothing.com/html/b/3.0/source_test/slide_show_test.html