I am getting a really strange behaviour when viewing a very simple piece of HTML in IE, served up by IIS. I am at a loss to explain this...
Take the following html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
.iWantaBorder
{
border:red solid 1px ;
}
</style>
</head>
<body>
<select class="iWantaBorder">
<option>1</option>
</select>
</body>
</html>
Save as html file to your desktop.
When viewed in IE8, the select menu has a red border.
Now copy the file to a website or virtual directory in IIS 5.1 or IIS6.
Browse to that file in IE8... no red border.
Can anyone tell me what is going on here? I really want a border on this menu. Thought this should be simple to be honest, but I'm pretty much confused!
try putting this in your HEAD tag:
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
as per: http://msdn.microsoft.com/en-us/library/cc288325%28VS.85%29.aspx
This might fix the issue:
<style type="text/css">
.iWantaBorder
{
border:solid 1px red;
display:inline-block; /*this should fix the bottom and right border*/
}
</style>
EDIT:
I have tried replicating the issue, you are right it doesn't work on IE8 but
if you are on IE8 Standards/Compatibility mode it works on IE7 Standards/QuirksMode it does not, don't know why it's not working on IE7 Standards/Quirksmode.
Anyway another workaround is to wrap the select element with another inline element and put the border on wrapper element.
<span class="iWantBorder">
<select>
<option>Sample Option</option>
</select>
</span>
Try this:
border: 1px solid red;
The border shorthand syntax should be weight, style, colour. You appear to have this in the wrong order.
Putting these in the wrong order might put IE8 into quirks mode, possibly causing your problem.
As it was form controls the border won't display in IE8, if you want develop custom select box to display in all browser consistently.
Quirks mode is nothing but document type declaration, if you use strict.dtd in the document type deceleration it will always render in standards mode.
Form controls (Radio button, check box, select box and dropdown) always renders depending on the operating system and browsers unless you develop custom controls.
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
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.
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" />
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).