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).
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.
I am not sure if this is an issue with the Blogger template that I'm hacking up, or if I'm just forgetting a simple CSS property.
I'm working on a template for a friend, and am attempting to show the logo on the top right above the menubar div, and it works just fine in Firefox and Chrome, however it renders behind the div in IE9.
Here is the link to the demo:
Demo blog
Essentially, what I've done is created an absolutely positioned div, with an inside image:
<div id="logo2">
<a href="">
<img border="0" src="http://1.bp.blogspot.com/-lpZjzviYzAo/T7mNUvXY6QI/AAAAAAAAAcM/XwQS-bO0Hy4/s1600/lovek-hdr.png">
</a>
</div>
and the associated CSS:
#logo2 {
position:absolute;
top: -25px;
right: -50px;
z-index: 999;
}
I'd thought that the combination of an absolute position, plus the high Z-index would overcome any issues with IE's handling of the z-index, however I was wrong.
I've also tried adding in a position (relative) and z-index (1) for the menubar div, to no avail.
Per #Dubious' suggestion, I added the following without success (the image is still clipped):
.tabs-outer, .tabs-inner {
<!-- [if ie 9]>
z-index: -1;
<![endif]>
position: relative;
}
Old Answer "Try adding a z-index of -1 instead of 1 to your menubar div"
Edit:
Okay, after doing some fiddling around in IE9 Developer Tools I noticed that your source code was telling IE to render the page in Document Mode: IE7 Standards. As you can see, after opening dev tools (and making sure the dev tools frame is active) you can press alt + 9 to render the css as it should be rendered in IE9. After this occurs, the content displays just as it should in any current browser.
So why is the page loading with IE7 Document Standards? Well you need to use correct standards-compliant !DOCTYPE directives for each of your pages. To do this just read up on this page and make sure that your html files follow the very first example.
Conditional Comments
I should have given you a better example of IE conditional comments, so I will go a little more in depth here. An IE conditional comment can ONLY be defined in html as it uses <!--> which is html specific code. Therefore, in order to add ie7/ie9/ie specific css you would need to <link> a new stylesheet inside the comment field that would have ie specific code. Further reading here. Also note, that since this issue you are experiencing is because the page is rendering IE7 quirks mode css, you might need to use an ie7 comment as opposed to ie9.
I really hope this solves your problem, good luck!
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'm working on a site for a friend, and the code I'm using is showing up differently in Firefox and Chrome - the way it is in Chrome is the way I want it to look, but Firefox is messing something up.
If anyone has any ideas how to get it to work in Firefox like it works in Chrome, I would really appreciate it.
Also, the Flash elements don't seem to be showing up in IE at all...
Any ideas?
Thanks!!
EDIT: I reinstalled Flash Player in IE and it seems to be working now...
I problem I can see is the "v1" class style to "v.." of the div do not have the desired height rendered in FF.
Try this:
CSS:
div.vItem {
height: 17px;
}
HTML:
<div class="v1 vItem'...</div>
<div class="v2 vItem'...</div>
<div class="v3 vItem'...</div>
.
.
.
<div class="v10 vItem'...</div>
For the flash, I have no problem with the Flash on IE6 and IE8 though.
strange things are happening on your site. You have an object in an object tag (flash) that is not allowed i think. This could be the problem why IE8 is not rendering the flash buttons.
Maybe you could replace al the divs with a list ul and li this is semantically better and will make styling of every button easier.
You should change the height of the divs or when replaced by the list, the height of the lis This will make them more compact as in chrome
You might put your code to following quick trials to see if the problem is solved:
1: If your doc type is strict; try replacing it with below line:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2: Try adding Eric Meyer's Reset.css to your css file on top:
http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/
Hope that helps.