...

View Full Version : CSS Border not displaying in Firefox?



ChrisEvans1001
05-25-2005, 02:21 AM
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

_Aerospace_Eng_
05-25-2005, 03:13 AM
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.

ChrisEvans1001
05-25-2005, 02:31 PM
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

mark87
05-25-2005, 02:43 PM
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>

ChrisEvans1001
05-25-2005, 02:58 PM
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

mark87
05-25-2005, 03:42 PM
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);

ChrisEvans1001
05-25-2005, 03:45 PM
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

ChrisEvans1001
05-25-2005, 03:47 PM
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.

mark87
05-25-2005, 03:50 PM
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.

ChrisEvans1001
05-25-2005, 04:07 PM
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:

mark87
05-25-2005, 05:16 PM
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...

_Aerospace_Eng_
05-25-2005, 10:59 PM
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

ChrisEvans1001
05-25-2005, 11:10 PM
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?

_Aerospace_Eng_
05-25-2005, 11:32 PM
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.

ChrisEvans1001
05-25-2005, 11:37 PM
Ah I see! Ok! Thanks. :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum