CSS 2.1 Inline Block Display Property
Tips, workarounds and information
"A CONTINUING WORK IN PROGRESS"
Last update 8-24-14
Inline-Block element is only supported by IE8+. Internet Explorer 6 and 7 only supports elements that are naturally inline by default. Inline-block is naturally a block element thats forced to inline. See the workaround compatibility solution below for IE and other browsers.
TABLE OF CONTENTS:
Block VS Inline-Block
Browser Versions that accept Inline-Block
Cross Browser Workaround Fix for Inline-Block
Vertical Align: Middle for Inline Block
REFERENCES:
Display Property:
http://www.w3schools.com/cssref/pr_class_display.asp
Cross Browser fix:
http://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/
Display Examples:
http://quirksmode.org/css/css2/display.html#inlineblock
Browser Compatibility List:
https://developer.mozilla.org/en-US/docs/Web/CSS/display
BLOCK VS INLINE-BLOCK
Great list & info....webdesigner-webdeveloper.com
display: block;
Takes up the full width by default, with a new line(line break) before and after. Tolerates no HTML elements next to it, except when ordered otherwise (ie float).
display: inline; (inside a block)
Takes up the smallest possible width, and does not force new lines (no line break).
display: inline-block;
Displays an element as an inline-level block container. The inside of this block is formatted as block-level box, and the element itself is formatted as an inline-level box.
Browsers that accept display: inline-block:
Chrome 1.0
Firefox 3.0
IE 5.5-7.0 natural inline elements only
IE 8 inline-block
Opera 7.0
Safari 1.0
Cross Browser fix for Inline Block:
Information taken directly from the link listed in the Reference sectionli {
width: 200px;
line-height: 250px;
border: 1px solid #000;
display: -moz-inline-stack;
/*Firefox2 IB Fix=mozilla display accepted by firefox2. must be before IB*/
/* May also need HTML adjustment: wrap everything inside the li with a div*/
display: inline-block;
/*not accepted by firefox2 IE6 or IE7. Apply workarounds*/
vertical-align: top;
/*default= baseline(may display wrong). use VA:top to line up IB correctly.*/
margin: 5px;
zoom: 1;
/*IE7 inline block fix= zoom:1+*display:inline =display as if IB*/
*display: inline;
/*star targets IE6 IE7. ignored by other browsers*/
_height: 250px;
/*IE6 min-height fix=_height underscore hack to 250px. expands w/bigger content. ignored by other browsers.*/
}
Note -moz-inline-stack: on stackoverflow.com
"You can use -moz-inline-box, but be aware that it's not the same as inline-block, and it may not work as you expect in some situations."
Workaround Explanations:
Baseline: vertical-align:top
The default vertical-align value on inline or inline-block element is baseline, which means the element’s baseline will be aligned with its parent’s baseline.each baseline is aligned with the baseline for the text ‘This is the baseline’. That text is not in a <li>, but simply a text node of the parent <ul>, to illustrate where the parent’s baseline is. Anyway, the fix for this is simple: vertical-align:top, which results in a great looking grid.
Firefox 2: display:-moz-inline-stack
Doesn’t support inline-block, but it does support a Mozilla specific display property ‘-moz-inline-stack’, which displays just like inline-block. And when we add it before display:inline-block, FF2 ignores that declaration and keeps -moz-inline-stack because it doesn’t support inline-block. Browsers that support inline-block will use it and ignore previous display property.
Additional Firefox Bug: HTML adjustment
Honestly, I don’t know what causes this bug. But there is quick fix. Wrap everything inside the <li> with a <div>. This seems to ‘reset’ everything inside the <li>’s and makes them display appropriately.
<li>
<div>
<h4>This is awesome</h4>
<img src="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg"
alt="lobster" width="75" height="75"/>
</div>
</li>
Internet Exporer 7: zoom:1 + *display:inline
IE 7 does not support inline-block, but we can trick it into rendering the <li>s as if they were inline-block. How? hasLayout, a magical property of IE that allows for all sorts of fun! You can’t set hasLayout explicity on an element with hasLayout:true; or anything easy like that, but you can trigger it with other declarations like zoom:1.
Technically, what hasLayout means is an element with hasLayout set to true is responsible for rendering itself and its children (combine that with a min-height and width, and you get something very similar to display:block). It’s kinda like magical fairy dust you can sprinkle on rendering issues and make them disappear.
When we add zoom:1 and *display:inline (star hack to target IE6 & 7) to the <li>s, we make IE 7 display them as if they were inline-block:
Internet Explorer 6: _height
IE6 doesn’t support min-height, but thanks to its improper handling of the height property, we can use that instead. Setting _height (IE6 underscore hack) to 250px will give all <li>s a height of 250px, and if their content is bigger than that, they will expand to fit. All other browsers will ignore _height.
Final CSS and HTML:
<style>
li {
width: 200px;
min-height: 250px;
border: 1px solid #000;
display: -moz-inline-stack;
display: inline-block;
vertical-align: top;
margin: 5px;
zoom: 1;
*display: inline;
_height: 250px;
}
</style>
<li>
<div>
<h4>This is awesome</h4>
<img src="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg"
alt="lobster" width="75" height="75"/>
</div>
</li>
REMOVE SPACE BETWEEN INLINE BLOCK ELEMENTS
ISSUE: Can't remove space between mainmenu links.
(but space makes nice faux divider w/background contrasting color applied, but no size adjustments)
CAUSE: inline-block by default has white space before and after. It is possible to solve this problem with CSS alone, but there are no completely robust CSS fixes.
MY SOLUTION!: Just make the container background color the same as the Link Background!
OR
--insert the formula in my horzDropMenu formula ---
SOLUTION 2: margin-right:-4px (problematic in older IE 6 & 7)
SOLUTION 3: JavaScript-removes the Text nodes from the container element (the paragraph)
// jQuery $('p').contents().filter(function() { return this.nodeType === 3; }).remove();
SOLTUION 4: font-size: 0 (problematic in IE 7 and down, Safari 5 and down, Android issues & more)
SOLUTION 5: Type HTML List differently. It works everywhere. It's the pragmatic solution.
From.......
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
To.........
<ul>
<li>Item 1</li><li>Item 2</li><li>Item 3</li>
</ul>
Or, use comments......only for NATURAL inline tags.
<ul>
<li>Item 1</li><!--
--><li>Item 2</li><!--
--><li>Item 3</li>
</ul>
Or, remove li end tags entirely ( perfectly valid and works back to IE8)....but I don't like it!
SOLTUION 6: KELLUM METHOD font-family: iconfnt (did not work for me??)
http://scottkellum.com/2013/10/25/the-new-kellum-method.html. All the characters have zero width, including spaces. Apply the font to the parent element.
SOLUTION 7: float the blocks (but this will results in the loss of liquid widths of inline block).
VERTICAL ALIGN for Inline-Block
Issue: Vertical Align for Inline-Block isnt working
CAUSE: VA is for table cells and natural inline elements
MY SOLUTION: just add font size + line height (to set box height)
and will automatically align vertically within the inline block element.
SOLUTION 2: vertical-align: middle; (won't work? prob cause its or natural inline elements)
SOLTUION 3: Set line height 30px, the same as height 30px.
Issue: works for single lines, but child inherits height
thus results in loss of liquid width submenu feature of inline-block.
No comments:
Post a Comment