My problem is when I try to add margin bottom to all elements of columns:2 list, i've added margin-bottom:5px for spacing but for some reason it doubles the spacing. One in the third element bottom and the fourth element top (which gives me the problem)
Is there any solution for my problem?
I have just hit this bug in Chrome.
With a little investigation, it seems the bottom of the last <li> in the first column gets placed at the top of the 2nd column.
The solution was to apply the follwing to the <li>'s:
display: inline-block;
width: 100%;
Hope this helps, someone else.
I recently had a similar issue too and the solution is in MDN docs.
.card {
break-inside: avoid;
page-break-inside: avoid;
}
And an example from MDN.
Actually it was bug inside an old version of Chrome.
I tried Firefox and Chrome current versions; neither of them had this problem.
Related
I am trying to create three column layout and it should look like this:
|sidebar| |column1| |column2| |column3| |sidebar2|
My layout works in :IE,Firefox and Safari...
But it breaks in Opera and Chrome.
It looks like this in these browsers:
|sidebar| |column1| |column2| |sidebar2|
|column3|
I think that the problem is in the middle column (I am giving it "display:inline-block", and "text-align:center" to the body in order to center it, but for some reason the right column is being pushed down)
I know that I am asking a lot but can you please check my Page to see the Problem in these browsers.
If somebody knows a solution for this it would be great. Thank you!!
You need to change your CSS for the middle column to float left.
#blogs_three_cols .middle_column {float:left;}
If you want columns to float next to each other, you need to actually float them :) You had none set. Doing that made the right column get all confused.
do this...
#blogs_three_cols > div {
float:none !important;
display:inline-block !important;
vertical-align:top;
}
Unless you can change the current css, you would need to override the styles with !important;
updated above.
I have tried every possible resolution on this thing. No luck still, I am having a problem with negative margins on IE and FF.
I just need to set the negative margin on an item but it only affects the element and leaves its children behind.
Check out the effect here. http://s-4-k.co.uk/s4k2/
Can someone help me out please. I am desperate.
Please use float none for parent div it will make the behaviour common on all browsers and then set margin in negative according to your needs.
.row-fluid .span12 { float: none; }
Adding bottom: -20px // replace this value with yours did the trick for me.
Some strange is happening in applying the styling of css code in some browsers...
Please take a look in the example...
http://jsfiddle.net/3FepW/3/
In Chrome the green div is bigger, than in Firefox, I really don't know what is the problem, I think in Firefox it displays as it should but in Chrome and IE9 it displays different.
I tried a lot of changes, can't resolve this for days.., I can use height: 100% or overflow hidden but I can't use one of them because: overflow hidden hide everything inside, but I have some draggable/sortable elements and height: 100% because I have a resizable function that will enlarge the yellow div...
The problem comes from something known as margin collapsing. Chrome and IE are rendering it correctly. Not sure what Firefox is doing.
There are many questions in here regarding the same problem. I've answered one of them here - Adding CSS border changes positioning in HTML5 webpage
Basically top and bottom margins between siblings, and children and parents collapse to highest of them. The float: left you put on .c1 prevents that from happening . The margin-bottom on .c3 gets stuck inside .c1 and that's why it gets bigger (that is, 'that's why .c1 gets bigger').
Try adding overflow: auto; to .c2- another way of preventing margins from collapsing - so c1's margin gets 'stuck in' .c2 instead - I'm assuming that's probably what you're looking for.
Here's a fiddle -> http://jsfiddle.net/joplomacedo/3FepW/5/ .
Remove the margin-bottom: 10px; from .c3 - this is what causes such behavior. As far as I know such issue is often referred to as 'collapsible margins', please, somebody correct me if I'm wrong.
let's say I have a div with right-aligned text and a fixed with:
div{
width: 30px;
text-align: right;
}
is it ok if I increase the width of this div to 35px trough padding, to move the text away from the edge and avoid adding another element inside of it?
div{
padding-right: 5px;
}
I mean would any browsers behave weirdly about it?
The result would be exacly what you said: a div of total width 35px. It seems to me you understand what you are doing, but there is never a substitute for actually testing in all your target browsers.
While this small piece of CSS looks innocent, it can change the elements around them in a way you didn't expect.
No It'll be ok, in every major browser.
Internet Explorer in Quirks Mode would have a problem with it due to it's box model.
If this is a problem, I would use a nested div that uses margins instead.
Your other option could be including an IE specific CSS file.
This is an area that we are getting a lot more control over with css3. Have a look at
http://www.quirksmode.org/css/box.html.
lately i've been slamming my head against my desk to solve this Problem. Didn't work out. I know it can be solved by editing the contents with some clearing elements. Sadly there is some javascript sorting beeing used and the Sourcode is being generated by CMS Components so that would be my last shot.
I'm having a few boxes beeing floated alwayes 2 in a row. The boxes have a diffrent height but equal width and are all placed in a container with static width. The link shows the source i need to reproduce the Problem. My Boxes are beeing floated left. I tried to fix this with clear: left on odd and clear: right on even elements. But that only works in ff/ie8/chrome Browsers, not ie7.
Example: http://www.i3rutus.de/ie7divfloatexample/
Anyone knows a possibility to fix this Problem by just editing the CSS not the actual XHTML? Problem appears in IE7. IE8, Chrome and FF work fine.
Any Ideas?
Thanks in advance
Here's the deal. You only need to float one of each of the pairs of boxes. Here's the amended css rules:
.even {
float: left;
clear: left;
margin-top: 0
}
.odd {
}
Demo
(Incidentally, your use of odd and even had me chasing my tail for a while ;) )
Just remove
.even {
clear: left;
}
.odd {
clear: right;
}
and it works as intented.
If you are able to include a js in the header then maybe try to use http://code.google.com/p/ie7-js/?
I played with it but given float:right screws it up, it's probably a little more complex than experimenting with float values.
-- update --
I seemed to be able to get it work in ie7 by:
remove float:left on .clear,
added float:left;margin-top:0px to .even