stylesheet not working as it should

[babytux]

I currently have a site (not uploaded yet) where I have one stylesheet I'm using to define the navigation and header and footer and was wanting to use another stylesheet for the site's actual content.

However, while the first stylesheet is working the way it should, the second one I can't get to show up for me, nor the contet it's supposed to define, for that matter.

I decided to try and use this effect: http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/ for my content, but so far haven't been able to get it working for me. The "closest" I've come is either having the large size images appear sans stylesheet effect or else a problem (and I don't know how I even managed it) where it otherwise appeared as it should but it overlapped with the header file, which I'm assuming points to something with the positioning?

Currently, in both Firefox and Sea Monkey, the thumbnails are appearing beside all the larger versions of the images side by side whereas in Opera just the larger versions are appearing. The text for the various images are also showing up out of place. I haven't tested it in IE as it doesn't exist for the operating system I'm working in. Regardless, the format shouldn't be showing up that way on my page.

The first stylesheet defines three divs (header, content, and footer) as well as the look of the navigation (which is part of the header and contained within a separate PHP file). It relies on percentage versus pixels for placement. The second style sheet is basically what's in the link above, but with changes to some of the colors.

Is it possible I might have a stylesheet conflict somewhere? Or is it just a positioning problem? I'm fairly new to CSS, so I would appreciate any pointers as to what the problem might be and how to fix it.

Thanks in advance for any help or advice.:)

[babytux]

The code for my other stylesheet is this:


<style type="text/css">

a:link {font-weight:bold;color:#000000;text-decoration: none }
a:visited { text-decoration: none }
a:hover { text-decoration: none }
a:active { text-decoration: none }
body {background-color: #ffffff;}

body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
}

#header {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 30%;
overflow: hidden;
background-color: white;
color: black;
}

#gallery{
position: fixed;
top: 30%;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
background: #ffffff;
}

#footer{
position: fixed;
top:95%;
left: 0;
width: 100%;
height: 5%;
overflow: hidden;
background: #ffffff;
}

</style>


Whereas the other stylesheet I'm using appears like the one in the link I posted above--the only things I've changed is the colors used and that's it.

Again, I would greatly appreciate any help here.:)

edited to add:

Another question (which may be what's causing this problem?): If I have my main stylesheet set up so that it reads: <link rel="stylesheet" href="URL/nameofstylesheet.css" />, how do I add the one for the gallery section (which is, obviously, separate) so they both show up and do their respective jobs?

On a related note, how do I set up the option for alternate stylesheets (which I hope to offer for one section of my site) and for users to pick and choose between them?