CSS clearfix problem with Firefox 2 and SeaMonkey - css

I am using yaml for layout and famous clearfix css to make sure container with floats get extended.
Everything works fine with Firefox 3, IE6, IE7, IE8, Opera 9 and Google Chrome, but I have issue with Firefox 1, Firefox 2 and SeaMonkey. The problem is that clearfix container gets extended too much, as you can see on the website:
http://www.slagalica.tv/game/mojbroj
Here are screenshots of Firefox 2 and Firefox 3 rendering.
Update: Screenshots on BrowserShots.org
Unfortunately, stats show that more than 10% of my visitors are using FF2, so I cannot simply ignore the problem. I tried removing or tweaking some parts of clearfix CSS, but no matter what I do, the timer DIV (green) is separated by a large margin from the rest of the page.
Does anyone have an idea how to solve this?
Update2: I finally gave up and put TABLE tag and solved the issue in few minutes. So, don't try to look into HTML source - problem is not evident anymore.

So if you look at the original article that promotes clearfix on positioniseverything, you will note that the author recommends that since the fix is out of date the reader should look at an article on sitepoint. This sitepoint article points out a method which I have been using for a long time now.
Very simply if you give the parent overflow: hidden and make sure it has 'layout' in IE then this will clear the internal floats.
<div id="wrapper">
<div id="leftcol">
Text
</div>
<div id="rightcol">
text
</div>
</div>
and then the corresponding CSS:
#wrapper{
overflow:hidden;
width: 100%;
}
#leftcol{
float:left;
width: 50%;
}
#rightcol{
float:right;
width: 50%;
}
In the above example I have used width: 100% to give layout to IE, but you could just as easily use zoom: 1 or height: 1% if you would rather.
Try replacing clearfix with this technique and your problem should be solved.
Things to bear in mind with this technique, be careful of your internal widths otherwise you may get clipping and it is important to override the wrapper in your print stylesheet as overflow: visible otherwise it will only print the first page. but I have been using this method in production successfully for years now and I have never had any unresolvable issues with it.

clearfix is just a hack for the lazy or obsessive purist. Put a clearing div where you need it (at the bottom of your div) and get on with life.
<div>
... floated content ...
<div style="clear:both"></div>
</div>
BTW. Purist who claim this breaks semantics are incorrect. The HTML specification defines no semantic meaning for <div>. At worst it mixes style/structure but it's hardly a burden to remove when the site is redesign in the future and a pure css solution becomes practical.

I looked at it using browsershots, and I'm trying really really hard to figure out what the difference between it in FF2, 3, and chrome is. I'm not seeing it.
Looking at your page though, why not do something along these lines?
<div id='wrapper'>
<div id="leftcol">
Text
</div>
<div id="rightcol">
text
</div>
<div id="foot">
text
</div>
</div>
And the CSS:
#wrapper{
min-height:1%; //to fix IE6 floats escaping ancestor div
}
#leftcol{
float:left;
}
#rightcol{
float:left;
}
#foot{
clear:both;
}

Seems like this is a bug, and is fixed in newer versions. However, to maintain compatibility, tables have to be used instead of CSS.

Related

CSS: Absolute element keeps jumping in Google Chrome

I have an absolutely positioned form that appears roughly 200px below where it should be on the page load. If I open up Chrome Dev Tools and disable and re-enable any CSS image it goes where it should be.
This only happens in Google Chrome.
I've tried using the chrome specific CSS rules below but it doesn't work.
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0);
How can I fix this?
Here is the page in question: http://info.iconixx.com/Iconixx-Incentives_imc_incentives1.html
It's likely nested in a different element then your wanting it to be. Make note of the parent element.
Find the element in which that header image is coming from. Likely <header></header>
Then make sure that element is defined as position: relative;
Within those tags have the relevant mark-up of the element you are trying to position within this area.
<header>
<div id="absoluteelement">
</div>
</header>
Now when you do:
#absoluteelement {
position:absolute;
top:50px;
left: 200px;
// more
}
It will be positioned top and left coordinates from the parent element, so top and left from the top and side of <header> just double check your code and nesting. Also, make sure you have all widths and heights defined for that area. Hope this helps.
I think you should really take a look how your markup is structured and consider reformatting it. For 1 the left box in the banner comes after the Form which is on the right. Just like anything else you should build left to right.
<div id="banner">
<div id="left_content"></div>
<div id="right_form"></div>
</div>
You could then....
#left_content{ float:left; }
#right_form{ float:right; }
This isn't going to give you the exact look you want... but using this approach will really help eliminate thse types of issues to begin with.

CSS Floating Bug in Google Chrome

I'm experiencing a weird issue in the latest version of Chrome (25.0.1364.97 m). I have a set of divs inside a floated, cleared container, all floated left with the same width.
In Firefox, IE, and older versions of Chrome all the boxes sit side by side as they are supposed to but in the latest version of Chrome the first div is above the others like so:
It only seems to happen when the window is maximised and on the first load, if I refresh the page it sorts itself out, but if i do a hard refresh with Ctrl + F5 it happens again
The HTML:
<div id="top">
<h1>Words</h1>
</div>
<div id="wrapper">
<div class="box">Words</div>
<div class="box">Words</div>
<div class="box">Words</div>
<div class="box">Words</div>
</div>
CSS:
#wrapper {clear:both;float:left;margin-top:20px;width:500px}
.box {float:left;width:100px;border:1px solid #000;margin-right:20px}
I've made a fiddle here: http://jsfiddle.net/GZHWR/3/
Is this a bug in the latest Chrome?
EDIT: I know this can be solved by applying padding to the #wrapper element instead of margin-top but we manage around 140 sites so it's not practical to go and change the CSS on every one
EDIT 2: I think I need to clarify my question. I am not asking how to fix the issue. I already know that. I want to know why this behaviour is occuring? Why is the rendering engine rendering the markup/css like this? Is it correct behaviour?
It seems to be a bug. The problem appears when applying clear on the wrapper element. When you remove the clear, the bug goes away.
According to the W3C specs regarding the clear property:
This property indicates which sides of an element's box(es) may not be
adjacent to an earlier floating box. The 'clear' property does not
consider floats inside the element itself or in other block formatting
contexts.
So it shouldn't effect the children's floating behaviour. I filed a bug report at Chrome about this issue.
Update: From the link in the comments, kjtocool mentioned on 30-03-2013:
It appears that this issue has been corrected in version 26.0.1410.43
Why don't you use
display: inline-block;
instead of float: left for .box?
Try :
#wrapper {
display:inline;
}
.box{
vertical-align:top;
}
I had the same issue with the "Like" toolbar and after this code, it work.
Try this:
css:
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
line-height: 0;
content: "";
}
.clearfix:after {
clear: both;
}
html:
<div id="wrapper" class="clearfix">
<div class="box">Words</div>
<div class="box">Words</div>
<div class="box">Words</div>
<div class="box">Words</div>
</div>
Remove
clear:both;
from #wrapper
remove clear:both from #wrapper yes it works..........
http://jsfiddle.net/GZHWR/20/
Remove clear:both from #wrapper and if you still face a problem apply clear:both after last div
Remove clear:both;float:left; form #wrapper
clear:both is require when you want div nex raw.

vertically stacked divs have space between them (firefox)

a little css problem that i cannot quite find on SO - although I assume it has been asked before, apologies.
So, here is the html:
<html>
<body style="color:white">
<div class="a" style="width: 70%; background: blue;"><p>helloes helloes helloes</p></div>
<div class="b" style="width: 70%; background: pink;"><p>talk talk talk</p></div>
<div class="a" style="width: 70%; background: blue;"><p>yay! yay! yay!</p></div>
</body>
</html>
lovely.
If i open this in ff, i get three vertically stacked divs - but with space in between them! This is not what i wanted! Drama-rama!
ie renders this as i'd expect, which raises some alarm bells.
ie is 9, ff is 11
cheers,
andrew!
UPDATE a lot of mentioning the "p" tag - why/how is the p tag affecting anything? Isn't it wrapped by the div, and the div has the background color applied? Shouldn't, in fact, the div just be internally bigger, but with no space between adjacent divs?
UPDATE:
So i tried this html instead:
<html style="margin:0px; padding:0px;">
which didn't fix the issue, and also this:
<body style="color: white; margin:0px; padding:0px;">
which also didn't fix the issue - shouldn't the css be inherited by the "p" tag in both cases? Interestingly, i also examined the resultant css with firebug, and the p tags all have a margin and padding of 0...
ideas?
UPDATE: a lot of responses asking me to set padding to 0. This doesn't work. Any more answers stating that and i'll down vote 'em.
UPDATE: the question is really specific about using inline css. I don't actually care for inline css myself, but why is everybody providing css stylesheets for their answer?
UPDATE: somebody mentioned -webkit, and while i'm not using a google chrome at all, it is an interesting idea. I cannot see any ff related extra css that might be causing this problem, anybody have any ideas?
I tried it with Chrome and saw the same behavior. After looking at the underlying CSS (F12), Chrome is applying the following two lines to the <p> tag:
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
If I add the following to the css the blank lines go away:
-webkit-margin-before: 0px;
-webkit-margin-after: 0px;
Hope that helps!
Basically the P tags are by default taking margin. Add css
p{margin:0px; padding:0px;}
This is because of the auto-generated margin of a <p> element.
Firefox (and others) do this differently than IE.
You can "reset" this simply by doing a p{margin: 0} in your css.
You can do the same for all elements at once (which I recommend) by simply adding * { margin: 0; padding: 0;} in your css.
Small tip: Install a browser extension to inspect the behavior of your elements such as Firebug.
Your <p> tags have vertical margins. Vertical margins in CSS collapse, so that child margins can sometimes apply to parents. See http://www.w3.org/TR/CSS21/box.html#collapsing-margins
I resolved this be specifying a CSS 'line-height' I just set it to the same as the font size and then I got consistent DIV spacing across all browsers.

CSS Layout - Vertical Source Order

Is there a common CSS layout technique for controlling the vertical source order of a page?
For example, can I change this...
<container>
<header></header>
<content></content>
<footer></footer>
</container>
...to this...
<container>
<content></content>
<header></header>
<footer></footer>
</container>
...while still having the <header> appear at the top of the page, above the <content>?
In other words, I'd like to apply the techniques used for controlling horizontal source order, such as "One True Layout" and "Holy Grail", to the vertical source order of the page.
This question asks essentially the same thing, but the responders didn't seem to get what was being asked and the asker's solution seems cumbersome.
I might get criticism for micro-optimizing, but Mega Menus and responsive design keep pushing my page content down further and further.
Littlefool's answer works well if you know the height of the block you are moving (if you are swapping two blocks, it's sufficient for either of them to have a fixed height).
However it doesn't help if the blocks all have flexible height. In that case you can try the technique from http://tanalin.com/en/articles/css-block-order/:
<div class="container">
<div class="block-1">1st block</div>
<div class="block-2">2nd block</div>
<div class="block-3">3rd block</div>
</div>
<style>
.container { display: table; width: 100%; }
.block-1 { display: table-footer-group; } /* Will display at the bottom. */
.block-2 { display: table-row-group; } /* Will display in the middle. */
.block-3 { display: table-header-group; } /* Will display at the top. */
</style>
(see demo: http://jsbin.com/etujad/11/edit)
Caveats:
It only works for up to 3 blocks (you may be able to achieve more by nesting).
It doesn't work in IE6/7, and there are some wrinkles in IE8.
Many browsers (except Firefox?) don't allow replaced elements like images to be given these display values (testcase), so you'd have to wrap them in a div and reorder the div instead.
You could either supplement this with JavaScript for old IE, or depending on the design it might be acceptable to just leave the blocks in the wrong order in old IE (note that very few smartphones run old versions of IE, as even Windows Phone 7.5 runs IE9, so this is a good option if you're only swapping the source order on mobile devices).
You cannot alter the source of a page with CSS. You can, to some mild degree, alter the HTML output, but not in this way.
The order of elements in an HTML document has meaning. So typically it won't make sense for your source to have a heading which comes after its related content. It is the order which defines that relationship in many cases.
What you can do is use CSS techniques to lay out these elements visually so that they appear to be in different order.
But their vertical order in HTML should be semantically logical.
You should know that searching for "the holy grail" is quite useless. Although I can understand why you want to have the content section in front. Usually search engines index the pages on the content as they appear in html. Having first a bunch of headers and other things won't do any good.
I haven't had time to look into HTML5 and CSS3 yet, but it is quite possible to alter your layout with only css. I'm a developer so my css and html skills are less then real web producer but you can play around with the position properties in CSS.
<div id="content">this is your content</div>
<div id="header">this is the header</div>
<div id="footer">this is your footer</div>
This html can still show the header tag on top of your page with the following css.
#header
{
height:100px;
width:100%;
background-color:Red;
position:absolute;
top:0;
}
#content
{
margin-top:100px;
height:500px;
background-color:Green;
}
#footer
{
height:100px;
background-color:Blue;
}
I hope it gives you an idea of what is possible. (since you mention HTML5 I suppose you don't need to worry about older browsers but only the latest releases).
You can use the old friend display:table to re order your element.
Lets say this is your source.
<div id="container">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
In order to reorder try this.
#container{
display: table;
}
#content{
display: table-header-group;
}
#header{
display: table-row-group;
}
#footer{
display: table-footer-group;
}
bam. you got it. Here is the proof of concept. http://jsfiddle.net/k0La8egp/1/

CSS Page-Break Not Working in all Browsers

I'm having trouble getting this working in most browsers, except for IE (it even works correctly in IE6) and Opera.
Firefox separates the divs correctly but only prints the first page.
Chrome and Safari only applies the page break to the last div.
How can I get this working across all browsers correctly?
The HTML:
<div id="leftNav">
<ul>
<!--links etc-->
</ul>
</div>
<div id="mainBody">
<div id="container">
<div class="pageBreak">
<!--content-->
</div>
<div class="pageBreak">
<!--content-->
</div>
<div class="pageBreak">
<!--content-->
</div>
</div>
</div>
The divs with the IDs #leftNav and #mainBody are are set to float:left, so they display nicely.
I only want to print the .pageBreak classes, hiding the #leftNav and the rest of the #mainBody with CSS.
The CSS:
#media print
{
#leftNav
{
display:none;
}
#mainBody
{
border:none;
margin:none;
padding:none;
}
}
Parent elements can not have float on them.
Setting float:none on all parent elements makes page-break-before:always work correctly.
Other things that can break page-break are:
using page-break inside tables
floating elements
inline-block elements
block elements with borders
For the sake of completion, and for the benefit of others who are having the same problem, I just want to add that I also had to add overflow: visible to the body tag in order for FireFox to obey the page breaks and even to print more than just the first page.
I've found that Twitter Bootstrap classes add a bunch of stuff to the page which has made it difficult to get page-breaks working. Firefox worked right away, but I've had to follow various suggestions to get it to work in Chrome and, finally, IE (11).
I followed the suggestions here and elsewhere. The only property I "discovered" that I haven't seen yet mentioned is "box-sizing". Bootstrap can set this property to "box-sizing: border-box", which broke IE. An IE-friendly setting is "box-sizing: content-box". I was led to this by the caveat about "block elements with borders" made by Richard Parnaby-King https://stackoverflow.com/a/5314590/3397752.
It looks like it's a bit of an arms race to discover the next property that might break page-breaks.
This is the setting that worked for me (Chrome, FF, IE 11). Basically, it tries to override all the problematic settings on all divs on the printed page. Of course, this might also break your formatting, and that would mean that you'll have to find another way to set up the page.
#media print {
div { float: none !important; position: static !important; display: inline;
box-sizing: content-box !important;
}
}
There is a solution if the parent has float . For the element to which you applied the page-break, make the element overflow:hidden. Thats all. It worked for me.
<div style='float:left'>
<p style='overflow:hidden;page-break-before:always;'></p>
</div>
Although this is not prominently documented, it should be noted that the page-break properties cannot be applied to table elements. If you have any elements that have a display: table; or display:table-cell; applied to them (common in many templates under the clearfix class) then contained elements will ignore the page-break rules. Just cancel out the the rule in your print stylesheet and you should be OK (after the floats have also been removed, of course).
Here is an example of how to do this for the popular clearfix problem.
.clearfix:before, .clearfix:after{
display: block!important;
}
The other place I have run into this is when the template declared the entire page (usually called main or main wrapper) with display:inline-block;
If the section is inside of an inline-block, it will not work so keep your eyes open for those as well. Changing or overwriting display:inline-block; with display:block should work.
I had a position: absolute; in the div printing that caused this not to work.
Make sure the parent element has display:block; rather than display: flex;. This helped me fix the issue
"Firefox versions up to and including 3.5 don’t support the avoid, left, or right values."
IE support is also partial
you can achieve what needed by :page-break-before:always; which is supported in all browsers
"but only print the first page" : I don't think it is css related , I suppose it's sth on print window of browser :)
what's your code?
like this?:
<style>
#media print
{
table {page-break-after:always}
}
#media print
{
table {page-break-before:always}
}
</style>

Resources