A więc temat niżej pisałem na temat slideshowa, skalowania itd.
Tutaj mam problem. Włączam Firefoxa i szok. Tłumaczyć chyba nie muszę, sami zobaczycie:
Chrome, IE, Opera - wszystko jak należy. W FF Slideshow jest na cholernie na prawo >>> i się suwak do przewijania strony pojawił.
SS:
IE (jest dobrze)Chrome (też dobrze)Firefox (co to do cholery jest!?)Nie zwracajcie uwagi na logo, na początku były inne założenia ..

Zdjęcia slideshow także nie zwracajcie uwagi - wzięte z poprzedniego projektu

CSS Slideshow:
.ui-slideshow { height: 300px; width: 640px; overflow: hidden; position: relative; border: 1px solid #750042; top: 15px; background-color: #000000; align: center;}
.ui-slideshow .slideshow { height: 300px; width: 640px; position: relative; z-index: 10; }
.ui-slideshow .mask { height: 300px; width: 640px; position: absolute; top: 0; left: 0; z-index: 30; cursor: pointer; background-image: url(images/slideshow-mask.png) no-repeat 50% 0; }
.ui-slideshow .caption { position: absolute; left: 30px; bottom: 30px; width: 580px; z-index: 35; text-shadow: 0 0 15px #000, 0 0 15px #000, 0 0 5px #000, 0 0 19px #000, 0 0 19px #000;}
.ui-slideshow .caption h3 { font-size: 28px; color: red; }
.ui-slideshow .paging { position: absolute; top: 15px; right: 15px; width: 15px; z-index: 35; }
.ui-slideshow .paging a { display: block; height: 10px; margin-bottom: 5px; background-color: #e50382; opacity: .5; border-radius: 3px }
.ui-slideshow .paging a:hover,
.ui
-slideshow
.paging a
.current { opacity
: 1; } .ui-slideshow .preview { color: #000; text-align: center; width: 100px; padding: 5px; background: #e57bb7; position: absolute; display: none; right: 35px; top: 15px; border-radius: 5px; z-index: 35; }
.ui-slideshow .preview span { display: block; }
.ui-slideshow .slide { height: 300px; width: 640px; position: absolute; top: 0; left: 0; background-position: 0 0; background-repeat: no-repeat; z-index: 15; }
.ui-slideshow .slide .click-area { width: 100%; height: 300px; position: absolute; bottom: 0; left: 0; z-index: 20; }
.ui-slideshow .slide .click-area embed { z-index: 25; }
.ui-slideshow .preview { color: #000; text-align: center; width: 100px; padding: 5px; background: #e57bb7; position: absolute; display: none; right: 35px; top: 15px; border-radius: 5px; z-index: 35; }
/* content */
.ui-slideshow .mask { background: url("images/slideshow-mask.png") 0 0 no-repeat; }
Główny CSS:
html {background-image: url(images/background.jpg);}
body {
position: relative;
border: 1px solid #111111;
padding: 10px;
width: 72%;
margin: auto;
background-color: #000000;
box-shadow: 0 0 35px rgba(0, 0, 0, .5)}
p1 {color: #fff; padding-left: 20px;}
#logowrapper {
position : relative;
margin : 0px;
background : url(images/logo.png) no-repeat 5px 0px;
z-index: 5;
}
p1 {
color: #fff;
}
div#menu {
float: left;
height: 45px;
width: 100%;
background-image: url(images/menu.png);
border-top-right-radius: 5px;
border-top-left-radius: 5px;
font-family: Walkway Rounded;
background-repeat: repeat-x;
}
div#menu a {
display: inline-block;
text-decoration: none;
color: #fff;
padding: 5px;
margin-right: 10px;
}
div#menu a:hover {
color: #FF0000;
}
.srodek {
width: 100%;
height: auto;
background-image: url(images/body.png);
background-repeat: repeat-x;
background-color: #750042;
color: #fff;
}
Ten post edytował mateŁusz 21.08.2012, 21:00:02