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

Where to find skilled freelance designers?

photoshop

Photoshop or Sketch?

Is Directory Submissions still an effective way for link...

How to get PR for website?

What is Google Admob?