Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14

Thread: Ie7

  1. #1
    Regular Coder
    Join Date
    Jul 2011
    Posts
    101
    Thanks
    7
    Thanked 6 Times in 6 Posts

    Ie7

    Hey guys, I am back :P

    I have a demo page that shows correctly in Chrome, Safari, IE9, IE8 and Firefox. Now the problem is IE7... and I'm not bothering w/ IE6. lol

    What differences or css tags may be ignored by IE7? Or... why would it read so differently?

    http://bolinphoto.com/test

    Thanks a ton!

  • #2
    Regular Coder
    Join Date
    May 2009
    Posts
    425
    Thanks
    3
    Thanked 62 Times in 61 Posts
    I don't have IE7 installed but I have IE8 and decided to see what your site looked like in compatibility mode (which mostly emulates IE7) and I noticed your "categories" div got out of whack... so I then looked at the css affecting that element and I see clear:both; and position:absolute; with neither float nor any coordinates (nor does its parent have a relative/absolute or floated position). The css style clear only applies to floated elements, and there's really no reason for absolute positioning in your case (especially without top/left coordinates). I suggest googling examples on float vs absolute/relative positioning and figuring out what's best for your case. It should also help give you some perspective on what exactly with the IE7 rendering.

    Alternatively, you could just say, "Screw you IE7 users!" and add this into your head tag.

    Code:
    <!--[if lt IE 8]><script type="text/javascript">alert('Upgrade your browser noob!');window.location.href = 'http://www.google.com/chrome/';</script><![endif]-->
    ...which will redirect any of your visitors using IE7 and below to a erm... modern browser.



    Or you could say, "Screw all IE users!" and do this:
    Code:
    <!--[if IE]><script type="text/javascript">alert('Upgrade your browser noob!');window.location.href = 'http://www.google.com/chrome/';</script><![endif]-->

    Or for the noobs with javascript disabled, add this to your body:
    Code:
    <!--[if IE]><a href="http://www.google.com/chrome/" style="position:fixed;top:0px;left:0px;width:100%;height:100%;background:#fff;color:#00f;z-index:99999999;text-align:center;font-size:50px;"><br><br>UPGRADE YOUR BROWSER YOU SILLY NOOB!<br><br>CLICK HERE TO DOWNLOAD GOOGLE CHROME!<br><br>WEB DEVELOPERS HATE YOU AND INTERNET EXPLORER LOL!</a><![endif]-->

    And if you go this route you might want to be a little nicer than say "Upgrade your browser noob!" haha...

    I'm the founder of Loggur, a place to build and share web apps focused on maximizing efficiency and productivity:
    http://www.loggur.com

    My personal site and blog:
    http://www.tfburgess.com

  • #3
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Looks like just removing position:absolute from #categories would do the trick here.

    IE7 has a different rendering engine than IE8 with a number of non-standard behaviours - far too many to list here.

  • #4
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Remove position property from following code:

    Code:
     #categories{
     clear: both;
     position: absolute;
     margin-top: 20px;
     margin-left: 200px;
     }
    and it will work in IE7

  • #5
    Regular Coder
    Join Date
    Jul 2011
    Posts
    101
    Thanks
    7
    Thanked 6 Times in 6 Posts
    Quote Originally Posted by tfburges View Post
    I don't have IE7 installed but I have IE8 and decided to see what your site looked like in compatibility mode (which mostly emulates IE7) and I noticed your "categories" div got out of whack... so I then looked at the css affecting that element and I see clear:both; and position:absolute; with neither float nor any coordinates (nor does its parent have a relative/absolute or floated position). The css style clear only applies to floated elements, and there's really no reason for absolute positioning in your case (especially without top/left coordinates). I suggest googling examples on float vs absolute/relative positioning and figuring out what's best for your case. It should also help give you some perspective on what exactly with the IE7 rendering.

    Alternatively, you could just say, "Screw you IE7 users!" and add this into your head tag.

    Code:
    <!--[if lt IE 8]><script type="text/javascript">alert('Upgrade your browser noob!');window.location.href = 'http://www.google.com/chrome/';</script><![endif]-->
    ...which will redirect any of your visitors using IE7 and below to a erm... modern browser.



    Or you could say, "Screw all IE users!" and do this:
    Code:
    <!--[if IE]><script type="text/javascript">alert('Upgrade your browser noob!');window.location.href = 'http://www.google.com/chrome/';</script><![endif]-->

    Or for the noobs with javascript disabled, add this to your body:
    Code:
    <!--[if IE]><a href="http://www.google.com/chrome/" style="position:fixed;top:0px;left:0px;width:100%;height:100%;background:#fff;color:#00f;z-index:99999999;text-align:center;font-size:50px;"><br><br>UPGRADE YOUR BROWSER YOU SILLY NOOB!<br><br>CLICK HERE TO DOWNLOAD GOOGLE CHROME!<br><br>WEB DEVELOPERS HATE YOU AND INTERNET EXPLORER LOL!</a><![endif]-->

    And if you go this route you might want to be a little nicer than say "Upgrade your browser noob!" haha...










    Thanks a lot guys. I really appreciate all of your feedback. This is all still a learning experience for me and the forum helps a ton! I will research more about floats and positioning, and make my changes to the categories

    Also about IE... I think we should make a "DESTROY IE!!!" facebook group. haha. whacha think? :P I am already adding a popup for ie6 users to upgrade... but I still get too many ie7 users to make them all upgrade.

  • #6
    Regular Coder
    Join Date
    Jul 2011
    Posts
    101
    Thanks
    7
    Thanked 6 Times in 6 Posts
    So making a few changes I have fixed the categories problem... and a few others I noticed later.

    However now I have issues with the date displaying in correct position, and the overlay on the article image.

    Does anyone know of an IE7 "compatibility mode" in Safari, FF, or Chrome that could be downloaded or something? Really time consuming to use adobe browser lab....

  • #7
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Download IE collections from http://utilu.com/IECollection/

    You will get IE 6, 7and 8 browsers


  • #8
    Regular Coder
    Join Date
    Jul 2011
    Posts
    101
    Thanks
    7
    Thanked 6 Times in 6 Posts
    Is there anything for a mac to emulate the IE versions?

  • #9
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    I tried to google, but sorry dint get it.... i think it's not available....

  • #10
    Regular Coder
    Join Date
    May 2009
    Posts
    425
    Thanks
    3
    Thanked 62 Times in 61 Posts
    Quote Originally Posted by bdbolin View Post
    Is there anything for a mac to emulate the IE versions?
    I found this very cool online tool the other day that takes 40-60 different screenshots of whatever website you give it on different combinations of browsers and operating systems. You have to wait a little while (an hour, maybe two) for them all to show up... but the screenshots pop up as they are done.

    http://browsershots.org/

    Check it out! I'm definitely going to be using it on a lot of my projects just to see what works and what doesn't.
    I'm the founder of Loggur, a place to build and share web apps focused on maximizing efficiency and productivity:
    http://www.loggur.com

    My personal site and blog:
    http://www.tfburgess.com

  • #11
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    why not just use the ie 7 & 8 in ie9?

    - who cares about ie6?
    - browsershots is annoying, they give you like 50 options, but none of them you need, not to mention the fact that it takes an hour for them to load

    Last edited by Sammy12; 07-18-2011 at 03:26 AM.

  • #12
    Regular Coder
    Join Date
    Jul 2011
    Posts
    101
    Thanks
    7
    Thanked 6 Times in 6 Posts
    I have tried browser shots, however it is a huge inconvenience with the wait time.... Instead I have been using adobe browserlab. It takes about 1 minute to render, however it would still be nice using something live. @Sammy, I'm using a mac and don't have IE to test w/ compatibility view.... so I guess I'll just boot up ye' ol' windows desktop. haha. Thanks guys.

  • #13
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    there are ways to download ie9 on a mac. I don't think anyone in this post new about the ie7&8 on ie9 which is a little disturbing to think they used browsershots or downloaded all the browsers. browsershots is better known as bs :P

    If your windows desktop isnt working try googling "install ie9 on mac"

  • #14
    Regular Coder
    Join Date
    May 2009
    Posts
    425
    Thanks
    3
    Thanked 62 Times in 61 Posts
    Yeah I had no idea browsershots was so frowned upon. I also had no idea IE9 has the option of emulating 7 and 8. I'll be installing IE9 soon because of it. I've only checked out browsershots once and I can see that the only reason to use it would be to get an idea for how your site renders on atypical browsers/operating systems.
    I'm the founder of Loggur, a place to build and share web apps focused on maximizing efficiency and productivity:
    http://www.loggur.com

    My personal site and blog:
    http://www.tfburgess.com


  •  

    Posting Permissions

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