SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Apr 2006
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    problem with CSS and positioning - help before I lose my mind!



    Hi,

    I am having a problem having div layer repositioning using FF or IE.

    I basically want to have the clicked link load a layer ontop of the old layer that was previously exposed.

    Here's the code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <style type="text/css">
    body {
    	margin: 0;
    	padding: 10px 0 30px 0px;
    	background-image:url(pisces1074.jpg);
    	background-repeat: repeat-y;
    	background-position: inherit;
    	overflow:auto;
    	margin-left: 0px;
    }
    
    ul#menu {
    width: 180px;
    list-style-type: none;
    border-top: solid 1px #b9a894;
    margin: 0;
    padding: 0;
    }
    
    ul#menu ol {
    display: none;
    text-align: right;
    list-style-type: none;
    margin: 0;
    padding: 5px;
    }
    
    ul#menu li, 
    ul#menu a {
    font-family: verdana, sans-serif;
    font-size: 11px;
    color: #785a3c;
    }
    
    ul#menu li {
    border-bottom: solid 1px #b9a894;
    line-height: 15px;
    }
    
    ul#menu ol li {
    border-bottom: none;
    }
    
    ul#menu ol li:before {
    content: "- ";
    }
    
    ul#menu a {
    text-decoration: none;
    outline: none;
    }
    
    ul#menu a:hover {
    color: #F9EBB9;
    }
    
    ul#menu a.active {
    color: #be5028;
    }
    
    #shImgViewer {
    	width:355px;
    	height:264px;
    	left: 473px;
    	top: 109px;
     }
     
    .style1 {font-size: xx-small}
    .style3 {font-size: x-small}
    .style5 {font-size: x-small; color: #999999; }
    body,td,th {
    	font-size: 100%;
    }
    h1 {
    	font-size: 2em;
    }
    h2 {
    	font-size: 1em;
    }
    /* Include id's for all your layers here, with commas between. 
    	 Set width, left and top */
    #lyr1, #lyr2, #lyr3 {visibility:hidden;}
    </style>
    
    <head>
    	
    	<title>PICTURES</title>
    
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<meta http-equiv="content-language" content="en" />
    
    	<meta name="description" lang="en" content="Lightbox JS is a simple, unobtrusive script used to overlay images on the current page. It's a snap to setup and works on all modern browsers." />
    	<meta name="keywords" content="pictures" />
    	
    	<link rel="shortcut icon" type="image/ico" href="/images/favicon.gif" />	
    	<link rel="stylesheet" href="screen.css" type="text/css" media="screen" />
    
    	<link rel="stylesheet" href="lightbox.css" type="text/css" media="screen" />
    	
    	
    
    </head>
    <body onload="swapLayers('lyr1')">
    <script type="text/javascript" src="lightbox.js"></script>
    <div id="wrapper">
      <div id="header">
    	<h1>Photos and More</h1>
      </div>
    
    <div class="section first">
    	<h2>Categories</h2>
    	<p>&nbsp;&nbsp;<img src="diamond.png" alt="" width="9" height="9" /> Picture Page &nbsp; - <a href="javascript://" onclick="swapLayers('lyr1'); return false"><i>Birth Day</i></a> / <a href="javascript://" onclick="swapLayers('lyr2'); return false"><i>More Pics</i></a>div>
    <!-- end .section -->
    <div id="lyr1" class="section clearfix">
    	<h2><center>Birth Day</center></h2>
    		<div class="thumbnail">
    		<a href="./dylana.jpg" rel="lightbox"><img src="./notebook.gif" width="36" height="45" alt="" /></a>		</div>
    </div>
    		
    <p></p>
    
    </div>
    <!-- end .clearfix -->
    <div id="lyr2" class="section clearfix">
    	<h2><center>More Pics</center></h2>
    		<div class="thumbnail">
    		<a href="./images/chopper.jpg" rel="lightbox"><img src="./images/thumbs/chopper_th.jpg" width="36" height="45" alt="" /></a>		</div>
    		<div class="thumbnail">
    		<a href="./images/swing.jpg" rel="lightbox"><img src="./images/thumbs/swing_th.jpg" width="36" height="45" alt="" /></a>		</div>
    screen.css
    Code:
    /* 
    	Lightbox Project page styles	
    	Author: Lokesh Dhakar http://www.huddletogether.com
    	Table of Contents:
    		layout
    		typography
    
    */
    
    
    
    
    /* layout
    ----------------------------------------------- */
    
    *{
    	margin: 0;
    	padding:0;
    	}
    
    body{
    	margin: 0;
    	padding: 10px 0 30px 0px;
    	background-image: url(pisces1074.jpg);
    	background-repeat: repeat-y;
    	background-position:inherit;
    	overflow:auto;
    	margin-left: 0px;
    	font: 76% Verdana, Helvetica, sans-serif;
    	color: #555;
    	background-color: #edede3;
    	text-align: center;		/* centers content in IE5.5 and earlier */
    	word-wrap: break-word;	/* breaks long words in IE, prevents float drops */
    	}
    
    #wrapper{
    	text-align: left;
    	background-color: #fff;
    	margin-top: 1.5em;
    	margin-right: 63%;
    	margin-bottom: 1.5em;
    	margin-left: 1%;
    	padding-top: 20px;
    	padding-right: 10px;
    	padding-bottom: 20px;
    	padding-left: 15px;
    	}
    
    #shImgViewer {
    	width:355px;
    	height:264px;
    	left: 473px;
    	top: 85px;
     }
    
    /* typography
    ----------------------------------------------- */
    
    p {	line-height: 1.5em;	margin-bottom: 1.0em; font-size: 0.9em;}
    p.lead { font-size: 1.0em; }
    
    ol, ul{ margin: 0.5em 0 1.2em 2em; }	
    ol, ul, dl { line-height: 1.5em; }
    ol li{ margin-bottom: 0.2em; }
    li{ font-size: 0.9em; }
    dl{ margin: 0.5em 0 1.2em 0; }
    dt{
    	font-size: 0.7em;
    	font-weight: bold; color: #777;
    	padding-top: 0.2em;
    	}
    dd{	
    	font-size: 0.9em;
    	margin-bottom: 0.8em;
    	padding-bottom: 0.7em;
    	border-bottom: 1px dotted #ddddd3;
    	}
    
    h1, h2, h3{ font-family: "Trebuchet MS",Verdana,Sans-Serif;}
    
    h1 { font-size: 2.0em; color: #dba748; padding-top: 0;}
    h1 a { color: #dba748; border: none; }
    h2 { font-size: 1.0em; color: #b19165; padding-top: 0.5em; text-transform: uppercase;}
    
    a{
    	font-weight: bold;
    	color: #8ab459;
    	text-decoration: none;
    }
    
    p a:hover { border-bottom: 1px dotted #8ab459; }
    a img{ 	border: none;}
    
    small{ font-size: 0.8em; }
    h1 small{ font-size: 0.5em; }
    
    pre{
    	display: block;
    	margin: 1.0em 0;
    	padding-left: 0.8em;
    	border-left: 1px solid #ccc;
    	background-color: #eee;
    	overflow: auto;
    	}
    
    code{ font-size: 11px; background-color: #eee;}
    pre code{ line-height: 1.1em;}
    kbd{
    	color: #555;
    	background-color: #ddd;
    	border-right: 1px solid #ccc;
    	border-bottom: 1px solid #ccc;
    	font-size: inherit;
    	font-family: inherit;
    	padding: 0 3px 2px 4px;
    	}
    
    
    /* misc
    ----------------------------------------------- */
    .section{
    	border-top: 1px solid #edede3;
    	padding-top: 1.0em;
    	z-index: 1;
    }
    
    .download{
    	background-color: #f3f3e6;
    	border: 1px solid #ddddd3; 
    	padding: 0.7em 1.5em; }
    .download li{
    	list-style: none;
    	padding: 0.3em 0;
    	border-bottom: 1px dotted #ddddd3;
    	}
    
    .thumbnail{
    	padding: 7px;
    	border: 1px solid #ddd;
    	float: left;
    	margin-right: 10px;
    	margin-bottom: 15px;
    	}	
    
    .caption{ font-size: 0.9em; padding-top: 0.2em ;	}
    
    
    
    /* clearing
    ----------------------------------------------- */
    
    .clearfix:after {
    	content: "."; 
    	display: block; 
    	height: 0; 
    	clear: both; 
    	visibility: hidden;
    	}
    
    * html>body .clearfix {
    	display: inline-block;
    	position:absolute;
    	top: 318px;
    	left: 25px;
    	margin-right:inherit;
    	margin-left:inherit;
    	}
    
    * html .clearfix {
    	/* Hides from IE-mac \*/
    	height: 1%;
    	/* End hide from IE-mac */
    	}
    The "lyr2" should appear (position:absolute; top: 318px; left: 25px but it is being displayed, when actived by the link, at the bottom of the box.

    -----------

    Thanks to anyone who can help me out on this... I spent over 6 hours last night and another 3 today trying different things to try to get this to work to no avail.... It'll probably be something obvious that I am not catching.

  2. #2
    SitePoint Addict
    Join Date
    May 2006
    Posts
    399
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My advice would to try and isolate the problem by dissecting your code to make problem solving simpler.

  3. #3
    SitePoint Member
    Join Date
    Apr 2006
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks..

    I'll go elsewhere.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •