ansaurus

Question

div elements with display: inline are hidden

Answer 1

+3 A:

A non-block element can't have height/width specified like that (and with no content inside, it'll have nothing to give it size) - instead you want inline-block, like this:

display: inline-block;

You can see a full list of options for display here

Nick Craver 2010-06-26 12:25:29

right, but inline-block unfortunately doesn't work on all browsers, but on the most. As far as I know it doesn't really work on IE6 and FF2. You can use `display: -moz-inline-block` to make it work on FF2. In IE6 `display: inline-block` only works on elements which are naturally inline. See http://www.quirksmode.org/css/display.html

2010-06-26 12:29:36

@snootles - You want an advanced effect...you need an advanced browser :) If you want IE6, use a span, then use `inline-block` and add the mozilla tag as well...this is a bit hacky, if you you want effects that post-date the browsers, it's your best option. As a side note: are you *sure* the OP needs to support those browsers? Given a choice, I wouldn't...and don't unless needed.

Nick Craver 2010-06-26 12:33:16

…or in the [W3 specification](http://www.w3.org/TR/CSS2/visuren.html#propdef-display).

Marcel Korpel 2010-06-26 12:33:53

Sorry Nick, i would like to interrupt your discussion but what is the meaning of OP?

Ankit Rathod 2010-06-26 12:37:48

@Nitesh - "Original Poster" - you :)

Nick Craver 2010-06-26 12:39:18

@Marcel - I try and refer to a site that's updated, while the spec is the best source(of course!), what happens when this gets googled later, and [the next spec](http://www.w3.org/TR/css3-box/#the-lsquo) takes effect? :) I'm trying to be aware that this answer while serving to answer the question *now*, will be here much *later*, and information/links may be outdated then :)

Nick Craver 2010-06-26 12:41:52

Yeah you are right, i don't use it. IE6 is crap for me. Even my yahoo mails didn't open in it and frequently i faced crashing issues. I use FF 3.5 and IE8 so not a problem for me.

Ankit Rathod 2010-06-26 12:42:14

@Nick Craver: If you feel need to *support* some *browsers*, your web page is broken. The real question is: do you really need that latest browser feature? Does it increase the sales? If the page is unreadable on some browsers, that will definitely decrease the sales.

PauliL 2010-06-26 13:15:23

@PauliL - You're making the false assumption that all sites are **public** sites, and that I don't know exactly which browsers my users have. *If* that was the case, and it's not for me, what product are you selling? Demographics matter here.

Nick Craver 2010-06-26 13:23:13

@snootles If you use **`div#someId { display: inline; zoom: 1; }`** for IE6 and IE7 (conditional comments, mustn't target IE8 as this version is OK), then your layout will be perfectly fine. For Fx 2, it's better to use `-moz-inline-stack`. There's still some glitch 20% of the time with Fx2 (no selection and no clicks possible) and in this case `#someId` must have an unique div child which contains your original elements. But well Fx2 is soooo old ...

Felipe Alsacreations 2010-06-26 13:25:05

You have a point, but even then I wouldn't link to w3schools.com. That site contains many fundamental misconceptions (e.g., look at [this page](http://perfectionkills.com/tag-is-not-an-element-or-is-it/#global_confusion)). I just like the [mentioned page on Quirksmode.org](http://www.quirksmode.org/css/display.html) more, giving a clearer picture of browser differences (but it's also a matter of personal preference, of course, and strangely enough I can't access w3schools.com directly, perhaps my IP is blocked).

Marcel Korpel 2010-06-26 13:51:29

Answer 2

+1 A:

Unfortunately, display: inline-block is not supported by older versions of IE. You can do this by floating your three inner div tags left, and undoing the float on the containing element. Here is the complete example (see my comments for the relevant changes):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html>
    <head>
        <style type="text/css">
            .body { max-width:3072px; min-width:3072px; margin:0px auto; background:#293231; }

            .page1{ background:url('Main.jpg') no-repeat; }

            .page2 { background:url('Page2.jpg') no-repeat; }

            .page3{ background:url('Page3.jpg') no-repeat; }

            /* These next two lines are my changes. */
            /* Float these guys left */.page1, .page2, .page3 { width:1024px; height:211px; float: left; }
            /* Add overflow: hidden to "undo" the floating */.wrapper{ overflow: hidden; width:100%; height:auto; }

        </style>
    </head>
    <body class="body">

        <div class="wrapper">
            <div class="page1">

            </div>
            <div class="page2">

            </div>
            <div class="page3">

            </div>
        </div>

    </body>
</html>

wsanville 2010-06-26 12:37:08

Thanks wsanville

Ankit Rathod 2010-06-26 12:42:39

Saying it's *not* supported is inaccurate, it's not *completely* supported, like most things in IE.

Nick Craver 2010-06-26 12:43:22

ansaurus

tags:

views:

answers:

div elements with display: inline are hidden

related questions