Solved

css sniffer browser issues

Posted on 2004-08-10
26
2,052 Views
Last Modified: 2013-11-19
Hi

I'm working on a site at the moment , the elements are all in layers, the layout is done in css.
To make it work at 800x600 and 1024x768 screen resolutions it  uses a sniffer to choose between a couple of different css files that have different properties so it works on both resolutions. This works fine in IE 5 and 6 but it doesn't work in 4. Also i'm having problems in netscape.
Does anyone know of a better code I can use to choose between the css that will work on IE 4 and netscape

the first page of the site can be found at http://www.frogmore-consulting.co.uk/

and the code I'm using is pasted below.

Thanks


<script type="text/javascript">
//<![CDATA[
function sniffer() {
var screen_height = screen.height;
var screen_width = screen.width;
if (screen_height >= 768) {
screen_width = 1024;
screen_height = 768;
document.getElementById("foo").href="style_1.css";
}
else {
screen_width = 800;
screen_height = 600;
document.getElementById("foo").href="style_2.css";
}
}
window.onload=sniffer;
//]]>
</script>
0
Comment
Question by:stopheone
  • 12
  • 8
  • 5
  • +1
26 Comments
 
LVL 31

Expert Comment

by:seanpowell
ID: 11762626
Which version of netscape?

Also - do you have a specific requirement for IE 4 - it has less than 0.1% of the market, so I'm curious...

Also curious about what it is that you're modifying for the different resolutions. Are you absolutely 100% positive there's no other option? Just wanted to explore that last point - but feel free just to say, No, there isn't :-)
0
 

Author Comment

by:stopheone
ID: 11762913
Really, 0.1%? thought it would be higher, Is it possible for anyone to point me to a site that gives these statistics on browser use?
I've tested in netscape 4.5 and it didn't work. Maybea thats to old a browser for me to worry about?

The layout has to change for 800x600. I found that I could layout the site using percentages but to get it spot on the layout needs to change.

Also wondering if anyone has a better version of the java script that I'm using.

cheers

0
 
LVL 31

Expert Comment

by:seanpowell
ID: 11763199
This is a preety good resource. It stopped noting IE 4 at the end of 2002.
http://www.w3schools.com/browsers/browsers_stats.asp

This shows it at or below .1%
http://www.upsdell.com/BrowserNews/stat.htm

N4.5, yes. It handles CSS so badly that it's simply not worth coding for. Remember, anyone using that browser will see broken sites all over the web, not just yours :-)
0
 
LVL 33

Expert Comment

by:humeniuk
ID: 11764914
sean says: << Also curious about what it is that you're modifying for the different resolutions. Are you absolutely 100% positive there's no other option? >>
That's an important question to address.  Can you resolve your browser issues by creating a fluid layout with CSS using percentage widths?

If not, one method is to use javascript to automatically redirect to the page that best suits the users screen resolution - bad idea, very labor intensive, but you can modify the script not to redirect, but to select/include a css config file based on browser resolution (very similar to what you are doing).

If this suits your purpose, you can find a couple of options at http://javascript.internet.com/user-details/resolution-page.html or http://www.dynamicdrive.com/dynamicindex9/info3.htm.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 11768461
IE4 does not understand DOM1 methods:

lines like this:
document.getElementById("foo").href="style_1.css";

need to use:
document.all["foo"].href="style_1.css";

It may also parse wrong for
<![CDATA[
Something we never used way back then so I'm not sure.

As for NS4 none of that is going to work you can have an id for a stylesheet.

What you do have there should work for 97-98% of users.  The relics and fringe browsers are not cost effective to support unless youhave a uniques site that attacts a very stange crowd.  Check your onw server logs to see if any of your visitors are actually using the old remnants of a simpler age.

Cd&
0
 

Author Comment

by:stopheone
ID: 11770861
Ok , thanks for that.
Another issue I'm having is that it takes about 1 second for the style sheet to be chosen.
So for about one second you see the layers in the wrong position.
Is there a way to compensate for this?
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 11772066
I would remove all the absolute positioning ( or most of it.) That's the main reason for the delay...
0
 

Author Comment

by:stopheone
ID: 11772959
Hi
That does speed it up alot, but you can still see the layers in the wrong position for a moment before
the css kicks in. Anything else that I shoud remove?
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 11775696
The problem is that you are doing the setup after the load instead of just writing the appropriate link with waiting fo rthe load to complete you eliminate it by not using a function and just script it in line in the head to execute as part of the load instead aof after it:

<script type="text/javascript">
str=(screen.height>768)? 'style_1.css' : 'style_2.css';
document.write('<link rel="stylesheet" type="text/css" href="'+str+'">';
</script>

That also has the advantage of being cross-browser compatible with just about any browser that has scripting enable.

Cd&
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 11775847
Watch out with your includes as well - this is in the middle of the page...


<div id="aboutustext" style="z-index:20; " class="indextext">
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Frogmore Consulting</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="StyleSheet.css" rel="stylesheet" type="text/css">
</head>

<body>
<p class="content"><strong>People Motivation includes:<br>


and you have 3 stylesheets. perhaps you could combine the first two and "only" put those things in the dynamic one that are changing ?

There's still a ton of absolute poitioning going on there - it's just a recommenation, but it is pretty complicated. If time permits, you should try and remove most of it :-)
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 11775938
Cd&, I'm curious about what happens when the user resizes the browser... I assume a new stylesheet needs to be reloaded?
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 11775981
I've had an extensive look at the layout - I'm still unsure about the 2 versions for screen size...

>>I found that I could layout the site using percentages but to get it spot on the layout needs to change.
That may mean that the design is a bit too tight - can you be specific (if you wish, just trying to help) about what it is exactlky that fails at 800?
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 11778754
Sean,

screen.height and screen.width are the windows properties and the always return the resolution no matter what the screen size.

Percentages work off the documentElement or body properties, not the windows resolution.

The different style sheets for different resolutions  should only be required if you are actually altering layout, image sizes, specific properties based on resolution. A single stylesheet should handle whatever screen size gets thrown at it, but a developer may want to do a different prosentation when the the texture of the canvas is different' especially if they are using a lot of graphics.

Though the more common use of multiple stylesheets is for cross-browser, it is also valid for some cross-resolution issues as well.

Cd&

0
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 

Author Comment

by:stopheone
ID: 11781585
The layout changes on different pages (though these pages haven't been uploaded yet).
Sometimes I will use two columns for the text at 1024 and use only one column at 800 x600 etc.

COBOLdinosaur that script looked good but I can't seem to get it to work
I tried it at the following page , http://www.frogmore-consulting.co.uk/about%20us2.php
but it didn't work, I don't have much javascript knowledege so I'm not sure If I need to change any of the code.
Is there anything I need to change?
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 11782293
I believe you're missing the closing brace on that script:

<script type="text/javascript">
str=(screen.height>768)? 'style_1.css' : 'style_2.css';
document.write('<link rel="stylesheet" type="text/css" href="'+str+'">';)  // HERE
</script>

and don't want to beat a dead horse, but have this showing up twice inside the body tag:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Frogmore Consulting</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="../StyleSheet.css" rel="stylesheet" type="text/css">
</head>

Anyway - no points for me, Cd&'s code should handle what you need...
0
 

Author Comment

by:stopheone
ID: 11782844
Tried adding the closing brace but still no joy.
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 11782926
I would suggest correcting the errors in the document, in case they are affecting the script.
0
 

Author Comment

by:stopheone
ID: 11783092
I've removed the errors I think,
Ive taken out the  other 2  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//
from the http://www.frogmore-consulting.co.uk/about%20us2.php page
and the only position absolutes that are left are for a few of the layers that don't need the css (stuff in the top left corner that doesn't need to move).


0
 
LVL 31

Expert Comment

by:seanpowell
ID: 11783179
You need to watch the generated code.

Here's what I'm seeing, commented:




<div id="content" style=" z-index:20; overflow: auto; visibility: visible;" class="maincontent">
  <div id="Layer2" style=" z-index:2" class="aboutustext">
   
<!-- REMOVE THIS FROM HERE -->
<link href="../StyleSheet.css" rel="stylesheet" type="text/css">


<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- TO HERE -->


<table width="100%" border="0" cellspacing="1" cellpadding="5">
  <tr>
    <td width="421" valign="top"><span class="content">A dynamic bespoke training and development
        consultancy that holds the prestigious Department of Employment National
        Training award for their customer  care as a profit source programmes.
      </span>
      <p class="content">Established in 1993 our team of consultants
        have a diverse background in both the
        private and public sector with a good mix of
        corporate and entrepreneurial skills.</p>
    <p><span class="content"><strong>Take a few minutes to meet the team:</strong></span></p>
    </td>
  </tr>
</table>

<!-- REMOVE THIS FROM HERE -->
</body>
</html>
<!-- TO HERE -->

  </div>
  <div id="Layer1" style="; z-index:1;" class="aboutuspics">
   
<!-- REMOVE THIS FROM HERE -->
<link href="../StyleSheet.css" rel="stylesheet" type="text/css">


<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<!-- TO HERE -->

<table width="281" height="25" border="0" align="left" cellpadding="0" cellspacing="1">
  <tr>
    <td width="70"><img src="../../gfx/aboutUs1.jpg" width="70" height="57"></td>
    <td colspan="2" valign="bottom">&nbsp;</td>
    <td width="355" valign="bottom"><span class="content"><img src="../../gfx/Bullet.gif" width="7" height="15"> The
        People Motivator</span></td>
  </tr>
  <tr>
    <td colspan="4">&nbsp;</td>
  </tr>
  <tr>
    <td><img src="../../gfx/aboutUs1.jpg" width="70" height="57"></td>
    <td colspan="2" valign="bottom">&nbsp;</td>
    <td valign="bottom"><img src="../../gfx/Bullet.gif" width="7" height="15"> <span class="content">The
        Researcher</span></td>
  </tr>
  <tr>
    <td colspan="4">&nbsp;</td>
  </tr>
  <tr>
    <td width="70"><img src="../../gfx/aboutUs3.jpg" width="70" height="57"></td>
    <td colspan="2" valign="bottom">&nbsp;</td>
    <td valign="bottom"><img src="../../gfx/Bullet.gif" width="7" height="15"> <span class="content">The
        Strategic Thinker and Planner</span></td>
  </tr>
  <tr>
    <td colspan="4">&nbsp;</td>
  </tr>
  <tr>
    <td width="70"><img src="../../gfx/aboutUs1.jpg" width="70" height="57"></td>
    <td colspan="2" valign="bottom">&nbsp;</td>
    <td valign="bottom"><img src="../../gfx/Bullet.gif" width="7" height="15"> <span class="content">The
        Director</span></td>
  </tr>
</table>

<!-- REMOVE THIS FROM HERE -->
</body>
</html>
<!-- TO HERE -->

  </div>
</div>
  </p>
  </div>
  </div>
  </body>

<!-- ADD THIS -->

</html>
0
 

Author Comment

by:stopheone
ID: 11783828
Hi
I've done that but the javascript still doesn't work, any ideas?
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 11783896
You also need to remove your style tag and/or comments from the stylsheets:

<style type="text/css">
<!--

and

</style>

I'll keep loooking in case there's something else...
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 11783917
this:

document.write('<link rel="stylesheet" type="text/css" href="'+str+'">';)

should be this:

document.write('<link rel="stylesheet" type="text/css" href="'+str+'">')
0
 

Author Comment

by:stopheone
ID: 11784125
thats working now, except that it seems to picking the style sheet for 800 instead of 1024.

http://www.frogmore-consulting.co.uk/about%20us2.php
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 500 total points
ID: 11784791
you should actually use 600 instead of 768:

str=(screen.height>600)? 'style_1.css' : 'style_2.css';

Or use the width:
str=(screen.width>800)? 'style_1.css' : 'style_2.css';

That assums that style_1 if for resolution above 800x600 and style_2 is 800x600 or less.

If it is the other way around then make it:

str=(screen.width>800)? 'style_2.css' : 'style_1.css';

Cd&
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 11785665
Glad we could help.  Thanks for the A.

Sean, thanks for the early morning support.

Cd&
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 11785829
Happy to help out in any way I can. I likely just had less beer last night...
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Introduction Since I wrote the original article about Handling Date and Time in PHP and MySQL (http://www.experts-exchange.com/articles/201/Handling-Date-and-Time-in-PHP-and-MySQL.html) several years ago, it seemed like now was a good time to updat…
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now