son Posted February 15, 2011 Share Posted February 15, 2011 I have a peculiar issue with the first <br clear="left"/> in a picture gallery where images float to the left (or on form where I floated labels to left) creating a massive space below the occurance while all following <br clear="left"/> do not do this... What reasons could that have?Son Link to comment Share on other sites More sharing options...
boen_robot Posted February 15, 2011 Share Posted February 15, 2011 The behaviour of CSS properties on the "br" element, including "clear", is not specified, so browsers do all sorts of weird stuff with it. At that point where you need the clear, use a div instead, or better yet, the content that needs to be on the next line - wrap it in its own div and clear that very div. Link to comment Share on other sites More sharing options...
son Posted February 15, 2011 Author Share Posted February 15, 2011 The behaviour of CSS properties on the "br" element, including "clear", is not specified, so browsers do all sorts of weird stuff with it. At that point where you need the clear, use a div instead, or better yet, the content that needs to be on the next line - wrap it in its own div and clear that very div.That is really a bit of a pain. Creates again a lot of redundant data. I thought we should not use tables any more (which I generally don't), but then I sometimes long to the predictability of tables;-)Thanks, will think about it...Son Link to comment Share on other sites More sharing options...
boen_robot Posted February 15, 2011 Share Posted February 15, 2011 IE8 and above supports display:table; and the rest of the table displays. If you're in a position to sacrifice IE7 and IE6, you might as well use that. Using tables for layout is bad, but table layouts are not bad . Link to comment Share on other sites More sharing options...
cousineaug Posted February 16, 2011 Share Posted February 16, 2011 I have a peculiar issue with the first <br clear="left"/> in a picture gallery where images float to the left (or on form where I floated labels to left) creating a massive space below the occurance while all following <br clear="left"/> do not do this... What reasons could that have?SonAlthough I have had issues with <br clear="left"/>, I have had good success with its CSS equivalent which i understand is supported in all major browsersHTML<br class="clearboth">CSS.clearboth { clear: both; } You can also use class="clearboth" as the style of the next element following your image, whether a P or a DIV.When there is greater browser support for :after pseudo element, you will have the option to attach that style to the last element before you need to clear....Guy Link to comment Share on other sites More sharing options...
son Posted February 16, 2011 Author Share Posted February 16, 2011 Both methods actually do not work for floated divs that contain an image and paragraph as: <div><a href="page.php" target="_blank" onClick="return popup(this, 'Bildergalerie')"><img src="photo1.jpg" alt="photo 1" title="photo 1" width="250" height="167" /></a><p><a href="page.php" >Photo 1</a></p></div> Wanting three in a row I have tried the solution with a parent div around a set of three and the clearboth solution... Both not working as they should, gap of first one still massive. Also I cannot sacrifice older IE (grhh)...Son Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.