View Full Version : css for different screens

12-19-2007, 11:47 PM

i need help on a javascript, to load a different css for different screens,
for screens below 1024 and above 1280.

thank you for your help or comments.

12-20-2007, 12:05 AM
I have a comment for you: Create a default style that all users can see (i.e. 800x600) and then create alternate stylesheets for different sizes and let the user decide how to view the site by having a stylesheet switcher (http://www.alistapart.com/stories/alternate/).

A well thought out website structure and layout works (more or less) in any resolution regardless of the screen size. You can never know how small the browser window will be. Some people make it narrow to have more room on their screen, some people even have JavaScript disabled (hence, rendering any JS attempt useless).

You should think out of the box.

12-20-2007, 12:35 AM

thanks for the reply. but, here is the scene.
can you please visit http://www.storagedrop.com/new/index.php
and login as username: sonu, and password: laptop

for screens greater than 1280, the right menu looks perfect, aligned with the the rest of the site.

but if you look at the page in 1024, the menu comes to left, hence i wanted a css shifter depedning on the screen.

any comments ?

12-20-2007, 01:09 AM
Well, your site is nice but it’s also an example of the statement I made earlier: You don’t need different stylesheets and/or a screen resolution detection script. You just need to apply the right styles to the right HTML.

The first condition is that your HTML should be valid (http://validator.w3.org). Secondly: have you looked at that page in Firefox yet? It’s totally screwed up. Not even the best alternate stylesheet would help here. One rule of thumb: Don’t use IE as primary measure. Use real, good, standards compliant browsers like Opera, Firefox, Safari, Konqueror. Those browsers show you the actual results of your coding while IE is guessing what you could have meant.
Chances are if you get it to look alright in those standards compliant browsers it will look alright in IE, too. And if not, then you should fix it there using conditional comments (http://www.quirksmode.org/css/condcom.html).

Then it should be alright to either set a minimum width or a width in general and your problem will be gone.

After looking at it more thoroughly it appears that you need to clear the float for #mainTable. And I’d recommend either not positioning the #buttoncontainter at all or setting the anchor at the right (right: 0; or something like that), not at the left so it will go with the right side. If you apply a (min-)width it will stay where it is as soon as the width is achieved when the window size is decreased.