SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    Who Me? JeremyL's Avatar
    Join Date
    Dec 1999
    Location
    Dallas, TX
    Posts
    296
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Netscape, Opera break my CSS page....

    The page is here. http://www.streamlinevisions.com/test/1/

    It looks like it's supposed to in IE6 but Net7 and Opera7 break it up badly. The code follows.

    html
    Code:
     
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
     <title>Erotic Side</title>
     <link rel="stylesheet" href="layout.css" type="text/css">
    </head>
    <body>
    <div class="head"></div>
    <div class="navbuttons">
     <div class="navlinks"><a href="/">Home</a></div>
     <div class="navlinks"><a href="/">Search</a></div>
     <div class="navlinks"><a href="/">by Text</a></div>
     <div class="navlinks"><a href="/">by Text</a></div>
     <div class="navlinks"><a href="/">by Text</a></div>
     <div class="navlinks"><a href="/">All Text</a></div>
    </div>
    <div class="content">
    <div class="list">
    <div class="listhead">
     <span class="text">
     <b>by Text</b>
     </span>
    </div>
    <div class="listbody">
     <span class="text">
      Text<br />
      Text<br />
      Text<br />
      Text<br />
      Text<br />
      Text<br />
      SText<br />
      Text<br />
      Text<br />
      Text<br />
     </span>
    </div>
    </div>
    <div class="list">
    <div class="listhead">
     <span class="text">
     <b>by Text</b>
     </span>
    </div>
    <div class="listbody">
     <span class="text">
      Text<br />
      Text<br />
      Text<br />
      Text<br />
      Text<br />
      Text<br />
      Text<br />
      Text<br />
     </span>
    </div>
    </div>
    <div class="list">
    <div class="listhead">
     <span class="text">
     <b>by Text</b>
     </span>
    </div>
    <div class="listbody">
     <span class="text">
      Text<br />
      Text<br />
      Text<br />
      Text<br />
      Text<br />
      Text<br />
      Text<br />
      Text<br />
      Text<br />
      Text<br />
     </span>
    </div>
    </div>
    </div>
    </body>
    </html>
    css
    Code:
     
    body { 
     margin: 0px 0px 0px 0px;
     background-color: Black;
     font: 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
    }
    .content {
     margin: 15px 15px 15px 15px;
     float: left;
    }
    .head {
     width: 100%;
     height: 68px;
     background: #0064ff;
    }
    .navbuttons {
     width: 100%;
     height: 20px;
     background: #00163A;
     border-bottom: 1px solid #0064FF;
    }
    .navlinks {
     margin: 0px 0px 0px 0px;
     padding: 2px 10px 2px 10px;
     float: right;
     color: #fff;
    }
    a {
     color: White;
     text-decoration: none; 
    }
    a:visited {
     color: White;
    }
    a:hover {
     color: Silver;
    }
    p {
     color: White;
    }
    .list {
     float: left;
     width: 150px;
     height: 160px;
     margin: 10px 10px 10px 0px;
     background: #00163A;
    }
    .text {
     color: White;
     font: Verdana, Geneva, Arial, Helvetica, sans-serif;
    }
    .listhead {
     border: 1px solid #0064ff;
     width: 150px;
     height: 10px;
     padding: 2px 10px 2px 10px;
     margin-bottom: 2px;
    }
    .listbody {
     border: 1px solid #0064ff;
     width: 150px;
     height: 160px;
     padding: 10px 10px 10px 10px;
    }

    Should I just switch to tables or is there a fix?

    Thanks
    Jeremy

  2. #2
    SitePoint Zealot Hulkur's Avatar
    Join Date
    Oct 2001
    Location
    Estonia
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It looks different in O7 and IE6 but I'd say it looks correct in O7 according to code

    from w3.org
    Visual user agents generally place a line break before and after DIV elements

    If you want DIVs to be placed side-by-side then you should set position and top attribute in CSS to those DIVs
    (2B) or (not 2B) = FF

  3. #3
    Who Me? JeremyL's Avatar
    Join Date
    Dec 1999
    Location
    Dallas, TX
    Posts
    296
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Hulkur
    If you want DIVs to be placed side-by-side then you should set position and top attribute in CSS to those DIVs
    Ok now you have lost me, I thought that was what float was for. Can you give me an example?

    Aslo anyone know how to correct NS & Opera with the border and background issues?

    Thanks

  4. #4
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Correct NS & Opera?! It's IE that's the problem!

    Try this as a quick fix:
    Code:
    .list { display: table-cell; }
    ~~Ian

  5. #5
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Ian's right; IE will not recognize the table-cell display, but Moz and Opera will, and will act accordingly.

  6. #6
    SitePoint Zealot Hulkur's Avatar
    Join Date
    Oct 2001
    Location
    Estonia
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    style for every side-by-side div

    div.list {
    float: left;
    top: 80 px;
    }

    I've used this on my page and it works fine
    (2B) or (not 2B) = FF

  7. #7
    SitePoint Addict
    Join Date
    Dec 2002
    Posts
    386
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by JeremyL
    Ok now you have lost me, I thought that was what float was for. Can you give me an example?

    Aslo anyone know how to correct NS & Opera with the border and background issues?

    Thanks
    also due to the broken box model in IE, you elements will appear to have different dimensions due to the margins and/or padding being placed outside the box rather than within in it...


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
  •