PDA

View Full Version : Any way to force IE6 into quirksmode but not IE7



JimM
Aug 16th, 2007, 09:26 PM
I have layout I'm using and have to force IE 6 into quirksmode
and load an additional style sheet.


<!-- http://test.com/quirksmode -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Fixed Top-Left-Bottom Test</title>
<link href="default.css" rel="stylesheet" type="text/css" media="screen">
<!--[if IE]> <link href="default-IE.css" rel="stylesheet" type="text/css" media="screen"> <![endif]-->
</head>


I have found that the layout works just fine in IE7 without quirksmode or the additional style sheet.

I know I can change [if IE] to [if IE 6] so the style sheet will only load in IE6.
But is there a way to setup a page so that it will only go into quirksmode in IE6?


Thanks
JimM

_Aerospace_Eng_
Aug 16th, 2007, 09:39 PM
What type of layout are you trying to achieve? If it was coded properly then there should be no need for quirks mode.

JimM
Aug 16th, 2007, 10:58 PM
What type of layout are you trying to achieve? If it was coded properly then there should be no need for quirks mode.


Here's the code and style sheets, it's kind of a css based frame layout.



<!-- http://test.com/quirksmode -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Fixed Top-Left-Bottom Test</title>
<link href="default.css" rel="stylesheet" type="text/css" media="screen">
<!--[if IE]> <link href="default-IE.css" rel="stylesheet" type="text/css" media="screen"> <![endif]-->
</head>
<body>
<div id="header">Site Header Area</div>
<div id="content">
<p>Page Title or Sub Menu will go here</p>
<hr>
<h1>Page Header One</h1>
<h2>Page Header Two</h2>
<p>This is Line number 01.</p>
<p>This is Line number 02.</p>
<p>This is Line number 03.</p>
<p>This is Line number 04.</p>
<p>This is Line number 05.</p>
<p>This is Line number 06.</p>
<p>This is Line number 07.</p>
<p>This is Line number 08.</p>
<p>This is Line number 09.</p>
<p>This is Line number 10.</p>
<p>This is Line number 11.</p>
<p>This is Line number 12.</p>
<p>This is Line number 13.</p>
<p>This is Line number 14.</p>
<p>This is Line number 15.</p>
<p>This is Line number 16.</p>
<p>This is Line number 17.</p>
<p>This is Line number 18.</p>
<p>This is Line number 19.</p>
<p>This is Line number 20.</p>
<p>This is Line number 21.</p>
<p>This is Line number 22.</p>
<p>This is Line number 23.</p>
<p>This is Line number 24.</p>
<p>This is Line number 25.</p>
<p>This is Line number 26.</p>
<p>This is Line number 27.</p>
<p>This is Line number 28.</p>
<p>This is Line number 29.</p>
<p>This is Line number 30.</p>
<p>This is Line number 31.</p>
<p>This is Line number 32.</p>
<p>This is Line number 33.</p>
<p>This is Line number 34.</p>
<p>This is Line number 35.</p>
<p>This is Line number 36.</p>
<p>This is Line number 37.</p>
<p>This is Line number 38.</p>
<p>This is Line number 39.</p>
<p>This is Line number 40.</p>
<p>This is Line number 41.</p>
<p>This is Line number 42.</p>
<p>This is Line number 43.</p>
<p>This is Line number 44.</p>
<p>This is Line number 45.</p>
<p>This is Line number 46.</p>
<p>This is Line number 47.</p>
<p>This is Line number 48.</p>
<p>This is Line number 49.</p>
<p>This is Line number 50.</p>
<hr>
<p>End of Scrolling Text Area</p>
</div>
<div id="sidebar">
<br />Main Menu Area<br />
Menu Item 1<br /> Menu Item 2<br /> Menu Item 3<br /> Menu Item 4</div>
<div id="footer">Site Footer Area</div>

</body>
</html>


default.css


body {
margin: 0;
padding: 2em 1em 2em 13em;
color: #000;
background: #fff;
font-size: 1em;
}
div#header, div#sidebar, div#footer {
position: absolute;
left: 0;
overflow: auto;
}
div#header {
z-index: 2;
width: 100%;
height: 2em;
top: 0;
color: #000;
background: #ddd;
border-bottom: 1px solid #000;
}
div#sidebar {
margin: 1px 0 0 0;
width: 12em;
top: 2em;
bottom: 2em;
color: #000;
background: #ccc;
border-right: 1px solid #000;
}
div#content {
padding: 1em;
}
div#footer {
bottom: 0;
width: 100%;
height: 2em;
color: #000;
background: #ddd;
border-top: 1px solid #000;
}
@media screen {
body>div#header, body>div#sidebar, body>div#footer {
position: fixed;
}
}


default-IE.css


body {
overflow: hidden;
padding: 2em 0 2em 0;
font-size: 100%;
height: 100%;
}
div#content {
/* overflow-y & overflow-x fixes IE scroll bar problem when using overflow:auto */
overflow-y: scroll;
overflow-x: auto;
margin: 0 0 0 12em;
padding: 1em;
height: 100%;
}
div#sidebar {
overflow: hidden;
top: 0;
margin: 0;
padding: 2em 0 2em 0;
height: 100%;
}
div#footer {
margin: -1px; color: Orange;
}

felgall
Aug 17th, 2007, 04:05 AM
If you need specific stylesheet overrides for versions of IE then enclose the link to that stylesheet in conditional comments specific to that IE version.

wyrd33
Aug 17th, 2007, 06:46 AM
Put the following at the top of your XHTML page to force IE6 into quirks mode:



<?xml version="1.0"?>

noPCtoday
Aug 17th, 2007, 07:13 AM
I dont know if this helps


<!--[if lte IE 6]>
<!-- put HTML here, if you want to put script then wrap them with the <script> tag. -->
<![endif]-->


lte means equal or less than
IE of course means IE
6 means the version, ie6
the whole thing means "if less or equal than ie6 then run the follow html"

you can do the same thing to IE 7, IE5 etc.

JimM
Aug 17th, 2007, 06:17 PM
Thanks all for help/posts, wyrd33, exactly what I was looking for (sets IE6 into quirks mode but NOT IE7).


Put the following at the top of your XHTML page to force IE6 into quirks mode:



<?xml version="1.0"?>


Also I still consider myself some what new to CSS layouts (well always learning at any rate), I'm a curious about Aerospace Eng comment.

If it was coded properly then there should be no need for quirks mode.
Is there a better way to achieve the effect of frame look with only body being able to scroll (is my code improperly set up)?

JimM

_Aerospace_Eng_
Aug 17th, 2007, 07:21 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Fixed Top-Left-Bottom Test</title>
<style type="text/css">
* {
border:0;
}

html {
height:100%;
}

body {
color:#000;
background:#fff;
font-size:1em;
height:100%;
}

#header {
z-index:2;
width:100%;
height:2em;
top:0;
color:#000;
background:#ddd;
border-bottom:1px solid #000;
left:0;
}

#sidebar {
width:12em;
left:0;
top:0;
height:100%;
color:#000;
background:#ccc;
border-right:1px solid #000;
z-index:1;
}

#sidebar h1 {
margin:0;
padding:3em 0 0.5em;
font-size:100%;
}

#content {
padding:3em 1em 3em 13em;
}

#footer {
bottom:0;
left:0;
width:100%;
height:2em;
color:#000;
background:#ddd;
border-top:1px solid #000;
z-index:2;
}

#header, #sidebar, #footer {
position:fixed;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
html {
overflow-x:hidden;
overflow-y:hidden;
}
body {
overflow-y:auto;
}
#header, #sidebar, #footer {
position:absolute;
}
#header, #footer {
width:expression(parseFloat(document.body.clientWidth)+12+'px');
}
#footer {
bottom:-1px;
}
</style>
<![endif]-->
</head>
<body>
<div id="header">Site Header Area</div>
<div id="content">
<p>Page Title or Sub Menu will go here</p>
<hr>
<h1>Page Header One</h1>
<h2>Page Header Two</h2>
<p>This is Line number 01.</p>
<p>This is Line number 02.</p>
<p>This is Line number 03.</p>
<p>This is Line number 04.</p>
<p>This is Line number 05.</p>
<p>This is Line number 06.</p>
<p>This is Line number 07.</p>
<p>This is Line number 08.</p>
<p>This is Line number 09.</p>
<p>This is Line number 10.</p>
<p>This is Line number 11.</p>
<p>This is Line number 12.</p>
<p>This is Line number 13.</p>
<p>This is Line number 14.</p>
<p>This is Line number 15.</p>
<p>This is Line number 16.</p>
<p>This is Line number 17.</p>
<p>This is Line number 18.</p>
<p>This is Line number 19.</p>
<p>This is Line number 20.</p>
<p>This is Line number 21.</p>
<p>This is Line number 22.</p>
<p>This is Line number 23.</p>
<p>This is Line number 24.</p>
<p>This is Line number 25.</p>
<p>This is Line number 26.</p>
<p>This is Line number 27.</p>
<p>This is Line number 28.</p>
<p>This is Line number 29.</p>
<p>This is Line number 30.</p>
<p>This is Line number 31.</p>
<p>This is Line number 32.</p>
<p>This is Line number 33.</p>
<p>This is Line number 34.</p>
<p>This is Line number 35.</p>
<p>This is Line number 36.</p>
<p>This is Line number 37.</p>
<p>This is Line number 38.</p>
<p>This is Line number 39.</p>
<p>This is Line number 40.</p>
<p>This is Line number 41.</p>
<p>This is Line number 42.</p>
<p>This is Line number 43.</p>
<p>This is Line number 44.</p>
<p>This is Line number 45.</p>
<p>This is Line number 46.</p>
<p>This is Line number 47.</p>
<p>This is Line number 48.</p>
<p>This is Line number 49.</p>
<p>This is Line number 50.</p>
<hr>
<p>End of Scrolling Text Area</p>
</div>
<div id="sidebar">
<h1 id="menutitle">Menu Area</h1>
<ul>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
<li>Menu Item 4</li>
</ul>
</div>
<div id="footer">Site Footer Area</div>
</body>
</html>

JimM
Aug 17th, 2007, 08:39 PM
Wow, thanks Aerospace Eng.

Very cool, had to do some diggin on your width:expression, but that got the old mind working ;) so thanks for that also.