PDA

View Full Version : IE vs FireFox Menu problems



RHemrich
Jan 21st, 2009, 06:45 PM
I’m having a issue with alignment between IE and FireFox in my horizontal menu, pretty simple unordered list set up. Below is snippets of the code and pics of the issues.

example of IE(what it should look like):
http://img88.imageshack.us/img88/2537/iemenukf4.jpg

example of FireFox:
http://img132.imageshack.us/img132/8125/firefoxmenuby8.jpg


Html snippet:
<div id="BannerButtons">

<ul id="Bannerul">
<li><a href="Default.aspx">Home</a></li>
<li><a href="AboutUs.aspx">About US</a></li>
<li><a href="Download.aspx">Download/Print</a></li>
<li><a href="Contacts.aspx">Contacts</a></li>
</ul>

</div>

CSS snippet:
#BannerButtons
{
height: 25px;
background-color: #5D6162;
}
#Bannerul{
list-style-type: none;
font-family: Tahoma;
text-align: center;
font-size: 12px;
float:right;
margin-right:60px;
}

#Bannerul a{
width:90px;
color:white;
display:block;
padding-top:7px;
text-decoration:none;
font-size:x-small;
}

#Bannerul li:hover{
background-position:0px -25px;
}

#Bannerul li:active{
background-position:0px -50px;
}

#Bannerul li{
display:inline;
float: left;
background-image: url('images/topButton.jpg');
background-repeat: no-repeat;
height:25px;
}

I've been beating my head over this for quite some time now and any help would be greatly appreciated

Rowsdower!
Jan 21st, 2009, 09:47 PM
Hello and welcome to the forums. First off, let me give you the advice that I have heard time and time again:

Design/debug in FF, then tweak settings to make it work in IE.

Another popular choice in addition to the above is to start out with this at the VERY TOP of your CSS:
* {border:0;margin:0;padding:0;}

This is called a universal reset, I believe. What it does is remove all default padding, borders, and margins that different browsers add to pages on their own. Basically, it gives them all the same starting point and you can design from there.

In this case I suspect IE's divergent method of handling padding and borders may be at the root of your problem. Most browsers take an element's size and make padding and borders fit INTO those dimensions. IE takes that element and then adds padding and margins AROUND the element. People argue in favor of either method, but the point is that they aren't handled the same way by IE as they are by most all other browsers (which is why you tweak for IE instead of design with IE in mind). Tweaking generally entails using conditional statements in the HTML to bring in a few extra CSS declarations from a secondary external CSS file. Your IE-only CSS file should be much, much shorter than the main CSS file since it will usually only need to change margins/padding on a few select items.

If you want to see how your page looks cross-browser and cross-platform then once you have it posted on the web you can check it out for free here (http://browsershots.org/).

As for fixing your specific problem, it's pretty hard for us to do with just samples of code. Please either post your full code or better still, post a live link to what you are working with. That way we can see and work with the images involved in your project.

You can get free hosting for small projects here (http://www.webs.com/), if you need it.

RHemrich
Jan 21st, 2009, 11:05 PM
thanks Rowsdower, that fixed the problem... and yeah i've started debuging in FF.

Rowsdower!
Jan 22nd, 2009, 01:26 PM
Glad I could help. Good luck with your web development!