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.
Related
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.
I am using overflow:scroll; in my css to have scrollbars always "on" for an iFrame window, but it works only for Firefox! Any idea about Chrome, Safari and Opera? Thank you in advance!
I have a similar issue with webkit (safari and chrome) based browsers; seems that they value higher the css styles on the html over the actual iframe style itself. Can´t find much documentation on this, but I am sure it is the origin of the problem.
http://trafficonweb.com/iframe-moves.png the iframe moves to left when pulled right on its main content (under the navigation menu). Only on webkit.
This happens when scaling down the iframe with the scale (transform) css property.
This is not the perfect answer but at least a hint; will continue research and post afterwards.
And looking for others to contribute to this issue. Thanks.
I'm having a CSS styling problem between Chrome/Safari and Firefox. In both Chrome and Safari, the hidden drop down is correctly positioned, but in Firefox, the subnav menu is off by a few pixels. After looking into the issue with the inspection tools of both browsers, it seems that Firefox is making the #main_nav_bar ul 10px wider than Chrome. The issue I'm having is that I'm not sure how to change this while not messing up the way the nav bar looks.
The link is http://www.tamidgroup.org.
Any suggestions on a fix are much appreciated.
Definitely add a doctype in there. You could also target those browsers with a media query.
Example for chrome and safari
#media screen and (-webkit-min-device-pixel-ratio:0){
//add your browser specific code here
}
That way you can target specific issues you see from one browser to the other.
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 was having a small problem with center aligning a DIV in IE7 and 8. There are some minor height issues also, but ill cross that bridge when I get to it...
I have always used
middleAlign {
width:someAbsWidth;
margin-right:auto;
margin-left:auto;
position:relative;
}
to center my DIVS in all browsers, and it has worked fine. But now, I am having problems with this method in IE7 and 8. They do not center the div; rather it acts as if the margin-left is 0. Could it be other CSS rules affecting the margin display in IE?
I have uploaded the page to my server; the page is viewable here: http://drafts.thatcompdude.com/NewSite/
The page renders just fine in FF 3.6; Chrome 8.0.
Thank you;
--Dylan
Your page is in quirks mode because of the comment at the top. Remove it and it'll be standards mode and it'll start working.