Same code works differently in Firefox and IE..Help!

**Katieb** · 01-07-2011 07:32 AM

Hi, i am quite new to css and Jquery but i think this is a css issue.

I have created a simple image slideshow with a fade effect using JQuery. The functions works fine in both IE and Firefox however, as soon as i added the function it made the clickable links on the entire page un-uasable JUST in Firefox (works fine on IE).

I played around with this as i thought it had something to do with the layering of the element on the page, so i added a Z-index: -20 to this slideshow styles:

ul.slideshow li {
position:absolute;
left:0;
right:0;
z-index:-20; float: right;

}

This fixed half of the issue as now the content below the header and navigation is all clickable but the navigation still isn't. I can see this is due to the style related to the content below to navigation to have a z-index: -10

div.content {
position:relative;
top: 10px;
left: 10px;
float: left;
display: inline;
margin-top: 2px;
margin-right: 10px;
padding: 0px 0px 0px 0px;
z-index: -10;
}

So i played around with the navigation styles and the z-index but it didn't work. I have been working on this one issue for the past 3 days and is now driving me nuts! I am not sure that z-index is the right answer for this issue.

I would be very grateful if someone could help me out, wherther they have come across the same problem or know a fix to make firefox work the same as IE. Thanks

Heres the link to the page: http://code-thesalon.com/newsite/contact.html

Here are the css styles linked with this page:

(navigation styles)

#navlist { position:relative; float:left; background-color:#FBDBDF; margin: 10px 10px 10px 10px; z-index: -25; }

#navlist .container { padding: 0px 0px 0px; background-color:#FBDBDF; }

#navlist .nudge {position:relative; left: -40px; z-index: 0}

#navlist ul { float:left; width:auto; z-index: 0 }

#navlist li {
postion: relative;
display: inline;
float:left;
list-style-type: none;
padding-left: 15px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color:#FBDBDF;
font-size:70%;
z-index: 0;
}

#navlist li a:link { color:#333; z-index: 0 }
#navlist li a:hover { color:#FFF; z-index: 0 }

(slideshow styles)

.MainImgSizeSlide {

width: 40%;

float: right;
z-index: 0;
padding: 30px 25px 0px 0px;

ul.slideshow {
list-style:none;

margin:0;
padding:0;
z-index:-20;

}

ul.slideshow li {
position:absolute;
left:0;
right:0;
z-index:-20;
float: right;

}

ul.slideshow li.show {

}

Here is my html:

<!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' xml:lang='en' lang='en'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>

<title>Code The Salon</title>

<link rel='stylesheet' href='style.css' type='text/css' />

<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="js/slide_functions.js"></script>

<style type="text/css"></style>

</head>

<body>

<div class="wrapper">

<div class="border">

<div id='navlist'><a href="http://www.code-thesalon.com/newsite/"><img src='http://www.code-thesalon.com/newsite/logo.jpg' class="LogoImgSize" alt="Code The Salon Logo"/></a>

<ul class="nudge">
<li class='section-title'><a href="http://code-thesalon.com/newsite/aboutus.html">ABOUT US</a></li>
<li class='section-title'><a href="http://code-thesalon.com/newsite/book.html">BOOK WITH US</a></li>
<li class='section-title'><a href="http://code-thesalon.com/newsite/contact.html">CONTACT US</a></li>
<li class='section-title'><a href="http://code-thesalon.com/newsite/prices.html">PRICES</a></li>
<li class='section-title'><a href="http://code-thesalon.com/newsite/gallery.html">GALLERY</a></li>
<li class='section-title'><a href="http://code-thesalon.com/newsite/products.html">PRODUCTS</a></li>
<li class='section-title'><a href="http://code-thesalon.com/newsite/promotions.html">PROMOTIONS</a></li>
</ul>

</div>

</div>



<div style="overflow: auto; width: 520px; height:337px; padding-right:8px; " class="content">
<h2>CONTACTS</h2>

</div>


<div id="orig">
<img src="images/book.jpg" title="CODE The Salon Image 1" class="MainImgSize" alt="CODE The Salon Image 1"/>
</div>

<ul class="slideshow">
<li class="show">
<img src="images/book.jpg" class="MainImgSizeSlide" alt="CODE The Salon Image 1"/>
</li>
<li><img src="images/book2.jpg" class="MainImgSizeSlide" alt="CODE The Salon Image 2"/>
</li>
<li><img src="images/book3.jpg" class="MainImgSizeSlide" alt="CODE The Salon Image 3"/>
</li>
</ul>


<div class="copywright">
<h3>Copyright © Code The Salon</h3></div>
</div>

</body>
</html>

**Katieb** · 01-07-2011 11:24 AM

Resolved Issue

Thread: Same code works differently in Firefox and IE..Help!

Thread Tools

Display

Same code works differently in Firefox and IE..Help!

Resolved Issue

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions