#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Location
    London UK
    Posts
    3
    Rep Power
    0

    CSS layout - nav problem


    I have a cross-browser compatibility problem with a CSS layout. Basically I have a DIV, with a fixed width and a background colour, used as a Nav bar.

    Within this DIV, I have some <A> tags with a class that gives them a padding.

    The height of the nav bar is not fixed in pixels because I want it to be accessible so the browser font size controls the size of the bar.

    The url is http://www.al-scott.co.uk/nav_prob.html

    The page is XHTML 1.0 strict

    It works fine in IE and Opera.

    On mozilla, the nav bar doesn't pick up the height from the padded links, so it's too small and the content from the DIV below floods into the nav bar.

    If anyone knows a way to achieve this effect in a compatible way, then I'll be a very happy man.

    It's a bit messy, but most of this is inline CSS, for the purposes of quick debugging.

    Many Thanks,
    Adrian
  2. #2
  3. No Profile Picture
    No. 4
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Location
    UK
    Posts
    89
    Rep Power
    11
    hu

    tutorial 6 is very good here

    and if you follow this it will work fine in al browsers including IE5+

    jim
    On a nationwide tour - back next year as champions.
  4. #3
  5. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Location
    London UK
    Posts
    3
    Rep Power
    0
    Thanks for the swift reply. I implemented the example you linked above (using a UL) and it partly solved things.

    However, it seems that it's not the NAV itself that's the problem, it's how the surrounding divs (above and below) relate to the NAV.

    This example: http://www.al-scott.co.uk/nav_prob2.html
    uses the UL method exactly as it was in your link, except that I've restricted the width to 450px and changed the bg colour to red to make it obvious what's happening.

    If you look at this in Mozilla, you'll see that the content div, below the nav is spilling above the nav too. Is there something wrong with my styles on the surrounding divs ?

    Thanks again,
    Adrian
  6. #4
  7. No Profile Picture
    No. 4
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Location
    UK
    Posts
    89
    Rep Power
    11
    The gap above the nav bar can be losy by addind margin-top:0;

    e.g.

    #navcontainer ul {
    On a nationwide tour - back next year as champions.
  8. #5
  9. No Profile Picture
    No. 4
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Location
    UK
    Posts
    89
    Rep Power
    11
    The gap above the nav bar can be losy by addind margin-top:0;

    e.g.

    #navcontainer ul {
    blah
    margin-top:0;
    }

    and

    .clearboth {
    clear: both;
    }

    in the CSS and putting <br class="clearboth"> immediately beneath the </div> for the nav bar will hopefully solve your prob...

    jim
    On a nationwide tour - back next year as champions.
  10. #6
  11. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Location
    London UK
    Posts
    3
    Rep Power
    0
    Why do I get the impression you're much better at this than me?

    Thanks very much - I owe you a beer.
  12. #7
  13. No Profile Picture
    No. 4
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Location
    UK
    Posts
    89
    Rep Power
    11
    shame about the quality of my spelling though.....

    all i know (and i don't know much - i've just built my first CSS site) has been found by trawling the internet and through forums like this - and a lot of fiddling and re-fiddling and.....

    you can still buy me the beer next time i'm in town though!

IMN logo majestic logo threadwatch logo seochat tools logo