When rendering a site in Chrome I noticed that certain <input> elements started appearing weird. When inspecting the elements in Chrome's built in developer tools I found matched -webkit CSS-rules which are not present in any stylesheets. For instance the following example:
<input type="submit">
No rules for elements of the kind, but this is what Crome's developer tools show:
Matched CSS Rules:
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="file"]::-webkit-file-upload-button,
button {
-webkit-box-align: center;
...
}
Does anyone have any clue to why I'm experiencing this? The page loads with standard headers:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
HTML 5 is mentioned nowhere (if that has anything to do with it...).
Thanks.
Those CSS rules are baked into your browser. Every browser has their own. This is why browser differences have been agonising web developers for years.
You can use a CSS reset or normaliser (plenty available on the web of both) to avoid this, or override them yourself.
Finally you should also be able to change these effectively in your browser, but then you should know that your web pages will look different than how everyone else sees them.
That's what some browsers do to present a decent default look on some tags.
Just override them in your stylesheet once you detect them.
Related
My website is not rendering properly in IE browser and in other browsers like chrome, safari and firefox it displays fine. I am not sure if any div has a problem or is it the style sheet.
Below is the url for which I am talking about:
http://unyforme.com/demo/
Not sure what is causing the bad layout in IE.
Please advise if any one finds a clue and/or point out some thing for me?
Your DOCTYPE must must must be the first line, or IE renders in quirks mode.
Remove everything before:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Also, to make the site load significantly quicker, move all your javascript to the bottom, just before the end of your body tag.
The page not working in IE8 is http://gainntrain.com/shopping/index.php
It IS working chrome and firefox...
This page loads from CubeCart, but the page I edited to alter the skin http://gainntrain.com/shopping/skins/KitaBlue/styleTemplates/global/index.tpl
That page has the same problem in IE8
The thing I don't understand is that the same header works fine on other pages of the site in IE8
Changed the <header> and <nav> tags to divs with classes using the styles that the tags had and that seems to be handling it just fine so thanks for the answers!
Look at
Validator
and
Jigsaw
Notice that the only errors in Jigsaw are CSS3 rules.
I would suggest looking at the HTML because of this line in Validator's analysis of your page
Line 11, Column 107: end tag for "link" omitted, but OMITTAG NO was specified
…="http://www.gainntrain.com/site/css/style.css" type="text/css" media="screen">
✉
You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".
It looks like your document is using HTML5 features but is using an older doctype declaration. I would suggest changing:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
to:
<!doctype html>
<html>
That is as long as it doesn't break the site. :]
Try an online HTML validator on the output, like this one. If you choose the right validator, it's likely to be able to pick out the sticky bits that work better in some browsers than others. Sifting through code by hand to find a solution like this is difficult and time-consuming.
I'm really struggling with a page that looks great in Firefox and Chrome, but looks like absolute crap in IE.
I am clearly missing something, but I am not extremely familiar with the compatibility issues between browsers when it comes to CSS. Can anyone give me a tip?
Page with the issue.
the index page looks fine! which really is throwing me for a loop...
Thanks in advance
Your page has no doctype, so IE is falling back to quirks mode.
Try adding this above the html tag:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
First of all this is a malformed HTML <head> <body> </head> <body>, make it <html> <head> <scripts .../></head> <body> </body></html>. This will make your second page look like first one.
I added an XHTML DTD to fix the center alignment
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">. This will make your first page also look more like chrome and Firefox.
Finally you are using HTML5 tags <header> and <nav>. HTML5 is not fully supported in IE, firefox chrome supports it partially. I would rather be skeptical in using them now or at least test in all browsers. Although I see you have added one js for simulating HTML5 in IE. Put that js before body. But its interesting how it simulates HTML5 :).
Are you using a CSS reset? This is the CSS reset I'm using: http://meyerweb.com/eric/tools/css/reset/ but there are other variations that are useful too.
Will help fix most browser incompatibility issues. ;)
It's just insane, I've made soo many websites and still it seems every time IE7 and IE8 behave differently every time!!
I'm working on a friends website: Class One
Except I can't seem to get my head around why IE7 and 8 seem to be adding in extra spacing. The positioning of the text overlay div on the jquery slider is off a few pixels and wont cover the full width and the inner div float left content just looks way off, why wont it meet the float right, the maths is right!
I would normally attach code if I knew the problem area but It would be an awful lot of css and html to attach so just put the link up instead.
Thanks in advance!
P.S. I am aware of the php error code, I am getting the hosting provider to sort that as I type! :)
Turns out the php warning is before the doc type so this maybe it?
The major problem here is the DOCTYPE.
This tag must be the first tag in you code, but isn't, because of the PHP Warning.
See:
<br />
<b>Warning</b>: mkdir() [<a href='function.mkdir'>function.mkdir</a>]: Permission denied in <b>C:\Program Files\HSphere\3rdparty\PHP\PHP5\prepend.php</b> on line <b>33</b><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
Change beginning of output to
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
If you don't put this tag in the first line, IE will activate quirks mode, and very strange things will happen. When a browser activate quirks mode, many things change, as box model.
NOTE: many browsers has quirks mode, not only IE (I know that firefox has too).
Note: correct use of DOCTYPE will reduce the differences between IE7 and IE8, but not remove all of them.
Ever heard of the IE box model? It's so fun.
Here's some info:
http://stuffthathappens.com/blog/2007/09/12/ie-and-the-css-box-model-wronger-than-wrong/
Summary of IE hacks found to deal with your problems:
http://www.positioniseverything.net/articles/ie7-dehacker.html
Differences in IE 8:
http://www.evotech.net/blog/2009/03/ie8-css-support/
I'm developing a user control that will be embedded in Umbraco. It's been a long slog but I've got it mostly working.
At this point I have a template in Umbraco that refers to my web control as a marco. So far so good. It looks great in Firefox, but breaks in IE7.
The weird part is that the control looks perfect in both IE7 and Firefox when I view it in my test project, outside of Umbraco. Inside Umbraco, Firefox looks great and IE7 breaks. Some of the styles are applied in IE7 but not others, breaking the rendering.
I've checked to make sure the CSS files are in the right place in Umbraco, experimented with a few other things, but no luck. I can't think of anything that would cause IE to break this way only when the control is hosted in Umbraco. If the CSS files were inaccessible, it should break completely, not apply some of the styles but not others.
TIA
EUREKA:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
I didn't have it in my template. Duh.