SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    May 2003
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS in Netscape/Mozilla

    Would appreciate if someone can assist. Thks in advance

    Description
    - Modified 2 Column Fixed Width with Header & Footer CSS templates *
    - 2 stylesheets layout.css & presentation.css (see codes below)
    - This site looks pixel perfect in IE 6.0
    - However, when viewed in NS 7.1/Mozilla, 4 problems are found.

    * from ssi-developer.net


    Problem
    (1) A white gap is found between the header & the picture/site menu
    (2) The blue bkgrd of "Welcome", "Related Articles" overflowed to the left
    (3) A portion of the left border is missing (starting from the google ad box)
    (4) The footer is displaced under "Resources" box



    layout.css

    /* Layout Stylesheet */

    body {
    margin:0 10px;
    background:#FFFFFF;
    color: #333333;
    text-align:center;
    padding:0;
    font-family: arial, helvetica, sans-serif;
    font-size:12px;
    }

    #outer {
    text-align:left;
    border:1px solid #4E5872;
    width:730px;
    margin:auto;
    }

    #hdr {
    height:100px;
    background-image:url(test.gif);
    background-repeat: no-repeat;
    color: #333333;
    border:solid #4E5872;
    border-width: 0 0 2px 0;
    }

    #bodyblock {
    position:relative;
    background: #E0EBF7;
    color: #333333;
    width:730px;
    padding:0;
    }

    #l-col {
    float:left;
    background:#ffffff;
    color: #333333;
    width:495px;
    border:solid #4E5872;
    border-width:0 1px 0 0;
    text-align:left;
    }

    #cont {
    width:231px;
    background:#E0EBF7;
    color: #333333;
    text-align:left;
    }

    #subhdr {
    background:#B8C5D4;
    margin:-3px 0px 0px -10px;
    padding:10px 10px 5px 25px;
    color: #FFFFFF;
    text-align:left;
    font-weight:bold;
    font-size:18px;
    }

    #navsubhdr {
    background: #4E5872;
    margin:2px 3px 2px 0px;
    padding:10px 0px 5px 5px;
    color: #FFFFFF;
    text-align:left;
    font-size:18px;
    }

    #navsubhdr.lightpurple {
    background: #9AAEDC;
    padding:10px 0px 5px 5px;
    }

    #navsubhdr1 {
    background: #C6D0E6;
    margin:2px 3px 2px 0px;
    padding:10px 0px 5px 5px;
    color: #FFFFFF;
    text-align:left;
    font-size:18px;
    }

    #ftr {
    height:25px;
    background:#B3C1D2;
    color: #333333;
    border:solid #4E5872;
    border-width:1px 0 0 0;
    margin:0;
    font-weight:bold;
    }

    presentation.css

    /* Presentation Stylesheet */

    h1 {
    font-size: 16px;
    margin:0 15px;
    padding: 0 ;
    text-align:left;
    color:#000000;
    }

    h2 {
    font-size: 14px;
    margin:0 15px;
    padding: 0 ;
    text-align:left;
    color:#000000;
    }

    p {
    margin:0;
    padding:10px 15px 15px 15px;
    }

    .menu {
    background:#9FA2BD;
    margin:-2px 3px 2px 0px;
    padding:10px 15px 15px 15px;
    border-bottom:1px dashed #B8C5D4;
    }

    .separator {
    margin:0 15px;
    padding:15px 0 15px 0;
    border-bottom:1px dashed #B8C5D4;
    }

    .indicator {
    font-size:9px;
    margin:0 15px;
    text-align:right;
    }


    /* General Links */

    a:link, a.content:active:visited{
    color : #2D4761;
    text-decoration : underline;
    }

    a:hover {
    color : #4B7094;
    text-decoration : underline;
    }

    /* General Links */

    a.highlight:link, a.bold:active , a.bold:visited{
    color : #2D4761;
    text-decoration : none;
    }

    a.highlight:hover {
    color : #4B7094;
    text-decoration : underline;
    }

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Here are most of the fixes although I think that mozilla looks better with gap under the header.

    Moz seems to be inheritting the margin of a child element so the only solution I can think of is to drag the image back. (There may well be another cause but I couldn't see it immediately).

    The welocme box sticking out is because of all the negative margins. In ie it doesn't show anything outside its parent (unless you had a position:relative on it) but other browsers have pulled the element as directed by the margins.

    The other 2 problems are that you have not cleared floats.

    Heres the code:
    Code:
    html>body #l-col img {margin-top:-2px}
    #subhdr {
    background:#B8C5D4;
    padding:10px 10px 5px 25px;
    color: #FFFFFF;
    text-align:left;
    font-weight:bold;
    font-size:18px;
    }
    #ftr {
    clear:both;
    background:#B3C1D2;
    color: #333333;
    border:solid #4E5872;
    border-width:1px 0 0 0;
    margin:0;
    font-weight:bold;
    }
    .clearer {
    height:1px;
    overflow:hidden;
    clear:both;
    margin-top:-1px;
    }
    Completely replace your original elements of the same name with mine above.

    You will also need to add an element to the html in exactly the place specified (exactly!!).

    Add this bold part in the coorect location:
    Code:
     
    		statements. <br />
    		<br />
    	 </div>
    	</div>
    <div class="clearer"></div>
    </div>
    <!--------------------- Footer --------------------->
    <div id="ftr" align="center">
    If you follow the instructions above carefully then your page should display correctly Although I think that the image looked better in moz with theuniform gap at the top of both columns.

    Paul

  3. #3
    SitePoint Member
    Join Date
    May 2003
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, you are a genius! Your new codes solved all my problems in NS 7.1/Mozilla...

    I do have some new problems now after comparing IE 6.0 & NS 7.1/Mozilla look and feel

    Problems in IE 6.0
    - There is a white gap between picture & blue bkgrd with 'Welcome' wordings. How to remove this without affecting NS 7.1/Mozilla which is perfect now?

    Problems in NS 7.1/Mozilla
    - The color in the gap between header & the 'Site Menu' box should be light blue instead of white. It seems that the light blue background of Site Menu box is displaced lower by 2px in NS 7.1/Mozilla than in IE 6.0
    - There should be a break between the wordings "..your mailbox" in Newsletter box and the email text entry box.

    Thks in advance... you are super! Btw, my site for your easy reference.
    Last edited by mimonza; Sep 19, 2004 at 05:08.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Problems in IE 6.0
    - There is a white gap between picture & blue bkgrd with 'Welcome' wordings. How to remove this without affecting NS 7.1/Mozilla which is perfect now?
    Set the image to display:block:

    Code:
    #l-col img {display:block}
    (Will look at your other problems later as I'm just going out)
    Paul

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    This should solve the other problems.
    Code:
    #navsubhdr {
     background: #4E5872;
     margin:0px 3px 2px 0px;
     border-top:2px solid #E0EBF7;
     padding:10px 0px 5px 5px;
     color: #FFFFFF;
     text-align:left;
     font-size:18px;
     }
     form {margin:10px 0;padding:0}
    Paul

  6. #6
    SitePoint Member
    Join Date
    May 2003
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    Sorry for the late reply. Your code works beautifully... but I noticed 1 new problem in NS 7.1/Mozilla

    Problem in NS 7.1/Mozilla
    - The blue line between header and picture is missing

    Can you assist? Thanks a million

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Couldn't access your site - will try again later

    Paul

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Still getting an error on the link to your site. If you're still having problems can you provide an updated link

    Paul

  9. #9
    SitePoint Member
    Join Date
    May 2003
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    Sorry for the real late reply. You can click the link in my signature to access the website.

    Thks in adv.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The blue line is missing because of this line.

    Code:
     
    html>body #l-col img {margin-top:-2px}
    The line must have been in there for a reason initially but something has apparently changed to make it unnecessary.

    Take the line out altogether and see if it resolves (or causes) issues etc.

    I notice you have a massive horizontal scrollbar in mozilla because you have used align right in the html for bodyblock.

    Take the align right out and apply a float right to #cont instead.

    Code:
    #cont {
     width:231px;
     background:#E0EBF7;
     color: #333333;
     text-align:left;
     float:right;
     }
    Try not to mix the html attributes like align with css as it causes some strange things to happen. epecially align left and align right.

    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
  •