This happens to be the top padding plus the bottom padding on the element id f3c. I have attached two pics - one of IE8 and one of IE9.
I tried to capture the relevant information from the debugger. Basically I have a link inside a fieldset, inside a form. The fieldset is so the page validates.
I'm using relative positioning for the link (top:9px).
Not sure why IE9 would add in in 4px from IE8's calculation unless for some reason it is counting the (padding-top:2px and padding-bottom:2px).
ACTUAL DOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Based on the screenshot, you're adding padding to an inline element.
Try adding:
display: inline-block;
And make the adjustments from there.
edit:
Inline elements don't apply margin/padding/width/height (well they shouldn't but browsers like ie have non-standard behaviours)
Block elements can have margin/padding/width/height but they cause elements to be stacked vertically.
inline-block is kind of a hybrid between them. They allow other inline elements to be placed vertically next to them, however you can also add margin/padding/width/height to them.
My general rule is that block level elements are the heavy construction elements in a page (the framework) where as inline is for the content within the page (bold, italics, etc). inline-block allows you to fudge inline elements a little with the margin, padding.
note: Just be aware that in older versions of ie this still isn't pixel perfect.
In addition to Ben's answer, you might want to consider using Yahoo's YUI Reset CSS, which resolves the inconsistent styling between browsers.
To use it, just add this line to the head element of your HTML pages.
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css">
You can view the full, unminified version of the reset css to see what it does here.
Do you really have comment tags in front of the doctype as in the screenshot? If so, you are in quirks mode. Remove the comment tags.
Related
I am working on a Wordpress theme, my footer background color just disappeared and it is appearing accurately even in IE7 but in IE8 there it no bgcolor for my footerwrap div, in all other browser it is working fine........
here is the link
Site link with the problem
Your doctype claims strict XHTML but your markup is a mishmash of unclosed and invalid tags. It's not surprising you're getting inconsistent results. Try to fix your XHTML or use a HTML doctype and see if the issue goes away.
http://acneherbs.org/wp-content/themes/limegreen/css/ie8.css
lines 257 and 269: dispaly:block;
probably meant display:block;
Until recently, our app did not specify a doctype. Then, to make the app more cross-browser compatible, we added a strict doctype. This made everything behave a lot more similar across different browsers. However, in IE9, we noticed that this changes how select elements look. To make sure that was the only thing going on, I made an HTML page with the following:
<html>
<select>
<option>Testing</option>
</select>
</html>
This HTML is rendered like this in IE9:
Then I just add a doctype as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<select>
<option>Testing</option>
</select>
</html>
The HTML then renders like this:
There are some subtle differences, but the biggest one that stands out to me is the part of the dropdown where the down arrow is. One has a white background and the other is gray. Is there some kind of CSS standard that changes the style on selects? We'd like to keep it how it used to display, but I'm not sure if that's possible.
I tried doing the same test in FireFox and both the no doctype and strict doctype display with a white background for the down arrow. The same test for Chrome has both doing it with the gray background.
Is there any way to control this? Any information about this would be much appreciated. Thanks.
This is an unfortunate side effect of mixing native OS elements into the page. The best way top deal with it in my experience is to completely re-style the element. The older the browser and more browsers you support the more difficult this becomes as they all have subtle differences. Here are a couple pages to get you started with styling these elements.
http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
http://bavotasan.com/2011/style-select-box-using-only-css/
Maybe look in to using YUI Reset to clean any browser stylesheets from your page first?
http://developer.yahoo.com/yui/reset/
Lack of a doctype puts you into quirks mode where you never want to be. A doctype is required of all modern web pages in order to be in standards mode. In quirks mode, the proper box model is not followed, particularly by IE, and all sorts of strange things can occur. This is why a doctype is always the first thing to be put on every web page. And once it is set, you never ever change it.
I have a problem with css rendered differently in browsers, in IE to be specific, thought I could ask here for help, hopefully you can help me out with this : ))
my website is www.artisticworksllc.com if you go to the link, on homepage, below the slideshow there are five images linking to different categories of website.
I tested in Firefox & safari and they look ok, in Internet Explorer they are not aligned, fifth image comes down in IE. When I tested it with IE with compatibility view turned on, the images are aligned but other parts of website are messed up (image galleries for example)
Can anyone help me with this please? what to do? I dont know if this is padding or what is causing it. I know I have to implement some kind of IE hack but I dont know what and how : (
help is much appreciated : ))
Thank you
Before going down the crazy path of writing custom CSS per browser (and potentially version): get rid of the XHTML 1.0 Transitional doctype and move to one of the strict types. Preferably html 4.01 strict.
This alone will fix the vast majority of your boxing issues.
Some more info on Doctypes:
Read both pages of the following site. Great links on page 2.
http://www.communitymx.com/content/article.cfm?cid=85fee
http://www.alistapart.com/articles/doctype/
And, for "light" reading: http://hsivonen.iki.fi/doctype/
Basically, all browsers have various degrees of "standards" compliance. Anything that kicks off "quirks" mode or is "transitional" should be viewed with suspicion. However, once you understand what a doctype is and your choices around them, then you'll completely understand what's going on for any display differences you do run across.
For me, one of the best ways to learn was to create a simple floating div layout controlled by CSS. Some div's held images, others had extra long text, all of them had a border so I could see where things were breaking. I then tried various doctypes and viewed the page in the major browsers. Sometimes the differences were minor like slighly different default padding or margins; sometimes they were outrageous such as one browser allowing styles to be inherited that another didn't.
We have a decent sized web app (200+ pages) with fairly complicated layout requirements and the ONLY "hack" I've had to implement was to force the image tag (img) to be display:block; it looks pixel perfect identical in every browser and we are not using conditional style sheets or performing any type of browser sniffing.
After your link to pull in the CSS, put this:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
Make a second style sheet called ie.css and just change the parts that need to for IE.
You also have the ability to add versions:
<!--[if IE 7]>
for example.
you need to target versions of ie with conditional comments; using them you can set specific styles for any and all versions of ie to make them look how they should.
Check you padding and margin attributes for the list elements. Perhaps your size arrangements are right, but since every browser renders styles differently, IE is responding differently.
I have a page that looks perfectly at http://esolar.ca/calculator
But when I embed it into an iframe at http://esolar.ca/how-to-profit-from-microfit/microfit-income-calculator/
The Request An Assessment button in Internet Explorer 8 is too far to the left. How do I make the contents of the iframe appear the same after it's been iframed?
The iFrame is overflowing in IE. Changing the width to 584px "fixes" it for me.
Some things to reduce these kinds of problems:
Use a DOCTYPE to avoid triggering quirks mode in IE. EG:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
Use a CSS reset to reduce cross-browser differences. Here's a good one.
If all else fails, use Conditional Comments to tweak IE CSS.
I am working on a project, in which I am particularly using the CSS with themes. I am facing a compatibility problem between IE7 and IE8. I have placed a ASP.Net menu on page in <div>. Applying CSS style on the div as follows.
.TopMenuPanel
{
background-color:#3783a9;
position:relative;
left:597px;
top:0px;
width:573px;
height:24px;
text-align:left center;
}
When I am seeing the page on IE7, the menu showing in one position whereas in IE8 it is showing in another position.
Specific talking, in IE7, on the position of Left:597px Top:0px it is showing in before the half page, and in IE8 it is showing after the half page.
Anybody else have any experience of such a problem, then please give me the expert solution on this problem.
If you know that your code works in IE7 you can force IE8 browsers to use IE7 standards by including the following tag inside
<meta http-equiv="X-UA-Compatible" content="IE=7">
IE 8 will behave exactly like IE7
position:relative alone doesnt really mean anything.
position:relative should be applied to parent of the div.
and you should put position:absolute instead of relative.
Make sure you have the standard DOCTYPE at the top of the document. IE7 will run in quirks mode without the DOCTYPE, but IE8 will run in standards mode regardless by default.
Try this one:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Keep in mind this must be the first line in the file, before the <html> tag.