PDA

View Full Version : Firefox won't inline my divs! Problem with width.



wishiwasageek
05-31-2005, 10:07 AM
I'm soo tempted to go back to tables...

this css/html combo works in IE 6.0 but not in FF 1.04 - what am I specifying wrong??
I simply(!) want the text to be next to the image, like this

<TR>
<TD>this cell has lots of text</TD>
<TD>this cell has an image, aligned to the top, and has a width of 264px</TD>
</TR>
thanx
WIWAG :(
CSS code:


.fullpage {max-width:610px; width:610px;}

.lefttext {display:inline; max-width:125px; padding-right:5px;}

.rightimage {display:inline; vertical-align:top; text-align:top; min-width:264px}

.img1 {outline:1px black solid; width:264px; height:126px;}

HTML code:

<body>
<div class="fullpage">
<div class="lefttext">
<ul>
<li><P>lots and lots of text lots and lots of text lots and lots of text lots and lots of text lots and lots of text
<li><P>text lots and lots of text lots and lots of text
<li><P>text lots and lots of text lots and lots of text
<li><P>lots and Lots of text lots and lots of text text lots and lots of text lots and lots of text text lots and lots of text lots and lots of text
</ul></div>
<div class="rightimage"><img class="img1" border="1" src="../Images/GS_Find_BBSButton.gif" alt="Screen capture"/>
</div>
</div><!-- end fullpage -->
</body>

mwinter
05-31-2005, 01:01 PM
this css/html combo works in IE 6.0 but not in FF 1.04 - what am I specifying wrong??When something 'works' in IE, but not in Firefox, there's usually something wrong.


I simply(!) want the text to be next to the image, like this

<TR>
<TD>this cell has lots of text</TD>
<TD>this cell has an image, aligned to the top, and has a width of 264px</TD>
</TR>You'd be better off floating the image to the right:


<div>
<img alt="Screen capture" src="..." style="float: right;">
<ul style="margin-right: 264px;">
<!-- ... -->
</ul>
</div>though you shouldn't really use inline style attributes. The right-hand margin ensures consistent space down that side, rather than having the text of list items that begin below the image flowing underneath.

If the image is a screen capture, it would be better to have no alternative text, unless you're willing to describe that image in detail (which is what I'd assume the 'lots and lots of text' is doing, anyway). If the image does just illustrate an existing textual description, then it is solely decorative and shouldn't have an impact on the content if the image isn't loaded.

As for why your suggestion doesn't work: ul elements are also block-level. You shouldn't try to make inline elements (or block-level elements styled inline) contain block level elements. As far as I'm aware, behaviour isn't defined if you do.

Mike

wishiwasageek
06-01-2005, 12:50 AM
so do you always have to float one of the inline divs inline for them to line up in firefox?
thanx for your answer btw

WIWAG :o

wishiwasageek
06-01-2005, 12:54 AM
Re. Inline and block - but surely the div is a block(?) and then told to be inline
Doesn't the div "contain" the ul so it can be a block element within a block element (the div?)
I mean does the inline property/attribute(?) get inherited by the UL?

I thought that was the point of Divs to do whatever, but it didn't matter what you put inside them.

Thanx heaps as usual.

WIWAG

jscheuer1
06-01-2005, 05:07 AM
Well, ul's li's have the default display of 'list-item' so, the division will not change that.


list-item
[CSS1|CSS2] [IE6|N4B2|O4]
Type: Explicit
Description:
This causes the element to generate a block box for the content and a separate list-item inline box.

wishiwasageek
06-01-2005, 05:55 AM
ok - but does the image have to be specified first?

thanx

jscheuer1
06-01-2005, 06:19 AM
It depends upon how you want it to look, there are only about 8 possibilities, play with it. You could float the division or the image left or right and have one or the other first.

mwinter
06-01-2005, 03:37 PM
so do you always have to float one of the inline divs inline for them to line up in firefox?I'm afraid you (or I) seem to have confused the issue. The floating suggestions in that I made in your previous two positioning questions were meant to replace what you had. For instance, what I posted previously in this thread would achieve, more or less, the layout I believe you wanted if used as-is. All that was really necessary was for you to move the style data into a style sheet, add the content, and include any extras like padding, colour, borders, and the like.

You wanted to inline the div elements so that they would appear side-by-side. However, floating them would do the same thing, so question of inline vs. block is irrelevant (though you should leave them block, in my opinion).

Mike

wishiwasageek
06-02-2005, 12:57 AM
So either use display:inline OR float:<left/right> as properties of the div, to put two (or more) divs next to each other?

Float seems to be useful as you can specify height and width etc, which I have now learnt you can't do with inline elements (right?)

Thanx guys - going to do some studying re. block, inline etc.

WIWAG :rolleyes: