#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2001
    Location
    Riverdale, NYC
    Posts
    9
    Rep Power
    0

    Unhappy Another problem with CSS layout


    Hello,

    Netscape and IE seem to be working completely differently with CSS layout. My goal is to make the webpage in the tabular format using HTML or CSS and image clips. However, I am having problems aligning and putting all the images together without any seams. The page is at:
    http://mkashlev.dyndns.org:7771/ISSI2003-web/test.html
    If viewed in IE, the left navbar images must be right under each other and right under the top line below the logo. No seams should be visible. Both top and bottom vertical lines must meet the middle cross without seams. I can't seem to be able to achieve this with CSS.
    The body (bottom right big box) should be able to expand when the text fills it without affecting the navbar and top bar (title) arrangement. Please take a look at teh code and tell me what is wrong.
    The code is:
    Code:
     <?xml version="1.0"?>
      <!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>
      <title>CSS TEST</title>
    
    <style type="text/css">
      body {
        margin:0px 0px 0 0x;
        align:center;
        padding:0;}
      #level0 {
        width:600px;
        margin:0;
        padding:0;
        background:#2f1b9d;}
      #logo {
        width:97px;
        height:79px;
        background-image: url("images/Weizmann-Institute.gif"); background-repeat: no-repeat;}
      #vrtop{
        height:79px;
        width:8px;
        margin-left:97px;
        padding-left:0px;
        background-image: url("images/about_02.gif"); background-repeat: no-repeat;}
      #vrbottom{
        float:right;
        height:153px;
        width:8px;
        margin-left:97px;
        padding-left:0px;
        background-image: url("images/about_08.gif"); background-repeat: no-repeat;}
    
      #titlebar{
        height:79px;
        width:595px;
        margin-left:8px;
        padding-left:0px;    
        background-image: url("images/title-about.gif"); background-repeat: no-repeat;}
      #hrleft{
        height:9px;
        width:97px;
        padding-left:0px;
        margin-left:0px;
        background-image: url("images/about_04.gif"); background-repeat: no-repeat;}
      #midblock{
        height:9px;
        width:8px;
        margin-left:97px;
        padding-left:0px;
        background-image: url("images/about_05.gif"); background-repeat: no-repeat;}
      #hrright{
        height:9px;
        width:595px;
        margin-left:8px;
        padding-left:0px;
        background-image: url("images/about_06.gif"); background-repeat: no-repeat;}
      #home{
        height:34px;
        width:97px;
        padding-top:0px;
        margin-top:0px;
        margin-left:0px;
        padding-left:0px;
        background-image: url("images/home.gif"); background-repeat: no-repeat;}
      #about{
        height:31px;
        width:97px;
        padding-top:0px;
        margin-top:0px;
        margin-left:0px;
        padding-left:0px;
        background-image: url("images/about.gif"); background-repeat: no-repeat;}
      #students{
        height:37px;
        width:97px;
        padding-top:0px;
        margin-top:0px;
        margin-left:0px;
        padding-left:0px;
        background-image: url("images/students.gif"); background-repeat: no-repeat;}
      #pics{
        height:38px;
        width:97px;
        padding-top:0px;
        margin-top:0px;
        margin-left:0px;
        padding-left:0px;
        background-image: url("images/Pictures.gif"); background-repeat: no-repeat;}
      #spacer{
        height:13px;
        width:97px;
        padding-top:0px;
        margin-top:0px;
        margin-left:0px;
        padding-left:0px;
        background-image: url("images/about_13.gif"); background-repeat: no-repeat;}
    
    </style>
    
    </head>
    
    
    
    <body>
      <div id="level0">
        <div id="logo">
          <div id="vrtop">
            <div id="titlebar">
            </div>
          </div>
        </div>
      </div>
      <div id="level0">
        <div id="hrleft">
          <div id="midblock">
            <div id="hrright">
            </div>
          </div>
        </div>
      </div>
      <div id="level0" style="width:700px;">
        <div id="home">
          <div id="vrbottom">
          </div>  
        </div>
        <div id="about">  
        </div>
        <div id="students">  
        </div>
        <div id="pics">  
        </div>
        <div id="spacer">
        </div>
      </div>
    </body>
    
    </html>
    Thanks in advance,

    ~Dmitry
    Last edited by MKashlev; August 8th, 2003 at 03:17 PM.
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Location
    Miami, FL
    Posts
    47
    Rep Power
    12
    I would try using tables instead of those <div> tags. They work better when it comes to browser compatability and you can get the same effect you want by nesting them.

    The site won't load either. If it's working for other then it's probably my connection. IT's got a firm hold on my internet access and a lot of pages refuse to display right.
    Last edited by javakills; August 8th, 2003 at 03:30 PM.
  4. #3
  5. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Posts
    1
    Rep Power
    0
    I'm all for striving towards pure-CSS layouts instead of tables. But in this case, I have to agree with javakills. If you're going to nest so many divs, you may as well just use tables. The markup won't be any more bloated or less semantic, which is really the goal of using CSS instead of tables anyway.

IMN logo majestic logo threadwatch logo seochat tools logo