Another problem with CSS layout

Dev Shed Forums Sponsor:

August 8th, 2003, 02:15 PM

MKashlev

Junior Member

Join Date: Aug 2001

Location: Riverdale, NYC

Posts: 9

Time spent in forums: < 1 sec
Reputation Power: 0

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 02:17 PM.

August 8th, 2003, 02:23 PM

javakills

Contributing User

Join Date: Jul 2003

Location: Miami, FL

Posts: 47

Time spent in forums: < 1 sec
Reputation Power: 6

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 02:30 PM.

August 8th, 2003, 04:06 PM

elToro

Junior Member

Join Date: Aug 2003

Posts: 1

Time spent in forums: < 1 sec
Reputation 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.

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: