I have discovered a strange bug in Firefox 4.0.1 (It also happend in Opera 11.5) so I've created this example to show the problem:
http://jsfiddle.net/whYC7/
If viewed in safari everything looks fine, but when I open it in Firefox or Opera the image inside the div with a negative margin still takes up space in the div underneath.
Does anyone know of a way to fix this?
This is the correct rendering per the CSS spec. The negative margin means that the top of the red div is higher than it would be otherwise, but once you determine where its top is the position of the text just depends on the intersection of the float and the div. See http://www.w3.org/TR/CSS21/visuren.html#floats the paragraph starting "A line box is next to a float".
You may want to file a bug on WebKit here.
I have ran into this issues as well in FF and IE9...an absolute positioned div does not seem to recognize negative margins, though using top:100px instead of margin-top:-100px does seem to work in FF 12 and ie9
A fix that could work in most cases is to make your div's position absolute and then to use top/left/right/bottom to control position
Related
My website http://www.rattletree.com/ works fine in other browsers, and used to work correctly in Safari, but I just noticed that the navigation elements are shifted up now. Can anyone recommend what needs to change in the css? Thanks!
I usually use firefox with firebug, but I'm not able to figure out how to use the dev tools in Safari to test css changes, so I'm chasing my tail here...
It seems that safari experiences problems whenever there is a negative margin greater than the size of the element in the relevant dimension ( height or width ).
The contents of .abovenavcontainer are all floated, with no clearfix, or float clear applied, so it has a height of zero, so the negative margin size ( 69 ) is greater than 0. Try adding a clearfix, or laying out the child elements without float, like, say, display: inline-block;
I have a very specific layout to achieve with HTML/CSS. Basically I have a text container with a couple of left-floated boxes within. I then have a footer which needs to overlap this text container by a few pixels at the bottom. I'm achieving this by using a negative top margin on the footer, and setting position:relative and z-index on the text container and footer to make the footer layer stack above the text container.
It can be best demonstrated in a fiddle: http://jsfiddle.net/sW9cu/2/.
The issue is that in IE9 and Firefox 18 the content of the footer clears the content of the text boxes, whereas in Chrome the content of the footer overlays the content of the text boxes without any clearing.
I basically need this to be consistent in IE7+, Firefox and Chrome, one way or the other. Not bothered which way - it can either clear or overlap, but it needs to behave the same regardless of browser.
Can anyone see why it's doing this and how to rectify it? It may be to do with the micro clear fix I'm using on the text container, but I'm really not sure.
Thanks for any pointers folks - this one has me stumped!
Sorted. I couldn't overcome the issue with the current mark-up but by removing the negative top position and adding an absolutely positioned div inside the footer with a negative top value (top: -20px;) that has achieved what I'm looking for. See: http://jsfiddle.net/sW9cu/4/.
As I know, the answer would be WebKit in CSS
Internet Explorer, Firefox and WebKit are three different things.
Webkit is used by Safari and Chrome.
moz is for Mozilla
o is for Opera
"normal" is for Internet Explorer.
You can read more about here
I'm having a problem with multiple text-shadows and negative letter-spacing in Webkit where the last few pixels of the shadow on the last letter are cut off.
Well, only certain letters.
Look at this demo in Chrome or Safari (it works as expected in Firefox and Opera as far as I can tell.)
I know I could use -webkit-text-stroke in addition, but that leads to this problem:
Any ideas? Thanks.
Yes, I'd say it's a drawing bug. It appears webkit lets the box around the letter crop the shadow when you start using negative letter spacing.
I found it easier to see the problem by increasing the size and doing display: inline to get a collapsed box around the letter.
http://jsfiddle.net/tMeuB/3/
Firefox
As of version 7.0.1
Notice how the shadow stays as the negative letter spacing increases from left to right.
Safari
As of version 5.1.1 (7534.51.22)
Same test. See how the shadow gets cropped as letter spacing increases. In frame 3 you can almost see how the algorithm calculates it. I'd guess the amount of clipping = glyph width - glyph box width.
I found a solution, sort of.
Here is another demo.
If you drop a in after the cropped letter, it fixes it. But that's not ideal.
I tried using a similar technique with an :after pseudo element, but it doesn't work.
Fortunately enough for me, the text I'm trying to apply this style to is a pseudo element, so it was easy to throw a \00A0 in the content:''.
The issue is best explained with pictures, but you can try it for yourself here:
http://pastehtml.com/view/b3y7e9uz6.html
Simply compare ie7 to (ie8 or ff or chrome). It looks like this in modern browsers:
and like this in ie7:
What is causing it to be offcenter in ie7?
As soon as you remove the position: absolute everything corrects itself, minus the red border; however, that is extremely easy to solve by applying the appropriate borders to the sides you want them on.
If you must keep the position: absolute add left: 0 and that appears to correct it as well. IE7 probably requires a left/right or gets slightly messed up as it doesn't know where to position it.
I am working on this site: http://www.mywebclass.org/~jeff/ . A large percent of the ui is built with position:fixed;. In all the browsers except Safari it renders fine. But in Safari it is all messed up. Is there any way to fix this?
You have position:fixed on a few elements but you haven't set any of top, left, right, or bottom to tell the browser where they should be positioned. The browser will be left to guess (within limits) what you mean if you don't specify the position and different browsers will guess different things. The solution is to add left and top properties to all your position:fixed elements.