Why does a page floats left in IE6 and IE 7?
buggy site
To work around buggy older versions of IE, you can center it something like this:
body{
text-align:center; /* for older browsers */
}
#main_container{
margin:0 auto;
width:1000px;
text-align:left; /* this is important */
}
IE6+ supports the "auto" value on margin property. However, it requires to display the page in standards-compliance mode. Removing the redundant <pre> elements before the doctype will solve the entire problem, without need to use text-align.
Your page is invalid HTML, so I’d recommend you to make it valid first / as well. Esp. the errors and <pre> tags before your doctype.
To your actual problem: IE does not interpret margin(-left): auto according to standard. To work around it do a text-align:center in the surrounding block element (<body> in your case) and text-align to your preference on the actual element (.container_12 in your case) again.
Related
I have a problem with my css.
I tested it with both latest FF and IE without problem but Chrome does not render it properly.
I want to display all childs elements of a tag as blocks i use
Tag > * {
display:block;
}
it works fine in both IE and FF but not chrome.
I tried forcing it using the console and put display:block but it failed.
It seems as if chrome ignores display:block ?
EDIT: Tag is a custom Tag actually CurrentWeather
full Css :
CurrentWeather > * {
display:block;
}
body {
text-align:center;
}
div#result{
text-align:left;
margin: 0 auto;
width:50%;
}
EDIT2:
I think it is an ajax problem as when i harcode the added html it works fine.
Does chrome not apply css on dynamic content ?
thanks
The selector tag > * doesn't target all children of a tag, only the immedate children.
You would use tag * if you want to target all children.
Chrome doesn't have such a serious bug as ignoring display:block, so there has to be something that is specific to your case.
It's hard to tell exactly what it is without seeing the code, but some possible reasons:
The tag is an inline tag, and you are not using a HTML5 doctype.
The markup is broken, so the child elements are not the elements that you think they are. (Especially as different behaviour between browsers is typical for broken markup.)
works fine for me:
http://jsfiddle.net/DigitalBiscuits/nkymw/1/
There may be an error somewhere in your css that's causing Chrome to stop processing the CSS.
If you have a missing ; or } chrome doesn't like this.
You'll need to show us all your code or else use the CSS validator to look over your code
http://jigsaw.w3.org/css-validator/
In my site I need to give support for IE7. Now everybody knows that styling things in IE7 is not an easy task. People uses conditional statement in HTML to load specific stylesheet for specific version of IE. But in my case I cannot use such conditional statement, since I am in WebCenter Portal application. Here I need to use skin. It is also a CSS file.
So I want to know is there any formula exists by which I can specify a particular css attribute's value for IE7.
Say I have a class:
.filterbox{
padding:12px 0;
margin:12px 0
}
Now this margin is okay for every browser except IE7 (I didn't test it in IE<7). In IE7 if I use margin:0; then the style would be perfect, but it then breaks in other browser.
How can I specify this margin in a same css class for both in IE7 and non-IE7?
Regards.
Only use this hack if you really can't use conditional comments! They are the best solution for solving IE problems. Hacks like this will quickly mess up your CSS and also make it invalid.
So, here is a hack that targets IE7 (of course this comes after your normal definition):
html>body #filterbox {
*margin: 0;
}
from CSS hacks – Targetting IE7 on Thought-After
you can solve it if you seperate the style sheets for IE7 and other browser:
/* other browsers */
.filterbox{
padding:12px 0;
margin:12px 0
}
/* IE 7 */
*:first-child+html .filterbox
{
padding:12px 0;
margin:0;
}
Attention! You have to define the styles for Ie 7 at last, because the browser will overwrite the first definitions. The others will ignore the last ones.
my site's main div is floated left in some page and right in some page in otherpage it's scattered everywhere in IE 7 and 8, I didn't even bother checking in IE6, while it's perfect in IE 6.
Please help, div is as below. Is there a way to fix the div to center no matter what browser ? Is there any hack ?
div.main {
margin:70px auto;
width:80%;
}
set the body style to text-align:center; and the div margin:auto;
this should work in all browsers
Older versions of IE require that you break apart the margin, like so:
margin-left:auto;
margin-right:auto;
width:80%;
Another option is to only set the margins, not the width. This will give you a different result depending on what you are looking for:
margin-left: 10%;
margin-right: 10%;
A really old hack to try is this:
body {
text-align:center;
}
div.main {
margin-left:auto;
margin-right:auto;
text-align:left;
width:80%;
}
The key is just be sensible and creative to get CSS to work properly in old versions of IE. Don't do anything that will break newer browsers. In the case of the last hack, nothing would change in newer browsers so it is safe to use.
There is nothing wrong with that code, it works fine in all modern browsers, and even IE 6.
The reson for your problem is probably some other elements in the page that is breaking the layout. You cah use a tool like the FireBug add-on in Firefox to examine the elements and see what styles are actually applied to the elements.
Check that you have a proper doctype tag at the top of the page (and no XML tag before it), so that the page renders in standards compliant mode. IE is especially sensetive to this, as it uses a non-standard version of the box model when it renders in quirks mode.
I just discovered the box-sizing: border-box CSS property which solves a bunch of cross browser layout problems for me.
The only issue I now have is that IE7 doesn't seem to support it. Is there a hack to get IE7 to support it?
There are several ways to do this, none perfect.
As you point out:
Firefox / Opera / Safari / Chrome / IE8+ will recognise the box-sizing property allowing you to use border-boxes.
IE6 will use the old school (correct?) border-box model by default.
However IE7 uses the W3C padding box model when in standards mode, and will not recognise the CSS box-sizing property so there's no way to revert to the border box model. If you need to support IE7 (and you probably still do), you're stuck with one of four options:
1. Conditional Comments:
<!--[if IE 7]>
Special instructions for IE 7 here
<![endif]-->
Use box-sizing for IE8 and 9, then make specific overrides for IE7. This option will be painful.
2. The Schepp Box Sizing Polyfill:
https://github.com/Schepp/box-sizing-polyfill
This excellent Polyfill is an HTC file which modifies the default browser behavior in IE6 and 7 so they use the W3C box model. It's fine for light use, but may cause problems of it's own if used extensively. Use with caution and TEST.
3. Old Style Nested Divs:
The old style nested div approach is still a fine way:
<div style="width:100px; border:1px solid black">
<div style="margin:10px">
Content
</div>
</div>
A non-semantic nested div provides the padding indirectly, with the disadvantage that your markup becomes untidy. Obviously don't use inline styles, I'm using them here for the sake of illustration.
The old adage Never use padding on a fixed width element still stands true.
4. My Preferred Solution - A Direct Child Selector:
The other way round this is with the direct child selector. Say you have a fixed width div containing some content:
<div class="content">
<h1>Hi</h1>
<p>hello <em>there</em></p>
</div>
You can then write a rule to add left and right margins to all the direct children of the div:
.content {
width:500px;
padding:20px 0;
}
.content > * {
margin:0 20px;
}
This will add a little margin to the h1 and p, but not to the nested em, giving the appearance of 20px padding on the content div, but without triggering the box model bug.
5. Consider Dropping IE7 support
IE7 is the last browser not to recognise the box-sizing property. If you're getting little traffic from IE7, you might consider dropping support. Your CSS will be much nicer.
As of late 2013, this is my preferred option.
2017 EDIT: It's probably long past time to drop support for IE7 now, and just use border-box.
You can use a polyfill to make it work on some items, it didn't work for my input fields though.
https://github.com/Schepp/box-sizing-polyfill
box-sizing: border-box;
*behavior: url(/css/boxsizing.htc);
Just note that the behavior url is relative to the page and not the css file. Use relative paths to site's root (start the url with an slash and then go from there).
I'm assuming you're using this to get around the IE6 box model. Unfortunately, there really is no general way to trick earlier versions of IE into supporting arbitrary CSS properties.
I would recommend not using the box-sizing property, because every browser other than IE6 will implement the box model correctly. The Wikipedia article does a good job of explaining how IE6 differs.
To solve this, I recommend using a separate style sheet for IE6, and including it using IE conditional comments. In your IE6 style sheet, you can specify different widths/heights/padding/margins to make your layout look consistent. You can include a style sheet for IE6 only like this:
<!--[if IE 6]>
<link href="ie6sucks.css" rel="stylesheet" type="text/css" />
<![endif]-->
basically im in a little dilemma... As usual, IE6 is messing up some tiny line of CSS.
All i need to fix everything is:
overflow:hidden;
Thats it. But, heres the problem. This is for a uni assigned piece of coursework and they say only 1 css file which must be valid. And no conditional comments :S so there goes my plan. Is there any way to target IE6 ONLY (not 7+ etc.) and still maintain a valid CSS file?
PS: before any of you say, well you should rethink your CSS etc, I have, its for a CSS dropdown menu and a nested element is stretching my link container so i need overflow set to hidden. Only IE6 needs this :S
EDIT MY SOLUTION:
html>body .allbrowsersceptIE6 {
overflow:visible;
}
.onlyIE6 {
overflow:hidden;
}
It works because all other browsers use the first value and ignore the second one unless the second has !important on it :D
If it comes down to using hacks as your only option: http://www.javascriptkit.com/dhtmltutors/csshacks2.shtml
So, you want to apply that rule to #menu or whatever:
* html #menu { overflow: hidden; }