.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>
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
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
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
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.
ok - but does the image have to be specified first?
thanx
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.
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
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.