Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    New Coder
    Join Date
    Dec 2004
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question 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

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    Code:
    	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.

  • #3
    New Coder
    Join Date
    Dec 2004
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #4
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    He means you should do something like this -

    CSS -

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

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

  • #5
    New Coder
    Join Date
    Dec 2004
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Last edited by ChrisEvans1001; 05-25-2005 at 02:08 PM.

  • #6
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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);

  • #7
    New Coder
    Join Date
    Dec 2004
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #8
    New Coder
    Join Date
    Dec 2004
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by mark87
    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.

  • #9
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #10
    New Coder
    Join Date
    Dec 2004
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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...

  • #11
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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...

  • #12
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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

  • #13
    New Coder
    Join Date
    Dec 2004
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #14
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.

  • #15
    New Coder
    Join Date
    Dec 2004
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ah I see! Ok! Thanks.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •