Css file per res problem

Fir3fly

Fir3fly

Fir3fly

Associate
Joined
28 Sep 2004
Posts
135
Location
Gibraltar
Hi guys,

as per title im having a small problem hope theres a simple solution.

Basically im using the following code within my index page of my site to detect the resolution of the screen and redirect to a css file. It works perfectly in Firefox but i cant get it to work in Internet Explorer.

var winW = 0, winH = 0;

if (parseInt(navigator.appVersion)>3) {
if (navigator.appName=="Netscape") {
winW = window.innerWidth-16;
winH = window.innerHeight-16;
}
if (navigator.appName.indexOf("Microsoft")!=-1) {
winW = document.body.offsetWidth;
winH = document.body.offsetHeight;
}
}
if (winW <= 1680) {
document.write('<link rel="stylesheet" type="text/css" href="style1680.css">');
}
if (winW <= 1600) {
document.write('<link rel="stylesheet" type="text/css" href="style.css">');
}
if (winW <= 1280) {
document.write('<link rel="stylesheet" type="text/css" href="style.css">');
}
if (winW <= 1024) {
document.write('<link rel="stylesheet" type="text/css" href="style1024.css">');
}
if (winW <= 800) {
document.write('<link rel="stylesheet" type="text/css" href="style800.css">');
}
if (winW <= 640) {
document.write('<link rel="stylesheet" type="text/css" href="style800.css">');
}


can any1 see why this wouldnt work in Internet explorer? on following site :

http://firefly.rar.gi
 
Surely thats a lot of work when you could just use percentages? :confused:

What if they have JS disabled?

Also i understand its under construction, but when i click on gallery in FF @ 1280x1024, it appears at the bottom right of my screen, much outside the main box.
 
yea theres lots of things i need to change.....
and about the % thing i tried that but it really was a lot more work that i thought, I cant set the banner for example as a percentage as it will stretch etc.

So i would much rather stick to style sheets :/ just need to know how to make it work in internet explorer.
 
Fir3fly said:
yea theres lots of things i need to change.....
and about the % thing i tried that but it really was a lot more work that i thought, I cant set the banner for example as a percentage as it will stretch etc.

So i would much rather stick to style sheets :/ just need to know how to make it work in internet explorer.
Click to expand...

No offence, that is a ridiculous way of making your browser work in different resolutions.

Just style it using fluid values and percentages, if thats impossible with your site, you need to consider redesigning the site so it does. :)
 
all the numbers you mention satify the condition if (winW <= 1680)

so won't all values use the stylesheet for the 1680 width?

either use a fixed size browser window or use percentages....

HT
 
Fir3fly said:
yea theres lots of things i need to change.....
and about the % thing i tried that but it really was a lot more work that i thought, I cant set the banner for example as a percentage as it will stretch etc.

So i would much rather stick to style sheets :/ just need to know how to make it work in internet explorer.
Click to expand...

I think you're giving yourself a lot more work by trying to do it like this. At the very least you could simply have a fixed width site. If you wanted it to stretch it across and use percentages it really isnt that hard. It's really the graphics that will give you jip. For the banner you'd have to essentially cut it into 3 parts. One part at either end that remain fixed, then select a part in the middle that you can repeat and have that repeat as the background for the 'stretchy' part.

Terrible explanation there :/ lol (Someone post a link to a website like that!)
 
Last edited:
i just done like the website not to take up the whole screen..it looks...a little untidy, so i have done it manually so that it fits the screen exactly :/

ive tried percentages and i just couldnt get past the images, coloured backgrounds are obviously not a problem, but i just couldnt get the images to work out with percentages.

I just need to know please :/ whats wrong with the coding to make it work in IE. I do appreciate your advice but this is how I've decided to do it :/

any1 got any ideaS?
 
If you're going to do it like that, you need to start with the smallest value first and then get bigger - as it is now, if my window size is 320x240, it satisfies your first condition and my browser loads the 1680 stylesheet which isn't very nice :)

Edit: It's even worse, didn't notice you were just using a series of ifs - if I'm on 320x240, it'll load every single one of the stylesheets :eek:

Also, consider loading an 800x600 stylesheet and then switching it via Javascript based on their resolution - that way, if they have JS disabled they'll get the 800x600 page, the most common resolution.

That said, I'd echo the sentiments of others in saying that this is a really clunky way of doing things :)
 
ok ill make sure there are style sheets appropriate for each rez...
but eem...well i still ned my question answering :/

does any 1 know?
 
Fir3fly said:
ok ill make sure there are style sheets appropriate for each rez...
but eem...well i still ned my question answering :/

does any 1 know?
Click to expand...

I'm sorry, I can't physically give out bad advice.

Seriously mate, its one of the most retarded ways of doing this.

Design a fluid site, a lot of people are going to laugh at you if you have lots of seperate stylesheets for different resolutions. :(
 
A site that fills the browser window regardless of its resolution. Either via width, height or both.
 
You must log in or register to reply here.
Back
Top Bottom