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>a aa<br>aaa<br>
</div>
<div
id=cell>aaa<br> aaa<br>aaa<br>a aa<br>aaa<br>aa a<br>aaa<br>aaa <br>aaa<br></div>
<div id=cell>aaa<br> aaa<br>aaa<br>a aa<br></div>
<div id=cell>aaa<br> aaa<br>aaa<br>a aa<br>aaa<br>aa a<br></div>
<div id=cell>aaa<br> aaa<br>aaa<br>a aa<br>aaa<br>aa a<br>aaa<br>aaa </div>
<div id=cell>aaa<br> aaa<br>aaa<br>a aa<br>aaa<br></div>
<div id=cell>aaa<br> aaa<br>aaa<br>a aa<br></div>
<div
id=cell>aaa<br> aaa<br>aaa<br>a aa<br>aaa<br>aa a<br>aaa<br>aaa <br>aaa<br></div>
<div id=cell>aaa<br> aaa<br>aaa<br>a aa<br>aaa<br>aa a<br></div>
<div id=cell>aaa<br> aaa<br>aaa<br>a aa<br></div>
<div id=cell>aaa<br> aaa<br>aaa<br>a aa<br></div>
<div id=cell>aaa<br> aaa<br>aaa<br>a aa<br>aaa<br>aa a<br>aaa<br>aaa <br></div>
<div id=cell>aaa<br> aaa<br>aaa<br>a aa<br>aaa<br>aa a<br></div>
<div id=cell>aaa<br> aaa<br>aaa<br>a aa<br>aaa<br></div>
<div id=cell>aaa<br> aaa<br>aaa<br>a aa<br>aaa<br>aa a<br>aaa<br></div>
<div id=cell>aaa<br> aaa<br>aaa<br>a aa<br>aaa<br></div>
<div id=cell>aaa<br> aaa<br>aaa<br>a aa<br></div>
<div id=cell>aaa<br> aaa<br>aaa<br>a aa<br>aaa</div>
<div id=cell>aaa<br> aaa<br>aaa<br>a aa<br>aaa<br>aa a<br></div>
<div id=cell>aaa<br> aaa<br>aaa<br>a aa<br>aaa<br>aa a<br></div>

</body>
</html>

Jul 21 '05 #1

Subscribe Reply

3843

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.infosystem s.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:i nline-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.infosystem s.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:i nline-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.infosystem s.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

New Member

Guy, try this:

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

<span><div style="width:70 0px;border:blue 1px solid;">
<span><div style="width:20 0px;height:18px ;border:red 1px solid;">aSame appearance in ie & firefox</div></span>
<span><div style="width:20 0px;height:18px ;border:red 1px solid;">ie & firefox</div></span><div></div>
<span><div style="width:15 0px;height:18px ;border:red 1px solid;">ie and firefox</div></span>
<div></span>

Jul 20 '06 #6

Similar topics

13707

Correctly define WIDTH in css for inline elements

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 understand that this is not standard CSS, and Mozilla ignores width on these inline tags. I've tried various alternatives with DIVs etc, but that always seems to render with line breaks after each one - what I want is to show the menu as it...

HTML / CSS

2466

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 they lead to password-protected pages; it is only this page for demonstration. Both HTML (strict) and CSS validate.

HTML / CSS

2941

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 "feature" was added and also how to detect Mozilla as a userAgent. Alternatively is there an alternative to "display: -moz-inline-box" for sticking two tables side by side ?

Javascript

5582

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 any other way out of this nightmare other than a isMozBug variable that gets triggered is Mozilla is being used that substitues the appropriate display value ? Many thanks in advance,

HTML / CSS

8888

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, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...

General

8752

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 effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...

Windows Server

9401

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...

C / C++

9257

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 tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...

Online Marketing

9113

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...

General

6702

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...

Microsoft Access / VBA

4784

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

3221

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

C# / C Sharp

2635

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP