I'm trying this html code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
body { background-color : green !important; background-color : red; }
</style>
</head>
<body>
Hello World !
</body>
</html>
In firefox, it's working fine : green background.
In internet explorer : it's not working : also green background.
If I remove the doctype, it's working fine in both.
I tried different doctypes but always the same problem.
What can I do ?
Ok I know this example is stupid but much more easy the explain the problem. The question is : why css hack seems not working with doctype definition ?
There is no hack there. There's a !important declaration, which is standard CSS, but wasn't supported properly by IE5.
If you take away the doctype, IE will go into quirks mode, which is basically an IE5-emulation mode. Therefore it will use the IE5 CSS rules, which means that !important doesn't work (along with a whole bunch of other features).
So without a doctype, in quirks mode, it ignores !important, and so both your rules have the same precedence, and thus the second one (red) is used.
With a doctype, the browser will be in standards mode, and !important works the way it should do, which means that green takes precedence because it's 'important'.
I still don't get what you're trying to achieve, but hopefully that explains to you what is going on.
Related
I need some help. While I was working on a project in Chrome, I wanted to test it in Firefox and was puzzled as to why it looked so different.
Can anyone explain to me why the green div containing the image doesn't adjust its width relative to the child? Is it a bug? Is it a feature? Is it a bugfeature?
Research
It works, as I expect in Chrome, where it looks like this:
But in Firefox, there is a lot of weird white space (this is the same image as the first):
Also, here is a screenshot of the following browsers (starting from the left) Firefox, Opera and Internet Explorer 11:
As you can see, it works like I expect in Opera, but not in FF and IE11. It doesn't work in Edge either.
My findings
It looks to me like Firefox forgets to recalculate the parent's width after the image has been resized.
Here is a screenshot without height constraints (100% of the parents 200px height):
If I readd the height constraint, it looks like this:
As you can see, the width is the same. Note that the green div's width is 510px. That is the the same as the image (500px) + the padding (5px + 5px).
The code
I tried to add a jsFiddle, for your convenience, but curiously, I were not able to reproduce the error there (it worked as it was supposed to).
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style>
.wrapper {
height: 200px;
}
.div1 {
float: left;
background-color: green;
}
.div1 img {
height: 100%;
padding: 5px;
}
.div2 {
background-color: blue;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="div1">
<img src="http://placehold.it/500x500">
</div>
<div class="div2">
<h1>Heading</h1>
</div>
</div>
</body>
</html>
I'll answer my own question in hope of helping someone else
TLDR:
I was missing the HTML5 doctype declaration, which looks like this: <!DOCTYPE html>.
Longer version:
While writing this question, it suddenly struck me that it could be caused by the lack of a doctype declaration. A quick test confirmed my suspicion. All I was missing was the <!DOCTYPE html> declaration!
It's safe to say that I'll update my snippet to include a doctype. I used Visual Studio's doc snippet and never gave it another thought. Note that the html snippet already includes a doctype. (In VS: If you type html or doc and hit tab in an HTML document, a quick HTML template will appear)
Why
Without a doctype declaration, the browser renders the page as best it can, in the so called quirks mode. In quirks mode the browser has to guess how the page is supposed to look with primary focus on backwards compabillity. Therefor the result naturally deviates from newer specifications.
The doctypes was invented to differentiate legacy sites from those using newer specs back when IE and Netscape was a thing. You can read more about it on MDN here:
Doctype
Quirks mode
Nice to know:
Make sure you put the DOCTYPE right at the beginning of your HTML document. Anything before the DOCTYPE, like a comment or an XML declaration will trigger quirks mode in Internet Explorer 9 and older.
-MDN
In HTML5, the only purpose of the DOCTYPE is to activate full standards mode.
-MDN
How to see which mode is being used
On Windows, click alt to bring up the good old toolbar, then go to Tools ➡ Page info
My website http://www.matejkadesign.com is having trouble displaying consistently styled outer table borders across Chrome, IE, and Firefox. The styling I want is in Chrome, but is different both in the other two browsers. I've looked for fixes but find none. I don't style my tables in CSS, I do it in html like this:
<table align="center" cellspacing="5" cellpadding="5" border="4" bordercolor="#3c2610" width="310px" >
This appears to produce three different effects. How can I make the styling the same across Firefox and IE as in Chrome?
Is there any particular reason why you need to use inline styling?
You can fix those behaviors by defining exact border style for both table as well as td tags, by doing this you prevent browser from applying its own styling.
Try this:
table {
border: 4px solid #3C2610;
}
td {
border: 1px solid #3C2610;
}
You have an HTML <!--Comment--> before your doctype which will trigger IE to go into quirks mode (equivalent to IE5). IE basically parses your document as if it had no doctype. Nothing should precede <!DOCTYPE html>
Secondly you're using deprecated table attributes from HTML 4.01 yet you have technically declared an HTML 5 doctype .. these two reasons most likely explain the discrepancy amongst browsers.
You're also using the deprecated align attribute several times throughout your site .. if you insist on using HTML 4.01 attributes at least change your doctype to match it:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
I'm having some trouble with IE not reading all of my CSS on the homepage of a website that I'm editing. I've checked to see that it validates (it's still showing that some tags aren't closed even though that's not true but whatever). I CANNOT get rid of the inline styles specifically because the content management system (Volusion) overwrites much of the code that I write, so I've been forced to write a lot of inline code. The CSS page is loaded so that the header region has the styles:
#header{ z-index:1;
width:100%;
opacity:.85;
background:rgba(200,200,200,.85);
/*For IE*/
background-color: rgb(200, 200, 200);
opacity(0.85); }
I originally ran it without "background-color" because rgba(200,200,200,.85) should work with IE but in this case it isn't. In fact, even before I changed it to add 'background-color' the other pages were drawing from this CSS perfectly. The home page however reads background-color, but that's the only thing it takes from this. It is clearly reading from the Template.CSS file because it references it, however the opacity is not being used and the header is being placed after images which are 'fixed' and so should be hovering above those images. The same is happening to the other elements within the header. I have btn-group:first-child as having:
.btn-group a:first-child{
border-radius: 4px 0 0 4px;
text-decoration:none;
font-weight:bold; }
but none of these styles are applied on the home page. In fact .btn-group doesn't show up at all on the styles list. I know that it can read this because if you go to any other page of the website you'll see how it should look (it's nearly perfect). The homepage however doesn't work.
The page in question is found at www.giftonline.us , any help at all would be appreciated!
IE is being forced into Quirks mode, because you have an invalid doctype that doesn't match the other pages. You need to use a valid doctype so that IE will display in Standards mode.
Currently you have:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Try changing the doctype of the homepage to be the same as your other pages:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Once you have given the page the correct doctype, the CSS rules should work like they do on the rest of the pages.
And you are using invalid html to link to your CSS:
<link href="v/vspfiles/templates/tempTemplate/css/Imports.css" rel="stylesheet" type="text/css"></link>
It should be changed to:
<link href="v/vspfiles/templates/tempTemplate/css/Imports.css" rel="stylesheet" type="text/css" />
Is there a solid solution for implementing position: fixed that will be supported in all major browsers?
I was so proud of my recent code, that solved all my issues in FF, until I looked at it in IE. There seem to be a lot of hacks around but some of them seem to contradict each other...
I need to position several elements on a page relative to the window.
This code works great in FF, but not in IE, even v.9. The element is supposed to be fixed in the top-left corner even when I scroll the page. In IE it scrolls up with the page content.
#myElement{
left:0;
top:0;
position:fixed;
height:35px;
width:290px;
background-color: #f5f5f5;
z-index: 999
}
Thanks for your help.
As I suspected, you are using an invalid DOCTYPE which is sending IE into quirks mode. To keep IE in standards mode you need to make sure you use a valid DOCTYPE. So, if you want to use HTML 4.01 transitional it should be:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
However, I would use the shorter and simpler HTML5 DOCTYPE:
<!DOCTYPE html>
Only IE6 does not support position:fixed, and it's not major browser. (See browser support here.)
Try using position:relative; or position:absolute; instead of position:fixed;
These are there in IE9.
However, many a times position property gives undesirable result, thus, I always prefer to avoid it as much as I can. Do check with Chrome/Webkit also.
If anyone still has this problem.
Enter the following into your style sheet. All browsers will override position:absolute with position:fixed and you'll get what you want. IE 6 does not understand the > operator, so it never sees position:fixed and uses position:absolute. The web page is usable in all browsers, but not as pretty in IE6.
htmltag
{position: absolute;}
body>htmltag
{position:fixed;}
i have a dropdown menu in css, it works fine in Chrome, FireFox, but not IE8, i haven't checked it in IE6/7. but it seems hopeless.
my site at HERE.
The dropdown menu is the black one.
i think the problem is with the :hover, try searching around something like #button .a:hover, etc... but get no luck.
I hope you can help. the css file is HERE
Thank you sirs
The problem is that you have not included a doctype on your website.
Because you haven't included a doctype, your page is rendering in Quirks mode in IE8:
Quirks mode is a rendering mode used
by some web browsers for the sake of
maintaining backward compatibility
with web pages designed for older
browsers or coded without standards
conformance.
Add these two lines to the very top of your file:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
If you add in that magical doctype line, your drop down works in IE8 and IE7.
You should move this part of your code to within your <body> tag.
<span style="float:right;margin-top:10px;">
</img>
</img>      
</span>
Also, you can change it to something like this:
<div style="position:absolute; top:10px; right: 10px">
<img src="img/vn.gif"></img>
<img src="img/us.gif"></img>
</div>
When this sort of thing happens - go to Tools --> Compatibility Mode ; and make sure it's off. I have had similar issue and switching that off made my menu work properly (where it wasn't working at all).