5 replies [Last post]
TracyMcLoud
TracyMcLoud's picture
Offline
newbie
Portland, Oregon
Last seen: 11 years 14 weeks ago
Portland, Oregon
Timezone: GMT-8
Joined: 2008-08-17
Posts: 10
Points: 0

How can I make the page out look the same with and without compatibility view in IE?

Here's the code for a very simple nav

CSS:

#navcontainer { width: 200px; }
#navcontainer ul{margin-left: 30px;padding-left: 0;list-style-type: none;font-family: Arial, Helvetica,ans-serif;}
#navcontainer a {display: block;padding: 3px;width: 160px;background-color: #036;border-bottom: 1px solid #eee;}
#navcontainer a:link, #navlist a:visited {color: #EEE;text-decoration: none;}
#navcontainer a:hover{background-color: #369;color: #fff;}

HTML:

With compatibility view the out looks like this:
http://csscreator.com/files/compOn.jpg

and without, the output looks like this:
http://csscreator.com/files/compOff.jpg

AttachmentSize
compOn.jpg13.13 KB
compOff.jpg12.75 KB
t-bone_two
t-bone_two's picture
Offline
Enthusiast
Los Angeles
Last seen: 5 years 21 weeks ago
Los Angeles
Timezone: GMT-6
Joined: 2009-09-26
Posts: 209
Points: 268

Solution

I really cannot pick apart your CSS code for holes.

But what I can tell you about IE8 is that it can read the same stylesheet as firefox and the other "good" browsers and serve the content the same.

I can get sites to work with and without compatibility mode in IE8. And also in older versions of IE.

You have to generate two stylesheets. In the below code you generate style.css for all the major browsers including IE8. And they are served that content.

For other versions of IE you generate a second stylesheet. I call it style-ie.css The way I go about it is to generate the working stylesheet for the relevant browsers. Firefox and safari. Get it perfect.

Then I do a find and replace and eliminate

html>body prior to the tag name.

So IE8, firefox, etc follow:
The below is how you declare for style.css
html>body .header
{
css content
}

Below is a separate style sheet and how you declare specifically for old versions of IE. style-ie.css
Older IE follows
.header
{
css content
}

var browser_type = navigator.appName;
var pattern = /MSIE 8.0/;
if (!pattern.test(navigator.appVersion) && browser_type == "Microsoft Internet Explorer") {
document.write("");
}
else {
document.write("")
}

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 30 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

t-bone_two wrote:You have to

t-bone_two wrote:

You have to generate two stylesheets.

Sometimes you do, but not always, so please let's not make blanket statements. Even if you do have to use additional style rules for IE, I'm of the opinion you're better off trying to keep them all in the one stylesheet and reduce the number of http requests. Although this of course will depend on the size and complexity of the site.

And has been pointed out in another thread, why use javascript (which won't work if it's turned off) to serve different stylesheets to IE when you can use conditional comments instead?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 17 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Please do not post this

Please do not post this snippet of code again! not on this forum that is, thanks Wink

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

TracyMcLoud
TracyMcLoud's picture
Offline
newbie
Portland, Oregon
Last seen: 11 years 14 weeks ago
Portland, Oregon
Timezone: GMT-8
Joined: 2008-08-17
Posts: 10
Points: 0

What's the solution?

I am not sure if a solution was provided...

how can the same code - or what are the tweeks needed, for the output to look the same with and without compatibility view.

Thank you in advance.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 9 weeks 5 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

There is no solution

There is no solution required. Your page should be written to be standards compliant. IE8's standards mode is all you need. Tweaks for IEs 6 & 7 are a separate issue that do not involve IE8.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.