homepage Welcome to WebmasterWorld Guest from 54.196.168.78
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
div with display: inline; width 200px
Works in IE, Opera, not in FireFox
TheDave




msg:1192483
 1:21 am on Nov 10, 2004 (gmt 0)

<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Stupid Like a Fox</title>
<style type="text/css">

div.a
{
display: inline;
width: 200px;
}

</style>
</head>

<body>

<div class="a">
Hey guess what, this div will be wider than 200px in firefox and I don't know why?!?!?
</div>

<div class="a">
And this one is meant to sit next to it, which it does, but it shouldn't be wrapping under it like that. Should it?
</div>

</body>
</html>

 

iamlost




msg:1192484
 3:33 am on Nov 10, 2004 (gmt 0)

Once again FireFox is w3c compliant. The others are ... the others.

An inline box has no width except the width of its containing block - in your example the width of <body> which is viewport width and likely greater than 200px.

Of course the divs run directly after each other like run-on sentences - inline boxes are meant to follow directly after each other, they are inline afterall, not block.

Read:

[w3.org ]

In an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block.

The width of a line box is determined by a containing block and the presence of floats.

When the total width of the inline boxes on a line is less than the width of the line box containing them, their horizontal distribution within the line box is determined by the 'text-align' property. If that property has the value 'justify', the user agent may stretch the inline boxes as well.

When an inline box exceeds the width of a line box, it is split into several boxes and these boxes are distributed across several line boxes. If an inline box cannot be split (e.g. if the inline box contains a single character, or language specific word breaking rules disallow a break within the inline box, or if the inline box is affected by a white-space value of nowrap or pre), then the inline box overflows the line box.

When an inline box is split, margins, borders, and padding have no visual effect where the split occurs (or at any split, when there are several).

If you add a containing div that is not display:inline; with a width of 200px you will see what, I think, you want to see. And you can drop the redundant/pointless width styling from the inline class.

And you should always use the complete doctype - let the browser know where to go to confirm requirements.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Stupid Like a Fox</title>
</head>
<body>
<div style="width:200px;">
<div style="display: inline;">
Hey guess what, this div will be wider than 200px in firefox and I don't know why?!?!? Because FireFox is compliant! And with the containing block it will look great!
</div>
<div style="display: inline;">
And this one is meant to sit next to it, which it does, but it shouldn't be wrapping under it like that. Should it? Yes it should!
</div>
</div>
</body>
</html>

TheDave




msg:1192485
 4:44 am on Nov 10, 2004 (gmt 0)

But that doesn't do what I want. I want 2 divs sitting next to each other, width 200px. Inside these divs is an img (never larger than 200 across) and beneath that image is some text (see myprofilesite/gallery in IE). This is repeated across the page, wrapping a complete div to the next line where appropriate. I'm yet to find anything that will let me do this in FireFox. Tables are no good because I want them to run all the way across the page in different size windows.

bedlam




msg:1192486
 5:36 am on Nov 10, 2004 (gmt 0)

Simple:

div.pic {
float:left;
width:200px;
}

-B

iamlost




msg:1192487
 6:46 am on Nov 10, 2004 (gmt 0)

The details make such a difference.

To combine images with text directly underneath repeating as desired using repeating <dl>s is the most compliant cross-browser solution that I have found.

CSS:
#wrap {width: 500px;
}
dl.gallery {float: left; width: 200px; padding: 0; border: 1px #f00 solid; margin: 0;
}
dl.gallery dd {padding: .5em; margin: 0;
}

HTML:
<div id="wrap">
<dl class="gallery">
<dt>
<img src="image.jpg" alt="" />
</dt>
<dd>
Your IMAGE description goes here.
</dd>
</dl>
<dl class="gallery">
<dt>
<img src="image.jpg" alt="" />
</dt>
<dd>
Your IMAGE description goes here.
</dd>
</dl>
<dl class="gallery">
<dt>
<img src="image.jpg" alt="" />
</dt>
<dd>
Your IMAGE description goes here.
</dd>
</dl>
</div>

Note: The wrap div is simply to force next row - adjust/remove as desired.
Note: The <dl> border is for visual understanding of size only.
Note: The <dd> padding is optional.
Note: The <dd> margin (left) is zeroed to line up with image side.

TheDave




msg:1192488
 11:22 pm on Nov 10, 2004 (gmt 0)

Thanks for your help. I did consider floating, but I don't want them floated left, I want them centered. Basically, how can I get a div to behave as an inline block element in FireFox (and any other anally retentive browsers) without floating the div? It seems to me like they've abandoned logic for the sake of standards. As far as I'm concerned IE and Opera get this one right, standards or not.

SuzyUK




msg:1192489
 12:50 am on Nov 11, 2004 (gmt 0)

It seems to me like they've abandoned logic for the sake of standards. As far as I'm concerned IE and Opera get this one right, standards or not.

You're entitled to believe that especially if it will work for you just now, another option is of course a nested table. They've both changed now anyway they are only doing that for backwards compatibility, changing to a complete Doctype brings both IE and Opera up to the future, and a table will still work.

Inline Elements do not accept width, even IE have added that rule as a "CSS Enhancement" [msdn.microsoft.com] So basically they are all in agreement as to that fact now, so it's not really a matter as to who's got it right.

Quote from that page:
"If you want to set the width or height property of an inline element with standards-compliant mode switched on, you must set the display property of the element to
inline-block."

Basically, how can I get a div to behave as an inline block element in FireFox (and any other anally retentive browsers) without floating the div?

<title>Stupid Like a Fox</title>

You're not gonna get much joy calling FF names around here :) It's the other two that are lulling you into a false sense of who is suffering from retention ;) By using the Doctype switch they are ensuring that people who don't want to keep up with times sites don't break. Welcome to the latest in browser wars.. Opera seems to be introducing some very IE specific behaviour into their browser, which gets confusing at times because a few years back Opera was the leader in CSS compatibility, now some of their behaviour is misleading.

In answer to your question.. without floats ..

/* change div to span cause IE only supports inline-block on inline elements */
span.a
{
display: table-cell; /* For FireFox and Opera */
display: inline-block; /* For Opera and IE */
width: 200px;
vertical-align: top; /* For IE */
}
and to be safe because I only did a quick test, use the table cell property before the inline-block property because although Opera supports table-cell too it also requires (or assumes, can't remember which ) the complete table construct, i.e. table and rows, I think so let it use inline-block instead.

Can't vouch for it all environments, but it works in more than 2, Of course if you then nest a paragraph inside that block.. it won't validate now because of IE needing the container to be an inline element..

IE always supported inline-block on inline elements, Opera and Firefox have supported table-cell for along time, Opera recently added support for inline block..

Now which one do you think is stupid? ;)

Suzy

[btw] anyone with the new FF1.0 download ~ does it support inline-block yet?

createErrorMsg




msg:1192490
 3:08 am on Nov 11, 2004 (gmt 0)

Say you have the following code...

<p>This is a <span class="specialtext">line of</span> text.</p>

The <p> is the block, the <span> is inline. If .specialtext had these styles...

.specialtext {
color: blue;
}

It would display like this...
This is a line of text.

Now imagine you added width: 200px to .specialtext's rule dec. What possible purpose could that serve? I can't mimic the display here in ASCII, but you can use your imagination and see that it would produce a ridiculous result.

What you're trying to do is very doable. You just have to use the right properties for it. In this case, sorry to say, that's float.

but I don't want them floated left, I want them centered

Then wrap it in a container and center the container. If the floated element's width is the same as the container (i.e., it fills it), it'll center just fine.

TheDave




msg:1192491
 3:31 am on Nov 11, 2004 (gmt 0)

That's getting there thanks Suzy. But the table-cell causes it to run across the page with no wrapping, meaning there's massive horizontal scrolling. This below is the exact code I am working with, and shows what I am trying to achieve:

<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>I'd rather be fishing</title>
<style type="text/css">
<!--
span.a
{
display: table-cell;
display: inline-block;
width: 200px;
vertical-align: top;
}
-->
</style>
</head>
<body>
<div>

<!-- copy and paste the span below more than 10 times -->

<span class="a"><a href="i" target="_blank"><img src="i" alt="alt"><br>Image Title</a><br><a class="note">Image description goes here</a></span>

<!-- end copy -->

</div>

</body>
</html>

SuzyUK




msg:1192492
 4:23 pm on Nov 11, 2004 (gmt 0)

TheDave I have to admit to playing a litle devils's advocate ;)

<title>I'd rather be fishing</title>

LOL.. I am appreciating the titles here ;)

>>Horizontal scrolling
I expected that, but as in most CSS usage we could be at the point where you have a choice, all the previous posts about float were possibly the best way to do this unless the text descriptions are of various lengths making the "inline-blocks" different heights and/or the number of images will vary..

The answer to stop the horizontal scrolling using my method is to wrap 4 x 200px wide blocks in an 800px wide wrapper (which is exactly the same as what cEM is suggesting as the answer to centering floats in msg#8).

I wonder if this is starting to sound like the reason you wanted to use inline elements in the first place, so you can just put them all (e.g. like pulling them from a database) in without having to count them, no matter how many, but I'm afraid that just isn't possible yet. The "old way" of doing this would be to use a table, although you still would have to count them for table rows and until the table CSS properties are supported better and/or Firefox supports "inline-block" it might still be the best way.

My way is a kinda middle for diddle way it's usage mimics a table setup, and I can't wait for FF to start supporting inline-block because it will then be the xbrowser answer to this kind of popular gallery setup. although we will have to remember IE's little quirk of it only working on inline elements.

The reason they are horizontal scrolling in FF in my method is because they are acting like table cells and they haven't been told when to split into a new table row.

IE and Opera's inline-block method is better because you can center them like inline text, and it will autowrap "rows" to your desired width. But in my code it has drawbacks when you need to use a "row wrapper". It puts "white-space" in between each inline-block so it can autowrap, but this means 4 x 200px spans + (4px) whitespace adds up to more than 800px.

So to summarize: We've solved the width on spans issue by using inline-block, but FF doesn't support this yet (I still haven't got V1 installed yet though) so I'm using their support of the table properties. Opera also supports table properties, but because IE doesn't we need both ways if you want a Pure CSS Solution.

Floats V Inline Blocks
Inline Blocks seems to be best if the text descriptions are varying lengths making the blocks different heights and also if there is an uneven (as in not divisible by 4) number of images to be displayed. You might need varying clearing hacks if float method is used under these circumstances..

If the blocks are all the exact same height and width and the float method may well be best as it needs slightly less code.

So that's the Pure CSS choice..

HTML Code for both choices:
<body>
<div id="gallery">

<div>
<span><a href="i" target="_blank"><img src="i" alt="alt"><br>Image Title</a><br><a class="note">Image description goes here</a></span>
<span><a href="i" target="_blank"><img src="i" alt="alt"><br>Image Title</a><br><a class="note">Image description goes here</a></span>
<span><a href="i" target="_blank"><img src="i" alt="alt"><br>Image Title</a><br><a class="note">Much longer image Image description goes here</a></span>
<span><a href="i" target="_blank"><img src="i" alt="alt"><br>Image Title</a><br><a class="note">Image description goes here</a></span>
</div>

<div>
<span><a href="i" target="_blank"><img src="i" alt="alt"><br>Image Title</a><br><a class="note">Image description goes here</a></span>
<span><a href="i" target="_blank"><img src="i" alt="alt"><br>Image Title</a><br><a class="note">Image description goes here</a></span>
<span><a href="i" target="_blank"><img src="i" alt="alt"><br>Image Title</a><br><a class="note">Much longer image Image description goes here</a></span>
</div>

</div><!-- end gallery -->

<p>follow on text</p>
</body>

I've added one longer desription and removed one of the spans.

CSS:

#gallery {text-align: center;} /* IE centering method */

#gallery div {
width: 800px;
text-align:center; /* or left */
margin: 0 auto; /* compliant center */
}

#gallery span {
display: table-cell;
display: inline-block;
width: 200px;
vertical-align: top;
background: #0f0;
margin-right: -4px; /* to compensate for IE/Opera's Whitespace */
}
/*
#gallery span {
float: left;
width: 200px;
background: #0f0;
}
*/
p {background: #ffc; margin: 20px 0;}

Just uncomment either/or of the "#gallery span" rules to see the two differing methods at work.

>>Devil's Advocate

I have to say that although these are CSS solutions my HTML code is set up:

<div id="gallery"> 
<div>
<span>

And ultimately this is the same as:

<table id="gallery> 
<tr>
<td>

So (another choice) perhaps a table is still the best tool for this job? It can still be styled with CSS, but without any workarounds ;)

HTH
Suzy

TheDave




msg:1192493
 10:22 pm on Nov 11, 2004 (gmt 0)

Thanks again Suzy. I can't help but wonder whether it would be in FireFox's best interests, as a browser, to mimic IE's behaviour on this one. Opera obviously chose to go the same path as IE for a reason. At least I know that it can't be done in FireFox so I won't even bother trying.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved