hello,
on the index page of <!-- w --><a class="postlink" href="http://www.oturn.net/">www.oturn.net/</a><!-- w --> ,
I use right at the top a div with float:left that contains two elements: another div set to act as a fixed image area with random image display via javascript, and below, a simple legend contained in a <p> tag that should wrap when users scale up font size in their browsers. But it doesn't work (in Firefox, at least) even though I explictly set the style of the <p> tag to display:inline. Going to 200% text size means the legend text will not wrap, but extend the width if the floating div. (That's why I have currenty used an ugly <br/ > to force a line break.) Any idea what I should do to correct this (admittedly not serious) misbehavior?
Thanks for input,
Defix
PS: The style is in the page header (for the fixed image area) and in an external style sheet
<!-- w --><a class="postlink" href="http://www.oturn.net/style/oturn.cssRemove">www.oturn.net/style/oturn.cssRemove</a><!-- w --> the display:inline and give the <p> the width of its parent.Now I have
<p style="font-size:smaller;font-style:italic,width:287px;">
(same width as in the parent div) but the behaviour (in Firefox) is still the same...Please update the online version for us. Don't forget to remove the <br>.I had done so shortly after posting, but leaving the <br /> in place. I have now also removed the <br /> hoping there won't be too many users right now...Thanks for your advice BTW!You're welcome
You've got a comma where a semi-colon should be.
font-size:smaller;font-style:italic,width:287px;
should be
font-size:smaller;font-style:italic;width:287px;many thanks Kravvitz ! - I should drink less wine, have better control of my punctuation - I have updated the online version <!-- w --><a class="postlink" href="http://www.oturn.net/">www.oturn.net/</a><!-- w -->
I just wonder *why* giving the <p> tag explicitly the same width would be necessary to make it wrap - is that an odd behaviour (or a "bug" of either CSS or my browser) and your solution a hack that solves the problem, or is there a rationale for that?
DYou're welcome
It's not a bug and my solution is not a hack. #intro has a specified width, but .blockfloatleft does not. The <p> is a child of .blockfloatleft not #intro.Thanks once again for the instructive replies. I may try giving .blockfloatleft the same width as #intro and check whether <p> will then wrap without specifiying its width.
Good night (its sort of late over here)
DTo be more speific, before I forget: what I would *really* like is to have a simply class like .blockfloatleft which will set its div to accommodate whatever image I stick into it, and that makes sure that the width of the image legend below will be the same (i.e. so that it wraps without having to repeat the corresponding width of the image in th e<p> tag).
I guess that should be easy (an address a very common design situation) but I don't know what would be the simplest and most generic way to achieve that.
D
on the index page of <!-- w --><a class="postlink" href="http://www.oturn.net/">www.oturn.net/</a><!-- w --> ,
I use right at the top a div with float:left that contains two elements: another div set to act as a fixed image area with random image display via javascript, and below, a simple legend contained in a <p> tag that should wrap when users scale up font size in their browsers. But it doesn't work (in Firefox, at least) even though I explictly set the style of the <p> tag to display:inline. Going to 200% text size means the legend text will not wrap, but extend the width if the floating div. (That's why I have currenty used an ugly <br/ > to force a line break.) Any idea what I should do to correct this (admittedly not serious) misbehavior?
Thanks for input,
Defix
PS: The style is in the page header (for the fixed image area) and in an external style sheet
<!-- w --><a class="postlink" href="http://www.oturn.net/style/oturn.cssRemove">www.oturn.net/style/oturn.cssRemove</a><!-- w --> the display:inline and give the <p> the width of its parent.Now I have
<p style="font-size:smaller;font-style:italic,width:287px;">
(same width as in the parent div) but the behaviour (in Firefox) is still the same...Please update the online version for us. Don't forget to remove the <br>.I had done so shortly after posting, but leaving the <br /> in place. I have now also removed the <br /> hoping there won't be too many users right now...Thanks for your advice BTW!You're welcome
You've got a comma where a semi-colon should be.
font-size:smaller;font-style:italic,width:287px;
should be
font-size:smaller;font-style:italic;width:287px;many thanks Kravvitz ! - I should drink less wine, have better control of my punctuation - I have updated the online version <!-- w --><a class="postlink" href="http://www.oturn.net/">www.oturn.net/</a><!-- w -->
I just wonder *why* giving the <p> tag explicitly the same width would be necessary to make it wrap - is that an odd behaviour (or a "bug" of either CSS or my browser) and your solution a hack that solves the problem, or is there a rationale for that?
DYou're welcome
It's not a bug and my solution is not a hack. #intro has a specified width, but .blockfloatleft does not. The <p> is a child of .blockfloatleft not #intro.Thanks once again for the instructive replies. I may try giving .blockfloatleft the same width as #intro and check whether <p> will then wrap without specifiying its width.
Good night (its sort of late over here)
DTo be more speific, before I forget: what I would *really* like is to have a simply class like .blockfloatleft which will set its div to accommodate whatever image I stick into it, and that makes sure that the width of the image legend below will be the same (i.e. so that it wraps without having to repeat the corresponding width of the image in th e<p> tag).
I guess that should be easy (an address a very common design situation) but I don't know what would be the simplest and most generic way to achieve that.
D