Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 5 of 5

Thread: I hate you IE.

  1. #1
    Senior Member Zboost's Avatar
    Join Date
    Apr 2011
    Location
    Houston
    Posts
    246
    Member #
    27459
    Liked
    20 times

    I hate you IE.

    Have not been around lately, just working on ideas and such. I have an issue with IE of course... My div in IE does stuff it should not, and I cant find it. I am sure it has something to do with relative > absolute position on my flash object wrapper. Class .wow-update vanishes off the screen in IE. Along with some weird width issues if I give width to #wow-recent. If anyone can inspect give me an idea I would appreciate. I will link to the source just be gentle on my site. Its a WIP and in no way complete, nor am I sure if I intend to continue through with it.

    Website
    CSS

    Part of the HTML/CSS I am having issues with.
    HTML Code:
    <div id="w-recents">
    <object id="wow-recent" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="1920" height="450">
    <param name="movie" value="{{ URL::asset('flash/wow_recent.swf') }}"><param name="quality" value="autohigh">
    <param name="bgcolor" value="#f5f5f5">
    <!--[if !IE]>-->
    <object type="application/x-shockwave-flash" data="{{ URL::asset('flash/wow_recent.swf') }}" width="1920" height="450">
    <!--<![endif]-->
    <img src="{{ URL::asset('img/wow_recent.png') }}" alt="Recent Warcraft">
    <!--[if !IE]>-->
    </object>
    <!--<![endif]-->
    <div class="wow-update">
    <h1>
    <a href="#">New Warcraft Guild Tools!</a></h1>
    <p>New applications for managing your guild, and website.</p>
    </div>
    </object>
    </div>
    Code:
    #w-recents {width: 100%; height: 450px; margin: 0 auto; border-top: 5px solid #00aeff; border-bottom: 5px solid #00aeff; box-shadow: 0px 3px 15px 5px #002c40; position: relative; overflow: hidden;}
    #w-recents #wow-recent {width: 1920px;}
    #w-recents #wow-recent .wow-update {width: auto; height: auto; padding: 0 10px 0 10px; background-color: #f5f5f5; position: absolute; top: 25px; right: 25px; border: 2px solid #00aeff; border-radius: 3px; opacity:0.9; filter:alpha(opacity=90);}
    #w-recents #wow-recent .wow-update h1 {font-size: 100%; text-align: left;}
    #w-recents #wow-recent .wow-update p {font-size: 80%; text-align: center;}
    #w-recents #wow-recent .wow-update a {text-decoration: none; color: #000;}
    Sorry I couldn't get the HTML any cleaner.
    Last edited by Zboost; Nov 24th, 2013 at 11:10 PM.

  2.  

  3. #2
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    This one isn't IE, even though right now it's the only browser presenting symptoms. I've seen this before, and it has something to do with Flash specifically. I've never known exactly what it is, though.

    Try adding a z-index to your absolutely positioned div, and in this case if you want to see if it's the Flash set it to some ridiculous level (say 5000 or higher). If the div's still hidden, then you know for sure it's the Flash, in which case I'd suggest just using an image background for IE.

    Mind you, if you're promising responsive design, you really shouldn't even be using a Flash header to begin with. It's not going to run on iPhones, Android devices, and I believe any of the newer Macs (don't ask me on the latter, as I don't own one and don't intend to buy that overpriced crap to find out).
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  4. #3
    Senior Member Zboost's Avatar
    Join Date
    Apr 2011
    Location
    Houston
    Posts
    246
    Member #
    27459
    Liked
    20 times
    Haha Game, I just got to work and tried in this browser and you are correct! The div was glitching on top and under. Though z-index didn't seem to fix but I only set to 1. I just had to restart my computer. Im going to try a few things see if I can fix. Also I had a height issue with the entire div but seemed to be the second wrapper width causing unnecessary white space like padding almost, but that seems to have done it. And the face book follow button was the difference of background-position -65px instead of -64px.....

  5. #4
    Senior Member Zboost's Avatar
    Join Date
    Apr 2011
    Location
    Houston
    Posts
    246
    Member #
    27459
    Liked
    20 times
    I have it so users with no flash get a still image instead.

    Edits:

    So it seems that it was a <param> issue, setting wmode = transparent seems to have taken the glitches away. No way to test at the moment for certain.

    About the flash, is it completely unacceptable to use it in this manner? Its not interactive, I can possibly minimize the size, and it can comply with all the different browsers? Only thing I see wrong is possibility of load times for a little extra "shine". I use the conditionals to detect if flash is available and apply code necessary.

    Let me know what you think.

    Messed around last night and still could night find a fix. Every where I look at this glitch it has to do with wmode of flash object. I tried multiple <param name=wmode> settings, z-indexing, and positioning. Still no overlap in ie8. Guess best I can do is remove it. If anyone has an idea I'm open to try it.
    Last edited by Zboost; Nov 26th, 2013 at 07:39 AM. Reason: No fix, that I could find.

  6. #5
    Senior Member Zboost's Avatar
    Join Date
    Apr 2011
    Location
    Houston
    Posts
    246
    Member #
    27459
    Liked
    20 times
    PROBLEM SOLVED: And this was only something happening in IE. No matter how I had wmode, position: absolute, or z-index set, I could not position a <div> over flash. I had my <div> inside my <object>: example.

    HTML Code:
    <div id="container"><object id="flash"><div class="wrapper"></div></object></div>
    It will not put it over the flash; however if you adjust.

    HTML Code:
    <div id="container"><object id="flash"></object>
    <div class="wrapper"></div></div>
    Now the div can be positioned above flash in IE.

    Now to figure out why IE's background-position is 1px different then other browsers...
    Last edited by Zboost; Nov 27th, 2013 at 01:39 PM.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:21 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com