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;}
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 have this really weird problem with Zend Framework and the view on all IE's
I'm using the HTML/CSS template for the sticky footer, where the page is also centralised in the middle of the screen. I used the same template before applying the design on the code on Zend and all browsers worked perfectly fine. Now when I applied the design on the code, all browsers are still working fine except of IE (7,8,9) ! The page isn't centralised any more, and some elements aren't taking their CSS classes. I copied the exact same code I used before moving the code to Zend (which was working on IE) and pasted it into Zend and I still had the same problem. I even created a div and tried to centralise it using the following CSS code:
#container{
position:absolute;
width:960px;
height:200px;
left:50%;
top:0;
margin-left:-480px;
}
and still, it wasn't centralised on any of the IE browsers ...
Could anyone please try and help me figure out what exactly is going on??
Many thanks in advance !
Did you try : text-align:center;
Another way to center content is to do so :
#container{
width:960px;
height:200px;
position: absolute;
margin 0 auto;
text-align:center;
}
Look : http://jsfiddle.net/5u8aM/
Hello again everyone ... I'm not sure if I'm supposed to apologise for the question or not, but after a really long time of research and many tries to fix the issue I had either by changing the HTML code or CSS, the solution was really easy (or maybe I was stupid I didn't pay attention for it). All I had to do was change the doctype of the document, once I added
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> all the CSS bugs was fixed, the page was centralised and it worked perfectly fine.
Regards
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).
I am creating a template for a website.
The example is at Framework Login Page
The main CSS sheet is at: master.css
I am trying to center the main parent div.
I am using
#body {
width: 100%;
background: url('pathtoimage.png');
}
#inner_body{
width: 800px;
margin: auto;
}
<body>
<div id="body">
<div id="inner_body"></div>
</div>
</body>
What could the issue be?
This is a (very) old IE bug.
Fortunately, it's been fixed since IE 6, but you do need to have a proper doctype on your page to cause IE to use "standards" rendering mode and respect your margin: auto style. On a page without a doctype, IE instead uses "quirks" mode, which falls back to old, non-standard behavior.
Quirksmode has a good page on doctypes and standards mode that explains why you want to make sure your pages have a correct doctype, including some nice tables spelling out what each browser will do differently in quirks and standards mode.
Set the CSS for your "body" div to include:
text-align: center;
And remove any text-aligns you may have on the "inner_body" div, it should inherit from body.
Here is the explanation why you should use the correct doctype.
Use the correct DOCTYPE ( Document Type Definition, or
DTD)
This defines which version of HTML or XHTML your document
is actually using. It's needed by browsers or other tools
to process the document correctly.
Using an incomplete, outdated or no DOCTYPE at all, throws
some browsers into “Quirks” mode, where the browser assumes
you’ve written old-fashioned, invalid markup.
This means that your web pages may not render well in all
the major browsers.
I am testing a web site on Chrome, Firefox and Internet Explorer using the following in a CSS file.
#foot_links1, #foot_links2, #foot_links3 {
position: absolute;
margin-top: 55px;
margin-top: 14em;
color: #02102f;
font-family: Arial;
}
#foot_links1 {
left: 335px;
}
#foot_links2 {
left: 630px;
}
#foot_links3 {
left: 830px;
}
The foot_links1, foot_links2 and foot_links3 all are in one straight line, but the placement of the foot_links1, foot_links2, foot_links3 placement varies with the browser.
How can I correct this?
I suggest using a reset stylesheet.
A reset stylesheet will reduce browser inconsistencies like default line heights, margins and font sizes of headings.
You may also want to check the following articles for further reading:
CSS Tip #1: Resetting Your Styles with CSS Reset
Mayerweb: Reset Reasoning
Stack Overflow: Is it ok to use a css reset stylesheet?
Stack Overflow: Best css reset
Ensure you have this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
This will change the Internet Explorer behaviour boxing model in Internet Explorer 7 or earlier
Ensure that the first rule of all is:
body *{
padding:0;
margin:0;
}
(Maybe it is not a good idea to append this after you already written all the CSS, instead you could use a more specific rute that aims the place.)
Start by ensuring you're running a proper doctype, and check whether the site validates at http://validator.w3.org/
A proper doctype would be xhtml transitional or html 4 strict (html 4 transitional usually makes IE do things differently)
As for reset stylesheets - yes they can be useful, however I try to avoid them, since you're pushing more kbs to your users (longer load times, especially if your webhotel isn't zipping css), and furthermore you're slowing down the browsers rendering, because there are more css rules it has to process.
Finally it just seems hackish to me - I mean you can make it look right without resorting to resetting all sorts of stuff, so why do it ?
You did not say how the placement varies.
I made a quick test with IE8 and Opera and there were some difference in vertical placement.
I fixed that by adding the top property (and removed the 2nd margin-top). For example:
margin-top: 1em;
top: 55px;
But generally, it is not good idea to try and force a specific look. Web page is not printed media.
The users have different preferences, different display devices and they do not all have the same fonts etc. installed.
Although what other people have suggested are all good advice, as a direct answer to your question, use "padding-top" instead of "margin-top" and ensure your divs have a height set. That should get you quite close, or all the way there.