1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Probs with coding - Firefox OK, IE not ... help!

Discussion in 'CSS' started by HanWood, Mar 26, 2011.

  1. #1
    Hello folks

    Have just done a MAJOR overhaul on my site www.udzungwaforestcamp.com Despite my best efforts so far with CSS, while the site is (mostly) OK in FF and Chrome it is simply a mess in IE. The heading bar containing the table of images at the top won't render correctly in IE. Here's my html code - can anyone help? Thanks!

    <div id="logos">
    <table>
    <tr>
    <td class="logostd">
    <a href="/" title="Mountain view " >
    <img class="topimageleft" alt="x - Mountain view"
    src="/localimages/udzungwa_mountain_view.jpg">
    </a>
    </td><td class="logostd">
    <a href="/" title=" Udzungwa Tree Frog" >
    <img class="topimageleft" alt="Udzungwa Tree Frog"
    src="/localimages/udzungwa_mountains_sanje-treefrog.jpg">
    </a>
    </td><td class="logostd">
    <a href="/galleryindex" rel="nofollow" title=" - Sanje waterfall" >
    <img class="topimageleft" alt="Sanje waterfall"
    src="/localimages/udzungwa_mountains_sanje_waterfall-top_slide.jpg">
    </a>
    </td><td class="logostd">
    <a href="/" title="Udzungwa Forest Camp" >
    <img id="logoimage" alt="Udzungwa Forest Camp"
    src="/localimages/udzungwa_forest_camp_logo.jpg">
    </a>
    </td><td class="logostd">
    <a href="/galleryindex" rel="nofollow" title="Tree frog" >
    <img class="topimageleft" alt="Hornbill"
    src="/localimages/Udzungwa_Hondo_Hondo.jpg">
    </a>
    </td><td class="logostd">
    <a href="/galleryindex" rel="nofollow" title="<TMPL_VAR
    NAME="TITLE"> - View from Sanje" >
    <img class="topimageleft" alt=" - View from Sanje"
    src="/localimages/udzungwa_mountains_view_from_sanje.jpg">
    </a>
    </td><td class="logostd">
    <a href="/" title="<TMPL_VAR NAME="TITLE"> - Udzungwa Red Colobus
    Monkey" >
    <img class="topimageright" alt="Udzungwa Red Colobus monkey"
    src="/localimages/udzungwa_mountains_red_colobus.jpg">
    </a>
    </td></tr></table>
    </div>
    SEMrush
     
    HanWood, Mar 26, 2011 IP
    SEMrush
  2. style0

    style0 Peon

    Messages:
    108
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    well, I've looked ten times, cannot see a problem. Looks identical in IE and FF

    Of course I haven't tried IE6, but then again, no webpage should have to work in a ten year old browser.
     
    style0, Apr 5, 2011 IP
  3. Cricket

    Cricket Well-Known Member

    Messages:
    182
    Likes Received:
    41
    Best Answers:
    0
    Trophy Points:
    155
    #3
    One of the best things you can do to help your site work in multiple browsers is to take the time to clean up your coding so it is valid. W3C is showing multiple errors and warnings both with your HTML and with your CSS. Getting your site valid may not fix every display issue, but it will sure head you in the right direction.

    Beautiful pictures on the site! :)
     
    Cricket, Apr 5, 2011 IP
  4. jameskingama

    jameskingama Peon

    Messages:
    15
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    I think you need to install the javascript that makes okay for all browser. just research them,.
     
    jameskingama, Apr 6, 2011 IP
  5. Jacob-Lett

    Jacob-Lett Guest

    Messages:
    12
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    I just looked at your site and I think you figured out the cross browser bug on your own. It looks like you replaced the table with divs. Which basically solves the problem you had earlier.

    The reason why the table version wasn't working was the img needed to be a block level element and not inline. This tells IE they are blocks and hold a certain space.

    Adding this to the CSS would have solved the issue with the code above.
    .logostd img {display:block;}
     
    Jacob-Lett, Apr 16, 2011 IP