...

View Full Version : css / z-index / positioning?



shockff
02-26-2009, 09:56 PM
Newbie on the forums...

I have a problem with my site that I have been racking my brain over...
I've looked through the code, and can't find the variables that are causing this problem... or at least, I haven't been able to fix it yet.

So on my website I am using a pop-up script [for images] and a javascript drop down menu on the same page, and they are conflicting with each other in firefox2. I suspect that the CSS file has conflicting code that might have to do with the z-index or positioning of the elements [I say this because I haven't dealt with z-index variables before, so that may or may not be it].

If you look at the page below you can see the issue, the pop up image is supposed to be centered on the page, but it is being moved to the right... starting at the exact position of the right most point of the drop down menu... [in firefox 2, not the newer versions]

Check out this page for an example,
http://andrewhammerand.com/brief_revelations.html

More files for reference,
http://andrewhammerand.com/css/lightbox.css
http://andrewhammerand.com/js/

Thanks for any help!

student101
02-26-2009, 10:47 PM
CSS for imageContainer should be something like... margin:0 auto; makes it centre.. may need width as well.

You need to fix this: Duplications???

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
//-->
</script>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Andrew Hammerand - Photographer</title>
<link href="css/lightbox.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/menucontents.js"></script>
<script type="text/javascript" src="js/anylinkmenu.js">
/***********************************************
* AnyLink JS Drop Down Menu v2.0- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm for full source code
***********************************************/
</script>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Andrew Hammerand - Photographer</title>
<link href="css/lightbox.css" rel="stylesheet" type="text/css" />
</head>

How to make it work?
Start from scratch, build it for FIREFOX not IE (IE is not a browser)
Start with what you need the page to do then add all the other stuff
It may be a javascript / CSS issue OR vice versa (had this many times myself)

Cheers

shockff
02-27-2009, 01:44 AM
Thank you very much, works perfect!
http://andrewhammerand.com

The duplicated code was causing the issue...

student101
02-27-2009, 06:11 AM
Anytime :)

Cheers



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum