Two CSS in one file conflict, Menu stopped working with Gallery script Options

[RobertP]

Hi there, I have used this menu on other pages and it works great but when I combined the CSS with the gallery script the menu stopped working.

I know that two CSS scripts can be combined in one file but one will cancel out the commands of the other.

On another site someone said to "use parent class." I am not at all that familiar with CSS to follow that brief bit of help.
Your help is much appreciated. Thanks

http://lilrooster.ca/Slicebox/index2.html

http://lilrooster.ca/Slicebox/css/slicebox.css

#roundbar-blue {
clear:left;
float:left;
width:100%;
background:#80C8FF url(images/roundbar-blue.gif) 0 25% repeat;
font-family:Trebuchet MS, Helvetica, sans-serif;
border-bottom:0px solid #49A9FF;
overflow:hidden;
}
#roundbar-blue ul {
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
text-align:center;
}
#roundbar-blue ul li {
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
right:50%;
}
#roundbar-blue ul li.first {
border-left:0px solid #49A9FF;
}
#roundbar-blue ul li.last {
border-right:0px solid #99D8FF;
}
#roundbar-blue ul li a {
display:block;
margin:0;
padding:.4em 3em;
color:#ccccff;
text-decoration:none;
border-left:0px solid #99D8FF;
border-right:0px solid #49A9FF;
line-height:1.3em;
}
#roundbar-blue ul li.active a {
background:url(images/roundbar-blue.gif) 0 75% repeat;
color:#ffff00;
font-weight:bold;
}
#roundbar-blue ul li a:hover {
background:url(images/roundbar-blue.gif) 0 75% repeat;
}
#roundbar-blue ul li a span {
display:block;
}


/* Slicebox Style */
.sb-slider {
margin: 10px auto;
position: relative;
overflow: hidden;
width: 100%;
list-style-type: none;
padding: 0;
}

.sb-slider li {
margin: 0;
padding: 0;
display: none;
}

.sb-slider li > a {
outline: none;
}

.sb-slider li > a img {
border: none;
}

.sb-slider img {
max-width: 100%;
display: block;
}

.sb-description {
padding: 20px;
bottom: 10px;
left: 10px;
right: 10px;
z-index: 1000;
position: absolute;
background: #CBBFAE;
background: rgba(190,176,155, 0.4);
border-left: 4px solid rgba(255,255,255,0.7);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
color: #fff;

-webkit-transition: all 200ms;
-moz-transition: all 200ms;
-o-transition: all 200ms;
-ms-transition: all 200ms;
transition: all 200ms;
}

.sb-slider li.sb-current .sb-description {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
opacity: 1;
}

.sb-slider li.sb-current .sb-description:hover {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=99)";
filter: alpha(opacity=99);
background: rgba(190,176,155, 0.7);
}

.sb-perspective {
position: relative;
}

.sb-perspective > div {
position: absolute;

-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;

-webkit-backface-visibility : hidden;
-moz-backface-visibility : hidden;
-o-backface-visibility : hidden;
-ms-backface-visibility : hidden;
backface-visibility : hidden;
}

.sb-side {
margin: 0;
display: block;
position: absolute;

-moz-backface-visibility : hidden;

-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}

[pandy]

What isn't working with the menu? I don't notice anything amiss.

[RobertP]

Thanks Pandy,

What isn't working with the menu? I don't notice anything amiss.

On this page the menu works (Mac/Firefox)
http://lilrooster.ca/


On this page the menu is smaller, both text and bar, and is non-responsive.
http://lilrooster.ca/Slicebox/index2.html

[pandy]

Oh sorry! I somehow ended up on your index page. I'll see if I can find what's wrong.

[pandy]

#wrapper that you use for the slide show is overlapping the menu so the links can't be clicked. I put a red border on it.



I'm trying to find out how that happens. You don't use any absolute positioning that I can see, do you?

[pandy]

Ah, it's the floated menu. Use clear: both or clear: left for #wrapper and it should be fine.

[RobertP]

Ah, it's the floated menu. Use clear: both or clear: left for #wrapper and it should be fine.

Thanks Pandy. Being a complete NOOB here I have to ask more questions.
Could you help me a little farther?

I used a wysiwyg editor to remove the overlap but the menu bar is still smaller than the other pages.

Menu works & Image gallery works!! Thanks.

I take it that it's in the HTML and not the CSS.
It must be in here:

<div style="text-align: center;"> <span><img
style="width: 982px; height: 180px;" alt=""
src="../images/topbanner.png"></span><br>
<span></span></div>
<div id="roundbar-blue">
<ul>
<li><a href="../home.html">Home Page</a></li>
<li><a href="../about.html">About</a></li>
<li><a href="../music.html">Music</a></li>
<li class="active"><a href="photogallery.html">Photos</a></li>
<li class="last"><a href="../contact.html">Contact Us</a></li>
</ul>
</div>
</div>
<div class="wrapper">

<ul id="sb-slider" class="sb-slider">
<li> <img src="images/1.jpg" alt="image1">
<div class="sb-description"> </div>
<br>

This post has been edited by RobertP: Mar 3 2016, 11:23 PM

[Frederiek]

It does have to do with the CSS.
Just add clear: both; to .wrapper, starting at line 56 of the file demo.css.

This post has been edited by Frederiek: Mar 4 2016, 04:54 AM

[RobertP]

Thank you Frederick for the precise reply. I did not suspect that the demo.css was involved with the page!

I think that the menu is inheriting something from the gallery script as the menu bar is still smaller than the other pages.

[RobertP]

All is working....thank you Pandy & FRederick...issue resolved!!

[Frederiek]

You're welcome.

I do see that the menu's on both pages are different in font-size. That's because the body has a font-size of 13px assigned to it on the gallery page, but no font-size is set on the homepage.

Also, validate your HTML at https://validator.w3.org/nu/ and fix the errors.

And there are CSS errors. Validate the CSS at http://jigsaw.w3.org/css-validator/ .

On both validators, all you have to do is enter the url of the page you want to validate.

If there are errors you don't understand, just ask here.

[RobertP]

You're welcome.

I do see that the menu's on both pages are different in font-size. That's because the body has a font-size of 13px assigned to it on the gallery page, but no font-size is set on the homepage.

Also, validate your HTML at https://validator.w3.org/nu/ and fix the errors.

And there are CSS errors. Validate the CSS at http://jigsaw.w3.org/css-validator/ .

On both validators, all you have to do is enter the url of the page you want to validate.

If there are errors you don't understand, just ask here.

Thanks, Great advice. I will do that. I did try that earlier and fixed a few things.

One more thing has stood out related to this page. Things look great on my Mac/Firefox machine. However, on my Android, Samsung phone the Image gallery and menu align to the left. The logo remains centred.

[Frederiek]

I only checked by resizing my browser window. There is not enough place for the menu in smaller screens and the last links even disappear entirely.

The logo is maybe centred, but half out of sight, as he image is 962px wide. There is quite some space on the left and right of that image, that could be avoided, as you use a PNG format with a transparent background.

I suggest you go read articles on media queries and responsive design, Elastic Design and Liquid Layouts.

[RobertP]

I only checked by resizing my browser window. There is not enough place for the menu in smaller screens and the last links even disappear entirely.

The logo is maybe centred, but half out of sight, as he image is 962px wide. There is quite some space on the left and right of that image, that could be avoided, as you use a PNG format with a transparent background.

I suggest you go read articles on media queries and responsive design, Elastic Design and Liquid Layouts.

OK, Thank you Frederiek for your time and expert opinion.
I had worked with another menu that contained a "small screen" portion but I could not centre that script.
I will check those resources and try to be smarter in this new world of small screens, wide screens and TVs.

[Frederiek]

BTW, also have a look at responsive images at http://www.d.umn.edu/itss/training/online/...css.html#images .