Not sure whats going on here or where I've gone wrong but FF3.6 doesn't render the green button in the link below correctly compared to Chrome 9. IE8, Opera 11 or Safari 5.
All others put the button in the bottom right corner of the parent, 12px out. FF3.6 puts it 24px up and against the right side:
http://jsfiddle.net/sxkWZ/2/
Anyone aware of this issue or have I missed something obvious?
Update: Confirmed the issue in FF4 Beta 11. Thinking about filing with Mozilla.
Thanks,
Denis
After fiddling some more, it appears as though the bug is only applying to the fieldset when teh container element has padding set to it. I removed the padding (and instead added a margin to the p element) which solved the issue of the button being pushed up:
Take a look here: http://jsfiddle.net/sxkWZ/11/
If you just want the button to appear bottom right the alternative is to float it: jsfiddle.net/sxkWZ/10
Regards,
Simon
Definitely looks like a Gecko bug as changing fieldset to div makes it render properly:
http://jsfiddle.net/sxkWZ/6/
You can probably just use an enclosing element like a div and switch the position:relative to it to workaround this issue.
Related
I have a webite where i position some events in a calendar with position relative. But the problem is that in Chrome the layout it pixel perfect, but in firefox and IE it does not work at all.
The events get positon about 10px wrong downwards. And my tooltip that also uses relative positoning gets stuck at its "orginial" position.
I have a live demo at: http://jonasolaussen.se/dev3/?page_id=6
You can see the black box positions different in Chrome and Firefox. And when you click on a tooltip it turns up at the date in Chrome but in the bottom left corner in Firefox.
I cannot understand why!?
Please! Help Me!
One way of doing this would be to use css hack so that you can style it dependant on the browser.
Here is a demo:
#media screen and (min--moz-device-pixel-ratio:0) {
.firefox {
background: red;
}
}
Fiddle example:
http://jsfiddle.net/Hive7/3HYmZ/1/
Here are my references:
http://browserhacks.com/
http://css-tricks.com/snippets/css/browser-specific-hacks/
I know this is an old post and because of your lack of detail I can't be sure, but quite often the reason for this is that different browsers will render their box models differently when widths, padding, margins etc are not explicitly set. setting widths for the elements you wish to position around will usually solve this problem.
EDIT:
On the above site whenever I zoom out in firefox the main content div is displaced to the right. This issue only exists in firefox, not in internet explorer, opera or chrome. Could someone help me fix this?
EDIT 2:
I do NOT want the div to displace in firefox. Sorry about the first question, I was in a hurry but should be clear now :)
If you give float:left; to the .wrapper element and the ul.menu everything will be ok :)
The issue you are having is not with #content but rather with the class wrapper. If you remove the rule overflow:hidden from the class, the issue will go away. It looks like the wrapper class is also associated with your button bar.
I would suggest removing wrapper from the div which holds all of the page contents and instead use a rule which only has width="100%".
So I've got a nice floated form layout that works beautifully in FF and Chrome, but not IE (shock, horror!):
So, off to testing I go and the first shot across the bow is to add in a 1px pink border to the FIELDSET on IE to see where it's borders lay, and this is what I get:
...neat IE, neat. So I remember something about "display" triggering something or other in IE's layout engine to make stuff behave like they should, so I'm off to see the Google. But it seems the hasLayout stuff is an IE7-ism.
Specifics are thus-ly: The element not positioning correctly is a FIELDSET. It only has a single CSS attribute against it; "white-space: nowrap;" (tags underneath it are styled with floats). Adding the "new" clearfix doesn't work.
So.. anyone have any ideas on what the heck is going on in IE? Also, as an aside, the conditional statements don't seem to be working for me (...) which is also just weird.
Agh... the warmth and glow of remembering why I hate IE so very, very much...
Isn't it always the way? You take the time to do a write-up for StackOverflow, and as you post it something comes into focus that you didn't see before?
So... it seems that the cause of this is related to IE9 not setting a width during the render. When the border was put on the FIELDSET it forced a width of at least 2px which was enough to force the wrap. Setting a width of 0px still caused the issue, but with a width of 1px (or more) it wrapped as expected. In the end I simply added in a "clear: left" to the CSS class (which is arguably proper anyway as that is what I expect) and all was again right in the world.
So... in some cases, it seems that IE9 will not set a width on a rendering (rendered?) element (a FIELDSET in this case). This probably has something to do with the hasLayout stuff, but I'm not 100% certain. This may have been caused by the fact that all elements within the FIELDSET are being FLOAT'd left.
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
I have this small testcase: http://jsfiddle.net/sV8js/
You can see that in Chrome (tested on win7 11.0.696.68) the first 2 links right border is "cut off" and is not shown. FF and IE 7/8/9 seem to show it OK.
Browsershots: http://browsershots.org/http://top3skills.com/1.html
Also "buggy" on Safari (so it's webkit related?)
Anyone knows what's the problem with this approach or how to solve this?
(or if I should report a bug to chrome) Any workaround that doesn't affect other browsers?
Also, my testcase is different from Right border not displaying on google chrome but maybe it's the same bug?
Updated: I don't want to use inline-block as IE7 doesn't support it and I'm finding this bug because I'm removing the inline-block I previously had there :) Also this is dynamic so it's not easy to add after each link because some links can break to a new line, others don't... so I'm trying first to get the "right way" and then resort to more "tricky" ways.
You have set the containing DIV at a fixed width of 250px. This is cutting off the edges. Also, you should add display:inline-block; to your CSS link class. This will make your link a block element while keeping it inline. It will also apply the padding you have asigned properly.
See updated link here http://jsfiddle.net/sV8js/12/
Dan
Try giving those links a display: inline-block or display: block property, as links are inline elements.
you need to add display: block to .referencesSkills