Site doesn't work properly on IE5

**frannybb** · 01-24-2008, 10:21 AM

I created an inline floated list that falls into a vertical list in IE. Everything looks fine in Firefox and Safari.

How can I resolve this please? I've very new to CSS, learning as I go a long, so please go easy on me!

Here is the URL:

http://www.franmo.com/lucy.html

Here is my code:

Code:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Untitled Document</title>
<style type="text/css">

body {
background-image: url(001.jpg);
font-size: 12px;
padding:0px;
margin:0px;
}

p {
text-align: left;
margin: 0 auto 50px auto;
padding: 2em 2em 2em 2em;
}

#main{
margin: 0
 auto 0 auto;
width: 850px;
height: 600px;
background-color: #ffffff;
}

div.img
{
    float: left;
    text-align: center;
    margin-top: 0px;
    margin-right: px;
    margin-bottom: 5px;
    margin-left: px;
    padding-top: 0em;
    padding-right: 1em;
    padding-bottom: 0em;
    padding-left: 1em;
}    
div.img img
{ display: inline;

  margin: 0px;
  border: 0;
}

div.desc
{
  text-align: center;
  font-weight: normal;
  width: 120px;
  margin: 13px;
}


#footer{
margin: 0px auto;
padding: 0px;
background-color:rgb(0%,0%,21%);
width:850px;
height:80px;
clear:both;
}

#menu {
    font-family: Arial, Helvetica, sans-serif;
    text-align:left;
    background: rgb(0%,0%,21%);
    color: #FFF;
    margin: 0;
    padding: 0 2em;
}

#menu li {
    display: inline;
    font-weight: bold;
    margin-right: 0.5em;
    border-right: 1px solid #99C;
    padding-right: 0.75em;
}

#menu a {
    color: #D4EC84;
    text-decoration: none;
}

#menu li.last {
border-right:0;
}

#menu2 {
    font-family: Arial, Helvetica, sans-serif;
    text-align:left;
    background: #0000CC;
    color: #FFF;
    margin: 0;
    padding: 0 2em;
}

#menu2 li {
    display: inline;
    font-weight: bold;
    margin-right: 0.5em;
    border-right: 1px solid #99C;
    padding-right: 0.75em;
}

#menu2 a {
    color: #D4EC84;
    text-decoration: none;
}

#menu2 li.last {
border-right:0;
}

#menuspace {
    background: #FFFFFF;
    color: #FFF;
    width: 800px;
    height: 20px;
    }

</style>

</head>

<body>

<div id="main">
<img src="backgrounds/001.jpg" width="850">
    <ol id="menu">
        <li class="first"><a href="shop.html">SHOP</a></li>
        <li>ABOUT</li>
        <li><a href="info.html">INFORMATION</a></li>
        <li><a href="contact.html">CONTACT</a></li>
        <li class="last"><a href="#">contact us</a></li>
  </ol>
  

    <ol id="menu2">
        <li class="first"><a href="shop.html">NEW PRODUCT</a></li>
        <li>Necklaces</li>
        <li><a href="info.html">Bracelets</a></li>
        <li><a href="contact.html">Earrings</a></li>
        <li class="last"><a href="#">Rings</a></li>
  </ol>
  
  <div id="menuspace">
  </div>

<div class="img">
 <a href="klematis_big.htm"><img src="test.jpg" alt="Klematis" width="130" height="130" /></a>
 <div class="desc">Plain Pearl Necklace
 <br />£40<br>
 </div>
</div>
<div class="img"><a href="klematis2_big.htm"><img src="test.jpg" alt="Klematis" width="130" height="130" /></a>
  <div class="desc">Plain Pearl Necklace
 <br />£40</div>
</div>
 <div class="img">
 <a target="_blank" href="klematis4_big.htm"><img src="test.jpg" alt="Klematis" width="130" height="130" /></a>
 <div class="desc">Plain Pearl Necklace
 <br />£40</div>
 </div>
<div class="img">
 <a target="_blank" href="klematis_big.htm"><img src="test.jpg" alt="Klematis" width="130" height="130" /></a>
 <div class="desc">Plain Pearl Necklace
 <br />£40</div>
</div>
<div class="img">
 <a target="_blank" href="klematis2_big.htm"><img src="test.jpg" alt="Klematis" width="130" height="130" /></a>
 <div class="desc">Plain Pearl Necklace
 <br />£40</div>
</div>
<div class="img"><a target="_blank" href="klematis3_big.htm"><img src="test.jpg" alt="Klematis" width="130" height="130" /></a>
 <div class="desc">Plain Pearl Necklace
 <br />£40</div>
</div>
<div class="img">
 <a target="_blank" href="klematis4_big.htm"><img src="test.jpg" alt="Klematis" width="130" height="130" /></a>
 <div class="desc">Plain Pearl Necklace
 <br />£40</div>
</div>
<div class="img">
 <a target="_blank" href="klematis3_big.htm"><img src="test.jpg" alt="Klematis" width="130" height="130" /></a>
 <div class="desc">Plain Pearl Necklace
 <br />£40</div>
</div>
<div class="img">
 <a target="_blank" href="klematis4_big.htm"><img src="test.jpg" alt="Klematis" width="130" height="130" /></a>
 <div class="desc">Plain Pearl Necklace
 <br />£40</div>
</div>
 
</div>

<div id="footer">
</div>



</body>
</html>

**coothead** · 01-26-2008, 04:05 AM

Hi there frannybb,

and a warm welcome to these forums.

try it like this...

Code:


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
<title>Untitled Document</title>

<style type="text/css">
body {
    background-image: url(001.jpg);
    font-size:12px;
    padding:0;
    margin:0;
    text-align:center;
 }
p {
    text-align:left;
    margin:0 auto 50px auto;
    padding:2em;
 }
#main{
    margin:0 auto;
    width: 850px;
    background-color:#fff;
 }

div.img{
    float:left;
    text-align:center;
    margin-bottom: 5px;
    padding:0 1em;
 }
div.img img { 
    width:130px;
    height:130px;
    display: inline;
    margin:0;
    border:0;
 }
div.desc {
    text-align:center;
    font-weight:normal;
    width:120px;
    margin:13px;
 }
#footer{
    margin:0 auto;
    padding:0;
    background-color:rgb(0%,0%,21%);
    width:850px;
    height:80px;
    clear:both;
 }
#menu {
    font-family:arial,helvetica,sans-serif;
    text-align:left;
    background: rgb(0%,0%,21%);
    color:#fff;
    margin:0;
    padding:0 2em;
 }
#menu li {
    display:inline;
    font-weight:bold;
    margin-right:0.5em;
    border-right:1px solid #99C;
    padding-right:0.75em;
 }
#menu a {
    color:#d4ec84;
    text-decoration: none;
 }
#menu li.last {
    border-right:0;
 }
#menu2 {
    font-family:arial,helvetica,sans-serif;
    text-align:left;
    background-color:#0000cc;
    color:#fff;
    margin:0;
    padding:0 2em;
 }
#menu2 li {
    display:inline;
    font-weight:bold;
    margin-right:0.5em;
    border-right:1px solid #99C;
    padding-right:0.75em;
 }
#menu2 a {
    color:#d4ec84;
    text-decoration:none;
 }
#menu2 li.last {
    border-right:0;
 }
#menuspace {
    background-color:#fff;
    color:#fff;
    width:800px;
    height:20px;
 }
.clear {
    line-height:1px;
    font-size:0;
    clear:both;
 }
</style>

</head>
<body>

<div id="main">
<img src="backgrounds/001.jpg" width="850" alt=""/>
<ol id="menu">
<li class="first"><a href="shop.html">SHOP</a></li>
<li>ABOUT</li>
<li><a href="info.html">INFORMATION</a></li>
<li><a href="contact.html">CONTACT</a></li>
<li class="last"><a href="#">contact us</a></li>
</ol>

<ol id="menu2">
<li class="first"><a href="shop.html">NEW PRODUCT</a></li>
<li>Necklaces</li>
<li><a href="info.html">Bracelets</a></li>
<li><a href="contact.html">Earrings</a></li>
<li class="last"><a href="#">Rings</a></li>
</ol>

<div id="menuspace"></div>

<div class="img">
<a href="klematis_big.htm"><img src="test.jpg" alt="Klematis"/></a>
<div class="desc">Plain Pearl Necklace<br />£40<br /></div>
</div>

<div class="img"><a href="klematis2_big.htm"><img src="test.jpg" alt="Klematis"/></a>
<div class="desc">Plain Pearl Necklace<br />£40</div>
</div>

<div class="img">
<a target="_blank" href="klematis4_big.htm"><img src="test.jpg" alt="Klematis"/></a>
<div class="desc">Plain Pearl Necklace<br />£40</div>
</div>

<div class="img">
<a target="_blank" href="klematis_big.htm"><img src="test.jpg" alt="Klematis"/></a>
<div class="desc">Plain Pearl Necklace<br />£40</div>
</div>

<div class="img">
<a target="_blank" href="klematis2_big.htm"><img src="test.jpg" alt="Klematis"/></a>
<div class="desc">Plain Pearl Necklace<br />£40</div>
</div>

<div class="img">
<a target="_blank" href="klematis3_big.htm"><img src="test.jpg" alt="Klematis"/></a>
<div class="desc">Plain Pearl Necklace<br />£40</div>
</div>

<div class="img">
<a target="_blank" href="klematis4_big.htm"><img src="test.jpg" alt="Klematis"/></a>
<div class="desc">Plain Pearl Necklace<br />£40</div>
</div>

<div class="img">
<a target="_blank" href="klematis3_big.htm"><img src="test.jpg" alt="Klematis"/></a>
<div class="desc">Plain Pearl Necklace<br />£40</div>
</div>

<div class="img">
<a target="_blank" href="klematis4_big.htm"><img src="test.jpg" alt="Klematis"/></a>
<div class="desc">Plain Pearl Necklace<br />£40</div>
</div>

<div class="clear">&nbsp;</div>
</div>

<div id="footer"></div>

</body>
</html>

**frannybb** · 01-28-2008, 12:33 AM

Thank you for welcoming me and your help!

I tried this code, but nothings changes when I preview in IE5 ....

**coothead** · 01-28-2008, 05:03 AM

Hi there frannybb,

The code that I posted was tested in these browsers using Windows XP...

IE 5.5
IE 6.0
IE 7.0
Firefox 2.0
Opera 9.25

...and I could detect no difference in their displays.

I have attached an image of the IE5.5 window.

Thread: Site doesn't work properly on IE5

Thread Tools

Related

Why doesn't my anchor work with PDF files. Forum: HTML Forum

.htaccess doesn't work Forum: HTML Forum

js script that doesn't work ??? Forum: Javascript Forum

Submit button on form doesn't work - why? Forum: HTML Forum

Table-less page doesn't display properly in IE Forum: CSS Forum

Site doesn't work properly on IE5

Re: Site doesn't work properly on IE5

Re: Site doesn't work properly on IE5

Re: Site doesn't work properly on IE5

Tags for this Thread

Cloudjiffy- PaaS for Developers