CSS - Trying To Figure Out 'lightbox' And Thumbnail Scroller ?

Hi,
I'm breaking my head over IE6.0: adjusted this page and it now works at least in IE 5.0, 5.5, Opera, Firefox but in IE6.0 the damn thing doesn't align vertical in a right way and the menu doesn't scroll with the page anymore. Anybody who can tell me what's upsetting IE6.0? I don't have a clue no more.
Cheers,
Ziggy

I'm really hung up on what class alignments I need to alter in order to get my thumbnails to align properly. If my thumbnails span the width of my page width, they are justified, but if they do not, they align left. The forum isn't letting me post a link to an example, but my website is at www dot the312hole dot com. The latest post shows an example of what I'm talking about with the thumbnails at the bottom of the post.

Any advice on how to get them to always space evenly? Preferably with a predefined margin and padding that spaces them equally regardless of how many are in each row?

Thanks for the help!

I'm trying to set a link style for thumbnail images I have on my site but am having difficulty getting the style to take over the a { } and a:hover { } styles. Here is an example of the styles I have set;

Code:

a {
color: #005D93;
text-decoration: none;
}

a:hover {
color: #990000;
text-decoration: underline;
}

#thumb {
position: relative;    
float: left;
padding-left: 21px;
padding-bottom: 10px;
}

#thumb img {
width: 96px;
height: 145px;
}

#thumb img a {
text-decoration: none;
border: 2px;
border-color: #F5F6F7;
border-style: solid;
}

#thumb img a:hover {
border-color: #990000;
}

An example image tag is as follow;

Code:

<div id="thumb"><a href="details/page2.html" onclick="NewWindow(this.href,'name','640','460','yes');return false;"><img src="Images/2714.jpg"></a></div>

With the above mentioned, the thumbnail is surround by the a color of #005D93 and not the border color I expected. An example can be seen here - Example. I know it must be something fairly obvious I'm missing. Any help would be greatly appreciated.

Regards,
JT

See the current solution here ...

What I would like to do is dump the table, so that the images and captions wrap at screen width.

I have been experimenting with CSS and <span>s but as yet haven't managed a similar formating.

And ideas/solutions/pointers would be greatly appreciated

Chris Jones
URL

...of this funkiness.

So hi, folks - I'm a longtime listener, first-time caller. I'm currently building my first CSS/XHTML storefront coded entirely by hand, and have run into some difficulties with--you guessed it--Internet Explorer.

The issue is with the Nav Bar - IE seems to want to squash the items up, which makes the bar much taller than it should be.

Here's a screenshot of what it looks like in IE6 (or what it DID look like, before I added the AlphaImageLoader filter. Now it looks the same, only the logo is transparent). Here's the same page in Safari.

And here's a look at the dev site, in case you want to see it in action yourselves. (We're not live yet, so please don't make an order, thanks.)

Ignoring all the other major funkiness (I know the code is a little sloppy, in places - I'm just trying to work through the problems, one at a time, before I go about doing some cleaning), any idea what the deal might be with the Nav Bar?

I should mention the following: The Nav items are in an un-ordered list, and floated to line them up. There's some funkiness with IDs - each item in the list is meant to have a distinct ID (was gonna use this for a CSS-based 'you are here' functionality, but got hasty and entered the same ID for all the items. Plan to fix it). As it is, it isn't currently to standards...but I don't think that's what's causing the funky layout.
Here's the HTML:
Code:

<!-- MainNav -->
<ul id="MainNav">
<li id="Nav-Shirts"><a href="/store/mens/">Shirts</a></li>
<li id="Nav-Shirts"><a href="#">Info</a></li>
<li id="Nav-Shirts"><a href="#">About Us</a></li>
<li id="Nav-Shirts"><a href="#">Affiliates</a></li>
<li id="Nav-Shirts"><a href="#">E-List</a></li>
</ul>

Here's the CSS:
Code:

#MainNav {
    margin:         25px 50px 0px 0px;
    padding:        0px 0px 0px 287px;
    background:     #b9b18d;
    list-style:     none;
    width:          450px;
    float:          left;
    display:        inline;
}

#MainNav li {
    float:          left;
    display:        inline;
}

#MainNav a {
    padding:            0px 9px;
    line-height:        20px;
    font-size:          12px;
    letter-spacing:     -.1em;
    text-decoration:    none;
    text-transform:     uppercase;
    font-weight:        lighter;
    color:              #695030;
    float:              left;
    display:            inline;
}

#MainNav a:visited {
    color:              #695030;
}

#MainNav a:hover {
    color:  #ebe9c2;
}

I originally thought it was the double-margin float bug...but as you can see, I added 'display:inline' to all of the CSS elements, and it still doesn't solve the problem. I also thought about giving them each a defined width, as I vaguely remember some IE bug that prefers that sort of thing...but I'm not sure that that would help with this problem, given the way the items are squashed.

Anyway, I'm more than a little lost at this point, because I can't figure out which bug in particular is causing this problem (almost all of the IE positioning bugs I've read up on sound like they could be the problem...but since I have no way of seeing what the margins look like in IE (there's no Xyle Scope on Windows, and trial-and-erroring it seems like it would kill me), I can't figure out exactly what's happening to cause it). If I knew the problem I could find a solution. But...alas.

Any thoughts? Anyone dealt with this sort of thing before? Could it be the three-pixel text jog bug? What am I missing?

(And if you do look at it and know exactly what the problem is, how would you recommend going about fixing it?)

Thanks for reading!

L

So, I've been making a lot of sites, and keep trying to learn and use divs as you all always recommend. But I always encounter problems, so revert back to tables. Well I'm working on a site using divs right now, but for some reason, it's not working properly.

In IE6, there's a gray border between the logo and banner.
In FF, the left navigation menu is on the right.

Here's the CSS I'm using:
Code:

.spacer {width:150px; 
				 float:left;
				 background-color:yellow;
				 height:35px;
				 }
						 
body {background-color:#cccccc;
		  margin:0;
			font-family:Times New Roman;
			}
			
.width780 {width:780px;
					 }			
			
.sitelinks div{background-color:green;
					 		 float:left;					 
					 		 padding:5px;
							 width:93px;
							 border-right:2px solid black;
							 border-bottom:2px solid black;
							 border-top:2px solid black;							 
							 }
					 
.sitelinks a{display:block;
					   background-color:green;
						 text-align:center;
						 text-decoration:none;
						 color:black;
						 }
						 
.sitelinks a:hover{background-color:orange;
									 }						 					 

.leftnav {width:150px; 
				  height:500px; 
					background-color:yellow; 
				  }
										 									
.logo {background-color:yellow;
				 width:150px;
				 height:150px;
				 float:left;
				 }				
				 
.banner {background-color:pink;
				 height:150px;
				 }
				 						
.content {background-color:white;
					vertical-align:top;
					padding:5px;
				  }					

Here's the html:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="realty.css" />
</head>

<body>
<div class="width780">
  <div class="logo">
		  Logo
	</div>
	<div class="banner">
		Banner
	</div>
</div>
<div class="width780">
  <div class="spacer">
	  &nbsp;
	</div>
<!-- Navigational Bar -->	
  <div class="sitelinks">
	  <div>
		  <a href="#">Cat 1</a>
	  </div>
	  <div>
	  	<a href="#">Cat 2</a>
	  </div>
	  <div>
	    <a href="#">Cat 3</a>
	  </div>
	  <div>
	    <a href="#">Cat 4</a>
	  </div>
	  <div>
	    <a href="#">Cat 5</a>
	  </div>
	  <div>
	    <a href="#">Cat 6</a>
	  </div>
  </div>
</div>
<!-- End Navigational Bar -->
<!-- Left Navigation -->
<div style="float:none;">
<div class="leftnav" style="float:left;">
Left menu
</div>
<!-- End Left Navigation -->
<!-- Content Box -->
<div style="width:600px;">
	<div class="content" style="height:500px;">
<!-- Content goes in here -->
Content Goes here
<!-- End Content -->			
	</div>
</div>	
</div>
<!-- End Content Box -->

Here's the site: 805chesapeake.com
(Ignore the colors.. i know they're ugly)

Hey guys, I'm new (So I hope this will be posted in the right place).
I'm working on this website for a friend, but for the life of me I can't figure out how to get this main table's bg color to either have a lower opacity, or display a png that's been modified with a lower opacity. I've tried everything. Whenever I put in a white background and use the lower opacity (for both EI and Firefox) it fades both the background and the text. When I try to put in the png, nothing shows up at all.
I know HTML a lot better than I do CSS, but I used a template this time around so that the side navigation bar would actually work (And the template uses CSS).

The website's link is: (52ndstreetjewelry . com)

The current background in there is a light pink, but it's not that great looking. Anyone have any ideas?
(If that made any sense at all?)

I'm pretty sure I'm missing something fairly obvious here, but for the life of me I can't find it. Could someone please point out why Lightbox won't work for me and I get new page loads instead?

http://mercurial.pri.ee/scy/pics.html

Can anyone help me get this to work in IE? Here's the link to the page I'm working on, which I'll be moving from my site to the proper domain soon.

...
(annoyed - can't post urls as a new user, which makes this forum limiting - is there a way around this? How about if I try "#" = "." and "|" = "/"
http:||krisbunda#com|bb|db-series-planters#html
)
...


Here's the "thumbnails" CSS I'm using:

CSS Code:
Original - CSS Code .gallerycontainer{ position: relative; text-align:right; margin-left: 0em auto; margin-right: 0em auto; /*Add a height attribute and set to largest image's height to prevent overlaying*/ } .thumbnail img{ border: .25em solid #FFF; margin: .5em .5em .5em .5em; height: 8.5em; width: 8.5em; } .thumbnail:active{ background-color: transparent; } .thumbnail:active img{ border: 0em solid #3F0; } .thumbnail span{ /*CSS for enlarged image*/ position: absolute; background-color: #999; padding: 0em; left: -250em; border: .25em dashed gray; visibility: hidden; color: #FFF; text-decoration: none; text-align:center; height:auto; width:auto; } .thumbnail span img{ /*CSS for enlarged image*/ border-width: .25em; padding: 0em; height:auto; width:auto; } .thumbnail:active span{ /*CSS for enlarged image*/ visibility: visible; top: 0em; left: 1.5em; /*position where enlarged image should offset horizontally */ z-index: 5; height:auto; width:auto; }

  

  


 .gallerycontainer{


 position: relative;


 text-align:right;


 margin-left: 0em auto;


 margin-right: 0em auto;


 /*Add a height attribute and set to largest image's height to prevent overlaying*/


 }


  


 .thumbnail img{


 border: .25em solid #FFF;


 margin: .5em .5em .5em .5em;


 height: 8.5em;


 width: 8.5em;


 }


 .thumbnail:active{


 background-color: transparent;


 }


 .thumbnail:active img{


 border: 0em solid #3F0;


 }


 .thumbnail span{ /*CSS for enlarged image*/


 position: absolute;


 background-color: #999;


 padding: 0em;


 left: -250em;


 border: .25em dashed gray;


 visibility: hidden;


 color: #FFF;


 text-decoration: none;


 text-align:center;


 height:auto;


 width:auto;


 }


  


 .thumbnail span img{ /*CSS for enlarged image*/


 border-width: .25em;


 padding: 0em;


 height:auto;


 width:auto;


  


 }


  


 .thumbnail:active span{ /*CSS for enlarged image*/


 visibility: visible;


 top: 0em;


 left: 1.5em; /*position where enlarged image should offset horizontally */


 z-index: 5;


 height:auto;


 width:auto;


 }


  

And here's the HTML:

(well, the html will have to be viewed in the browser because of the "No URLs" rule)

Thanks in advance for any help.

- For some reason the content to the right of the vertical line does not all stay to the right, and the border does not go all the way down.

A quick glance at the code will demonstrate what I'm trying to accomplish. Please help, I do not understand what I'm doing wrong here.

CSS: Code:

/*
Please define the rules of CSS. What takes precedence, inheritance and how specific to define something + shortcuts.
Define what a parent ellement is.
Define float property.
*/

div.container
{
width: 100%;
margin: 0px;
padding: 0px;
border: 1px solid black;
border-top: 0px;
}

h1
{
font-family: verdana;
font-size: 1.5em;
font-style: bold;
margin: 0px;
padding: 0px;
}

h2
{
font-family: verdana;
font-size: 1.1em;
font-style: bold;
margin: 0px;
padding: 0px;
}

h2.center
{
text-align: center;
}

h3
{
font-family: verdana;
font-size: .8em;
font-style: bold;
}

div.header, div.footer
{
background-color: black;
color: white;
}

div.left_aircraft_index
{
width:25%;
float: left;
margin: 0;
padding: 0;
border-right: 1px solid black;
}

div.search_content
{
width: 75%;
color: black;
font-style: normal;
font-family: verdana;
margin: 0;
padding: 0;
}

HTML:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Aircraft Database v1.0 - A complete database of known aircraft.</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="container">
<div class="header"><h1>UASO :: Aircraft Database</h1></div>
<div class="left_aircraft_index"><h2 class="center">Aircraft Index</h2></div>
<div class="search_content"><h2 class="center">Search For Aircraft</h2>
<p>
<form action="searchDatabase.php" method="post">
The search interface will go here.
</form>
</p>
</div>
</div>
</body>
</html> 

I'm wracking my brain, and I can't figure out why my content (which was fine when I just had it sitting in my empty graphical box) is now spaced half-way down the page. My work in progress is at "www *dot* deepwaterchurch *dot* com *slash* next"

I'd really appreciate any help. Thanks so much in advance.

P.S. The code is below (inline CSS for ease of fiddling):

Code:

<!--
*,html{margin:0;padding:0;}
body{
	background:black url("images/water.jpg") repeat-x top left;
	color:white;
	font:12pt verdana,arial,helvetica,geneva,sans-serif;
	width:100%;
	height:auto;
}
#container {
	width: 960px;
	position:relative;
	margin:0 auto;
	/*overflow:hidden;*/
}
#logo {
	position: absolute;
	background-image: url(images/logo.jpg);
	right: 52px;
	top: 15px;
	width: 250px;
	height: 131px;
}
#top {
	background:url(images/top.png) no-repeat;  
	width: 956px; 
	height: 646px; 
}
#content-container {
	background:url(images/boxmiddlerepeatable.png); 
	position:relative;
	width:852px;
	overflow:hidden;
	margin:0 auto;
	margin-top:-631px;
	top:0px;
	left:-2px;
}
#content{
position:relative;
margin:10px auto 0;
width:805px;
left:10px;
top:0;
min-height:646px;
}
#bottom {
	background-image:url(images/boxbottom.png); 
	position:relative;
	height:12px;
	width:851px;
	top:5px;
}
a:link {
	color: #3f7ba3;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color:#3f7ba3;
}
a:hover {
	text-decoration: none;
	color: #FFCC33;
}
a:active {
	text-decoration: none;
}
h1 {
	font-size: 9px;
	text-transform: uppercase;
	color:#666666;
}
h2 { 
	font-size: 13px;
	font-weight:900;
	color:#FFFFFF;
}
h3 {
	color:#999999;
	font-weight:400;
	font-size:12px;
}
#logo {
	position: absolute;
	background-image: url(images/logo.jpg);
	right: 52px;
	top: 15px;
	width: 250px;
	height: 131px;
}
.clear{clear:both;height:15px;
}
#navtabs {
	width:462px;
	height:60px;
	position:absolute;
	top:-10px;
	left:5px;
}
#navtabs ul {
	display: inline;
	margin: 0;
	padding: 0;
}
#navtabs li {
	display: inline;
	list-style: none;
	margin: 0;
	padding: 0;
	float: left;
    position: relative;
    width: auto;
}
#navtabs li ul {
	position: absolute;
	width: 10em;
	left: -999em;
}
#navtabs li:hover ul {
	left: auto;
}
#navtabs li:hover ul, #navtabs li.sfhover ul {
	left: auto;
}
li.whoweare a {
	background-color:#000000;
	background: url(images/navigation/whoweare.jpg); 
	display: block;
	width: 77px;
	height: 67px;
	text-indent: -999999px;
	overflow: hidden;
}
li.whoweare a:hover {
background-color:#000001;
background: url(images/navigation/whoweare.jpg);
background-position:
-77px 0;
}
li.whatwedo a {
	background-color:#000000;
	background: url(images/navigation/whatwedo.jpg); 
	display: block;
	width: 77px;
	height: 67px;
	text-indent: -999999px;
	overflow: hidden;
}
li.whatwedo a:hover {
background-color:#000001;
background: url(images/navigation/whatwedo.jpg);
background-position:
-77px 0;
}
li.whatwedodown a {
background-color:#000002;
	background: url(images/navigation/whatwedo.jpg); 
	display: block;
	width: 77px;
	height: 67px;
	text-indent: -999999px;
	overflow: hidden;
	background-position:-77px 0;
}
li.beforeyoucome a {
background-color:#000000;
	background: url(images/navigation/beforeyoucome.jpg); 
	display: block;
	width: 77px;
	height: 67px;
	text-indent: -999999px;
	overflow: hidden;
}
li.beforeyoucome a:hover {
background-color:#000001;
background: url(images/navigation/beforeyoucome.jpg);
background-position:
-77px 0;
}
li.beforeyoucomedown a {
background-color:#000002;
	background: url(images/navigation/beforeyoucome.jpg); 
	display: block;
	width: 77px;
	height: 67px;
	text-indent: -999999px;
	overflow: hidden;
	background-position:-77px 0;
}
li.onceyourehere a {
background-color:#000000;
	background: url(images/navigation/onceyourehere.jpg); 
	display: block;
	width: 77px;
	height: 67px;
	text-indent: -999999px;
	overflow: hidden;
}
li.onceyourehere a:hover {
background-color:#000001;
background: url(images/navigation/onceyourehere.jpg);
background-position:
-77px 0;
}
li.onceyoureheredown a {
background-color:#000002;
	background: url(images/navigation/onceyourehere.jpg); 
	display: block;
	width: 77px;
	height: 67px;
	text-indent: -999999px;
	overflow: hidden;
	background-position:-77px 0;
}
li.faq a {
background-color:#000000;
	background: url(images/navigation/faq.jpg); 
	display: block;
	width: 77px;
	height: 67px;
	text-indent: -999999px;
	overflow: hidden;
}
li.faq a:hover {
background-color:#000001;
background: url(images/navigation/faq.jpg);
background-position:
-77px 0;
}
li.faqdown a {
background-color:#000002;
	background: url(images/navigation/faq.jpg); 
	display: block;
	width: 77px;
	height: 67px;
	text-indent: -999999px;
	overflow: hidden;
	background-position:-77px 0;
}
li.contactus a {
background-color:#000000;
	background: url(images/navigation/contactus.jpg); 
	display: block;
	width: 77px;
	height: 67px;
	text-indent: -999999px;
	overflow: hidden;
}
li.contactus a:hover {
background-color:#000001;
background: url(images/navigation/contactus.jpg);
background-position:
-77px 0;
}
li.contactusdown a {
background-color:#000002;
	background: url(images/navigation/contactus.jpg); 
	display: block;
	width: 77px;
	height: 67px;
	text-indent: -999999px;
	overflow: hidden;
	background-position:-77px 0;
}

-->
</style>
	
</head>
<body>
<div id="container">
<div id="top"></div><!--end top-->
<div id="content-container">
<div id="content"><!--START ENTERING CONTENT HERE-->
<div id="logo"></div>
 <div id="navtabs">
		<ul id ="nav">
	<li class="whoweare"><a href="whoweare">WHO WE ARE</a></li>
	<li class="whatwedo"><a href="whatwedo">WHAT WE DO</a></li>
	<li class="beforeyoucome"><a href="beforeyoucome">BEFORE YOU COME</a></li>
	<li class="onceyourehere"><a href="onceyourehere">ONCE YOU'RE HERE</a></li>
	<li class="faq"><a href="faq">FAQ</a></li>
	<li class="contactus"><a href="contactus">CONTACT US</a></li>	</ul></div><!--end navigation-->
	<div id="wrap">

    <div id="controller" class="hidden">
        <span class="jFlowControl">Current Series</span>
        <span class="jFlowControl">We're Social</span>
        <span class="jFlowControl">Compassion</span>
    </div>
    
    <div id="prevNext" class="hidden">
        <img src="images/prev.png" alt="Previous Tab" class="jFlowPrev" align="left"/>
        <img src="images/next.png" alt="Next Tab" class="jFlowNext" align="right"/>
    </div>
    <div id="slides">
        <div><img class="cushycms" src="images/currentseries.jpg" height="289" alt="Current Series Graphic" width="462" /><p class="slideshow">Current Series</p></div>
        <div><a href="social"><img src="images/weresocial.jpg" alt="We're Social" usemap="#social" border="0"></a>
		<map name="social"><area shape="rect" coords="21,86,232,258" href="http://www.facebook.com/group.php?gid=8981012794&ref=ts" />
		<area shape="rect" coords="252,97,426,271" href="http://twitter.com/deepwaterchurch" /></map>
		</div>
        <div><img src="images/luv.jpg" alt="show a little luv" class="cushycms"/></div>
    </div>
    </div>
<div id="overlay" style="z-index:3; position:relative; top:-209px; left:10px; width:462px; height:289px;"><img src="images/slideoverlay.png" /></div>
<!-- end slideshow -->
<div id="tagline" style="position:relative; top:-390px; left:492px;"><img src="images/tagline.jpg" /></div>
CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />


</div><!--end content-->
<div id="bottom"></div><!--end bottom-->	
</div><!--end content-container-->
<div class="clear"></div><!--end clearing div-->
</div><!--end container-->

I am working on a registration page...

I am some what new but I am confused b/c this is the source page for the registration but there is no form per se in the html that I can see (or even any content). I am supposed to do some PHP but I'm not sure how to have the form interact with PHP when again there is no form...

(unfortunately, I don't think if I can actually show the page since it's not published yet but it has all the fields of form and again this is the source page behind it)...

can someone clue me in on this???


<title>Registration</title>
<link rel="stylesheet" type="text/css" href="shared.css" />

<link rel="stylesheet" type="text/css" href="registration.css" />
</head>
<body>
<div id="background">
<div id="shape1"></div>
<div id="header"></div>
<div id="ds"></div>
<div id="home"><a href="index.html" ></a></div>
<div id="pby"></div>
<div id="id303"><a href="id303.html" ></a></div>
<div id="layer3"></div>
<div id="layer22"></div>
<div id="layer1C"></div>
<div id="regOnce"></div>
<div id="register"></div>
<div id="ty"></div>
<div id="x"></div>
<div id="p"></div>
<div id="register"><a href="register.html" ></a></div>
<div id="tour"><a href="tour.html"></a></div>
<div id="sched"><a href="sched.html"> </a></div>
<div id="yz"><a href="yz.html" ></a></div>
<div id="sponsors"><a href="sponsors.html"></a></div>
<div id="follow"><a href="follow.html" ></a></div>
<div id="layer5"></div>


Thank you!

I used to make websites. LONG time ago, and I can't seem to recall a lot of what I used to know. So my problem is... I can not get the two div layers on the left and right moved up to meet the middle div. I've tried pretty much everything I can think of, Reordered them, but then the middle div goes too low or the first div goes wonky. Can anyone please help me figure this out?




Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Untitled Document</title> <style type="text/css"> <!-- body { background-color:black; background: #000000; background-image:url background-position:center; background-repeat:repeat-y; } body, table, div { font-family:Verdana; font-size:8pt; } a:link {color:white; font-size:6pt; font-weight:bold; text-transform:uppercase; decoration:none;} a:visited {color:white; font-size:6pt; font-weight:bold; text-transform:uppercase;} a:hover {color:#8a99c2; font-size:6pt; font-weight:bold; text-transform:uppercase;} a:active {color:white; font-size:6pt; font-weight:bold; text-transform:uppercase;} scrollbar {visibility:collapse !important; } browser { overflow: hidden !important; } .indent { margin-right: 2%; margin-left: 2% } div {position:relative;} * { margin: 0; padding: 0; } p { margin: 1em 0; } #wrapper { width: 800px; margin: 0 auto; } #header { height: 100px; z-index: 2; } #right-col { border:1px; background:#29334d; font-size:6pt; text-transform:uppercase; border-style:solid; border-color:black; width: 154px; float:right; z-index: 2; margin-right:16px; } #left-col { width: 154px; z-index: 4; left:6px; border:1px; background:#29334d; font-size:6pt; text-transform:uppercase; border-style:solid; border-color:black; } #content { margin-left: 179px; z-index:3; top:204px; width:430px; } #footer { height: 78px; clear: both; z-index: 2; top:152px; padding: 5px; width:350px; } --> </style> </head> <body> <div id="wrapper"> <div id="header"><map name="map1"> <area href="" alt="Contacts" title="Contacts" shape="RECT" coords="13,233,67,249"> <area href="http://rumormillnewsradio.com/guestbios/insidersloungefree/ByDate.html" alt="Products" title="Products" shape="RECT" coords="82,233,135,249"> <area href="hl" alt="New!" title="New!" shape="RECT" coords="150,233,203,249"> </map> <img height="538" src="" width="790" usemap="#map1" style="z-index:1; border="0"></div> <div id="footer"> <iframe width="100%" height="100%" name="about" src="news.html" frameborder=0 ALLOWTRANSPARENCY="true"></iframe></div> <div id="content"><table bgcolor="#3b4974" width="100%"><tr><td> </div><p><font color="#8a99c2"> <p class="indent"> Your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. </p></font> </td></tr></table></div> <div id="right-col"><font color="#59637d"> <br> <b>&nbsp;&nbsp;Shows last week:</b><br><br> <iframe width="100%" height="100%" name="Lastweekshow" src="" frameborder=0 ALLOWTRANSPARENCY="true"></iframe></div> <div id="left-col"> <br> <br> <b>&nbsp; &nbsp; &nbsp; &nbsp;<a href="http://">Link</a></b> <br><center>.....................................</center><br> <br> <br> <b>&nbsp; &nbsp; &nbsp; &nbsp;<a href="http://">Link</a></b> <br><center>.....................................</center><br> <br> <br> <b>&nbsp; &nbsp; &nbsp; &nbsp;<a href="http://">Link</a></b> <br><center>.....................................</center><br> <br> <br> <b>&nbsp; &nbsp; &nbsp; &nbsp;<a href="http://">Link</a></b> <br><center>.....................................</center><br> <br> <br> <b>&nbsp; &nbsp; &nbsp; &nbsp;<a href="http://">Link</a></b> <br><center>.....................................</center><br> <br> <br> <b>&nbsp; &nbsp; &nbsp; &nbsp;<a href="http://">Link</a></b> <br><center>.....................................</center><br> <br> <br> <b>&nbsp; &nbsp; &nbsp; &nbsp;<a href="http://">Link</a></b> <br><center>.....................................</center><br> </font></div> </div> </body> </html>

Hi,

Please take a look at:
[Popup Page]
http://67.18.220.222/~duoboots/2005/popup_calfwidth.php

That's actually a popup page from the main website. An example 'main' page is:

[Main Page]
http://67.18.220.222/~duoboots/2005/latest_news.php

There's a big difference on Firefox with the <ul> list - on the Main page - the list displays fine, and the bullets are small. No problems.

However, on the popup page (Firefox) - the bullets are bigger. (This isnt the only problem with the list but I have simplified this page to demonstrate the above)

My question is... why? There's no UL / LI definitions in my stylesheet, except for the left vertical menu. The main / popup pages have their own similar CSS 'white boxes' which include padding, and the text is displayed in these white boxes.

But for some reason, the UL list on the popup page gets messed up on Firefox.....

(The stylesheet can be located at:
http://67.18.220.222/~duoboots/2005/styles/style.css

any ideas?
Thanks a lot!