PDA

View Full Version : Conflicting CSS



drumbeat
Feb 19th, 2010, 01:55 AM
Hello,

I have a problem with the CSS of a drop-down menu stopping a lightbox working.
When I click an image to activate a lightbox, the screen shades out like normal but the picture appears at the bottom of the page behind the shade.

When I delete the CSS relating to the drop-down menu then the lightbox works fine.

Can anyone spot the conflicting code please?



<style>
#pcm{display:none;}
ul.pureCssMenu ul{display:none}
ul.pureCssMenu li:hover>ul{display:block}
ul.pureCssMenu ul{position: absolute;left:-1px;top:98%;}
ul.pureCssMenu ul ul{position: absolute;left:98%;top:-2px;}
ul.pureCssMenu,ul.pureCssMenu ul {
margin:0px;
list-style:none;
padding:0px 2px 2px 0px;
background-color:#fff;
background-repeat:repeat;
border-color:#808080;
border-width:1px;
border-style:solid;
}
ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {
display:block;
zoom:1;
height:21px;
float: left;
}
ul.pureCssMenu ul{
width:93.45px;
}
ul.pureCssMenu li{
display:block;
margin:2px 0px 0px 2px;
font-size:0px;
}
ul.pureCssMenu a:active, ul.pureCssMenu a:focus {
outline-style:none;
}
ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
display:block;
vertical-align:middle;
background-color:#FFFFFF;
border-width:1px;
border-color:#fff;
border-style:solid;
text-align:center;
text-decoration:none;
padding:2px 5px 5px 10px;
_padding-left:0;
font:11px Verdana;
color: #000;
text-decoration:none;
cursor:default;
}
ul.pureCssMenu span{
overflow:hidden;
}
ul.pureCssMenu li {
float:left;
}
ul.pureCssMenu ul li {
float:none;
}
ul.pureCssMenu ul a {
text-align:left;
white-space:nowrap;
}
ul.pureCssMenu li.sep{
text-align:left;
padding:0px;
line-height:0;
height:100%;
}
ul.pureCssMenu li.sep span{
float:none; padding-right:0;
width:3px;
height:100%;
display:inline-block;
background-color:#808080; background-image:none;}
ul.pureCssMenu ul li.sep span{
width:100%;
height:3px;
}
ul.pureCssMenu li:hover{
position:relative;
}
ul.pureCssMenu li:hover>a{
background-color:#DBF0F9;
border-color:#45ADE4;
border-style:solid;
font:11px Verdana;
color: #444;
text-decoration:none;
}
ul.pureCssMenu li a:hover{
position:relative;
background-color:#DBF0F9;
border-color:#45ADE4;
border-style:solid;
font:11px Verdana;
color: #444;
text-decoration:none;
}
ul.pureCssMenu li.dis a {
color: #557D4F !important;
}
ul.pureCssMenu img {border: none;float:left;_float:none;margin-right:2px;width:16px;
height:16px;
}
ul.pureCssMenu ul img {width:16px;
height:16px;
}
ul.pureCssMenu img.over{display:none}
ul.pureCssMenu li.dis a:hover img.over{display:none !important}
ul.pureCssMenu li.dis a:hover img.def {display:inline !important}
ul.pureCssMenu li:hover > a img.def {display:none}
ul.pureCssMenu li:hover > a img.over {display:inline}
ul.pureCssMenu a:hover img.over,ul.pureCssMenu a:hover ul img.def,ul.pureCssMenu a:hover a:hover img.over{display:inline}
ul.pureCssMenu a:hover img.def,ul.pureCssMenu a:hover ul img.over,ul.pureCssMenu a:hover a:hover img.def{display:none}
ul.pureCssMenu a:hover ul{display:block}
ul.pureCssMenu span{
display:block;
background-image:url(./images/arrv_white.gif);
background-position:right center;
background-repeat: no-repeat;
padding-right:9px;}
ul.pureCssMenu ul span{background-image:url(./images/arr_black.gif)}
ul.pureCssMenu ul li:hover > a span{ background-image:url(./images/arr_white.gif);}
ul.pureCssMenu table a:hover span{background-image:url(./images/arr_white.gif)}
ul.pureCssMenu li.pureCssMenui0 {
width:110px;
height:23px;
}
ul.pureCssMenu li a.pureCssMenui0{
height:100%;
background-image:url(./images/btn3.jpg);
border-width:0px;
font:bold 12px Verdana;
color:#fff;
}
ul.pureCssMenu li a.pureCssMenui0:hover{
background-image:url(./images/btn4.jpg);
font:bold 12px Verdana;
color:#eee;
}
ul.pureCssMenum0 {
background-color:transparent;
border-width:0px;
padding:0px 0px 0px 0px;
}
ul.pureCssMenum0>li>a {
padding:8px 10px 0px 10px;
}
ul.pureCssMenum0 a {
padding:8px 10px 0px 10px;
}
ul.pureCssMenum0 ul a {
padding:2px 5px 5px 10px;
}
ul.pureCssMenum0>li {
margin:0px 0px 0px 0px;
}
ul.pureCssMenum0 li {
margin:0px 0px 0px 0px;
}
ul.pureCssMenum0 li li {
margin:2px 0px 0px 2px;
}
</style>





/*****************lightbox*******************/
#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ /*outline: none;*/}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover ******/

display: block; }
/*#prevLink { left: 0; float: left; background: url(images/prevlabel.gif) left 15% no-repeat; }
#nextLink { right: 0; float: right; background: url(images/nextlabel.gif) right 15% no-repeat;} swaping this para for the one below makes the prev/next permanent*/

#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(images/prevlabel.gif) left 85% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(images/nextlabel.gif) right 85% no-repeat; }

#imageDataContainer{ font: 10px Helvetica, Verdana, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%;}

#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; /*outline: none;*/}

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

Excavator
Feb 19th, 2010, 02:07 AM
Hello drumbeat,
It would be much easier if you could link us to the test site. That would save having to rebuild your site locally to reproduce the problem.

drumbeat
Feb 19th, 2010, 03:56 PM
I've just uploaded it. CHeck it out, thanks.

http://www.timaldous.co.uk/photography.html

abduraooft
Feb 19th, 2010, 04:04 PM
Your CSS has some errors. You don't and shouldn't add <style> tags into the external CSS files. See the errors at http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.timaldous.co.uk%2Fphotography.html&profile=css21&usermedium=all&warning=1&lang=en

Fixing the errors in the markup is also a good idea to get the expected output, see the errors at http://validator.w3.org/check?uri=http://www.timaldous.co.uk/photography.html

Excavator
Feb 19th, 2010, 04:29 PM
Good morning drumbeat,
ab beat me to it, looks like fixing the errors in your CSS (http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fwww.timaldous.co.uk%2Fphotography.html) will make your lightbox work right.
It's understandable that you want to be able to comment your CSS/markup but, as you've seen, invalid comments can cause quite a few problems.

Comment on your css like this:
/*-------------------header----------------------*/

Comment on your markup (http://webtips.dan.info/comments.html) like this:
<!--end content-->

drumbeat
Feb 19th, 2010, 05:05 PM
Thanks a lot,

I'm still getting the hang of validating. The CSS sheet is now error free, although there are 17 warnings about using the same colours. The lightbox works again, thanks a lot.

I've got the photography page down to 4 errors now and will try and get rid of them soon.