CODEWITHSUNDEEP
htmlcssinternet-explorerquirks-mode
Bruno
Bruno

Reputation: 5822

inline-block in IE9 compatibility quirks mode

I am currently developing a html/css menu. My issue is that the page that the menu will be inserted in, when loaded, causes the browser to go into quirks and compatibility mode. I cannot control this.

Here is my css:

.community-menu {    
    margin: 5px;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    padding: 15px 30px;
    cursor: pointer;
}

#container {
    width: 100%; 
    position: relative;
    text-align: center;
}

My issue is that inline-block in IE quirks and compatibility mode causes the menus to take up full width of its parent div.

Here is what the divs look like in Chrome and Firefox:

Chrome and Firefox rendering of inline-block

In IE the same divs expand to full width of parent div

IE rendering of inline-block

What I am trying to achieve is centred divs that resize with text contents that as the browser resizes are automatically pushed down.

I found some code from another SO question that shows my issue here when viewed with IE in compatibility and quirks mode.

Following a comment by Spudley here is a pic to show the default mode it loads in.

enter image description here

Even though it says IE8, the end result is the same in IE9. On different pc today :)

Upvotes: 2

Views: 2718

Answers (2)

Foker
Foker

Reputation: 1011

"display: inline-block;" better to change on: { float:left|right; diplay:inline; zoom:1; }

Upvotes: 2

FLX
FLX

Reputation: 2679

When i need to emulate inline-block in olds and quirks IE, i just replace inline-block by inline. (With conditionnal comment)

Upvotes: 0

Related Questions