By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
448,784 Members | 1,188 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 448,784 IT Pros & Developers. It's quick & easy.

inline blocks: IE vs. Mozilla

P: n/a
boe
Hi everybody
I have the page listed below and want the boxes to be in rows,
line-wrapping neatly.

In IE this looks right, but in mozilla (and possibly other browsers) it
doesn't. the css commented out, with -moz-inline-box seems to help a bit
for mozilla (linebreaks do not work, any suggestions?), but then again
it does not work in IE anymore.

How can I make this work, or make something which hase the same
end-effect for most browsers?

Jorg


<html>
<head>
<title>Untitled</title>
<STYLE TYPE="text/css">
<!--
/* #cell
{text-align:center;margin:5px;width:200px;display:-moz-inline-box;vertical-align:top;background:#ccc;}*/
#cell {text-align:center;margin:5px;width:200px; display:
inline;vertical-align:top;background:#ccc;}
-->
</STYLE>
</head>

<body>
<div id=cell>
aaa<br>aaa<br>aaa<br>aaa<br>
</div>
<div
id=cell>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br> aaa<br>aaa<br>aaa<br></div>
<div id=cell>aaa<br>aaa<br>aaa<br>aaa<br></div>
<div id=cell>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br> </div>
<div id=cell>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br> aaa<br>aaa</div>
<div id=cell>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br></div>
<div id=cell>aaa<br>aaa<br>aaa<br>aaa<br></div>
<div
id=cell>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br> aaa<br>aaa<br>aaa<br></div>
<div id=cell>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br> </div>
<div id=cell>aaa<br>aaa<br>aaa<br>aaa<br></div>
<div id=cell>aaa<br>aaa<br>aaa<br>aaa<br></div>
<div id=cell>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br> aaa<br>aaa<br></div>
<div id=cell>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br> </div>
<div id=cell>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br></div>
<div id=cell>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br> aaa<br></div>
<div id=cell>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br></div>
<div id=cell>aaa<br>aaa<br>aaa<br>aaa<br></div>
<div id=cell>aaa<br>aaa<br>aaa<br>aaa<br>aaa</div>
<div id=cell>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br> </div>
<div id=cell>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br> </div>

</body>
</html>
Jul 21 '05 #1
Share this Question
Share on Google+
5 Replies


P: n/a
boe <bo*@ba.com> wrote:
I have the page listed below
Don't post code to newsgroups, upload it, post the url.
and want the boxes to be in rows,
line-wrapping neatly.

In IE this looks right
Perhaps, but only because you are relying on it's quirks mode bugs, not
a good way to code. Add a doctype that triggers "standards" mode and IE6
will behave as other browsers with your code.
, but in mozilla (and possibly other browsers) it
doesn't.
Other browsers only partially emulate the bugs of IE in quirks mode, the
one you are relying on is so ridiculous that no other browser emulates
it afaik.
the css commented out, with -moz-inline-box seems to help a bit
for mozilla (linebreaks do not work, any suggestions?), but then again
it does not work in IE anymore.

How can I make this work, or make something which hase the same
end-effect for most browsers?


You don't. Inline block behaviour is poorly supported. The Mozilla
proprietary css doesn't work properly, and Mozilla has no support for
the correct css properties.

The only browsers in which you can get inline block behaviour to work
are Opera 4+, Safari, iCab3+ and for elements that default to inline
IE5.5+.

See if you can use floating, note that this is a hack and has drawbacks.

--
Spartanicus
Jul 21 '05 #2

P: n/a
in comp.infosystems.www.authoring.stylesheets, boe wrote:
Hi everybody
I have the page listed below and want the boxes to be in rows,
line-wrapping neatly.

In IE this looks right, but in mozilla (and possibly other browsers) it
doesn't. the css commented out, with -moz-inline-box seems to help a bit
for mozilla (linebreaks do not work, any suggestions?), but then again
it does not work in IE anymore.

How can I make this work, or make something which hase the same
end-effect for most browsers?


use
div {display:inline;display:inline-block;display:inline-table;}
to get inline block work on IE5.5+ (IIRC), Opera 5+. (inline is needed
for some versions of IE, both inline and inline-block for IE in standards
mode, inline-table is required also for Opera 7-8 as they have bug
considering <br> and display block, and you code had <br>) Don't know
about safari or others. Don't know what to do with gecko, it doesn't
support inline.block or inline-table, workaround is to use float:left

URL much preferred to code here. Fortunately for you this is a FAQ (but
not in the faq), and thus I was able to answer without looking it in
browser...

Hack here:
http://www.student.oulu.fi/~laurirai/www/css/gallery/

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.
Jul 21 '05 #3

P: n/a
boe
Thanks a lot, your code is very helpful!

Only instead of using float:left; I prefer display:-moz-inline-box;
because float:left introduces trouble when the the boxes don't have
equal heights.
(http://home.student.utwente.nl/j.o.e...TableTest.html)

If anyone has a good reason not to do this, please let me know!

Regards
Jorg


Lauri Raittila wrote:
in comp.infosystems.www.authoring.stylesheets, boe wrote:
Hi everybody
I have the page listed below and want the boxes to be in rows,
line-wrapping neatly.

In IE this looks right, but in mozilla (and possibly other browsers) it
doesn't. the css commented out, with -moz-inline-box seems to help a bit
for mozilla (linebreaks do not work, any suggestions?), but then again
it does not work in IE anymore.

How can I make this work, or make something which hase the same
end-effect for most browsers?

use
div {display:inline;display:inline-block;display:inline-table;}
to get inline block work on IE5.5+ (IIRC), Opera 5+. (inline is needed
for some versions of IE, both inline and inline-block for IE in standards
mode, inline-table is required also for Opera 7-8 as they have bug
considering <br> and display block, and you code had <br>) Don't know
about safari or others. Don't know what to do with gecko, it doesn't
support inline.block or inline-table, workaround is to use float:left

URL much preferred to code here. Fortunately for you this is a FAQ (but
not in the faq), and thus I was able to answer without looking it in
browser...

Hack here:
http://www.student.oulu.fi/~laurirai/www/css/gallery/

Jul 21 '05 #4

P: n/a
in comp.infosystems.www.authoring.stylesheets, boe wrote:
Thanks a lot, your code is very helpful!

Only instead of using float:left; I prefer display:-moz-inline-box;
because float:left introduces trouble when the the boxes don't have
equal heights.
(http://home.student.utwente.nl/j.o.e...TableTest.html)

If anyone has a good reason not to do this, please let me know!


If it works with -moz-inline-box, it is better than float:left. I was not
aware of -moz-inline-box , when I first created my example 2 years ago
(if it even existed then), later I just changed mechanism having
including float:left for gecko, as they fixed bug I used to use.


--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.
Jul 21 '05 #5

P: 1
Guy, try this:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<style>span{display:table-cell;display:inline-block;}span div{overflow:auto;}</style>

<span><div style="width:700px;border:blue 1px solid;">
<span><div style="width:200px;height:18px;border:red 1px solid;">aSame appearance in ie & firefox</div></span>
<span><div style="width:200px;height:18px;border:red 1px solid;">ie & firefox</div></span><div></div>
<span><div style="width:150px;height:18px;border:red 1px solid;">ie and firefox</div></span>
<div></span>
Jul 20 '06 #6

This discussion thread is closed

Replies have been disabled for this discussion.