Topic: Questions about "display: compact" Pages that link to <a href="https://ozoneasylum.com/backlink?for=10827" title="Pages that link to Topic: Questions about &amp;quot;display: compact&amp;quot;" rel="nofollow" >Topic: Questions about &quot;display: compact&quot;\

 
Author Thread
Suho1004
Maniac (V) Inmate

From: Seoul, Korea
Insane since: Apr 2002

IP logged posted posted 10-20-2002 15:42 Edit Quote

Well, it's been a while since I've been in this forum... figures that I only come back when I need something, right? Heh. I'll have to try to make a more concerted effort in the future.

Anyway, my question: In the section on compact boxes in the W3C CSS2 Specs, it says that setting up a box with "display: compact" and another box with a sufficient margin will basically produce a two-column table effect (see the link for an example). However, when I try this, I don't get vertical alignment (in other words, the left-hand element is on one line, and the right-hand element is on the next line). What I'm trying to do is have a small picture on the left with some descriptive text on the right. I've looked at some other resources concerning compact boxes, and they show the same results I've been getting (content on different lines).

Am I going at this the right way, or is there another way to do it? Very simply, I just want a two-column table... without the table.

Thanks for the help.




Cell 270

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

IP logged posted posted 10-20-2002 16:01 Edit Quote

Suho1004: Without checking the browser compliance tables I'd guess that this style is poorly implemented which is why it isn't working. You might be better of waiting for CSS3

I'd suggest (from your description) that you should use float to get the effect you are looking for.

___________________
Emps

FAQs: Emperor

genis
Paranoid (IV) Inmate

From: Dallas, TX
Insane since: Aug 2002

IP logged posted posted 10-21-2002 03:13 Edit Quote

not wait for CSS3, but for actual browser implementation of all of CSS2 ... or most of it... lots of CSS1 isn't even implemented completely.

It must be really hard to program browsers to be complient.
Maybe one day I'll try it and see.

Suho1004
Maniac (V) Inmate

From: Seoul, Korea
Insane since: Apr 2002

IP logged posted posted 10-21-2002 03:44 Edit Quote

Hmm... I had thought about incomplete browser implementation... I'll have to look that up. Thanks guys.

genis: Amen, brother. We need better compliance, not newer versions. It's the same old crap we had with HTML, just a different technology.

*runs off to research float*

Suho1004
Maniac (V) Inmate

From: Seoul, Korea
Insane since: Apr 2002

IP logged posted posted 10-21-2002 16:19 Edit Quote

Well, float works like a charm--except for one little thing. According the CSS2 specs:

quote:
Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float didn't exist.



Now, the way I have things set up is like this (try to imagine this, because I don't have any place to put a screen shot right now):

Heading

img explanatory text...

The images aren't all that big, but the text varies in length as it is, sometimes running longer than the image, sometimes not. When it runs longer, there is the proper amount of white space before the next heading, but if the text is shorter than the image, it looks cramped (because the float isn't calculated in the flow). Which is the way it's supposed to work, of course, but it kind of sucks for what I'm trying to do.

I've racked my brain and read the specs over and over, and the only thing I can think to do to make it work with float is to make sure that the text runs longer than the image. It also occured to me that it might work if I put the float and the text in a "container" div, but that seems a bit forced. Is that the best way to do it, or am I missing something?

[Edit: Um, OK, scratch that last part; putting it all in a container div doesn't work, as the float doesn't force the bottom of the div box down--basically leaving me with what I'm started. Now I'm stumped...]

[This message has been edited by Suho1004 (edited 10-21-2002).]

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

IP logged posted posted 10-21-2002 17:44 Edit Quote

Suho1004: Damn I was reading down through that and saying to myself 'I know the answer' and then I reached the bottom and lo and behold you'd already tried it. As far as I'm aware doing:

code:
<div>
<img src="" style="float:left;" />
<p>My content goes here.</p>
</div>



can I see the page as it could something else interfering with things?

___________________
Emps

FAQs: Emperor

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

IP logged posted posted 10-21-2002 18:09 Edit Quote

Put a "dummy" DIV after the image and content with "clear" set to "both":

<div>
<img src="" style="float:left;" />
<p>My content goes here.</p>
<div style="clear:both;"></div> <!-- you should use a class for this though, not the style attribute -->
</div>

You might also just try setting the Header elements to clear:both, that might be simpler (and preferred if so).

Suho1004
Maniac (V) Inmate

From: Seoul, Korea
Insane since: Apr 2002

IP logged posted posted 10-22-2002 05:23 Edit Quote

OK, this is some weird stuff....

Giving the heading elements "clear:both" does nothing. The dummy div (set to "clear:both;") also did nothing at first, but then I gave it a 1px border to see where it was showing up--and lo and behold, we have white space! Then I took the border out and the top margin disappeared once again.

As far as I can see, clear ensures that the next box starts below the lower edge of the float. According to the specs, the top margin of the cleared box expands to ensure that it begins below the float, which would explain why I'm seeing no change in the top margin when I give the headers clear.

The dummy div, on the other hand, doesn't make sense. The browser acknowledges its presence with a border, but ignores it without a border? This strikes me as buggy implementation of something (not sure what) in IE6.

It does work with a stupid border, so I guess I could just set the border to the same color as the background and move on... but this is basically just the CSS version of tables and spacer gifs. And I thought we were getting away from that. I really just wanted to build a valid CSS/XHTML page without any rubber bands, duct tape, or chewing gum stuck to the various parts.

The page is not online yet, so I can't really show it to you. I don't have time to put it up now, maybe a little later. I might just move on, but this workaround really aggravates me, since it is so obviously not the "right" way to do it.

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

IP logged posted posted 10-22-2002 06:31 Edit Quote

I know the feeling. I had to make these sorts of compromises when I made my current front page. And sometimes scripting makes it worse (though sometimes workarounds are easier when you're working with a script).

Keep trying things. Be imaginative. Usually there's something obscure that will work.

Thankfully, though, these issues are necessary not because of the medium (CSS & XHTML) but because of the browsers implementing those mediums. This is unlike table tricks, which require spacer graphics, etc, by their very nature.

Suho1004
Maniac (V) Inmate

From: Seoul, Korea
Insane since: Apr 2002

IP logged posted posted 10-22-2002 07:10 Edit Quote

Good point, Slime, and that does make me feel a little better. I think I'll just go with what works for now, experiment a little along the way, and then maybe bring the subject up again when the site goes online for review (crosses fingers), if I haven't figured it out by then.



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu