...

View Full Version : Need help making IE obey a class



OpalCat
08-09-2011, 10:47 PM
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:


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.)

Arbitrator
08-10-2011, 03:05 AM
But one thing that is driving me crazy is this:


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.

OpalCat
08-10-2011, 07:02 AM
Yeah I'm using IE 7. What are most people using these days? I avoid IE except when testing...

Arbitrator
08-10-2011, 10:49 AM
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.


What are most people using these days?I have no idea.

I use Opera 11.5 for ordinary browsing.

teedoff
08-10-2011, 01:03 PM
I think statistically, the most commonly used browser now is Firefox. However, IE still has quite alot of users.

Arbitrator
08-10-2011, 02:01 PM
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_share_of_web_browsers.

teedoff
08-10-2011, 02:45 PM
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_share_of_web_browsers.

lol Well I dont put alot of stock in anything wikipedia says. However, the statistics I had were from w3schools (http://www.w3schools.com/browsers/browsers_stats.asp), and, well I'm not sure I put much stock in that site anymore either..lol

alykins
08-10-2011, 08:21 PM
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 :D) is on the upswing :thumbsup:

OpalCat
08-20-2011, 06:13 PM
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)

Apostropartheid
08-20-2011, 11:17 PM
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.

Arbitrator
08-21-2011, 06:31 AM
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 (http://msdn.microsoft.com/en-us/library/cc288325(v=vs.85).aspx#SetMode) 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.


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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum