CSS and Browsers

Discussion in 'CSS' started by morph2007, Dec 7, 2006.

0
  1. #1
    Hi All,

    I am getting frustrated with all this browser trouble!

    I have a html version of my music collection using HTML tables and CSS for formatting/layout and style.

    I decided I was not happy with the page, and thought I would have another go at rewritting without the tables (according to Zen HTML tables are out and CSS tables are in).

    So early this morning I set out with my trusty Firefox 2 and ultraedit and set about sorting out a 'table' design. All fine, I then right click on firefox to open up in IE and everything is a mess (table-cell is not supported in IE).

    Not to be disuaded I went about another version.

    Now this works fine in IE, but looks crap in FF. If it were a perfect world we would all use FF, but it aint so could someone please help?!!!

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <title>test</title>
    <style type="text/css">
    html,body { margin: 0; padding: 0; }
    .box { margin: 5px auto; border-spacing: 1px; width: 90%; }
    /*.row div { display: block; background: #fff; } */

    img.displayed { margin-left: auto; margin-right: auto; width: 130px; height: 130px; }

    .content { float: left; padding: 10px; margin: 1px; background: #0000FF; height: normal; border: 1px solid #ccc; width: 40%;
    /* ie5win fudge */ voice-family: "\"}\""; voice-family:inherit; width: 40%; }
    }
    html>body #content { width: 50%; /* ie5win fudge ends */ }
    .content2 { float: left; padding: 10px; margin: 1px; background: #C6FFFF; height: normal; border: 1px solid #ccc; width: 40%;
    /* ie5win fudge */ voice-family: "\"}\""; voice-family:inherit; width: 40%; }
    html>body #content2 { width: 40%; /* ie5win fudge */
    }

    .s1 { font-size: normal; font-style: normal; font-weight: bold; color: #FFFFFF; }
    .s2 { font-size: normal; font-style: italic; font-weight: normal; color: #FFFFFF; }
    .s3 { font-size: small; font-style: italic; font-weight: normal; color: #0000FF; }
    #line { display: block; height: 4px; }
    img.displayed { float: left; margin-left: auto; margin-right: auto; width: 130px; height: 130px; }

    </style>
    </head>
    </head>
    <body>
    <div class="box">
    <div class="content"><span class="s1">This Album</span></div>
    <div class="content"><span class="s2">The title of the album</span></div>
    <div class="content2"><img class="displayed" src="covers\image.jpg"></a></div>
    <div class="content2"><span class="s3">Some text<br />and again<br /></span></a></div>
    </div>
    <div id="line"></div>
    <div class="box">
    <div class="content">This Album</div>
    <div class="content">The title of the album</div>
    <div class="content2"><img class="displayed" src="covers\image.jpg"></a></div>
    <div class="content2">Some text</a></div>
    </div>


    </body>
    </html>
     
    morph2007, Dec 7, 2006 IP
  2. weknowtheworld

    weknowtheworld Guest

    Messages:
    306
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I would like to tell u that IE manipulates the look but FF doesn't. FF shows the correct errors.. The errors corrected in FF will not be errors in IE.. so go through into the code and try the testing now on in FF tahn IE.
     
    weknowtheworld, Dec 9, 2006 IP