Comments on: CSS floating problems http://blog.team-noir.net/2009/06/css-floating-problems/ team noir blog Thu, 26 Jan 2012 15:05:35 +0000 hourly 1 http://wordpress.org/?v=3.2 By: karrock http://blog.team-noir.net/2009/06/css-floating-problems/comment-page-1/#comment-260 karrock Thu, 06 Aug 2009 16:11:02 +0000 http://blog.team-noir.net/?p=127#comment-260 I now will answer to your post. The site is growing and the problem with the gap is already existent. I refactored some of my code, put things together or centralized some code snippets (php). I also centralized the code to build this part with the silly gap. In one case (on one site) it works fine and I have to replace my trick for the gap with just a div-container with css "clear: both". What I wanted to say is, that this silly gap is only in one case existent. And the problem is not the hr itself. The problem is, as you mean, the code above. I used YAML and this means, it must be my code and my things I put around in the middle-column (where the problem appear). At the time I started to refactor my php-code I tried some things out to re-understand what happens with this gap but I don´t find a better solution as I described above. At the beginning of develope this "gap hack", I also tried out what you wrote. I try to overwrite other css-attributes like margin, padding and so on, which will be inherit from yaml. But this doesn´t worked. If I ever in my life will find a good solution I will write it down here... :) But thanks for your suggestions! I now will answer to your post.
The site is growing and the problem with the gap is already existent. I refactored some of my code, put things together or centralized some code snippets (php).
I also centralized the code to build this part with the silly gap. In one case (on one site) it works fine and I have to replace my trick for the gap with just a div-container with css “clear: both”.
What I wanted to say is, that this silly gap is only in one case existent.

And the problem is not the hr itself. The problem is, as you mean, the code above. I used YAML and this means, it must be my code and my things I put around in the middle-column (where the problem appear).
At the time I started to refactor my php-code I tried some things out to re-understand what happens with this gap but I don´t find a better solution as I described above.

At the beginning of develope this “gap hack”, I also tried out what you wrote. I try to overwrite other css-attributes like margin, padding and so on, which will be inherit from yaml. But this doesn´t worked.

If I ever in my life will find a good solution I will write it down here… :)
But thanks for your suggestions!

]]> By: Fleshgrinder http://blog.team-noir.net/2009/06/css-floating-problems/comment-page-1/#comment-247 Fleshgrinder Wed, 15 Jul 2009 18:59:18 +0000 http://blog.team-noir.net/?p=127#comment-247 It's hard to talk about your specific problem without an example. But I think I can imagine what you're talking about. I think the main problem are the predefined CSS properties of all browsers. So to get rid of this problem, try to use the Yahoo! CSS reset: <a href="http://developer.yahoo.com/yui/reset/" rel="nofollow">Yahoo! UI Library: Reset CSS</a> If this isn't the solution for you problem you have to remind yourself about how a <hr /> is really working. In the end it doesn't matter which element you use. You can style a <hr /> that it's looking like a <div>-container. But it's very important to know how. First of all I would have tried to kill all possible CSS statements by just directly typing a style-attribute within the Firebug console. Something like: <code><hr style="margin:0;padding:0;width:100%;height:0;clear:both;background:none;border:none" /></code> Normally the line should now be invisible. I don't know if you used a background image to create the dotted line (which sounds silly but often makes sense, because many browsers are rendering the dotted lines really ugly), if not my next step would be to add the dotted line: <code><hr style="margin:0;padding:0;width:100%;height:0;clear:both;background:none;border:none;border-top:1px dotted #ccc" /></code> To create the gaps I would use <code>margin:1em 0</code> and the whole thing should be working fine. But as I wrote before, it always depends on the whole website, sometimes there can be really annoying CSS declarations with in the main stylesheet - I really know it, one of my projects is really suffering from a huge stylesheet which is coded really bad. It’s hard to talk about your specific problem without an example. But I think I can imagine what you’re talking about. I think the main problem are the predefined CSS properties of all browsers. So to get rid of this problem, try to use the Yahoo! CSS reset: Yahoo! UI Library: Reset CSS

If this isn’t the solution for you problem you have to remind yourself about how a <hr /> is really working. In the end it doesn’t matter which element you use. You can style a <hr /> that it’s looking like a <div>-container. But it’s very important to know how.

First of all I would have tried to kill all possible CSS statements by just directly typing a style-attribute within the Firebug console. Something like:
<hr style="margin:0;padding:0;width:100%;height:0;clear:both;background:none;border:none" />
Normally the line should now be invisible. I don’t know if you used a background image to create the dotted line (which sounds silly but often makes sense, because many browsers are rendering the dotted lines really ugly), if not my next step would be to add the dotted line:
<hr style="margin:0;padding:0;width:100%;height:0;clear:both;background:none;border:none;border-top:1px dotted #ccc" />
To create the gaps I would use margin:1em 0 and the whole thing should be working fine.

But as I wrote before, it always depends on the whole website, sometimes there can be really annoying CSS declarations with in the main stylesheet – I really know it, one of my projects is really suffering from a huge stylesheet which is coded really bad.

]]>