inline blocks: IE vs. Mozilla

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">

</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

Subscribe Post Reply

3833

Spartanicus

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

Lauri Raittila

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

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

Lauri Raittila

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

diyism

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

by: Colin Jones | last post by:

I'm trying to use CSS for menu buttons, but am unsure how to specify the width of blocks when displaying them inline. At the moment I am using SPAN tags, and IE renders the WIDTH property, but I...

HTML / CSS

Heights not correct in IE 6, form.inline not inline in Mozilla

by: Markus Ernst | last post by:

Hi I am building an admin environment for a CMS system. For the issues described I have a testcase available at http://www.ernstdeslebens.ch/csstest/ I am sorry the links are not useable as...

HTML / CSS

Mozilla / (Geko ?) test and "display: -moz-inline-box"

by: Aaron Gray | last post by:

Hi, I want an "isZZZ" variable that I can use to generate "display: -moz-inline-box;" rather than "display: inline-block;" but in DOM. For this I need to know what version of Mozilla this...

Javascript

Mozilla -moz-inline-box alternative

by: Aaron Gray | last post by:

I have two tables in <spansI want side by side, okay in IE but in Mozilla I need to use "display: -moz-inline-box;" this does not work in Opera which requires "display: inline-block". Is there...

HTML / CSS

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

inline blocks: IE vs. Mozilla

Similar topics