SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Nov 2005
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How do i display one div for IE 6 or below and a different one for firefox/IE7?

    Hey,

    How do i display one div for IE 6 or below and a different one for firefox/IE7?

    So the code below would display if you where IE 6 or below:

    Code:
    <div style="width: 113px; height: 114px; position: absolute; top:0px; right:0px; border:none; font-family: Arial Black;">
    <a href="livesubmissions.net" style="font-size: 18px; position: absolute; top: 0px; right: 0px; width: 41px; height: 44px; z-index:1;"><img src="http://livesubmissions.net/img/livehelp.gif" alt="Live Submissions - Live Help" /></a>
    <a href="livesubmissions.net" style="font-size: 8px; position: absolute; top: -10px; right: -10px; height: 114px;"><img src="http://livesubmissions.net/img/livesubmissions.gif" alt="Live Submissions - LiveSubmissions.com" /></a></div>
    but if you where in firefox or IE 7 it would show this:

    Code:
    <div style="width: 113px; height: 114px; position: absolute; top:0px; right:0px; border:none; font-family: Arial Black;">
    <a href="livesubmissions.net" style="font-size: 18px; position: absolute; top: 0px; right: 0px; width: 41px; height: 44px; z-index:1;"><img src="http://livesubmissions.net/img/livehelp.png" alt="Live Submissions - Live Help" /></a>
    <a href="livesubmissions.net" style="font-size: 8px; position: absolute; top: -10px; right: -10px; height: 114px;"><img src="http://livesubmissions.net/img/livesubmissions.png" alt="Live Submissions - LiveSubmissions.com" /></a></div>
    any ideas????

    thank you!

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,810
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Code:
    <!--[if lt IE7]>
    <div style="width: 113px; height: 114px; position: absolute; top:0px; right:0px; border:none; font-family: Arial Black;">
    <a href="livesubmissions.net" style="font-size: 18px; position: absolute; top: 0px; right: 0px; width: 41px; height: 44px; z-index:1;"><img src="http://livesubmissions.net/img/livehelp.gif" alt="Live Submissions - Live Help" /></a>
    <a href="livesubmissions.net" style="font-size: 8px; position: absolute; top: -10px; right: -10px; height: 114px;"><img src="http://livesubmissions.net/img/livesubmissions.gif" alt="Live Submissions - LiveSubmissions.com" /></a></div>
    <![endif]--><!--[if gte IE7]<-->
    <div style="width: 113px; height: 114px; position: absolute; top:0px; right:0px; border:none; font-family: Arial Black;">
    <a href="livesubmissions.net" style="font-size: 18px; position: absolute; top: 0px; right: 0px; width: 41px; height: 44px; z-index:1;"><img src="http://livesubmissions.net/img/livehelp.png" alt="Live Submissions - Live Help" /></a>
    <a href="livesubmissions.net" style="font-size: 8px; position: absolute; top: -10px; right: -10px; height: 114px;"><img src="http://livesubmissions.net/img/livesubmissions.png" alt="Live Submissions - LiveSubmissions.com" /></a></div>
    <!--[endif]-->
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Member
    Join Date
    Nov 2005
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for your reply. But i've tried that and it doesn't work because FireFox can't see what's between <!--[if lt IE7]> tags......any other suggestions?

  4. #4
    SitePoint Enthusiast mrsmiley's Avatar
    Join Date
    Jul 2004
    Location
    Melbourne
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Conditional comments are an IE only extension. Seems all you really want to do is display png files for the newer browsers (for transparency reasons?), or the gif version for lower.

    I would simply code one div with PNG in it, then while the page is loading, use Javascript to detect older browsers and replace the img.src with the gif version instead.

  5. #5
    SitePoint Member
    Join Date
    Nov 2005
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for your post. That's exactly what i want to do. Would you be able to help me out with the javascript?

  6. #6
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ew. Inline styles.

    Anyway, try this:
    Code:
    <!--[if lt IE 7]>
    <div style="width: 113px; height: 114px; position: absolute; top:0px; right:0px; border:none; font-family: Arial Black;">
    <a href="livesubmissions.net" style="font-size: 18px; position: absolute; top: 0px; right: 0px; width: 41px; height: 44px; z-index:1;"><img src="http://livesubmissions.net/img/livehelp.gif" alt="Live Submissions - Live Help" /></a>
    <a href="livesubmissions.net" style="font-size: 8px; position: absolute; top: -10px; right: -10px; height: 114px;"><img src="http://livesubmissions.net/img/livesubmissions.gif" alt="Live Submissions - LiveSubmissions.com" /></a></div>
    <![endif]--><!--[if gte IE 7]><!-->
    <div style="width: 113px; height: 114px; position: absolute; top:0px; right:0px; border:none; font-family: Arial Black;">
    <a href="livesubmissions.net" style="font-size: 18px; position: absolute; top: 0px; right: 0px; width: 41px; height: 44px; z-index:1;"><img src="http://livesubmissions.net/img/livehelp.png" alt="Live Submissions - Live Help" /></a>
    <a href="livesubmissions.net" style="font-size: 8px; position: absolute; top: -10px; right: -10px; height: 114px;"><img src="http://livesubmissions.net/img/livesubmissions.png" alt="Live Submissions - LiveSubmissions.com" /></a></div>
    <!--<![endif]-->
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  7. #7
    SitePoint Member
    Join Date
    Nov 2005
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for your post Kravvitz, but if you look a few post up you will see felgall post and it's exactly the same What i said to him was:
    Thank you for your reply. But i've tried that and it doesn't work because FireFox can't see what's between <!--[if lt IE7]> tags......any other suggestions?
    mrsmiley is saying exactly what i need, i just need some help on doing the javascript for that

  8. #8
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, what I posted is subtly and yet significantly different from what Stephen (felgall) posted.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  9. #9
    SitePoint Enthusiast mrsmiley's Avatar
    Join Date
    Jul 2004
    Location
    Melbourne
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try reading this article: http://alistapart.com/stories/pngopacity/ But instead of using it to set transparency on existing PNG's, just try something like this:

    Code:
    document.getElementById('alphaimg').src = 'http://livesubmissions.net/img/livesubmissions.gif';
    Just make sure you set id="alphimg" on the img tag in question you want to change.

    Alternatively, just use one of the existing methods (like mentioned in the article) to add alpha support to earlier versions of IE. I think the IE7 library by Dean Edwards? has that built in. I think it's usually implemented as an IE behaviour.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •