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.
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.
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;
if someone could help on the following would appreciate this as I spent the whole evening without result on this issue.
I have a site where I want to modify tags appearance after every article.
The problem is that firefox (version 14.0.1) provides smaller height for the text (total <a> height is 15px icnluding 1px bottom padding), while chrome and rest browsers give height 19px. So the difference is 4px. Because of this - the "tag hole" is displayed at different levels. A little bit lower than vertical middle for FF and upper than middle for rest browsers.
I made a picture to get the problem easier:
I have general css reset, so that different browsers behave similar. But it looks like not everything is included there.
Has anyone an idea what could cause this?
Add display: inline-block; to your .tags li a
This won't affect the well-behaving browsers, but will fix FF
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 am working on a small project, and am having two tiny problems with CSS.
I have played around with everything to no avail.
1) In IE6 the content and logo is not lining up correctly.
2) In Firefox, the tooltip box fixed at the bottom of the page (which degrades in IE6) although styled as width:100%; is not spanning the whole screen. There is a gap on the left hand side.
These problems can be seen by viewing http://gua.com/wd/ in the respective browsers.
If anyone could advise as to what has gone wrong, and why, it would be greatly appreciated.
Thanks
for firefox: Yyou can add left:0; for #bottom
for internet explorer: I see your menu to be wrong not the logo. To solve this just add margin:0 for #top-nav
You should ideally be using some sort of css reset stylesheet to overcome specific browser idiosyncrasies.
In your case appending a margin: 0px; to your body should do the trick (For Firefox). IE6, well, its usually best left to a IE6 specific conditional stylesheet.
"100%" means "100% of the parent box's client space". Not "100% of the entire viewport".
And IE6's CSS support is f*cked beyond sanity. If it doesn't work, use absolute positioning or whatever else it takes in a special stylesheet and include it with conditional comments.