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 11 of 11
  1. #1
    New Coder
    Join Date
    Aug 2011
    Posts
    82
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Need help making IE obey a class

    I have some serious css problems on my site (seriously, don't look at the code, you'll cry)

    But one thing that is driving me crazy is this:

    Code:
    div.left_menu_fix {
    	text-align: left;
    	font-size:.8em;
    	width: 133px;
    	margin-left: 35px;
    }
    This forces the titles on my menu over onto the little backgrounds they're supposed to be on. It works in everything but IE. In IE they're over to the left, looking stupid. Here, see for yourself: http://opalcat.com

    (For what it's worth, one of my projects this summer is going to be to start my site from the ground up and build it, instead of adapting a basic layout and adding to it over time the way I've done, which has led to the...err...irregularities.)

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by OpalCat View Post
    But one thing that is driving me crazy is this:

    Code:
    div.left_menu_fix {
    	text-align: left;
    	font-size:.8em;
    	width: 133px;
    	margin-left: 35px;
    }
    This forces the titles on my menu over onto the little backgrounds they're supposed to be on. It works in everything but IE. In IE they're over to the left, looking stupid. Here, see for yourself: http://opalcat.com
    The document looks fine in "IE9 standards" mode. I see the problem with your "Gallery" title in IE9's Compatibility View (which puts the document in "IE7 standards" mode), however.

    I'm going to assume that you're testing in IE7 or earlier (the last version of IE to use the broken hasLayout system) since this appears to be a hasLayout problem, and your document is displaying in standards mode by default and therefore this problem shouldn't be visible in newer iterations of IE. (If you don't know what hasLayout is, you'll have to look it up; it's one of the things that made older versions of IE a nightmare to work with.)

    Simply removing the width: 133px declaration fixes the alignment issue with no changes to the appearance of the document in IE9's Compatibility View. I don't know if this causes display issues in other browsers or really fixes the problem in IE7 or older versions of IE, however.

    The above fix makes sense since the width property with a value other than the default (i.e., auto) is one of a number of properties that can trigger hasLayout. To confirm this, I used the declaration zoom: 1 (another declaration that triggers hasLayout) after removing the declaration width: 133px and the problem rematerialized.
    Last edited by Arbitrator; 08-10-2011 at 03:10 AM. Reason: I fixed a typo.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #3
    New Coder
    Join Date
    Aug 2011
    Posts
    82
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Yeah I'm using IE 7. What are most people using these days? I avoid IE except when testing...

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by OpalCat View Post
    Yeah I'm using IE 7. [...] I avoid IE except when testing...
    I only use IE when testing too.

    Unfortunately, you didn't state which versions you were testing, so that made the problem less straightforward to solve. There have been two iterations of IE since IE7 (we're up to IE9 now) with IE10 upcoming. IE10 Platform Preview 2 is the current developer build.

    To complicate things, every version of IE since IE8 has an additional mode (Compatibility View (i.e., IE7 standards mode)) in addition to quirks mode.

    Quote Originally Posted by OpalCat View Post
    What are most people using these days?
    I have no idea.

    I use Opera 11.5 for ordinary browsing.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #5
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    I think statistically, the most commonly used browser now is Firefox. However, IE still has quite alot of users.
    Teed

  • #6
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by teedoff View Post
    I think statistically, the most commonly used browser now is Firefox. However, IE still has quite alot of users.
    Hmm... If the compiled info on Wikipedia is any indication, Internet Explorer still takes the cake with Firefox, Chrome, Safari, and Opera trailing in that order. See http://en.wikipedia.org/wiki/Usage_s...f_web_browsers.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #7
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by Arbitrator View Post
    Hmm... If the compiled info on Wikipedia is any indication, Internet Explorer still takes the cake with Firefox, Chrome, Safari, and Opera trailing in that order. See http://en.wikipedia.org/wiki/Usage_s...f_web_browsers.
    lol Well I dont put alot of stock in anything wikipedia says. However, the statistics I had were from w3schools, and, well I'm not sure I put much stock in that site anymore either..lol
    Teed

  • #8
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,725
    Thanks
    41
    Thanked 191 Times in 190 Posts
    IE hold majority market shares... I read a tech article recently analyzing all these diff sites and how the "check"....
    http://gs.statcounter.com/ seemed to be the most reliable... Note that IE is on the fall, and chrome (best IMO ) is on the upswing

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #9
    New Coder
    Join Date
    Aug 2011
    Posts
    82
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I upgraded to IE 9... how do I go into compatibility mode so I can check this in IE7? I'm not finding it easily in the options (but I did just wake up and yes it's after 1pm)

  • #10
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Quote Originally Posted by OpalCat View Post
    I upgraded to IE 9... how do I go into compatibility mode so I can check this in IE7? I'm not finding it easily in the options (but I did just wake up and yes it's after 1pm)
    You go to Developer Tools and change the rendering mode.

  • #11
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by OpalCat View Post
    I upgraded to IE 9... how do I go into compatibility mode so I can check this in IE7? I'm not finding it easily in the options (but I did just wake up and yes it's after 1pm)
    I was enabling Compatibility View by clicking the broken page icon in the address bar. The icon is blue while the document is in Compatibility View. You can also force a mode by using a meta element to simulate a X-UA-Compatible HTTP header or literally outputting such a header.

    This icon is only visible for certain Web sites (such as yours); it's not clear to me what triggers its appearance. Also, note that the icon may be hidden if you have the "Display intranet sites in Compatibility View" and/or "Display all web sites in Compatibility View" options enabled. You can check the options' status by pressing the Alt key to show a menu at the top left of the browser window. Select "Tools", and then select "Compatibility View settings" to bring up the dialog box with the settings.

    Quote Originally Posted by Apostropartheid View Post
    You go to Developer Tools and change the rendering mode.
    This info was helpful; I wasn't aware that you could do things this way. Looks like you can easily force Quirks mode and IE8 standards mode in addition to IE7 standards mode by using this method.

    Apparently, the broken page icon will also vanish if you use the F12 Developer Tools to change the document mode. It will reappear if you restart the browser or open the site in another tab though.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Tags for this Thread

    Posting Permissions

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