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.
Related
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.
I have this code, which is behaving differently in firefox vs chrome.
<h2>Presenting
<span style="font-weight:bold">Analytics by </span>
<div class="fi_logo"><img src="IMAGEURL" /></div>
</h2>
the class fi_logo referenced above is :
.fi_logo {
min-width: 35px;
height: 35px;
margin-left: 40px;
position: absolute;
top:-5px;
left: 262px;
float:right;
}
In firefox, there is an offset caused by margin-left in fi_logo between the image and the text(in h2). If i dont add the margin-left, then the image overlaps the text in chrome.
So, in short, if i add the margin-left property, it works in chrome, whereas it causes a large offset in firefox. Any suggestions on how to solve this?
Here it is: http://jsfiddle.net/bikerabhinav/mpL79/2/
Use combination of position relative and absolute.
Also, do not use div inside h2 - bad markup
Maybe if you set .fi_logo display:block
I think, your problem is with specific browser version.
I checked it in FF 3.6.2, which return same result like Chrome
Well it sounds like you still haven't sorted this out so I will make a little more commentary.
I cannot say exactly what is causing the browser inconsistencies without doing a bunch of trial and error, but I think that the way to fix it is to rethink the way you are positioning the image.
It seems awful convoluted to be positioning the img absolutely, floating it, and adding a left margin. Given all of that it is unclear what precisely you are even trying to accomplish with this code.
If you edit your question to describe how you want the image positioned, I (or someone else) would be more than happy to recommend a good approach
Your html is invalid. You cannot have a div inside a heading. I also question the float and absolute positioning on the same element. I also wonder if you are using a doctype.
Your image tag inside the div is not closed properly, and in the css the class definition is wrong; the class is defined by a dot (.);
I declared a negative margin on a link, but it doesn't work on IE 7.
#search a {
color: #E5E5E5;
text-decoration: none;
font-weight: bold;
float:right;
margin-top:-20px; // this is not working on ie, only mozilla
}
Is there a fix for this?
{position: relative;} may be required, as already noted, but you may have another problem:
In general, IE7 will not draw the part of an element that protrudes outside of its parent container if negative margins is the technique used to pull the element out that way (though it will respect other means of effecting protrusion, like {overflow: visible}).
This is a "hasLayout" -related, IE bug , and a thorough treatment of it can be found at "Has Layout: Negative Margin Bug.
As the above-cited reference notes, there are ways of coaxing IE7 to paint the part of an element with negative margins that protrudes outside its parent, but it involves "... to not use any properties that give an element layout." and that is potentially restrictive to other design techniques you'd like to use, and has other side effects (again, see cited reference).
But to answer your question: for the workaround, see the list of properties that induce "hasLayout", (like position, height and width -- yikes!) and be sure none of them are applied to your container.
Set position: relative;
This is a good guide for using negative margins http://www.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/
Make sure you set a valid Doctype. Quirks mode doesn't allow negative margins.
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.
I've been doing some Googling, but haven't really found a straight answer. I'm curious to know if Firefox 3 has a bug when trying to apply a negative margin to a div that is either clearing a float or contains another element being floated?
Firefox seems to ignore the negative margin, but Web-kit browses respect it accordingly.
After a lot of trial and error I read a few related snippets on display: inline-block; and after adding that to the div I am applying the negative margin, margin-top: -10px; it worked.