celest
03-18-2010, 06:43 PM
Dear all,
I'm trying to add a gallery using lightbox 2 on my website.
But I'm having problem with IE6, the box expand the div down itself on IE6,
It look fine in other browser i test using adobe lab browser, except IE6.
I've tried to google but I can't find the solution, I'm not a profesional, so I hope someone can help me..:confused:
Here is the gallery css which I combined with my other css for the site lay out,
I'm sorry it's a long list.
Here is the site I'm working on : http://www.indodeco.ro (http://www.indodeco.ro/boxes.html)
This is the Lightbox2 gallery css code:
*
{
border: 0;
margin: 0;
padding: 0;
}
#page {
position: relative;
width: 550px;
}
#images {
float: left;
width: 550px;
}
#details {
color: #FFC;
}
.gallery {
width: 560px;
cursor: default;
list-style: none;
margin-left: 40px;
}
.gallery img {
background: #fff;
border-color: #aaa #ccc #ddd #bbb;
border-style: 20px outset grey;
border-width: 1px;
color: inherit;
padding: 2px;
vertical-align: top;
width: 100px;
height: 100px;
}
.gallery li {
background: #eee;
border-color: #ddd #bbb #aaa #ccc;
border-style:outset;
border-width: 10px;
color: #000;
font-weight:bold;
display: inline;
float: left;
margin: 15px 10px 15px 10px;
padding: 10px;
position: relative;
}
.gallery li ul {
border:none;
color:#000;
font-weight:bold;
font-size: 11px;
}
And fthis is my css site layout :
body {
margin-bottom: 0;
font-family: Verdana;
font-size: 10px;
color:#FFC;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
background:url(../images/bgd.gif) repeat;
margin: 0 auto;
padding: 0;
height: 100%;
}
#header {
margin: 0 auto;
width: 775px;
height: 363px;
}
#wrapper {
margin: 0 auto;
width: 775px;
height: 750px;
background: url(../images/bgd.jpg);
}
#wrapperR {
float: right;
width: 595px;
height: 750px;
background: url(../images/bgd.jpg);
}
#left_content {
float: left;
width: 180px;
height: 100%;
background-color:#000;
}
.p1 {
padding-top: 30px;
text-align:left;
}
.p2 {
padding-top: 30px;
}
#sidebar {
margin: 100px 0 0 10px;
width: 154px;
height: 560px;
}
#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
#sidebar ul li {
padding: 3px 0 3px 0;
}
#sidebar ul li a {
font-size:12px;
font-family:"Times New Roman", Times, serif;
font-weight:bold;
color:#CCC;
text-decoration:none;
}
#sidebar ul li a:hover {
font-size:12px;
font-family:"Times New Roman", Times, serif;
font-weight:bold;
color:#600;
text-decoration:none;
}
h1 {
margin: 10px ;
Width: 160px;
height: 39px;
font-family: Bebas;
font-size:17px;
color: #708f04;
text-align:center;
background-color: black;
}
.a {
margin: 10px ;
Width: 266px;
height: 45px;
font-size: 8px;
color:black;
background: url(../images/instrumente.jpg) no-repeat;
}
#footer {
margin: 0 auto;
width: 775px;
height: 53px;
text-align: center;
background:url(../images/footer.gif) no-repeat;
}
Thank you guys, I really appreciated.
I'm trying to add a gallery using lightbox 2 on my website.
But I'm having problem with IE6, the box expand the div down itself on IE6,
It look fine in other browser i test using adobe lab browser, except IE6.
I've tried to google but I can't find the solution, I'm not a profesional, so I hope someone can help me..:confused:
Here is the gallery css which I combined with my other css for the site lay out,
I'm sorry it's a long list.
Here is the site I'm working on : http://www.indodeco.ro (http://www.indodeco.ro/boxes.html)
This is the Lightbox2 gallery css code:
*
{
border: 0;
margin: 0;
padding: 0;
}
#page {
position: relative;
width: 550px;
}
#images {
float: left;
width: 550px;
}
#details {
color: #FFC;
}
.gallery {
width: 560px;
cursor: default;
list-style: none;
margin-left: 40px;
}
.gallery img {
background: #fff;
border-color: #aaa #ccc #ddd #bbb;
border-style: 20px outset grey;
border-width: 1px;
color: inherit;
padding: 2px;
vertical-align: top;
width: 100px;
height: 100px;
}
.gallery li {
background: #eee;
border-color: #ddd #bbb #aaa #ccc;
border-style:outset;
border-width: 10px;
color: #000;
font-weight:bold;
display: inline;
float: left;
margin: 15px 10px 15px 10px;
padding: 10px;
position: relative;
}
.gallery li ul {
border:none;
color:#000;
font-weight:bold;
font-size: 11px;
}
And fthis is my css site layout :
body {
margin-bottom: 0;
font-family: Verdana;
font-size: 10px;
color:#FFC;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
background:url(../images/bgd.gif) repeat;
margin: 0 auto;
padding: 0;
height: 100%;
}
#header {
margin: 0 auto;
width: 775px;
height: 363px;
}
#wrapper {
margin: 0 auto;
width: 775px;
height: 750px;
background: url(../images/bgd.jpg);
}
#wrapperR {
float: right;
width: 595px;
height: 750px;
background: url(../images/bgd.jpg);
}
#left_content {
float: left;
width: 180px;
height: 100%;
background-color:#000;
}
.p1 {
padding-top: 30px;
text-align:left;
}
.p2 {
padding-top: 30px;
}
#sidebar {
margin: 100px 0 0 10px;
width: 154px;
height: 560px;
}
#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
#sidebar ul li {
padding: 3px 0 3px 0;
}
#sidebar ul li a {
font-size:12px;
font-family:"Times New Roman", Times, serif;
font-weight:bold;
color:#CCC;
text-decoration:none;
}
#sidebar ul li a:hover {
font-size:12px;
font-family:"Times New Roman", Times, serif;
font-weight:bold;
color:#600;
text-decoration:none;
}
h1 {
margin: 10px ;
Width: 160px;
height: 39px;
font-family: Bebas;
font-size:17px;
color: #708f04;
text-align:center;
background-color: black;
}
.a {
margin: 10px ;
Width: 266px;
height: 45px;
font-size: 8px;
color:black;
background: url(../images/instrumente.jpg) no-repeat;
}
#footer {
margin: 0 auto;
width: 775px;
height: 53px;
text-align: center;
background:url(../images/footer.gif) no-repeat;
}
Thank you guys, I really appreciated.