Combining 2 CSS scripts

[devonandy]

Hi all, i'm very new to all this but am working on my photography website.

I have a layout script for the main page style but i want to add Lightbox Image viewer v2.03 to it.

I'm at a loss as to how to combine these scripts without messing up the website.

The main script is layout.css, and the gallery script is lightbox.css

layout.css

/* CSS Document */

body {margin:0;padding:0;}
body {background-color: black}
html {margin:0;padding:0;font-family:Verdana, Arial, Helvetica, sans-serif;font-size:11px;background-color:#646874;}

ul, li {list-style:none;margin:0;padding:0;}
li a {text-decoration:none;color:black;}
h1 {font-size:19px;font-weight:normal;}
img {display: block;border:none;}
img p {margin:0;padding:0;}

#navigation {background-image:url(images/navi.gif);background-repeat:no-repeat;width:756px;height:42px;}
#navigation ul {padding-left:20px;}
#navigation ul li {float:left;font-size:11px;padding-right:15px;background-image:url(images/divider.gif);background-position:right;background-repeat:no-repeat;height:30px;}
#navigation ul li a {
padding-right:15px;
position:relative;
top:14px;
left: 1px;
width: 116px;
height: 35px;


}
#banner {background-image:url(images/banner.gif);background-position: 7px 5px;width:756px;height:110px;background-repeat:no-repeat;}
#center {background-color:white;width:755px;margin:auto;margin-bottom:15px;}

.active {background-image:url(images/subnavi_active.jpg);width:185px;padding:0;margin:0;}
.current {font-weight:bold;}
.normal {background-image:url(images/border.gif);background-repeat:no-repeat;padding:0;margin:0;}

#subnavigation {float:left;}
#subnavigation ul li {margin-left:9px;padding-top:9px;padding-bottom:7px;}
#subnavigation ul li a {padding-left:25px;}

#content {background-image:url(images/line_vert.gif);background-repeat:repeat-y;float:left;width:480px;margin-left:24px;padding-left:24px;line-height:16px;margin-top:12px;padding-bottom:45px;}

#footer {font-size:9px;text-align:center;margin-right:14px;padding-bottom:10px;text-decoration:none;color:#BBBEC7;}
#footer a {text-decoration:none;color:#BBBEC7;}

.float-left {float:left;width:230px;padding-right:10px;margin:0;}
.float-none {clear:left;display:block;}

.cleaner
{
clear:both;
height:1px;
Font-size:1px;
border:0px none;
margin:0;padding:0;
background:transparent;
}






Lightbox.css

#lightbox{
position: absolute;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
line-height: 0;
}

#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: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
display: block;
}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }


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

#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; }

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


/* Min-Width */
.lbWidth { /* most browsers */
position: absolute;
top: 0px; left: 0px;
width: 100%;
min-width: 790px;
}

* html .lbContent { /* IE6 */
margin-left: -790px;
position:relative;
}

* html .lbMinWidth { /* IE6 */
padding-left: 790px;
}


/* Clearfix */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */


My thanks in advance for any help recieved

[alexjewell]

I don't see anything that would clash. Have you tried it and experienced any clashes?

[Medyman]

Just include both!


<link type="text/css" rel="stylesheet" href="css/layout.css" />
<link type="text/css" rel="stylesheet" href="css/lightbox.css" />

You shouldn't have any problems.

[jscheuer1]

There are no such things as you are referring to them, as css scripts. What you have are two stylesheets. The only way to be certain that there will be no conflicts is to try. If any conflicts arise, they can be resolved one way or another.