Neverside

Javascript and/or CSS help needed.

I need a script to use on my splash page that determines the users resolution and then redirects them to a page that corresponds with that.

Like... say I made pages for the two most common resolutions: 800x600 and 1024x768. I want the script to determine which of those resolutions the user has and then redirect them to the page that was specified for that resolution.

I want to use that until I get a firm handle on this CSS thing. I keep on getting these little spaces in my code that's annoying the fark out of me. So until I can fix that, I might as well use this Javascript thing.

If you'd like to take a crack at my code to see what I'm doing wrong you can go ahead at check it out. I'm kinda going from the top down so there isn't much at all to look at.. but anyway.

The layout and HTML is located at: http://www.creativefx.net/basic.html
The CSS file is located at: http://www.creativefx.net/cfx.css

What happens is that on the navigation bar I've got each div (which is a button) with a border of 1. I've created all of them positioned absolutely except for the last one to keep it from fubaring up (something about the box model). Having the last one as relative keeps the other divs below it from crowding way up.

Anyway.. those buttons each have a border of 1. It's just that they show up in some spots as a little thicker. In 1024x768 the thicker line occurs between Gallery and About CFX. In 800x600 it's thicker between Tutorials and Gallery and again between Contact and the last div. Even when you resize your window in either of those resolutions changes the position of those thicker lines. It's frustrating the hell out of me and I don't know how to fix it.

By the way... if someone posts a correction to the CSS problem doesn't mean you don't have to provide the Javascript, and vice versa. Thanks for the help guys!

___________________

Tutorials - Gallery - Forum - Coming Soon!

Last edited by Cloud-, August 1st, 2003 10:13 AM (Edited 1 times)

If you use percentages this wouldn't be an issue. Regardless, you'd need JS to find out the resolution. Remember, most browsers show pages smaller than the actual resolution!

Re: Javascript and/or CSS help needed.

Quote:

Originally posted by Cloud-
Like... say I made pages for the two most common resolutions: 800x600 and 1024x768. I want the script to determine which of those resolutions the user has and then redirect them to the page that was specified for that resolution.

Or better yet... Find out the resolution and reference a different stylesheet based upon it. For example:

Code:

<script type = "text/javascript">
var h = screen.height.toString();

//They're running 800x600.
//
if(h == "600")
{
document.writeln("<link rel = 'stylesheet' type = 'text/css' href = '800x600.css' />");
}

//They're running 1024x768.
if(h == "768")
{
document.writeln("<link rel = 'stylesheet' type = 'text/css' href = '1024x768.css' />");
}

//They're not running either so use another stylesheet.
//
if( h != "600" && h != "768")
{
document.writeln("<link rel = 'stylesheet' type = 'text/css' href = 'other.css' />");
}
</script>

That should help you out, good luck.

___________________

Last edited by fredmv, August 2nd, 2003 05:55 AM (Edited 1 times)

Dan.. I do use percentages. Didn't look at the code, huh? Nice work. Before you give your "expertise" you might want to know what the hell you're talking about. =/

___________________

Tutorials - Gallery - Forum - Coming Soon!

You see my post man? Or is that not what you're looking for.

___________________

Yeah.. sorry about that, fred. It just kind of annoyed me that he didn't even look at what I showed.

Anyway.. I think that'll do 'er. It's just a temporary solution though. What I'd really like to do is be able to figure out why it's screwing up on me. I mean, it's all percentages so I don't see why I'm getting the gaps in there.

CSS Guru needed.

But thank you fred. Keep me afloat for a while.

___________________

Tutorials - Gallery - Forum - Coming Soon!

Alright man, no problem.

___________________

I didn't finish reading your post. I'm on Mozilla Firebird and don't see your problem. Might also help declaring a doctype and charset.

That's going to help with formatting problems? The doctype and charset?

By the way, those thicker lines that I'm talking about aren't much, they're just 1 pixel extra in certain spots. It's not a HUGE deal, but it looks tacky.

___________________

Tutorials - Gallery - Forum - Coming Soon!

Okay. You should merge the <p> and <div> ids together on the nav and make it a class, then add it to a <p>. If you have problems, margin:0px; should help. After that's done, use id="someclass" and make someclass be border-left: none; and your double pixel issue should be solved.