views:

319

answers:

2

Hi all, I'm really really new to HTML/CSS, but somehow decided to plunge head on to using 960 Grid System, which I found helpful. I know some says it's unsemantic, but I've been involved and at the end, tangled in the problem stated above. I've tried a few codes like overflow: hidden, overflow: auto, display: block, etc that I found on other pages and pages on stack overflow, but the error still there.

I would really appreciate anyone's help at this site.

These are the html of the site:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="content-type" content=
    "text/html; charset=us-ascii">
    <meta http-equiv="content-type" content=
    "text/html; charset=us-ascii">
    <base>
    <title>
      najibahabakar.com
    </title>
    <link rel="stylesheet" href="style.css" type="text/css"
    media="screen">
    <link rel="stylesheet" href="960.css" type="text/css" media=
    "screen">
    <link rel="stylesheet" href="text.css" type="text/css" media=
    "screen">
  </head>
  <body>
    <div class="container_12">
      <div id="topgrafik">
        <div class="prefix_6">
          <ul id="nav" class="nav">
            <li>Laman Depan
            </li>
            <li>Mengenai
            </li>
            <li>Mimpi
            </li>
            <li>Hubungi
            </li>
          </ul>
        </div>
        <div class="clear"></div>
        <div class="grid_3 prefix_1" id="tgfocus">
          <img class="frame" src="images/mengkuang.jpg" alt=
          "tikar mengkuang!">
        </div>
        <div class="clear"></div>
        <div class="center">
          <div class="grid_4">
            <h5>
              Buku, Sastera, Diri
            </h5>
          </div>
          <div class="grid_4">
            <h5>
              Galeri
            </h5>
          </div>
          <div class="grid_4">
            <h5>
              Web Design
            </h5>
          </div>
        </div>
      </div>
      <div class="clear"></div>
      <div id="middlebody">
        <div class="left">
          <div class="grid_2 prefix_1">
            <p id="date">
              31 DISEMBER 2009
            </p>
            <p>
              Buku, kemuncak peradaban
            </p>
            <hr>
            <p id="date">
              31 DISEMBER 2009
            </p>
            <p>
              Cemas bila buku bertambah!
            </p>
            <hr>
            <p id="date">
              31 DISEMBER 2009
            </p>
            <p>
              Janji tak terpenuh
            </p>
          </div>
          <div class="grid_4 prefix_1">
            <p>
              Di sini galeri imej, mungkin juga hasil-hasil kerja
              Photoshop & Inkscape
            </p>
            <hr>
          </div>
          <div class="grid_2 prefix_1">
            <p id="date">
              31 DISEMBER 2009
            </p>
            <p>
              Hasil pertama
            </p>
            <hr>
          </div>
        </div>
      </div>
      <div id="footer"></div>
    </div>
  </body>
</html>

And the css:

html {
    background: url('images/bground.jpg') repeat;
    color: #333333;
}
body,h1,h2,h3,h4,h5,h6 {
    padding: 0;
    margin: 0;
}

/*----------NAVIGATION--------------------*/

#nav li {
list-style-type: none;
display: inline;
}

ul.nav {
margin-top: 2px;
}

/*----------------GENERAL CLASSES------------*/

.center {
text-align: center;
align: center;
padding-left: 10px;
}

.left {
text-align: left;
font-size: 95%;
padding-left: 15px;
}

#date {
font-size: 85%;
}

/*-----------------BACKGROUND-----------------*/

#topgrafik {
background: url('images/topgrafik.jpg') center top; 
height: 426px;
width: 993px;
float: left;
position: relative;
}

#middlebody {
background: url('images/kandungan2.jpg') center bottom repeat-y; 
height: 408px;
width: 993px;
float: left;
position: relative;
}

#footer {
background: url('images/footer.jpg') center bottom; 
background-repeat: no-repeat;
height: 228px;
width: 993px;
float: left;
position: relative;
}

/*---------------CONTENT LAYOUT---------------------*/

#tgfocus {
margin-top: 80px;
margin-bottom: 40px;
position: relative;
min-height: 205px;
}

/*------------------IMAGES AND THUMBNAIL GALLERY-----------*/

.frame { 
padding: 10px; 
border: 1px solid #333300;
height: 190px;
width: 150px;
background-color: #eaede0;
position: absolute;
}
.align-right { 
float:right; 
margin: 0 0 15px 15px; 
}
.align-left { 
float:left; margin: 0 15px 15px 0; 
}

Plus the 960 Grid System CSS (for easy reference):

.container_12,.container_16{margin-left:auto;margin-right:auto;width:960px}.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12,.grid_13,.grid_14,.grid_15,.grid_16{display:inline;float:left;position:relative;margin-left:10px;margin-right:10px}.container_12 .grid_3,.container_16 .grid_4{width:220px}.container_12 .grid_6,.container_16 .grid_8{width:460px}.container_12 .grid_9,.container_16 .grid_12{width:700px}.container_12 .grid_12,.container_16 .grid_16{width:940px}.alpha{margin-left:0}.omega{margin-right:0}.container_12 .grid_1{width:60px}.container_12 .grid_2{width:140px}.container_12 .grid_4{width:300px}.container_12 .grid_5{width:380px}.container_12 .grid_7{width:540px}.container_12 .grid_8{width:620px}.container_12 .grid_10{width:780px}.container_12 .grid_11{width:860px}.container_16 .grid_1{width:40px}.container_16 .grid_2{width:100px}.container_16 .grid_3{width:160px}.container_16 .grid_5{width:280px}.container_16 .grid_6{width:340px}.container_16 .grid_7{width:400px}.container_16 .grid_9{width:520px}.container_16 .grid_10{width:580px}.container_16 .grid_11{width:640px}.container_16 .grid_13{width:760px}.container_16 .grid_14{width:820px}.container_16 .grid_15{width:880px}.container_12 .prefix_3,.container_16 .prefix_4{padding-left:240px}.container_12 .prefix_6,.container_16 .prefix_8{padding-left:480px}.container_12 .prefix_9,.container_16 .prefix_12{padding-left:720px}.container_12 .prefix_1{padding-left:80px}.container_12 .prefix_2{padding-left:160px}.container_12 .prefix_4{padding-left:320px}.container_12 .prefix_5{padding-left:400px}.container_12 .prefix_7{padding-left:560px}.container_12 .prefix_8{padding-left:640px}.container_12 .prefix_10{padding-left:800px}.container_12 .prefix_11{padding-left:880px}.container_16 .prefix_1{padding-left:60px}.container_16 .prefix_2{padding-left:120px}.container_16 .prefix_3{padding-left:180px}.container_16 .prefix_5{padding-left:300px}.container_16 .prefix_6{padding-left:360px}.container_16 .prefix_7{padding-left:420px}.container_16 .prefix_9{padding-left:540px}.container_16 .prefix_10{padding-left:600px}.container_16 .prefix_11{padding-left:660px}.container_16 .prefix_13{padding-left:780px}.container_16 .prefix_14{padding-left:840px}.container_16 .prefix_15{padding-left:900px}.container_12 .suffix_3,.container_16 .suffix_4{padding-right:240px}.container_12 .suffix_6,.container_16 .suffix_8{padding-right:480px}.container_12 .suffix_9,.container_16 .suffix_12{padding-right:720px}.container_12 .suffix_1{padding-right:80px}.container_12 .suffix_2{padding-right:160px}.container_12 .suffix_4{padding-right:320px}.container_12 .suffix_5{padding-right:400px}.container_12 .suffix_7{padding-right:560px}.container_12 .suffix_8{padding-right:640px}.container_12 .suffix_10{padding-right:800px}.container_12 .suffix_11{padding-right:880px}.container_16 .suffix_1{padding-right:60px}.container_16 .suffix_2{padding-right:120px}.container_16 .suffix_3{padding-right:180px}.container_16 .suffix_5{padding-right:300px}.container_16 .suffix_6{padding-right:360px}.container_16 .suffix_7{padding-right:420px}.container_16 .suffix_9{padding-right:540px}.container_16 .suffix_10{padding-right:600px}.container_16 .suffix_11{padding-right:660px}.container_16 .suffix_13{padding-right:780px}.container_16 .suffix_14{padding-right:840px}.container_16 .suffix_15{padding-right:900px}.container_12 .push_3,.container_16 .push_4{left:240px}.container_12 .push_6,.container_16 .push_8{left:480px}.container_12 .push_9,.container_16 .push_12{left:720px}.container_12 .push_1{left:80px}.container_12 .push_2{left:160px}.container_12 .push_4{left:320px}.container_12 .push_5{left:400px}.container_12 .push_7{left:560px}.container_12 .push_8{left:640px}.container_12 .push_10{left:800px}.container_12 .push_11{left:880px}.container_16 .push_1{left:60px}.container_16 .push_2{left:120px}.container_16 .push_3{left:180px}.container_16 .push_5{left:300px}.container_16 .push_6{left:360px}.container_16 .push_7{left:420px}.container_16 .push_9{left:540px}.container_16 .push_10{left:600px}.container_16 .push_11{left:660px}.container_16 .push_13{left:780px}.container_16 .push_14{left:840px}.container_16 .push_15{left:900px}.container_12 .pull_3,.container_16 .pull_4{left:-240px}.container_12 .pull_6,.container_16 .pull_8{left:-480px}.container_12 .pull_9,.container_16 .pull_12{left:-720px}.container_12 .pull_1{left:-80px}.container_12 .pull_2{left:-160px}.container_12 .pull_4{left:-320px}.container_12 .pull_5{left:-400px}.container_12 .pull_7{left:-560px}.container_12 .pull_8{left:-640px}.container_12 .pull_10{left:-800px}.container_12 .pull_11{left:-880px}.container_16 .pull_1{left:-60px}.container_16 .pull_2{left:-120px}.container_16 .pull_3{left:-180px}.container_16 .pull_5{left:-300px}.container_16 .pull_6{left:-360px}.container_16 .pull_7{left:-420px}.container_16 .pull_9{left:-540px}.container_16 .pull_10{left:-600px}.container_16 .pull_11{left:-660px}.container_16 .pull_13{left:-780px}.container_16 .pull_14{left:-840px}.container_16 .pull_15{left:-900px}.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}* html .clearfix,*:first-child+html .clearfix{zoom:1}

All the background images in three divs #topgrafik, #middlebody and #footer disappear in IE.

Please help and thank you in advance.

+3  A: 

I think the problem is the last slash in the image paths:

./images/footer.jpg/

I am not sure, but maybe, the dot may cause problems, too. You could describe a relative path just like this

images/footer.jpg
peter p
Yes, thank you, peter p, it works. Now that's a learning curve. What a silly mistake I made.
N.A.B
No, what's silly is that some browsers tolerate things that others do not ;-) this behavior does not make it easier for us all...
peter p
+1  A: 

Have you tried removing the trailing slash in the image url?

Like this:

background: url('images/topgrafik.jpg') center top;
Philippe Leybaert
Yes, thank you, philippe, have removed them and voila, it works. Now that's a learning curve. What a silly mistake I made.
N.A.B