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.
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 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 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.
I've run into a weird quirk. The website I'm building for Escondido Arts Gallery has all of it's text in each element left-aligned in firefox and IE, but for some reason everything is center aligned in Safari. Is there one simple css or html fix I can do to fix this, or am I going to have to 'text-align: left' every element?
No surprise there:
<body tracingsrc="../../non assets/web2.jpg" tracingopacity="30" align="center">
Just get rid of the proprietary attributes (align="center" especially), and your problem is solved.
There is something wrong with the CSS (or there's an unclosed html tag). The center align property must be cascading from some other element because it's not only safari/chrome (which also uses webkit) but also opera that shows the things center aligned, and both safari/chrome and opera are more standards compliant than ie and even firefox.
* { text-align: left; }
If things are cascading properly this should conceptually be enough:
html, body { text-align: left; }
Depends on why it is left-aligned. If it's simply the browsers applying different defaults, you can do as greyfade says to make all tags default to left-align in all browsers.
If the problem is bugs in the browsers CSS implementations, then you may have to trace down why the browsers disagree, and find some workaround to that.
Specifying a strict rather than transitional doctype may also help in getting more uniform behavior from the browsers (and let's be honest here, can we really claim to still be "transitioning" to HTML4.01 or XHTML1.0? Both standards have been out for close to a decade.)