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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Nov 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help on browser compatibility?

    Hello!

    I am not very experienced at coding, but have tried to build a site using css to govern the layout. The site http://www.realityends.com works very well with Explorer 6.0 and i have validated most pages as html 4.0 transitional and also validated the style sheet.

    I downloaded Netscape Navigator 8.0 and i got a little shocked by the results. The content colum does not expand the way it does in IE 6.0 and it seems to ignore some padding? And after lurking a bit on this forum i downloaded the firefox browser and got the same bad results there

    Could anyone help me out a bit to make the layout of the website more compatible with other browsers than IE 6.0? The page layout is divided in div.toppfelt (the header), div.menufield (the menu columm at the left side), div. contentfield (the main area for content and placed in centre) and finally div.rightfield (the right menu collumn).

    Here is the css i have used for the layout part:

    div.toppfelt {
    background : url("/img/top.jpg");
    width : 100%;
    background-repeat : no-repeat;
    margin : 0;
    margin-left : 4px;
    border : 2px solid #ff9900;
    }

    div.menufield {
    float : left;
    width : 150px;
    height : 720px;
    margin-left : 4px;
    margin-top : 10px;
    padding : 1em;
    background : url("/img/background-red.jpg");
    color : #ffffcc;
    border : 2px solid #ff9900;
    }

    div.contentfield {
    margin-left : 156px;
    margin-right : 150px;
    margin-top : 10px;
    margin-bottom : 10px;
    height : 720px;
    padding : 1em;
    background-color : #ffffcc;
    border : 2px solid #ff9900;
    }

    div.rightfield {
    float : right;
    width : 150px;
    height : 720px;
    margin : 0;
    margin-top : 10px;
    padding : 1em;
    background : url("/img/background-red.jpg");
    color : #ffffcc;
    border : 2px solid #ff9900;
    }

    I have tried to understand what to improve, but i feel i need som knowledgable pointers.... grateful for any help!

    arvek
    Last edited by arvek; 11-26-2005 at 12:59 PM.

  • #2
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    The content colum does not expand the way it does in IE 6.0
    Of course it doesn't. It's not supposed to. This is a bug in IE. Never, ever design for IE. It is old, buggy and non-standard. The worst browser out there. Always design in modern browsers like Firefox first, then adjust your code for IEs quirks and bugs.

    Google for "clearing floats" to possibly solve your problem. I have to leave but someone else may help you out here.

  • #3
    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
    You set a height to your .contentfield, can't do that if you expect the container to resize to the text
    Code:
    div.contentfield
    {
    margin-left:192px;
    margin-right:188px;
    margin-top:10px;
    margin-bottom:10px;
    padding:1em;
    background-color: #FFFFCC;
    border:2px solid #FF9900;
    }
    Use the above for your contentfield div. In your footer use clear:both; instead of clear:left; You also use old tags like center and bold. CSS should take care of that. margin:auto; for block level elements like tables or divs, and font-weight:bold; to make things bold.
    Last edited by _Aerospace_Eng_; 11-26-2005 at 06:27 PM.

  • #4
    New to the CF scene
    Join Date
    Nov 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you so much! That fixed my most immediate concerns and made my site viewable in firefox and netscape as well.

    I will do an effort to stop using old tags like <i> and <b> and leave it all up to the style sheet, starting with the pages i create from now and then do some clean ups on old pages when time permits.

    I really appreciate the help, it lets me use more time creating content instead of struggling with coding!


  •  

    Posting Permissions

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