SitePoint Sponsor

User Tag List

Results 1 to 12 of 12

Hybrid View

  1. #1
    Coding for Jesus LavernGingerich's Avatar
    Join Date
    Jul 2003
    Location
    Tennessee
    Posts
    607
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem With Netscape Navigator

    I am designing a web site using CSS. It looks fine in IE, but terrible in Navigator.

    You can take a look at the home page at www.pursuinglife.com. Is it feasible to use this design and still have the page readable in IE and Navigator?

    Here is the CSS code I am using:

    /* My .com style sheet */
    body { font-family: Verdana, Tahoma, Helvetica;
    font-size: 11pt;
    margin: 0mm;
    padding: 0mm;
    text-align: center;
    }
    #maincontent { width: 770px;
    margin: 0 auto;
    text-align: center;
    padding: 5px;
    border: 1px solid #98AAB1;
    }
    #left a:link, #center a:link, #right a:link {
    color: #2B5999;
    text-decoration: none;
    }
    #left a:visited, #center a:visited, #right a:visited {
    color: #FFA900;
    }
    #left a:hover, #center a:hover, #right a:hover {
    color: #2B5999;
    text-decoration: underline;
    }
    #left a:active, #center a:active, #right a:active {
    color: #2B5999;
    }
    #logo {
    background: url(logo2.jpg);
    border-top: 1px solid #000000;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
    border-left: 1px solid #000000;
    width: 760px;
    height: 119px;
    margin-bottom: 0px;
    }

    <!-- The navbar begins here -->

    #navMenu
    {
    float: clear;
    width: 100%;
    border: 1px solid #999;
    background-color: #aaa;
    margin: 5px 0px;
    width:758px !important;
    /* Fix broken box model for IE5/Win, IE6/Win ignores the following rules */
    width /**/:760px;
    }

    #navMenu a, #navMenu a:visited
    {
    float: left;
    background: #f3f3f3 url('images/navMenu_button.png') 0px 0px;
    border-left: 1px solid #ffffff;
    border-top: 1px solid #ffffff;
    border-right: 1px solid #dddddd;
    border-bottom: 1px solid #dddddd;
    font:10px verdana;
    text-align: center;
    color: #000;
    text-decoration: none;
    height: 15px;
    width: 150px;
    }

    #navMenu a.margin, #navMenu a.margin:visited
    {
    width: 150px;
    }
    #navMenu a:hover
    {
    background: #f3f3f3 url('images/navMenu_button.png') 0px 15px;
    }
    #navMenu a.margin
    {
    margin-right: 2px;
    }

    #navMenu ul, #navMenu li
    {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    }
    #navMenu li { display: inline; }

    <!-- The navbar ends here -->

    #left { float: left;
    background-color: FFFFFF;
    width: 150px;
    padding: 0px;
    font-size: 10pt;
    text-align: left;
    border-top: 1px solid #98AAB1;
    border-right: 1px solid #98AAB1;
    border-bottom: 1px solid #98AAB1;
    border-left: 1px solid #98AAB1;
    }
    ul#sidebar {
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: #D6D6D6;
    }
    ul#sidebar li a:link, ul#sidebar li a:visited {
    text-decoration: none;
    display: block;
    width: 100%;
    padding: 10px 5px;
    background-color: #5C6F90;
    font-size: 10pt;
    font-weight: bold;
    color: #fff;
    }
    ul#sidebar li {
    border-top: 1px solid #A5B5C6;
    }
    ul#sidebar li a:hover {
    background-color: #43616B;
    color: #eee;
    }

    #center { float: left;
    width: 450px;
    text-align: left;
    border-top: 1px solid #FFA900;
    border-right: 1px solid #FFA900;
    border-bottom: 1px solid #FFA900;
    border-left: 1px solid #FFA900;
    margin-left: 5px;
    margin-right: 5px;
    padding: 5mm;
    }
    #right { float: left;
    width: 150px;
    padding: 10px;
    font-size: 10pt;
    text-align: left;
    border-top: 1px solid #98AAB1;
    border-right: 1px solid #98AAB1;
    border-bottom: 1px solid #98AAB1;
    border-left: 1px solid #98AAB1;
    }
    #footer {
    float: clear;
    background: url(images/bk_footer.png) repeat-x;
    border: 1px solid #000000;
    width: 760px;
    height: 35px;
    text-align: center;
    margin-top: 5px;
    padding: 10px;
    font-family: Verdana, Tahoma, Arial;
    font-size: 10px;
    color: #FFFFFF;
    }
    #footer a, a:active, a:visited {
    color: #FFFFFF;
    text-decoration: none;
    }
    #footer a:hover {
    color: #FFFFFF;
    text-decoration: underline;
    }

    p { color: #000000;
    font-size: 11pt;
    }
    h1 { color: #000000;
    text-align: center;
    font-size: 15pt;
    }

    Thank you so much for your help with this issue!

    Lavern

  2. #2
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No guarantees that this will fix everything, but these are definitely problems:
    Code:
    #logo {
    ...
    }
    <!-- The navbar begins here -->
    #navMenu {
    ...
    You shouldn't use HTML-style comments in CSS files. Use a /* CSS comment */ instead. There's another one further down, and they are probably wiping out huse slabs of your CSS in Netscape (I assume you mean version 6 or 7?)
    Code:
    #navMenu
    {
    	float: clear;
    ...
    Huh? There's no "clear" value for the float property. I'm not sure what you meant to do here, so I can't really suggest how to fix it. "clear: both;", perhaps?

    That's all for now.

  3. #3
    Coding for Jesus LavernGingerich's Avatar
    Join Date
    Jul 2003
    Location
    Tennessee
    Posts
    607
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your help! I made some changes, and it looks better than it did. But I am still having trouble making things come out same on IE and Navigator.

    You can view it at www.pursuinglife.com

    For example, the menu bar on the left looks fine in IE, but in Navigator the fill color is wider than "100%."
    Also, my footer looks fine in IE, but in Navigator the border is oversized, the footer is too long, and there is no spacing between it and my right column.
    Also, my horizontal bar under the logo is coming up at different lengths in Navigator than in IE.

    Please help me get this straigtened out if you can. Thanks so much!

    Here is my CSS code again:

    /* My .com style sheet */
    body { font-family: Verdana, Tahoma, Helvetica;
    font-size: 11pt;
    margin: 0mm;
    padding: 0mm;
    text-align: center;
    }
    #maincontent { width: 770px;
    margin: 0 auto;
    text-align: center;
    padding: 5px;
    border: 1px solid #98AAB1;
    }
    #left a:link, #center a:link, #right a:link {
    color: #2B5999;
    text-decoration: none;
    }
    #left a:visited, #center a:visited, #right a:visited {
    color: #FFA900;
    }
    #left a:hover, #center a:hover, #right a:hover {
    color: #2B5999;
    text-decoration: underline;
    }
    #left a:active, #center a:active, #right a:active {
    color: #2B5999;
    }
    #logo {
    background: url(logo2.jpg);
    border-top: 1px solid #000000;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
    border-left: 1px solid #000000;
    width: 760px;
    height: 119px;
    margin-bottom: 0px;
    }

    /* The navbar begins here */

    #navMenu
    {
    clear: both;
    width: 100%;
    border: 1px solid #999;
    background-color: #aaa;
    margin: 5px 0px;
    height: 17px;
    width:758px !important;
    /* Fix broken box model for IE5/Win, IE6/Win ignores the following rules */
    width /**/:760px;
    }

    #navMenu a, #navMenu a:visited
    {
    float: left;
    background: #f3f3f3 url('images/navMenu_button.png') 0px 0px;
    border-left: 1px solid #ffffff;
    border-top: 1px solid #ffffff;
    border-right: 1px solid #dddddd;
    border-bottom: 1px solid #dddddd;
    font:10px verdana;
    text-align: center;
    color: #000;
    text-decoration: none;
    height: 15px;
    width: 140px;
    }

    #navMenu a.margin, #navMenu a.margin:visited
    {
    width: 150px;
    }
    #navMenu a:hover
    {
    background: #f3f3f3 url('images/navMenu_button.png') 0px 15px;
    }
    #navMenu a.margin
    {
    margin-right: 2px;
    }

    #navMenu ul, #navMenu li
    {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    }
    #navMenu li { display: inline; }

    /* The navbar ends here */

    #left { clear: both;
    float: left;
    background-color: FFFFFF;
    width: 150px;
    padding: 0px;
    font-size: 10pt;
    text-align: left;
    border-top: 1px solid #98AAB1;
    border-right: 1px solid #98AAB1;
    border-bottom: 1px solid #98AAB1;
    border-left: 1px solid #98AAB1;
    }
    ul#sidebar {
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: #D6D6D6;
    }
    ul#sidebar li a:link, ul#sidebar li a:visited {
    text-decoration: none;
    display: block;
    width: 100%;
    padding: 10px 5px;
    background-color: #5C6F90;
    font-size: 10pt;
    font-weight: bold;
    color: #fff;
    }
    ul#sidebar li {
    border-top: 1px solid #A5B5C6;
    }
    ul#sidebar li a:hover {
    background-color: #43616B;
    color: #eee;
    }

    #center {
    float: left;
    width: 400px;
    text-align: left;
    border-top: 1px solid #FFA900;
    border-right: 1px solid #FFA900;
    border-bottom: 1px solid #FFA900;
    border-left: 1px solid #FFA900;
    margin-left: 5px;
    margin-right: 5px;
    padding: 5mm;
    }
    #right {
    float: left;
    width: 100px;
    padding: 10px;
    font-size: 10pt;
    text-align: left;
    border-top: 1px solid #98AAB1;
    border-right: 1px solid #98AAB1;
    border-bottom: 1px solid #98AAB1;
    border-left: 1px solid #98AAB1;
    }
    #footer {
    clear: both;
    background: url(images/bk_footer.png) repeat-x;
    border: 1px solid #000000;
    width: 760px;
    height: 35px;
    text-align: center;
    margin-top: 5px;
    padding: 10px;
    font-family: Verdana, Tahoma, Arial;
    font-size: 10px;
    color: #FFFFFF;
    }
    #footer a, a:active, a:visited {
    color: #FFFFFF;
    text-decoration: none;
    }
    #footer a:hover {
    color: #FFFFFF;
    text-decoration: underline;
    }

    p { color: #000000;
    font-size: 11pt;
    }
    h1 { color: #000000;
    text-align: center;
    font-size: 15pt;
    }

  4. #4
    SitePoint Enthusiast
    Join Date
    Oct 2004
    Location
    OKC
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you've more than a few places where you need to understand the different box model interpretations and applpy appropriate box hacks. This is a great resource for doing just that:

    http://css-discuss.incutio.com/?page=BoxModelHack

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2004
    Location
    OKC
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oh yeah, this is not right either:

    margin: 0mm;
    padding: 0mm;

    there is no mm unit of measure allowed that I'm aware of

  6. #6
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    there is no mm unit of measure allowed that I'm aware of
    Wrong. It's right there in the CSS 2.1 spec:
    http://www.w3.org/TR/CSS21/syndata.html#length-units
    Absolute length units are only useful when the physical properties of the output medium are known. The absolute units are:

    * in: inches 1 inch is equal to 2.54 centimeters.
    * cm: centimeters
    * mm: millimeters
    * pt: points the points used by CSS 2.1 are equal to 1/72th of an inch.
    * pc: picas 1 pica is equal to 12 points.
    Using them on a screen might not be wise, but that applies to points, too, and half the world uses them.

  7. #7
    SitePoint Enthusiast
    Join Date
    Oct 2004
    Location
    OKC
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I had a feeling I should have looked that up before I opened my mouth I actually considered the fact that it might be in the spec for print but didn't bother looking.

    Thanks for checking me

  8. #8
    Coding for Jesus LavernGingerich's Avatar
    Join Date
    Jul 2003
    Location
    Tennessee
    Posts
    607
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the link. Do you have any suggestions on which technique to use? It seems like a challenge to figure out.

    Lavern

  9. #9
    Coding for Jesus LavernGingerich's Avatar
    Join Date
    Jul 2003
    Location
    Tennessee
    Posts
    607
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It seems the hacks are only to work around bugs in previous versions of IE. I am testing my site on Netscape 7 and IE 6 on Windows. Will a hack help when viewing the page in Netscape?

    Should I forget about using CSS to control so much of the layout?

  10. #10
    SitePoint Enthusiast
    Join Date
    Oct 2004
    Location
    OKC
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It seems the hacks are only to work around bugs in previous versions of IE. ... Will a hack help when viewing the page in Netscape?
    You are coding to what the buggy IE expects though, that's why the pages are off in Netscape. For example, your maincontent:

    Code:
    #maincontent { width: 770px;
    margin: 0 auto;
    text-align: center;
    padding: 5px;
    border: 1px solid #98AAB1;
    I have a feeling you expect the width of that to be 770px right? A browser that interprets the standard correctly (Netscape? Firefox/Mozilla yes) will render that at 782px.

    Why?

    The box model is meant to be interpreted width+padding+border=width, then margin is arount the outside of that. IE however interprets width with the padding and border inside of it, so IE sees 770 while the standard sees 770+10(padding, 5 on each side)+2(border, 1 on each side)=782

    See? What you think is a non-IE problem, is actually an IE problem.

    Should I forget about using CSS to control so much of the layout?
    It can be done, you've got a fairly simple layout there, not impossible by any stretch of the imagination, you just have some studying to do first unfortunately, or fortunately, however you feel about studying

  11. #11
    Coding for Jesus LavernGingerich's Avatar
    Join Date
    Jul 2003
    Location
    Tennessee
    Posts
    607
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for all your help! I am trying to get it to look good in Netscape now. For some reason, the left column's right border doesn't go all the way down to the footer.

    Do you know why? Here is the code:

    #left {
    float: left;
    background-color: FFFFFF;
    width: 125px;
    padding: 0px;
    font-size: 10pt;
    text-align: left;
    border-top: 0px solid #98AAB1;
    border-right: 1px solid #98AAB1;
    border-bottom: 0px solid #98AAB1;
    border-left: 0px solid #98AAB1;
    }
    ul#sidebar {
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: #D6D6D6;
    }
    ul#sidebar li a:link, ul#sidebar li a:visited {
    text-decoration: none;
    display: block;
    padding: 6px 5px;
    background-color: #5C6F90;
    font-size: 9pt;
    font-weight: bold;
    color: #fff;
    }
    ul#sidebar li {
    border-top: 1px solid #A5B5C6;
    }
    ul#sidebar li a:hover {
    background-color: #43616B;
    color: #eee;
    }

    #center {
    float: left;
    width: 448px;
    text-align: left;
    border-top: 0px solid #FFA900;
    border-right: 0px solid #FFA900;
    border-bottom: 0px solid #FFA900;
    border-left: 0px solid #FFA900;
    padding: 15px;
    }
    #right { float: left;
    width: 125px;
    padding: 15px;
    font-size: 10pt;
    text-align: left;
    border-top: 0px solid #98AAB1;
    border-right: 0px solid #98AAB1;
    border-bottom: 0px solid #98AAB1;
    border-left: 1px solid #98AAB1;

  12. #12
    Coding for Jesus LavernGingerich's Avatar
    Join Date
    Jul 2003
    Location
    Tennessee
    Posts
    607
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It does now.


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
  •