CSS Border not displaying in Firefox?

Hi there,
I have this page working perfectly in IE6...

http://www.uviewholidays.com/html/template.php

However, in Firefox, for some reason the menu is messed up and the border is missing.

I'm considering using a stylesheet for Firefox and a stylesheet for IE6 since that seems to be the best way at present.

Never the less, I can't figure what's stopping the red border from showing in Firefox?

Thanks in advance,

Chris Evans

Okay you should be using an unordererd list for your menu, but w/e. In body CSS, where you declared the height 100% you have to delcare the height of the html element as well.
html,body {
height: 100%;

text-align: center;

margin: 0px;
padding:0;

font-family: arial, helvetica, sans-serif;
}
as far as the menu goes, try decreasing the font-size for that div it seems that its wider than than the header with your last link in there.

Hi there,
Thanks for the reply. :) I've now fixed the height - however I don't understand what you mean by:


you should be using an unordererd list for your menu


Could you explain please?

Thanks,

Chris Evans

He means you should do something like this -

CSS -

.menu {
list-style-image: url(http://www.uviewholidays.com/images/menu/arrow.jpg);
}

In your HTML -

<ul class="menu">
<li>Home</li>
<li>Destinations</li>
<li>Flights</li>
</ul>

Hi,
Well it's done - and it works locally in IE but not on the web for me... does it work for you? It works fine in FF.

By this I mean the arrows aren't showing...

http://www.uviewholidays.com/html/template.php

Thanks,

Chris

I can see the arrows fine in IE6.

The best way to enter url's in CSS is to not enter in a " or a '.

So try changing -

list-style-image: url('../images/menu/arrow.jpg');

To -

list-style-image: url(../images/menu/arrow.jpg);

Ok got it!

That's that one sorted.

And for whatever reason - it's sorted the red border too! :)

Last problem with this page so far then is that in Firefox - the bottom part of the menu sits just to the right of the menu header - whereas in IE it sits correctly.. any ideas on that?

Thanks,

Chris

I can see the arrows fine in IE6.

The best way to enter url's in CSS is to not enter in a " or a '.

So try changing -

list-style-image: url('../images/menu/arrow.jpg');

To -

list-style-image: url(../images/menu/arrow.jpg);

Sorry - didn't see your post there - it's working now... turned out to be I think the fact I used width in the class - so I seperated it out into two.

Haven't tried, but you may want to try add a slightly larger left margin to the menuLISTCONTENT div. It only seems to be a couple of pixels out so try 20px.

Hi there,
That doesn't appear to be it. This makes it a bit more obvious:

http://www.uviewholidays.com/html/template.php

If you try that in IE and FireFox you'll see Firefox now shows it correctly and IE doesn't.

It seems they both measure pixels in a different way... :confused:

I see what you mean, lol, and to my knowledge (I'm not sure exactly but) IE somehow reads margins and padding differently to FF so that's probably why...

What heck is up with all of the position:relative; ? You aren't even using it the correct way, if you gave top and left properties to the css for the items position:relative; then okay use them. Here use the attachment as your css, it makes the page look fine in IE and FF

Ah yes!

Brilliant! Thanks for all your help. :)


What heck is up with all of the position:relative; ?


Interesting... I was taught in CIW that you should always use position: bla; when positioning an object.

Can you explain why I shouldn't be using it?

I kinda already did, if you aren't going to be giving top and left values then its pointless, using position relative keeps the object in flow but by default if its a block level element like a div, its already in flow, so its redundant to use it.

Ah I see! Ok! Thanks. :)