I have some html which looks like this:
<div style="{ display:inline; width: 80px}">fig</div>vitamin c<br>
<div style="{ display:inline; width: 80px}">apple</div>vitamin a<br>
<div style="{ display:inline; width: 80px}">coconut</div>vitamin <br>
in IE.8 this is shown as
fig vitamin apple vitamin coconut vitamin
and all of the 'vitamins' are nicely aligned. in Chrome the gap is not created and therefore it is not nicely rendered.
figvitamin applevitamin coconutvitamin
The question is: is this a problem/bug with Chrome or is it because the html is not correct and ie8 (in this case) just guesses better my intentions ?
Chrome and Firefox are correct. Width is not a valid style property for inline elements. You have several options:
Inline Blocks
You can do this:
with:
You'll notice I used
<span>
instead of<div>
. There is a reason for this.<span>
s are naturallydisplay: inline
and according to Quirksmode:Floats
You can float the left labels:
with:
If the text after the
<div>
is sufficiently large it will wrap to the beginning of the line (not with the 80px buffer). You might want that or not.Definition List
Using this markup:
with:
Tables
with:
Tables will be by far the most backward compatible solution (going back to IE5 or earlier) so they're still often used in situations where some might argue they aren't appropriate. The ideals of the so-called semantic Web are well-intentioned and worth adhering to where possible but you'll also often end up in situations where you're choosing between "semantic purity" and backwards compatibility so a certain amount of pragmatism needs to prevail.
That being said, unless you're not telling us something, you shouldn't need to go this path if you don't want to.
Lastly, always put a DOCTYPE declaration on your pages. It forces IE from quirks mode to standards compliant mode (both euphemisms). For example:
You could use a div that is floated to the left for the headings - this is popular for two column forms and the like on websites that don't want to use tables, or need more flexibility that the strict layout that a table restricts you to.
I guess the outer div could be replaced with a
<br clear="both" />
afterwards.