CSS - Ie Shifting Image Gallery

i am trying to use this very simple image gallery from cssplay stu nichols site
"A permanent image click gallery with 'previous' / 'next' buttons"
so i change the css to suit my images and create my own prev|next buttons but when i check it in a browser - i'm working with dreamweaver cs5 [trial] it dosn't show me the buttons
i'm very new to css - and am bashing my head over this issue

would appreciate any help - not sure if i need to put in my altered source code so i will
Code:
CSS

#gallery {
	width:500px;
	height:500px;
	margin:0 auto;
	position:relative;
	font-family:verdana, arial, sans-serif;
}
#gallery a.previous {display:block; height:40px; width:32px; background:url(click/previous.gif); position:absolute; left:0; top:560px;}
#gallery a.next {display:block; height:40px; width:32px; background:url(click/next.gif); position:absolute; right:0; top:560px;}
#gallery a b {display:none;}
#gallery #fullsize {
	position:absolute;
	left:0;
	top:0;
	height:550px;
	width:500px;
	overflow:hidden;
	text-align:center;
}
#gallery #fullsize div {width:500px; height:600px; padding-top:10px; position:relative;}
#gallery #fullsize div img {clear:both; display:block; margin:0 auto; border:0;}
#gallery #fullsize div h3 {padding:10px 0 0 0; margin:0; font-size:8px;}
#gallery #fullsize div p {padding:5px 0; margin:0; font-size:10px; line-height:14px;}

Code:
XHTML

<div id="gallery">
	<div id="fullsize">
		<div id="pic1">
			<img src="images/greyday/gd1.jpg" alt="grey day1" />
			<a class="previous" href="#pic10"><b>Previous</b></a><a class="next" href="#pic2"><b>Next</b></a>
		  <h3>1 | 10</h3>			
	  </div>
		<div id="pic2">
			<img src="images/greyday/gd2.jpg" alt="grey day2" />
		  <a class="previous" href="#pic1"><b>Previous</b></a><a class="next" href="#pic3"><b>Next</b></a>
		  <h3>2 | 10</h3>
	  </div>
		<div id="pic3">
			<img src="images/greyday/gd3.jpg" alt="grey day3" />
		  <a class="previous" href="#pic2"><b>Previous</b></a><a class="next" href="#pic4"><b>Next</b></a>
		  <h3>3 | 10</h3>
	  </div>
		<div id="pic4">
			<img src="images/greyday/gd4.jpg" alt="grey day4" />
		  <a class="previous" href="#pic3"><b>Previous</b></a><a class="next" href="#pic5"><b>Next</b></a>
		  <h3>4 | 10</h3>
	  </div>
		<div id="pic5">
			<img src="images/greyday/gd5.jpg" alt="grey day5" />
		  <a class="previous" href="#pic4"><b>Previous</b></a><a class="next" href="#pic6"><b>Next</b></a>
		  <h3>5 |10</h3>
	  </div>
		<div id="pic6">
			<img src="images/greyday/gd6.jpg" alt="grey day6" />
		  <a class="previous" href="#pic5"><b>Previous</b></a><a class="next" href="#pic7"><b>Next</b></a>
		  <h3>6 | 10</h3>
	  </div>
		<div id="pic7">
			<img src="images/greyday/gd7.jpg" alt="grey day7" />
		  <a class="previous" href="#pic6"><b>Previous</b></a><a class="next" href="#pic8"><b>Next</b></a>
		  <h3>7 | 10</h3>
	  </div>
		<div id="pic8">
			<img src="images/greyday/gd8.jpg" alt="grey day8" />
		  <a class="previous" href="#pic7"><b>Previous</b></a><a class="next" href="#pic9"><b>Next</b></a>
		  <h3>8 | 10</h3>
	  </div>
		<div id="pic9">
			<img src="images/greyday/gd9.jpg" alt="grey day9" />
		  <a class="previous" href="#pic8"><b>Previous</b></a><a class="next" href="#pic10"><b>Next</b></a>
		  <h3>9 | 10</h3>
	  </div>
		<div id="pic10">
			<img src="images/greyday/gd10.jpg" alt="grey day10" />
		  <a class="previous" href="#pic9"><b>Previous</b></a><a class="next" href="#pic1"><b>Next</b></a>
		  <h3>10 | 10</h3>
	  </div>
	</div>
</div>

i really would appreciate some help with this - thank you in advance

Hi guys,

I never wanna do anything simply... *sigh*

Need some help again!

I downloaded SPGM to use as a photo gallery. Love it. It's even valid XHTML 1.0 Strict!

Ok, I've implemented it here . Instead of using the native CSS file that came with the script, I copied it all into my own CSS file. Well, not ALL of it, but most. That CSS file is here . Towards the bottom, you'll see the SPGM CSS section.

Now I've already started adapting the script and layout to my site, but as you can imagine, it's not too easy, especially for an only moderately-knowledgeable CSS user like me.

First thing I want to do it...

1. I want to move the entire table (the main table containing the 4 folder icons and text) over to the left so the left side of the table lines up only a pixel or two right of the line between the green and tan on the left. I can shift the whole table by adding margin-left: -something px; to TABLE.table-wrapper, but the folder icons actually disappear as if they go behind something! HUH?

I think moving this to the left more will solve the problem in IE of the right nav links getting pushed down... Could be wrong, but it's ok in FF.

If someone could start me off with this I'd very much appreciate it.

Thanks, guys!

Chris

Hello.

I am using a Gallery which I bought from ThemeForest. I am having trouble aligning the image to center.

Check the second image, It's aligned to left by default.

I tried through many css ways which isn't helping at all.

Demo:
digloud[dot]com/user_data/techkid/phoenix_gallery/

Any help is highly appreciated.

I'm working on the navigation the navigation for an image gallery I'm working on, but have run into some problems. It works fine in Firefox and Safari, but doesn't work in IE6, IE7, and Opera, and I can't for the life of me figure out why.

The previous link and next link appears when they hover over the right and left side of the picture. I think it might be a problem with z-index, and the two link pictures getting stuck under the image in the image gallery, but I'm not sure.

Any and all help is appreciated.

This is the code for the gallery, minus the two navigation pictures and the image for the gallery.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://gmpg.org/xfn/11">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Example</title>

 <style type="text/css" media="screen">
 
	#test {
	margin:0;
	padding:0;
	position:relative;
	top:0;
	left:0;
	width:800px;
	height:640px;
	background-color: #000;
	
	}

	#nav{
	position:absolute;
	left:0;
	top:0;
	z-index:999;
	width:100%;
	height:100%;

	}

	#Next,#Prev{
	position:absolute;
	display:block;
	width:50%;
	height:100%;
	outline:none;
	top:0;
	
	}

	#Next{right:0;}
	#Prev{left:0}

	#Next:hover{
	background:transparent url(next.gif) no-repeat 100% 30%;
	}

	#Prev:hover{
	background:transparent url(prev.gif) no-repeat 0% 30%;
	}

	#image{
	display:block;
	}


    
</style>

</head>
<body>

	<div id="test">

		<div id="nav">

        		<a href="#" id="Prev"></a>

        		<a href="#" id="Next"></a>	

      	</div>
		<img id="image" src="grass.jpg" alt="image" />
	</div>


</body>
</html>

hi there, i am new to css and creating a gallery. What i want to do is create a medium size pop up when you rollover the thumbnail and have a full size image displayed when the thumbnail is clicked.

I have to use lightbox javascript to display full size images, which works ok, but the problem has come trying to get both this and the roll over to work.

At the moment i have both elements working, although it produces two thumbnail images.

How can i use this code whilst making only one thumbnail appear?


<a href="images/cramps/full size/c1.jpg" rel="lightbox" title="Here is the image caption">
<img src="images/cramps/thumbnails/ct1.jpg" border="0" />
</a>

<a class="thumbnail" href="#thumb">
<img src="images/cramps/thumbnails/ct1.jpg" border="0" />
<span><img src="images/cramps/medium size/cm1.jpg" /><br />
</span></a>

sorry if this is vague, i will answer any questions the best i can, all help appreciated!

Hello,

I've almost got this css image gallery done for my website, but I can't seem to get the main image to be positioned where the gallery thumbnails are. The main image seems to be only position-able from the top of the page. I'm trying to get the image to line up with the top of the first thumbnail image, the thumbnails being arranged in a column to the left of the main image.

The page where you can view this is:

WWW OLDFOUNDRY DOT COM - I'm a new user, and am not allowed to post links yet. You'll see the gallery in the new product called "Bugatti Test" That link is on the left hand side of the page.

And I'll place the code in the next post,

Thank you for any ideas,

Jason

HI Guys,

I'm trying to create some CSS to contain an image gallery.

A query runs which grabs all the images for a certain item/article.

I then output the query as a loop, and it populates a div with images.

It works pretty good, but if one image is bigger than the others, it throws off the alignment.

How can I force each row of photos to be horizontally even?

You can see the output results here http://details.at/photo_test.cfm




<!--- Query --->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>

<style>

#maindiv {
padding:0 0 1em 2em;
width:550px;
float:left;
}

div.img
{
margin:3px;
height:auto;
width:auto;
float:left;
text-align:center;
}

</style>

</head>

<body>

<DIV id="maindiv">

<H2>Photos</H2>

<CFOUTPUT QUERY="photo_file_info">
<div class="img">
<a href="http://google.com" target=new>
<img src="http://details.at/imagehost/classifieds/aircraft/139/s_#photo_file#">
</a>
</div>
</CFOUTPUT>

</DIV>

</body>
</html>

hello!

i'm freakin here with this problem so if anyone could solve...

i have 2 divs, first one is floated left and it contains picture 100px wide, (width:100px, padding-left:20px)
other one has margine of 140px - so they are inline.

here's the problem, FF does it exactly as i wan't but IE seems to push left div ri shift right one for few pixels to the right (it's hard for me to explain so i'll include 2 jpegs)

please if anyone has idea....
tomek

I am working on a website combining css/tables.
The #links cell expands taller than its content in ie.
This causes all content in the cells below to shift down.
It renders fine in all other browsers that I have tried.
The site validates fine on w3.

Here is a link with some screenshots of my problem.
screenshots
Sorry its in sluggish tripod. It was the easiest way
for me to post it online quickly.


Please Help!

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
           "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en"><head>
<title>Stick Boy Bread Company</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="text/drop_down.js"></script>
<link href="sbbc.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
body {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	background-color: #EEE074;
	padding: 0px;
	margin-top: 0px;
	margin-right: 0%;
	margin-bottom: 0px;
	margin-left: 0%;
	background-image: url(images/gradient.gif);
}
#mainTable {
	width: 740px;
	height: auto;
	border: thin solid #000000;
	line-height: 1.5em;
	margin: 25px 0 25px 35px;
	background-image:  url(images/gradient.gif);
	background-repeat: repeat-x;
	padding-left: 0%;
}
 .rt {
	border-left: medium double #000000;
	vertical-align: top;
	font-size: 100%;
	padding: 0px;
	margin: 0px;
	background-color: #FFFFFF;
	background-image:  url(images/gradient4.gif);
 }
.rt1 {	border-left: medium double #000000;
	vertical-align: top;
	font-size: 100%;
	padding: 0px;
	margin: 0px;
	background-color: #FFFFFF;
	background-image:  url(images/gradient4.gif);
}
-->
</style>
</head>
<body> 
<table border="0" cellpadding="0" cellspacing="0" id="mainTable">
  <tr class="top">
    <td height="90" class="topheader" colspan="3"><a href="index_final.htm"><img src="images/StickBoy_OvalLogo.gif" alt="Stick Boy Bread Company Bakery Boone" width="225" height="90" border="0"></a></td>
  </tr>
  <tr>
    <td width="120" id="links"><ul id="nav">
        <li><a href="text/history.htm">History</a></li>
        <li><a href="text/products.htm">Products</a>
		<ul> 
       	 	<li><a href="text/breads.htm">Artisan Breads</a></li> 
        	<li><a href="text/pastries.htm">Breakfast Pastries & Sweet Breads</a></li> 
        	<li><a href="text/soups.htm">Foccacia, Soups & Take-Out Catering</a></li> 
        	<li><a href="text/coffee.htm">Drip Coffee, Espresso Bar & Smoothies</a></li>
			<li><a href="text/desserts.htm">Desserts & Cakes</a></li>  
			<li><a href="text/wedding.htm">Wedding Cakes</a></li> 
        </ul></li>
        <li><a href="text/letter.htm">Letter from Carson</a></li>
        <li><a href="text/contact.htm">Contact</a></li>
    </ul></td>
    <td width="380" rowspan="2" class="rt"><h2>Welcome to Stick Boy<br>
      Bread Company!</h2>
        <p><strong> If you are looking for a "real" bakery, you are in the right place.  Welcome to Stick Boy Bread Company!</strong></p>
		
<script language="JavaScript" type="text/javascript">
		<!--
/*
Random Image
*/

function random_imglink(){
  var myimages=new Array()
  myimages[1]="images/breadfront.jpg"
  myimages[2]="images/french.jpg"

  var ry=Math.floor(Math.random()*myimages.length)

  if (ry==0)
     ry=1
     document.write('<img alt="natural breads" class="icenter" src="'+myimages[ry]+'" border=0>')
}

  random_imglink()
//-->
</script>
        <p>text here</p>         
        <p>&nbsp;</p>
        <p>text here</p>
	</td>
    <td width="220" rowspan="2" class="rt"><img src="images/sticknews3.gif" alt="Stick Boy Bakery News" width="257" height="151">
       <p>text here <a href="text/news.htm">more</a></p>
<img src="images/ovenonlyandcover_edit.gif" alt="Stone Deck Oven" width="220" height="261" class="icenter">
	<br />
	<p>Download our latest newsletter <a href="text/news_winter06.pdf">here</a>.</p>
	<p>&nbsp;</p>
	</td>
  </tr>
  <tr> 
    <td rowspan="2" align="center" class="lft"><img src="images/soupoday.gif" alt="Soup of the Day" width="140" height="188" align="top" class="clear"><br>
	
	
	<!-- the text below is edited from the external file called soup.js -->
	  <script language="JavaScript" type="text/javascript" src="text/soup.js">
	  </script>
	<hr>
    <a href="text/news_winter06.pdf"><img src="images/news_winter06.gif" alt="Download Newsletter" border="0" class="clear"></a>
	</td>
  </tr>
  <tr>
    <td colspan="2" class="btm">    <br />
    <img src="images/keylime.jpg" alt="Key Lime Pie" width="252" height="154" class="fllftclear">
	<p class="fresh"><strong>Key Lime Pie</strong></p>
	  <p>text here</p>
    </td>
  </tr>
</table>
</body>
</html>

Here is the css that seems relevant to my problem.

Code:

.lft {
	background-image: none;
	padding: 0;
	margin: 0;
	background-color: #FFFFCC;
	border-left-width: thin;
	border-left-style: none;
	border-left-color: #000000;
	vertical-align: top;
	clear: left;
	}
#links {
	background-image: none;
	padding: 0;
	margin: 0;
	width: 140px;
	display: block;
	float: left;
	vertical-align: top;
	clear: both;
}
#links ul
{
	margin: 0;
	padding: 0;
	list-style:none;
	width: 100%;
}
#links ul li
{
	margin: 0px;
	padding: 0px;
	float: left;
	width: 100%;
	position: relative;
}
#links li ul {
	position: absolute;
	left: 139px;
	top: 0;
	display: none;
	}
#links ul li a {
	display: block;
	text-decoration: none;
	color: #FFFFFF;
	background:#003366;
	padding: 10px;
	border-bottom: 1px solid #ccc;
	border-right: none;
	border-left: none;
	font-size: 12px;
	font-weight: bold;
	height: 100%
	}
#links ul li a:hover {
	display: block;
	text-decoration: none;
	color: #FFFFFF;
	background:#cc6633;
	padding: 10px;
	border-bottom: 1px solid #ccc;
	border-right: none;
	border-left: none;
	text-align: left;
	font-size: 12px;
	font-weight: bold;
	}
	
	/* Fix IE. Hide from IE Mac \*/
* html #links ul li { float: left; height: 1%; }
* html #links ul li a { height: 1%; }
/* End */

#links li:hover ul, #links li.over ul
{
	display: block;
	text-align: left; }
HR {
	height:0;
	width:100%;
	margin: 0;
	text-align: center;
	vertical-align: top;
	padding: 0;
	border-top: 0 none;
	border-right: 0 none;
	border-bottom: medium double #000000;
	border-left: 0 none;
   }
 .rt {
	border-left: medium double #000000;
	vertical-align: top;
	font-size: 100%;
	padding: 0;
	margin: 0;
	background-color: #FFCC66;
	background-image: url(images/gradient4.gif);
 }

Hi,

New to CSS and all. Trying to work on a web site. I used a Wordpress theme and modified it to my liking. I am having a small issue that I would really appreciate help on.

marinhome.inwire .net/lessons

The page uses tabs. When you click from one tab to another, the tab content is shifting down. Can somebody please let me know what the problem is?

Thanks,
Gaurav

So I have a completely weird problem that I can't explain at all and was hoping to see if someone else has any clue.

In Firefox every page displays as it should unless the scroll bar is activated (ie. the content goes beyond the height of the available window). As soon as the scroll bar is activated the two divs at the top shift roughly two pixels to the right. I know it's not the bottom shifting to the left.

Now the weird part. The CSS that manages placement of anything at all does not change between any of the pages, the only thing that changes between pages is a background image of a div, a div that isn't moving, and the images are all the same size. In addition I have tested this in Opera, IE 6.0, IE 7.0, Netscape Navigator, Safari, and Firefox, and the problem only occurs in Firefox, that's 3.0 specifically.

Anyone have any ideas?

Hi

Site: http://louis-dev.co.za.www35.cpt2.host-h.net/

This is a mambo site. I have a strange bug in Firefox. On some pages the top menu shifts . But the funny thing is when I refresh that page it goes back to normal and when I refresh it again it shifts. Anybody have a clue what is causing it?

Louis

The page looks fine in firefox, but in any other browser, the header bar -- the gallerybox div -- shifts up by 4px. Any idea why this might be happening?

Thanks in advance

The page HTML:
Code:

<!DOCTYPE html>
<html>
<head>
    <title>Home :: Secure Technologies International</title>
	<meta name="description" content="Secure Technologies International (STI) is a leading Canadian IT and Information Security solutions company, representing industry leading hardware, software and network security manufacturers; addressing a wide array of requirements." />
    <meta name="keywords" content="secure,technologies,international,inc,home,training,firewall,mcafee,professional,services" />
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<link rel="stylesheet" href="css/themes/SecureTech/main.css" />
	<link rel="stylesheet" href="css/themes/SecureTech/menu.css" />

	<link href='http://fonts.googleapis.com/css?family=Arimo' rel='stylesheet' type='text/css'>
	<script src="include/jquery.js" type="text/javascript"></script>
	<script src="include/s3Slider.js" type="text/javascript"></script> 
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">	
	<!-- IE HACK FOR SLIDESHOW CENTERING -->
	<!--[if IE]>
	<style type="text/css">
		#image img
		{
			left: 50%;
			margin-left: -250px;
		}
	</style>
	<![endif]-->
	<script type="text/javascript" src="include/prototype.js"></script>
	<script type="text/javascript" src="include/functions.js"></script>

	<script type="text/javascript">
	( function($) {
	$(document).ready(function() {
   $('#s3slider').s3Slider({
      timeOut: 4000
   });
}); 
} ) ( jQuery );
</script>
	
</head>
<body onload="SetOrigin()">
	<div class="contactbox">
		Reach us by phone toll free at 1-866-417-3579<br/>
		Or by email at sales@securetechnologies.ca&nbsp;&nbsp;&nbsp;
	</div>
	<div class="container">

		
		<ul class="menu">
			<div class="search">
				<form method="get" action="searchres.php">
					<input type="hidden" name="referpage" value="home" />
					<input name="hsearch" value="" onclick="OnSearchClick();" onblur="OnSearchUnclick();" style="margin-top:2px; position: relative; top: -9px; width: 230px;" />
					<input type="image" src="images/search-icon.png" height="28px" />&nbsp;
				</form>
			</div>
			<li><a href="?page=home" class="active"><span>Home</span></a></li>

			<li><a href="?page=news" ><span>News</span></a></li>
			<li><a href="?page=partners" ><span>Partners</span></a></li>
			<li><a href="?page=support" ><span>Support</span></a></li>
			<li><a href="?page=services" ><span>Professional Services</span></a></li>
			<li><a href="?page=training" ><span>Training</span></a></li>
			<li><a href="?page=contact" ><span>Contact Us</span></a></li>

			<li><a href="?page=about" ><span>About Us</span></a></li>
		</ul>		
		
		
		<div class="ContentMenu">
			<a href="http://www.mcafee.com/us/mcafee-labs/threat-intelligence.aspx">McAfee Threat Intelligence</a> | <a href="http://www.trustedsource.org/en/threats/malware_top">Top Malware Today</a>			<br/><br/>
			<div class="ContentMenuSUB">
				<b>Next Training Week Starts:</b> 18th of July, 2011<br/>

				<b>Next Upcoming Event:</b> McAfee and STI  Firewall User Group - 13th of July, 2011<br/>
			</div>
		</div><div class="gallerybox">Home</div>
			
				<div class="content">
			<div class="heading"></div>
						<div class="newsimg" style="background: url(images/thumbnails/th_Dominican-Republic-Flag.png);"></div>
			<div class="newsitem">

				<b>Kevin De Snayer returns from heroic venture to the Dominican Republic</b> posted on the 2011-06-14 at 15:43:20<br/>
				&nbsp;Source: <i><a href="http://www.youtube.com/watch?v=oHg5SJYRHA0">www.youtube.com</a></i><br/>
				<div class="eventdesc"></div>
			</div><br/>
				<div class="newsimg" style="background: url(images/thumbnails/apple_logo.thumbnail.jpg);"></div>
			<div class="newsitem">

				<b>Top 10 iPhone Passcodes Revealed</b> posted on the 2011-06-14 at 17:30:35<br/>
				&nbsp;Source: <i><a href="http://www.itnews.com/smartphones/33511/top-10-iphone-passcodes-revealed">www.itnews.com</a></i><br/>
				<div class="eventdesc"><p>
	There are 10,000 possible passcodes for an iPhone, yet 15 percent of users have one of the 10 most popular codes, according to app developer <a href="http://amitay.us/index.php">Daniel Amitay</a>, whose <a href="http://amitay.us/projects/big%20brother.php">Big Brother Camera Security app</a> records anonymous passcode data from users.</p>

</div>
			</div><br/>
	<div id="s3slider">
   <ul id="s3sliderContent">
      <li class="s3sliderImage">
          <img src="images/home/1.png" />
          <span>"A next-generation firewall that restores control and protection to your network"<br/> -McAfee Inc.</span>
      </li>

	  <li class="s3sliderImage">
          <img src="images/home/2.png" />
          <span>STI Training: Certified McAfee Instructors available for Advanced administration and Support training.</span>
      </li>
	  <li class="s3sliderImage">
          <img src="images/home/3.png" />
          <span>STI MASP Program: Certified McAfee Support Specialists waiting to help you 24/7.</span>
      </li>

      <div class="clear s3sliderImage"></div>
   </ul>
</div> 			
		</div>
	</div>
	<div class="footer">
		<a href="?page=privacy">Our Privacy Policy</a> | Copyright 2011, Secure Technologies International Inc. &nbsp;<div class="footicons"><a href="http://twitter.com/SecTechOttawa"><img src="images/twitter.png" style="border:none;" alt="twitter" /></a>&nbsp;<a href="news.rss.php"><img src="images/rss.png" style="border:none;" alt="rss" /></a></div>
	</div>

</body>
</html>

The page CSS:
Code:

html, body
{
	min-height: 100%;
	background: #000000 url(../../../images/grad.jpg) top left repeat-x;
	
	font-family: 'Arimo', arial, serif;
}

a:link 
{
	color:#3399FF;
	text-decoration:none;
} 

a:visited
{
	color:#3399FF;
	text-decoration:none;
} 

a:hover 
{
	color:#0066FF;
	text-decoration:none;
}

a:active
{
	color:#99CCFF;
	text-decoration:none;
} 

.container
{
	border-left: 1px solid black;
	border-right: 1px solid black;
	margin-left: auto;
	margin-right: auto;
	
	width: 964px;
	
	min-height: 100%;
	
	background: #FFF;
	
	/*-moz-box-shadow: -0px -0px 50px #000;
	-webkit-box-shadow: -0px -0px 50px #000;
	box-shadow: -0px -0px 50px #000;*/
	
	margin-bottom: 26px;

}

.spamcube
{
	height: 25px;
	background: url(../../../images/spam_red.jpg);
	color: white;
	font-size: 15px;
}

.spamcubevalid
{
	height: 25px;
	background: url(../../../images/spam_green.jpg);
	color: white;
	font-size: 15px;
}

.productswidget
{
	width: 100%;
	min-height: 30px;
	margin-left: auto;
	margin-right: auto;
}

.logomenu
{
	display:block;
	vertical-align:middle;
	background: #DDD;
	margin-top: -5px;
	margin-left: -5px;
	margin-right: -5px;
	border-bottom: 1px black solid;
	height: 50px;
}

.logomenu li
{
	padding:0;
	margin:0;
	margin-right: 5px;
	margin-left: 5px;
	list-style:none; 
	display:inline;
	vertical-align:middle;
}

.logomenu li a.active
{
	padding-top: 10px;
	
	position:relative;
	top: 10px;
}

.productcontainer
{
	width: 900px;
	margin: 25px;
}

.productcontainer .bart
{
	margin: 0px;
	width: 900px;
}

.productcontainer .bar
{
	margin: 0px;
	width: 900px;
	margin-left: 15px;
}


.productcontainer .bar a .more
{
	color: #BBB;
	text-align: center;
}



.productcontainer table
{
	width: 900px;
	margin: 0px;
	border: none;
}

.trainingform
{
	width: 700px;
	margin-left: auto;
	margin-right: auto;
	background: #DDD;
	min-height: 100px;
	margin-top: 30px;
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 30px;
}

.trainingform input
{
	width: 500px;
	margin-right: 20px;
}

.trainingform .submitb
{
	width: 100px;
	margin-left: 600px;
}

.trainingform textarea
{
	width: 500px;
	height: 100px;
	margin-right: 20px;
}

.ttop
{
	position: relative;
	top: -87px;
	display: inline;
}

.error
{
	color: #FF0000;
}

.ContentMenu
{
	margin-top: 5px;
	text-align: center;
	margin-bottom: 15px;
	margin-left: 5px;
	
	position: relative;
	top: 45px;
}
.ContentMenuSUB
{
	height: 35px;
	margin-top: 5px;
	text-align: left;
}

a
{
	text-decoration: none;
}

.heading
{
	font-size: 25px;
	color: #000066;
}

.content
{
	min-height: 250px;
	margin: 5px;
}

.search
{
	position: relative;
	top: 1px;
	float: right;
}

.footer
{
	margin-left: auto;
	margin-right: auto;
	width: 966px;
	background: #000;
	color: #FFF;
	
	margin-top: -26px;
	height: 27px;
	
	text-align: right;
}

.footicons
{
	margin-top: -17px;
	margin-left: 5px;
	text-align: left;
}

.headerLogo
{
	width: 964px;
	
	padding: 7px;
	
	margin-left: auto;
	margin-right: auto;
}

.gallerybox
{
	width: 1000px;
	height: 45px;
	border: 1px solid black;
	
	position:relative;
	left: -18px;
	top: -100px;
	
	background: #000;
	color: #FFF;
	
	font-size: 35px;
	text-align: center;
}

.gallerybox
{
	width: 1000px;
	height: 45px;
	border: 1px solid black;
	
	position:relative;
	left: -18px;
	top: -100px;
	
	background: #000;
	color: #FFF;
	
	font-size: 35px;
	text-align: center;
}

.gallerybox_nosub
{
	width: 1000px;
	height: 45px;
	border: 1px solid black;
	
	position:relative;
	left: -18px;
	top: -60px;
	
	background: #000;
	color: #FFF;
	
	font-size: 35px;
	text-align: center;
}

.gallerybox_static
{
	width: 1000px;
	height: 45px;
	border: 1px solid black;
	
	position:relative;
	left: -18px;
	top: -15px;
	
	background: #000;
	color: #FFF;
	
	font-size: 35px;
	text-align: center;
}

.contactbox
{
	margin-left: auto;
	margin-right: auto;
	
	width: 966px;
	
	text-align: right;
	background: url(../../../images/logomain.png) top left no-repeat;
	height: 80px;
	margin-top: 5px;
	
	font-size: 18px;
}

.gmaps
{
	width: 400px;
	height: 400px;
	margin-left: auto;
	margin-right: auto;
}

.closadiv
{
	width: 100%;
	overflow: hidden;
	height: 35px;
}

.partnername
{
	font-size: 22px;
	position: relative;
	top: 5px;
}

.newsitem
{
	width: 828px;
	position: relative;
	left: 132px;
}

.newsimg
{
	background: #CCCCCC;
	width: 128px;
	height: 128px;
	position: relative;
	top: 132px;
	margin-top: -132px;
	
	font-size: 18px;
	color: #999999;
}

#s3slider {
   width: 964px; /* important to be same as image width */
   height: 300px; /* important to be same as image height */
   position: relative; /* important */
   left: -5px;
   overflow: hidden; /* important */
   background: white;
}

#s3sliderContent {
   width: 964px; /* important to be same as image width */
   position: absolute; /* important */
   top: 0; /* important */
   margin-left: 0; /* important */
}

.s3sliderImage {
   float: left; /* important */
   position: relative; /* important */
	left: -40px;
	top: -16px;
   display: none; /* important */
}

.s3sliderImage span {
   position: absolute; /* important */
   left: 0;
   font: 15px/15px Arial, Helvetica, sans-serif;
   padding: 10px 13px;
   width: 964px;
   background-color: #000;
   filter: alpha(opacity=70); /* here you can set the opacity of box with text */
   -moz-opacity: 0.7; /* here you can set the opacity of box with text */
   -khtml-opacity: 0.7; /* here you can set the opacity of box with text */
   opacity: 0.7; /* here you can set the opacity of box with text */
   color: #fff;
   display: none; /* important */
   top: 0;

   /*
       if you put
       top: 0; -> the box with text will be shown at the top of the image
       if you put
       bottom: 0; -> the box with text will be shown at the bottom of the image
   */
}

.clear {
   clear: both;
} 

.eventdesc
{
	min-height: 128px;
	width: 100%;
}

.mintype
{
	font-size: 13px;
}

The Menu CSS:
Code:

/* 
Generated via www.cssmenubuilder.com 

Copyright (c) 2008-2010 www.cssmenubuilder.com

Permission is hereby granted, free of charge, to any person
obtaining a copy of this software and associated documentation
files (the "Software"), to deal in the Software without
restriction, including without limitation the rights to use,
copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the
Software is furnished to do so, subject to the following
conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
OTHER DEALINGS IN THE SOFTWARE.
*/

.menu
{
	margin:0 auto;	
	padding:0; 
	height:30px; 
	width:1000px; 
	display:block;
	background:url("../../../images/topMenuImages.png");
	border: 1px solid black;
	
	position:relative;
	left: -18px;
}

.menu li
{
	padding:0;
	margin:0;
	list-style:none; 
	display:inline;
}

.menu li a
{
	float:left; 
	padding-left:15px; 
	display:block; 
	color:rgb(255,255,255); 
	text-decoration:none; 
	font:12px Verdana, Arial, Helvetica, sans-serif; 
	cursor:pointer; 
	background:url("../../../images/topMenuImages.png") 0px -30px no-repeat; 
	outline:none;
}

.menu li a span
{
	line-height:30px; 
	float:left; 
	display:block;
	padding-right:15px;
	background:url("../../../images/topMenuImages.png") 100% -30px no-repeat;
}

.menu li a:hover
{
	background-position:0px -60px; 
	color:rgb(255,255,255);
}

.menu li a:hover span
{
	background-position:100% -60px;
}

.menu li a.active, .menu li a.active:hover
{
	line-height:30px; 
	font:12px Verdana, Arial, Helvetica, sans-serif; 
	background:url("../../../images/topMenuImages.png") 0px -90px no-repeat; 
	color:rgb(255,255,255);
}

.menu li a.active span, .menu li a.active:hover span
{
	background:url("../images/topMenuImages.png") 100% -90px no-repeat;
}

I'm working on my first website and have it working perfectly in everything but IE6 on a PC. When you hover over the menu and the drop down list shows, it shifts each item over, pushing the last down to the next row. I've tried adjusting numbers everywhere in the CSS, but no luck. Can anyone take a look and see if you notice anything?

The actual menu is at chadmartin.net/Townie09/

Thanks for any help!

Here's the CSS:
Code:

ul, ol, dl {
              position: relative;  }

			  
#menu ul {
list-style: none;
margin: 0;
padding:0;
width: 99px;
float: left;
font: bold 12px arial, helvetica, sans-serif; color: #FFF;
text-transform: uppercase; text-align: center;
border-right: 1px solid #abe1fa;
background:url(images/list_back.gif);
line-height: 30px;
}

#menu a {
width:99px;
height: 30px;
list-style: none;
margin: 0;
padding: 0;
font: bold 12px arial, helvetica, sans-serif; color: #fff;
text-transform: uppercase; text-align: center;
background:none;
line-height: 30px;
text-decoration: none;
}

#menu ul a:hover {
color: #eee;
}

#menu ul.last {width:100px; border:none; position:absolute; right: 800px; }

#menu {
width: 800px; height:30px;  /* set width of menu */
z-index: 1; position:absolute;
}

/* style, color and size links and headings to suit */
#menu ul ul a {
width: 100px;
font: x-small arial, helvetica, sans-serif;
display: block;
margin: 0;
padding: .6em 0;
text-decoration: none;
border-top border-left border-right: 1px solid #999;
background: #eee;
}

#menu ul ul li {
border-top: 1px solid #fff;
}


#menu ul ul a:hover {
color: #666;
background: #eee;
text-decoration: none;
}

#menu ul ul li a {color: #999999; text-size: 10px; background: #6c9c9c96; text-transform: none;}

#menu li {position: relative; top:0;}

div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}

<!--[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-family:Arial, Helvetica, sans-serif;
font-size: 100%;
}

#menu ul {
font: bold 12px arial, helvetica, sans-serif; color: #FFF;
text-transform: uppercase; text-align: center;
background:url(images/list_back.gif);
}

#menu a {
width: 99px;
border-top border-left border-right: 1px solid #FFF;
}

#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;}

#menu ul li:hover ul li{top: 0; width: 100%;}
#menu ul li:hover ul li a {height: 1%;}

#center_content {padding-top: 30px; }

.speakers {padding-top: 15px; }

</style>
<![endif]-->

http://www.chemicalbreakdown.net/Lost/

On the first page, there is no scroll bar. But if you click "next" and go to the second page, a scroll bar appears because the text is too long for the page. Is there some way I can use PHP to determine whether or not there's a scroll bar, and compensate by reducing the padding, so my layout won't shift towards the left?

Thanks for the help!