34 users online (1 members and 33 guests)  


  Results 1 to 4 of 4

Related

  1. Replies: 9
  2. .htaccess doesn't work    Forum: HTML Forum
    Replies: 1
  3. js script that doesn't work ???    Forum: Javascript Forum
    Replies: 1
  4. Replies: 1
  5. Replies: 7
  1. #1
    frannybb's Avatar
    New User

    Status
    Offline
    Join Date
    Jan 2008
    Posts
    2

    Site doesn't work properly on IE5

    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>
    Last edited by vinyl-junkie; 01-26-2008 at 10:29 AM. Reason: Re-did the code tags

  2. #2
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: Site doesn't work properly on IE5

    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>
    

  3. #3
    frannybb's Avatar
    New User

    Status
    Offline
    Join Date
    Jan 2008
    Posts
    2

    Re: Site doesn't work properly on IE5

    Thank you for welcoming me and your help!

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

  4. #4
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: Site doesn't work properly on IE5

    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.
    Attached Images Attached Images



Tags for this Thread