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.
Related
I've got html+css code running and looking good on explorer 10.
When i open the page in chrome the only differnce is the resolution.
Things (like headlines for examp.) that take 100% of the screen in explorer takes something like 75%-80% in chrome.
That causes white spaces to apper on the remaining 20%-25%.
is there any solution that doesn't require massive modifications in the code?
thanks.
*any code will demonsrate the issue, for examp:
<!DOCTYPE html>
<html>
<body>
<div >
This takes all the screen in explorer 10 but not in chrome.................................................................................................................................................................................................................................................................................
</div>
</body>
</html>
Use a "reset" CSS file. Here are some of the more popular ones: http://www.cssreset.com/
The problem here is that the "user agent stylesheet" is different between browsers, so a reset stylesheet will impose specific styles, thus making all browsers look approximately the same.
That problem is because you are not providing any CSS code to the file!
When there is nothing to process, the browser adds its own style. Which are known as "User-agent stylesheet". Which have their own styling techniques.
To minimize this, you can add just a few of the codes such as:
body {
margin: 0;
padding: 0;
}
This way, you can minimize the browser's override to control and change the auto margin and auto padding techniques!
In Google Chrome, if you just create a simple file like the one you have. And run it after saving it, you will find that browser automatically adds
margin: 8px;
And some of the other styles to the document on its own! That is because of the browser's CSS sheet.
This question is geared towards CSS3, I've been looking at a few boilerplate templates and guides and most of them declare a whole lot of attributes before even going into what you want to edit.
Why is this so? Does declaring all of the usable attributes make the
browser load faster or something?
What are the benefits? Why not just use CSS3 "as is" (like just declaring what's being used in the HTML section)?
And if the underlying attribute changes in further editions, wouldn't
it mean you would have to constantly keep a check on deprecated
attributes and keep declaring and changing attributes every once in a while?
HTML5Boilerplate contains a version of normalize.css. Rather than just reset everything to 0 (i.e. margins, padding etc) it has the minimum set of changes to ensure things have the same settings in all browsers. In their own words:
“Normalize.css is a customisable CSS file that makes browsers render
all elements more consistently and in line with modern standards. We
researched the differences between default browser styles in order to
precisely target only the styles that need normalizing.”
An example of a style used here is:
/*
* 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
* 2. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
*/
html {
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
This fixes some weirdness in older IE, as well as on iOS. This is the sort of thing that you'll likely have a problem with, read loads, find a solution and add in eventually yourself. By using this set of defaults you can avoid a lot of weirdness.
As well as bugs, it includes things you'd likely want anyway:
nav ul,
nav ol {
list-style: none;
list-style-image: none;
margin: 0;
padding: 0;
}
Using a ul in a nav is a common pattern, and you usually don't want bullet points there. This sorts that for you.
In all, I'd recommend using your own custom version of their code – it will save you a lot of annoyance!
Also if you want to add CSS3 functionality you can add it to ie5 with javascript(not to say this doesn't come with its cons) with html5shiv or html5shim .
Also lets examine the definition of the acronym CSS. Cascading Style Sheets. You may declare styles in order of fall back. i. e.
body {
style-1: new browsers (this renders yay!)
style-2: semi-new browsers (don't understand style-1 I will ignore ahh style2)
style-3: ie5(me want to crash soon or BOD you. but me not get either 1 or 2 they smart but i think i can work on style 3)
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;}
Certain pages display terribly in IE generally, what is the best approach to solving these issues?
You forgot to add a doctype, so your page is in Quirks Mode.
Add this (the HTML5 doctype) as the very first line:
<!DOCTYPE html>
and it should look better.
Although, changing the Document Mode manually (using Developer Tools; hit F12), it still doesn't look right. There are evidently other problems with the page.
The most pertinent problem (after escaping Quirks Mode) is this:
<body style="margin: 0; padding; 0;background-color: 4DA2CA;">
Internet Explorer is not showing any background colour because you forgot the # before the colour. (And you have padding; 0, with a ; instead of :)
This will work:
<body style="margin: 0; padding: 0; background-color: #4DA2CA">
But you shouldn't be using inline styles in the first place..
This would be better:
<body>
with CSS in your stylesheet:
body {
margin: 0;
padding: 0;
background-color: #4DA2CA
}
you mean that in IE the Div's are smaller.Thats because in IE css border,margin are included in the width declared.So, if you have given a div width of 100px and a margin of 10px both sides then in IE the actual visible width of this div will be 100-10-10=80px.To solve the problem you can use child css decleration.
Considering our example if you want to show this div 100px width in both the browsers do the following
.mydiv{ /*This deceleration will be understood by all the browsers*/
margin:10px;
width:120px;
}
html>body .mydiv{ /*This deceleration will not be understood by IE browsers so other will override the width*/
width:100px;
}
Using this you can uniform the width of your Divs across both IE and non-ie browsers
Instead of pointing out the reason for each element's different way of rendering in IE, I would strongly recommend not re-inventing the wheel each time you create a new page element.
Even in modern standards-complaint browsers, CSS can be very unpredictable, so it's better to use bullet-proof snippets of code from trusted sources such as
CSS the Missing Manual
CSS the Definitive Guide
CSS Cookbook
Start out with working blocks of HTML/CSS and modify them to your liking and test cross-browser from there. The whole process will be much less frustrating.
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.