SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Jul 2004
    Location
    Jed.
    Posts
    243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE and Firefox renders differently

    Guys/Gals,

    At bottom there is a grey line with a curve in the middle. The line just above the text "2006 Copyright". The distance between this line and the blue rounded box (on top of it) is different between Firefox and IE6. How can I fix this?

    http://codg.bjaili.com/1/

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <meta name="generator" content=
      "HTML Tidy for Linux/x86 (vers 1 September 2005), see www.w3.org" />
      <link rel="stylesheet" href="sr_css/sr_core.css" type=
      "text/css" />
    
      <title>Softriva</title>
    </head>
    
    <body>
      <div id="container">
        <div id="LeftCol">
          <div>
            <img src="sr_images/sr_spacer1.gif" alt="LeftCol1" width=
            "159" height="128" />
          </div>
    
          <div id="QuickNav">
            <img src="sr_images/sr_spacer1.gif" width="20" height="20"
            alt="spacer" /><img src="sr_images/sr_magnify.gif" alt=
            "Magnifier" width="29" height="20" /> <img src=
            "sr_images/sr_at.gif" alt="Email" width="31" height=
            "20" /><img src="sr_images/sr_magnify.gif" alt="Home" width=
            "31" height="20" /><img src="sr_images/sr_magnify.gif" alt=
            "Symbol" width="28" height="20" /> <img src=
            "sr_images/sr_spacer1.gif" width="20" height="20" alt=
            "spacer" />
          </div>
    
          <div id="QuickNavButtom">
            <img src="sr_images/sr_spacer1.gif" alt="LeftCol2" width=
            "159" height="93" />
          </div>
    
          <div>
            <img src="sr_images/sr_spacer1.gif" alt="LeftCol3" width=
            "159" height="32" />
          </div>
    
          <div>
            <img src="sr_images/sr_magnify.gif" alt="Client 1" width=
            "159" height="76" />
          </div>
    
          <div>
            <img src="sr_images/sr_spacer1.gif" alt="Client 2" width=
            "159" height="76" />
          </div>
    
          <div>
            <img src="sr_images/sr_at.gif" alt="Client 3" width=
            "159" height="76" />
          </div>
    
          <div>
            <img src="sr_images/sr_leftcol4.jpg" alt="LeftCol4" width=
            "159" height="42" />
          </div>
        </div><!--Left Col  -->
    
        <div id="MidCol">
          <img src="sr_images/sr_spacer1.gif" alt="MidCol1" width="167"
          height="25" /> <img src="sr_images/sr_spacer1.gif" alt="Logo"
          width="167" height="94" /><img src="sr_images/sr_spacer1.gif"
          alt="MidCol2" width="167" height="52" />
    
          <div id="Menu">
            <a href="">Home</a> <a href="">About</a><a href=
            "">Services</a><a href="">Clients</a><a href=
            "">News</a><a href="">Contact us</a>
          </div><!-- Menu -->
          <img src="sr_images/sr_magnify.gif" alt="MidCol3" width="167"
          height="65" />
    
          <div id="Address">
            AAAAAAAAAAAAA<br />
            BBBBBBBBBBBBB<br />
            CCCCCCCCCCCCC<br />
            <br />
            11111111111111<br />
            99999999999999
          </div><img src="sr_images/sr_midcol4.jpg" alt="MidCol4"
          width="167" height="41" /><img src="sr_images/sr_midcol5.gif"
          width="167" height="32" /><img src="sr_images/sr_midcol6.jpg"
          alt="MidCol6" width="167" height="48" />
        </div><!--Mid Col  -->
    
        <div id="RightCol">
          <img src="sr_images/dot_blue.gif" alt="Slogan" width="454"
          height="171" />
    
          <div id="content"></div>
        </div><!--Right Col  -->
     
    
      <div id="Footer">
        <img src="sr_images/sr_footer1.gif" alt="Footer1" width="326"
        height="48" />
    <div id="Copyright">2006 Copyright <br />All Rights Reserved </div>
      </div><!-- Footer --> </div>
    </body>
    </html>
    CSS

    HTML Code:
    body
    { 
    
      padding: 0px; 
      border:  0px;
      margin:  0px;
    
    }
    
    a {text-decoration: none; display:block; background-color:#F1F1F1;}
    
    #container 
    {
    /*  background-color: green; */
    }
    
    img { display: block; }
    
    #QuickNav  img {float:left;}
    #QuickNavButtom  img {clear:left;}
    
    #MidCol  
    {
      position: absolute; 
      top:0;
      margin-left: 159px;
      margin-top: 0;
    }
    
    #RightCol  
    {
      position: absolute; 
      top:0;
      margin-left: 326px;
      margin-top: 0;
    }
    
    #Address
    {
      background-color: #E7E7E7;
    }
    
    #Footer
    {
    position: absolute;
     top: 700px;
     top: 620px; 
    
    /*  border: solid 1px;  */
    }
    
    #Copyright
    {
     position: absolute;
     top :0;
     left:326px;
     width: 500px;
     border-top: solid 1px #E5E5E5;
    }

  2. #2
    SitePoint Addict
    Join Date
    Jul 2004
    Location
    Jed.
    Posts
    243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am really confused?

    I did not understand anything. Can you elaborate more?

  3. #3
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by all4nerds
    spacer gifs ?
    Don't use spacer gifs, that's what margins are for.

    Quote Originally Posted by all4nerds
    color only images
    If your images just contain areas of solid colour, you should be using background-color instead.

    Quote Originally Posted by all4nerds
    position absolutes ?
    You're using too much position: absolute when instead you should be using elements' margins and the occasional float.

    Quote Originally Posted by all4nerds
    Table design using div's ?
    Basically you're still thinking in tables mode. All the points above are legacies of tables-based design and aren't required when creating CSS layouts.

  4. #4
    SitePoint Addict
    Join Date
    Jul 2004
    Location
    Jed.
    Posts
    243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmm! Where should I start to fix this. Which element do I need to remove or first to start
    The reason I am using css is to aviod tables and its ideas. But it seems I am not.

    Is my use of #container made you also think that I am still thinking tables?

  5. #5
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EEEtc
    Is my use of #container made you also think that I am still thinking tables?
    No, it's all the things I pointed out in my previous post. All4nerds highlighted the pointers to you thinking in tables mode and then I provided more detail; it's got nothing to do with using a #container.
    I've also given you pointers as to how to fix things:
    1. use margins on the elements you already have instead of spacer gifs
    2. use background-color instead of images of solid colour
    3. use elements' margins to position them, not position: absolute. Sometimes you'll need to use floats if you want elements to be appear side by side.

  6. #6
    SitePoint Addict
    Join Date
    Jul 2004
    Location
    Jed.
    Posts
    243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have changed my css. I tried to follow your recommendation as much as possible? Am I still off track?

    Code:
    body
    { 
       padding: 0px; 
       border:  0px; 
       margin:  0px;
       font-family: Verdanal, Arial, Helvetica, sans-serif;
    }
    
    img {display: block;}
    #QuickNav  img {float:left; display: inline;}
    #QuickNavButtom {clear:both;}
    
    /* Give 20 pixel left margin */
    .ML20 {margin-left: 20px;}
    .Grey 
    {
      background-color: #E7E7E7;
      border-right: 1px solid #DBDBDB;
      border-left: 1px solid #DBDBDB;
      padding: 0 0 1em 0
    }
    
    #Menu
    {
      float: left;
      width: 326px;
    }
    
    #QuickLinks
    {
      float: left;
      width: 159px;
      padding: 0;
      margin: 0;
      border: 0;
    /*   background-color: green; */
    }
    
    #QuickMenu
    {
     float: left;
     width: 167px;
    /*  background-color: #D6BA08; */
    }
    
    #Main
    {
      width: 520px;
      float: left;
      background-color: red;
    }
    
    
    
    #Content
    {
     float: left;
     width: 454px;
     background-color: #FB9F0F;
    }
    
    #Footer
    {
      clear: both;
    /*   background-color: #5E5111; */
    
    }
    
    #Copyright img {float:left;}
    #Copyright div
    { 
     width: 454px; 
     float:left;
     border-top: solid 1px #E5E5E5;}
     
    
    #QuickMenu ul
    {
      background-color: #F1F1F1;
      margin: 0;
      padding: 1em .5em 1em 1em;
      list-style-type: none;
      border-right: 1px solid #DBDBDB;
      border-left: 1px solid #DBDBDB;
    }
    
    #QuickMenu ul li 
    {
      padding-top: 3px;
    }
    
    #QuickMenu ul li a
    {
      text-decoration:none;
      color: #467B99;
      font-variant: small-caps;
      display: block;
      border-bottom: 1px solid #DBDBDB;
     
    
    }
    
    #QuickMenu ul li a:hover
    {
      color: #FF8400;
      border-right: 3px solid #FF8400;
      border-bottom: 1px solid #FF8400;
    }
    
    .Grey p
    {
      padding: 0 0 0 1em; 
      margin: 0;
      font-variant: small-caps;
      font-size: .8em;
    }
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <meta name="generator" content=
      "HTML Tidy for Linux/x86 (vers 1 September 2005), see www.w3.org" />
      <link rel="stylesheet" href="sr_css/sr_core.css" type=
      "text/css" />
    
      <title>MyCompnay</title>
    </head>
    
    <body>
      <div id="wrapper">
        <div id="Menu">
          <div id="QuickLinks">
            <img src="sr_images/sr_leftcol1.gif" alt="LeftCol1" width=
            "159" height="128" />
    
            <div id="QuickNav">
              <img class="ML20" src="sr_images/sr_magnify.gif" alt=
              "Magnifier" width="29" height="20" /> <img src=
              "sr_images/sr_at.gif" alt="Email" width="31" height=
              "20" /><img src="sr_images/sr_home.gif" alt="Home" width=
              "31" height="20" /><img src="sr_images/sr_symbol.gif"
              alt="Symbol" width="28" height="20" /> <img src=
              "sr_images/sr_spacer1.gif" width="20" height="20" alt=
              "spacer" />
            </div><img id="QuickNavButtom" src=
            "sr_images/sr_leftcol2.gif" alt="LeftCol2" width="159"
            height="93" /><img src="sr_images/sr_leftcol3.jpg" alt=
            "LeftCol1" width="159" height="32" /><img src=
            "sr_images/sr_client1.jpg" alt="Client 1" width="159"
            height="76" /> <img src="sr_images/sr_client2.jpg" alt=
            "Client 2" width="159" height="76" /> <img src=
            "sr_images/sr_client3.jpg" alt="Client 3" width="159"
            height="76" /> <img src="sr_images/sr_leftcol4.jpg" alt=
            "LeftCol4" width="159" height="42" />
          </div>
    
          <div id="QuickMenu">
            <img src="sr_images/sr_logo.jpg" alt="Logo" width="167"
            height="94" /><img src="sr_images/sr_midcol2.jpg" alt=
            "MidCol2" width="167" height="52" />
    
            <ul>
              <li><a href="">Home</a></li>
    
              <li><a href="">About</a></li>
    
              <li><a href="">Services</a></li>
    
              <li><a href="">Clients</a></li>
    
              <li><a href="">News</a></li>
    
              <li><a href="">Contact us</a></li>
            </ul><img src="sr_images/sr_midcol3.gif" alt="MidCol3"
            width="167" height="65" />
    
            <div class="Grey">
              <p>AAAAAA2773</p>
    
              <p>sssss21416</p>
    
              <p>Ssssssssssss</p>
    
              <p>10000 630-2414</p>
    
              <p>222266 87654</p>
            </div><img src="sr_images/sr_midcol4.jpg" alt="MidCol4"
            width="167" height="41" /><img src=
            "sr_images/sr_midcol5.gif" width="167" height=
            "32" /><img src="sr_images/sr_midcol6.jpg" alt="MidCol6"
            width="167" height="48" />
          </div>
        </div>
    
        <div id="Content">
          <div>
            <img src="sr_images/sr_slogan.jpg" alt="Slogan" width="454"
            height="171" />
          </div>
    
          <div id="MainContent"></div>
        </div>
    
        <div id="Footer">
          <div id="Copyright">
            <img src="sr_images/sr_footer1.gif" alt="Footer" width=
            "326" height="48" />
    
            <div>
              2006 Copyright.<br />
              All Rights Reserved.
            </div>
          </div>
        </div>
      </div>
    </body>
    </html>


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
  •