PDA

View Full Version : jQuery Data Table Troubles in Firefox & Chrome


WebGirly3
08-22-2011, 07:58 PM
I am using the jQuery Data table widget but I am running into issues with Firefox & Chrome.

In IE, the table looks great:
http://www.gulfwebservices.com/clients/ccr/furnished/pelican/index.htm l (http://www.gulfwebservices.com/clients/ccr/furnished/pelican/index.html)

In Firefox & Chrome, the scrollbars are locked and you cannot scroll vertically or horizontally. Also, when you hover over each Table Row, the row does not highlight or change colors like it should and does in IE.

I'm not a CSS pro but I assume it has something to do with my OuterWrappers because it appears to work fine in Firefox & Chrome when it is not in my Dreamweaver template:

http://www.gulfwebservices.com/clients/ccr/furnished/pelican/jQueryTab les.html (http://www.gulfwebservices.com/clients/ccr/furnished/pelican/jQueryTables.html)

Here is the CSS code for my Wrappers. PLEASE HELP! I'm going crazy!

#outerWrapperForListings {
position:relative;
width: 960px;
background-color: #f5f3ef;
overflow: visible;
margin-right: auto;
margin-left: auto;
-moz-box-shadow: 0px 0px 20px #000;
-webkit-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
z-index: -1;
height: 100%;
margin-bottom: auto;
}

#contentWrapper {
width: 100%;
overflow: auto;
}

#contentForListings {
float: left;
width: auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin-top: 10px;
margin-right: 20px;
margin-bottom: 15px;
margin-left: 20px;
overflow: visible;
}

domedia
08-22-2011, 08:55 PM
The quick fix is to remove the z-index on 'outerWrapperForListings'

(Do you understand all that CSS?)

WebGirly3
08-22-2011, 09:03 PM
Removing the z-index does work!

However, the reason I have to list a z-index is because I have a shadow around my outerwrapper that I need to appear underneath the navigation bar. Without the z-index, it puts the shadow over my nav bar and messes up the design.

ALSO, I have a mysterious shadow line near the bottom of the page. I've taken out every piece of code & CSS one at a time and I still can't get rid of it. I'm still learning so I really appreciate your help!

Any suggestions on fixing these 2 problems?