SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Mar 2004
    Location
    South Africa
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problems with CSS and Netscape

    I've been trying get a template working to transfer my site over to CSS (I've been reading about it and it seems to be the way to go) - have been working on it all weekend and have cracked a 3 column grid that seems to work well.

    You can see where I've got to here:
    www.discographynetwork.com/nav2.php

    The only small problem I have in ie is a missing pixel to the left of the home button. If you have a suggestion for that I'd be grateful.

    However, when I looked at it in Mozilla and Netscape the buttons mess up and the tag line doesn't stay in it's div.

    Can someone point me in the right direction.

    Thanks.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,
    However, when I looked at it in Mozilla and Netscape the buttons mess up and the tag line doesn't stay in it's div
    Hi the text doen't stay in the box in netscape/mozilla because you have made it only 15px high. These browsers do as their told and keep the height to 15px unlike IE which gets it wrong and expands the height to compensate. IE treats height as min-height.

    Therefore you either need to leave the height out altogether so the content expands in all browsers. Or if you want the height at 15px and then to expand use the code as follows which uses min-height for mozilla browsers and then a height:auto so the element is allowed to expand. This is not a hack, this is just how its supposed to work.

    Code:
    #header3 {
    background-color: #333333;
    border-bottom: 1px #ffffff solid;
    padding-top: 0px;
    color: #ffffff;
    padding-left: 29px;
    padding-right: 23px;
    padding-bottom: 3px;
    font-size: 9px;
    margin: 0em;
    height: 15px;
    min-height:15px;
    }
    html>body #header3 {height:auto}
    
    The buttons aren't working in mozilla because you are using inline:block which is not implemented in mozilla yet and IE only understands it on elements that are inline anyway (e.g. spand <a> etc).

    So you will need to find another way to display the elements that satisfies both browsers. (Sorry didn't have time to do it for you but I will be back later if you still can't do it. )

    Paul

  3. #3
    SitePoint Member
    Join Date
    Mar 2004
    Location
    South Africa
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    I understood most of this but didn't really understand this part:

    Code:
    html>body #header3 {height:auto}
    
    It seems which ever way I do things something falls apart in the other browser. This is probably due to lack of experience but it seems a lot easier to use tables.

    One option I was concidering was using different css depending on browser.

    Anyone have any views...

    Thanks,
    Simon

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,
    I understood most of this but didn't really understand this part :html>body #header3 {height:auto}
    This part uses the child selector(>) to hide the value from IE and feed it to other more compliant browsers.

    IE doesn't understand the child selector and ignores the style altogether. If you remember from my above post you want a minimum height on your element but you want it to expand also. IE doesn't understand min-height but treats height like min-height anyway.

    Therefore the height:auto has to be hidden from IE otherwise it woill over-ride the height:15px. It's really quite straight forward when you get the hang of it

    One option I was concidering was using different css depending on browser.
    I wouldn't recommend that option as you would need a javascript sniffer (or something similar) to sniff out each browser and browsers are notorious for not identifying themselves correctly.

    You would then need to manage all the different stylesheets and would be more trouble than it's worth. Also a browsers sniffer will only know about browsers that are out already which means you'd need to constantly update it with new versions etc.

    What you really need to do is decide which browsers you want to support (realistically) and then test at each stage so that you don't use styles that only work in one browser. If you test as you go you can fix most things and it will actually save time in the end as you will have tested all the way.

    It's not that hard to make cross-browser pages if you put a little thought into the planning and testing.

    It seems which ever way I do things something falls apart in the other browser. This is probably due to lack of experience but it seems a lot easier to use tables
    I have the same problems with tables. I cannot get a table to do what I want but so far I've managed to get css to do what I want or find another way around it.

    Just keep on learning and you will get there in the end. It is the best way forward

    If you are still struggling with your design then shout and I'll take another look.

    Paul


Bookmarks

Posting Permissions

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