[SOLVED] html only working on ie6, please help

r-it · August 12, 2008

hi there, I have a problem that i have been trying to fix for over 2 days now. It seems that my css/html is somewhat wrong, but i don't know where it is wrong coz i've been doing this for quite a while now with just minor problems, nothing this major.

if you have a look at this link in ie: http://www.byo.co.za/prob/index.htm

you will find that all is well, but if you look at it through firefox or opera you will notice that it is not showing the desired result. Can someone please have a look at my css here and tell me if there is something i am doing wrong: http://www.byo.co.za/prob/qdos.css i suspect it has to do with the float thingie coz whenever i have that there is some sort of a problem.

thanks

haku · August 12, 2008

IE browsers (particularly IE6) are not standards compliant, so coding first for IE and after for other browsers is going to give you many many headaches. You will save yourself a lot of troubles by coding first for FF (or a different standards compliant browser) then adjusting after the fact for IE.

r-it · August 12, 2008

since most users are still using internet explorer i have always thought it is sensible to ensure that a website is always compatible with ie. can you help with the problem at hand rather

haku · August 12, 2008

I already did! You are trying to fix something that is broken. I know it's a pain in the butt to have to take a few steps back, but trust me when I say that in the long run it will be the easier route to take. If you try to fix it as is, you will just be hacking something together. And the more hacks you build on top of each other, the less stable your site gets, and the harder it is to fix the problems that appear later on.

Once you get it working on FF, you can use conditional comments to get it working for IE.

wildteen88 · August 12, 2008

For a simple two column layout like that you should not have to apply any sort of CSS hacks. I have I attached my version of your site with valid HTML/CSS. From my testing it works fine with FF3, IE7 and Safari 3. It should also work with other browsers such as FF2, Opera. It should work fine under IE6 too.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Qdos Consulting SA design</title>
<link rel="stylesheet" type="text/css" href="qdos.css" />
</head>
<body>
<div id="container">
  <div id="header"><img src="banner.jpg" alt="Qdos Consulting SA design" /></div>
  <div id="menu">
    <table style="padding-top: 2px;" border="0" cellpadding="2" cellspacing="2" width="575">
      <tbody>
        <tr>
          <td><a class="menulinks" href="#">Home</a></td>
          <td>|</td>
          <td><a class="menulinks" href="#">Products</a></td>
          <td>|</td>
          <td><a class="menulinks" href="#">News</a></td>
          <td>|</td>
          <td><a class="menulinks" href="#">Newsletters</a></td>
          <td>|</td>
          <td><a class="menulinks" href="#">Frequently Asked Questions</a></td>
          <td>|</td>
          <td><a class="menulinks" href="#">Contact Us</a></td>
        </tr>
      </tbody>
    </table>
  </div>
  <div id="content">
    <div id="left">
      <h3>Heading</h3>
    
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
        when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
        It has survived not only five centuries, but also the leap into electronic typesetting,
        remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset 
        sheets containing Lorem Ipsum passages, and more recently with desktop publishing software 
        like Aldus PageMaker including versions of Lorem Ipsum.</p>
        
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
        when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
        It has survived not only five centuries, but also the leap into electronic typesetting,
        remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset 
        sheets containing Lorem Ipsum passages, and more recently with desktop publishing software 
        like Aldus PageMaker including versions of Lorem Ipsum.</p>
      
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
        when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
        It has survived not only five centuries, but also the leap into electronic typesetting,
        remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset 
        sheets containing Lorem Ipsum passages, and more recently with desktop publishing software 
        like Aldus PageMaker including versions of Lorem Ipsum.</p>
      
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
        when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
        It has survived not only five centuries, but also the leap into electronic typesetting,
        remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset 
        sheets containing Lorem Ipsum passages, and more recently with desktop publishing software 
        like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
    <div id="right">
    
    <div class="itemhead">
      <h3 class="rightheading">Heading</h3>
    </div>
    <div class="itemmid"><p>solds is not the one to be sold without the other.</p></div>
    <div class="itemfoot"></div>
    
    <div class="itemhead">
      <h3 class="rightheading">Heading</h3>
    </div>
    <div class="itemmid"><p>solds is not the one to be sold without the other.</p></div>
    <div class="itemfoot"></div>
    
    <div class="itemhead">
      <h3 class="rightheading">Heading</h3>
    </div>
    <div class="itemmid"><p>solds is not the one to be sold without the other.</p></div>
    <div class="itemfoot"></div>
    
    <div class="itemhead">
      <h3 class="rightheading">Heading</h3>
    </div>
    <div class="itemmid"><p>solds is not the one to be sold without the other.</p></div>
    <div class="itemfoot"></div>
    
    </div>
  </div>
  <div id="footer"></div>
</div>
</body>
</html>

* {
padding: 0;
margin: 0;
}

body {
background:#F2E71C;
color:#014782;
font-family:Arial, Helvetica, sans-serif;
font-size: 13px;
background:#F2E71C url(bg.jpg) repeat-x;
}

#container {
width:800px;
margin: 0px auto;
background:#014782 url(ee.jpg) repeat-y;
}

#header {
background-image: url(dd.jpg);
background-repeat: no-repeat;
padding-top: 20px;
text-align: center;
}

#menu
{
background:url(menu.jpg) no-repeat;
height:29px;
margin: 0 5px;
padding: 0 5px;
font-size:15px;
}

#menu .menulinks
{
font-weight:bold;
text-decoration:none;
cursor:default;
color:#014782;
}

#content {
padding: 10px;
}

#left {
float: left;
width: 540px;
text-align: justify;
line-height: 1.2em;
}
#left h3
{
font-size:16px;
padding: 0;
}
#left p {
margin: 3px 0;
text-indent: 1em;
}

#right {
float: right;
width: 180px;
}

.itemhead {
background:#FFFFFF url(itemhead.jpg) no-repeat;
height:42px;
text-align:center;
color:#FFFFFF;

}
.rightheading {
padding-top: 8px;
font-size:16px;
font-weight:bold;
}
.itemmid {
background:#FFFFFF url(itemmid.jpg) repeat-y;
padding: 0px 17px 0px 5px;
text-align:justify;
}
.itemfoot {
background:#FFFFFF url(itemfoot.jpg) no-repeat;
height:16px;
padding-bottom:15px;
}

#footer {
background:url(ff.jpg) no-repeat;
height:22px;
clear: both;
}

r-it · August 12, 2008

All hail the mighty wildteen, dude, you're a lifesaver.

wildteen88 · August 12, 2008

I didn't mention this earlier however you menu would be better of being done as a CSS menu, rather than a table. Here is some great examples of CSS menus.

r-it · August 12, 2008

thnks a lot man, i'll hv a look

Sign In

[SOLVED] html only working on ie6, please help

Recommended Posts

r-it

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

r-it

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

wildteen88

Link to comment

Share on other sites

r-it

Link to comment

Share on other sites

wildteen88

Link to comment

Share on other sites

r-it

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information