I'm stuck on a margin/positioning issue where I have a div that will not cooperate between Mozilla and Webkit browsers. The element in question is at the bottom of the page http://clifford-stage.scholastic.com/Calendar where there is a black box with a top-right-border with a radius. (editor's note about posters...) In mozilla the border does not break past the bottom edges and displays as desired, however in Chrome and Safari, the bottom flows past the edge, and I've played with every margin scenario but cannot seem to get it to agree between browsers.
I'd appreciate any help. (BTW, this is NOT my page design...)
With Firefox, you need to explicitly declare X & Y coordinates when using position:absolute;:
#yourDiv {
position:absolute;
top:0;
left:0;
}
Otherwise you will get quirky behavior. It is also proper browser behavior, Firefox is just stricter about it than Chrome is.
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.
Obviously for Chrome, Firefox, and Safari (which use CSS 3) you would do
margin-left:auto;
margin-right:auto;
But how can I perfectly center in IE8?
This code already works in IE8, IE7 and IE6, and people have been using them to center things for a good long while now. Have you tried your code before assuming that the margin properties are new to CSS3 (when in actual fact they have been around since CSS1) or that just because something is part of CSS3 automatically means IE8 and older won't recognize it?
If that code doesn't work for you in IE, your page is probably being displayed in quirks mode.
I'm having a cross-browser compatibility issue with Chrome vs FF.
Here is the web inspected from Chrome, you'll see that the box for the DIV #content is overlapping the box for the H3.
In FF, the #content DIV does not overlap:
The issue is the difference in overlap is causing the background behind the Doctors' heads (the light blue canvas texture) which is relatively positioned DIV to be off. In Chrome is positioned well, in FF the green "view all button" is beyond the background.
Link to the site: http://terminalcitymarketing.com/drafts/highgate/
It looks to me as if they are both in the same place, just chrome is showing you the region differently in the inspector to FF. I don't think its an issue at all.
I have a feeling that if you fix some of your Validation Errors, the problem might fix itself. Of the ones listed, the immediate red-flags that I noticed were that you have a bunch of these errors:
Error: Duplicate ID
Check #wrapper, #mainBox, etc.
on line 72 of the css, i took out the
p{
margin-bottom:12px;
}
and it fixed the positioning of the green view all button. You will then have to reapply the margins more specifically to the elements you want them on
The site is here. I've spent 3 days making it compatible with IE so I guess its time to ask for help.
Here are the three important major discrepancies between IE and other browsers such as Chrome, Firefox and Opera:
IE8 navigation buttons on the right most does not have a shadow (FIXED)
IE8, IE9 :active styles are not working; I'm informed that it will not work in IE7.
IE9 drop shadow for triangle not showing up (FIXED)
Please let me know any changes in css code that will help address these issues. I don't have plans to support IE 6.
#UrBestFriend: Changing position: relative to position: absolute for .nav_shadow {} fixes the issue for me in IE8.
To fix vertical-align: middle not working on .box_abilities p {} for me in IE7, I just added margin-top: 55px; to make it position more or less in the centre of the container.
i have a website in which i am trying to position (using CSS) a certain on the page. the is absolutely positioned and is located inside a relatively positioned paernt .
on firefox and even IE it looks ok but on Safari, things get messy and it shows 5 pixels lower than it should. i have tried to figure out for days now what is wrong there but cannot seem to see it.
you can find an example link to the problematic page here:
http://yaronattar.com/index.php?option=com_content&view=article&id=117:the-new-lovers-2010&catid=51:the-new-lovers-2010&Itemid=242
the problematic is the one conaining the "previous/next" navigation at the bottom right corner of the page.
anyone sees what is causing the trouble here?
thanks
This will target webkit browsers only (Chrome, Safari and I think a version of Opera too)
#media screen and (-webkit-min-device-pixel-ratio:0) {
/Chrome and Safari CSS here/
#id-name {
position:absolute;
width:100px;
height:100px;
left:100px;
bottom:100px;
}
}