Jump to content

[SOLVED] html only working on ie6, please help

r-it

By r-it
in HTML Help

 Share

Recommended Posts

r-it Regular Member

r-it

Posted
Posted

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

Link to comment
Share on other sites
haku Regular Member

haku

Posted
Posted

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.

Link to comment
Share on other sites
haku Regular Member

haku

Posted
Posted

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.

Link to comment
Share on other sites
wildteen88 Regular Member

wildteen88

Posted
Posted

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;
}

 

 

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.