Stronka w Operze poprawna dopierdo po przeładowaniu.

emuace · Post autor: **emuace** » czw gru 11, 2008 11:55 pm

tworzę sobie właśnie szablonik i mam problem z Operą, a w zasadzie jakimś jej bugiem. Elementy są rozmieszczane na różnych warstwach. Na FF3 i IE7 wszystko wygląda dobrze, problem jest, gdy odpalam stronkę na Operze. Treść strony (#contents_box) ucieka mi na dół, ale po naciśnięciu F5 wszystko jest cacy. Nie mam pomysłu czemu się tak dzieje. Proszę o pomoc.

Oto kod:

Kod: Zaznacz cały

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="stylesheet" type="text/css" href="style.css" />
        <title>Goblikon 2009 - Goblin Horror Picture Show - Konwent miłośników fantastyki i RPG - Racibórz, 14-16 sierpnia</title>
    </head>
    <body>
        <div id="layer1">
        	<div id="topbox" class="deb">
        		<img src="images/goblikon.png" id="img_goblikon" alt="Goblikon 2009 - Goblin Horror Picture Show" />
				<img src="images/trojca.png" id="img_trojca" alt=" " />
        	</div>
			<div class="deb">
				<img src="images/skull.png" id="img_skull" alt=" " />
			</div>
        </div>
			
		<div id="layer2">
    		<div id="menubar">
    			<a href="#"><img src="images/konwent.png" alt="Konwent" /></a>
				<a href="#"><img src="images/regulamin.png" alt="Regulamin" /></a>
				<a href="#"><img src="images/kronika.png" alt="Kronika" /></a>
				<a href="#"><img src="images/bastion.png" alt="Bastion" /></a>
				<a href="#"><img src="images/tworczosc.png" alt="Twórczość" /></a>
				<a href="#"><img src="images/galeria.png" alt="Galeria" /></a>
				<a href="#"><img src="images/forum.png" alt="Forum" /></a>
				<a href="#"><img src="images/kontakt.png" alt="Kontakt" /></a>
				<a href="#"><img src="images/linki.png" alt="Linki" /></a>
    		</div>
			
			<table border="0" cellspacing="0" cellpadding="0" id="submenu_box">
			    <tr>
			        <td>
			        	<img src="images/sub_start.png" alt=" " />
			        </td>
					<td id="submenu_box_main">
			        	<a href="#">Sublink</a> | <a href="#">Sublink</a> | <a href="#">Sublink</a> | <a href="#">Sublink</a>
			        </td>
					<td>
			        	<img src="images/sub_end.png" alt=" " />
			        </td>
			        
			    </tr>
			</table>
			
			
        </div>
		<div id="layer1a">
			<div class="deb">
				
				<h1 id="title">Tytuł</h1>
				<div id="contents_box">
					<div class="spacer_A"> </div>
					Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, purus. Integer ultrices posuere cubilia Curae, Nulla ipsum dolor lacus, suscipit adipiscing. Cum sociis natoque penatibus et ultrices volutpat. Nullam wisi ultricies a, gravida vitae, dapibus risus ante sodales lectus blandit eu, tempor diam pede cursus vitae, ultricies eu, faucibus quis, porttitor eros cursus lectus, pellentesque eget, bibendum a, gravida ullamcorper quam. Nullam viverra consectetuer. Quisque cursus et, porttitor risus. Aliquam sem. In hendrerit nulla quam nunc, accumsan congue. Lorem ipsum primis in nibh vel risus. Sed vel lectus. Ut sagittis, ipsum dolor quam.
					Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, purus. Integer ultrices posuere cubilia Curae, Nulla ipsum dolor lacus, suscipit adipiscing. Cum sociis natoque penatibus et ultrices volutpat. Nullam wisi ultricies a, gravida vitae, dapibus risus ante sodales lectus blandit eu, tempor diam pede cursus vitae, ultricies eu, faucibus quis, porttitor eros cursus lectus, pellentesque eget, bibendum a, gravida ullamcorper quam. Nullam viverra consectetuer. Quisque cursus et, porttitor risus. Aliquam sem. In hendrerit nulla quam nunc, accumsan congue. Lorem ipsum primis in nibh vel risus. Sed vel lectus. Ut sagittis, ipsum dolor quam.
					Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, purus. Integer ultrices posuere cubilia Curae, Nulla ipsum dolor lacus, suscipit adipiscing. Cum sociis natoque penatibus et ultrices volutpat. Nullam wisi ultricies a, gravida vitae, dapibus risus ante sodales lectus blandit eu, tempor diam pede cursus vitae, ultricies eu, faucibus quis, porttitor eros cursus lectus, pellentesque eget, bibendum a, gravida ullamcorper quam. Nullam viverra consectetuer. Quisque cursus et, porttitor risus. Aliquam sem. In hendrerit nulla quam nunc, accumsan congue. Lorem ipsum primis in nibh vel risus. Sed vel lectus. Ut sagittis, ipsum dolor quam.
					Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, purus. Integer ultrices posuere cubilia Curae, Nulla ipsum dolor lacus, suscipit adipiscing. Cum sociis natoque penatibus et ultrices volutpat. Nullam wisi ultricies a, gravida vitae, dapibus risus ante sodales lectus blandit eu, tempor diam pede cursus vitae, ultricies eu, faucibus quis, porttitor eros cursus lectus, pellentesque eget, bibendum a, gravida ullamcorper quam. Nullam viverra consectetuer. Quisque cursus et, porttitor risus. Aliquam sem. In hendrerit nulla quam nunc, accumsan congue. Lorem ipsum primis in nibh vel risus. Sed vel lectus. Ut sagittis, ipsum dolor quam.
					Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, purus. Integer ultrices posuere cubilia Curae, Nulla ipsum dolor lacus, suscipit adipiscing. Cum sociis natoque penatibus et ultrices volutpat. Nullam wisi ultricies a, gravida vitae, dapibus risus ante sodales lectus blandit eu, tempor diam pede cursus vitae, ultricies eu, faucibus quis, porttitor eros cursus lectus, pellentesque eget, bibendum a, gravida ullamcorper quam. Nullam viverra consectetuer. Quisque cursus et, porttitor risus. Aliquam sem. In hendrerit nulla quam nunc, accumsan congue. Lorem ipsum primis in nibh vel risus. Sed vel lectus. Ut sagittis, ipsum dolor quam.
				</div>
			</div>
			
			
		</div>
		<div id="layer0">
			<div id="bottombox">
				<div id="contents_bg"> </div>
				
				<div id="sponsorzy">
					<h3>SPONSORZY</h3>
					<a href="#"><img src="images/sponsorzy/00_animegate.jpg" alt=" " /></a>
					<a href="#"><img src="images/sponsorzy/09_pro-arte.jpg" alt=" " /></a>
					<a href="#"><img src="images/sponsorzy/15_videograf.jpg" alt=" " /></a>
				</div>
				<div id="partnerzy">
					<h3>PARTNERZY</h3>
					<a href="#"><img src="images/partnerzy/02_biblioteka.jpg" alt="MiPBP w Raciborzu" /></a>
					<a href="#"><img src="images/partnerzy/13_tawernarpg.jpg" alt="Tawerna RPG" /></a>
					<a href="#"><img src="images/partnerzy/14_nowinyrac.jpg" alt="Nowiny Raciborskie" /></a>
				</div>
			
			</div>
		</div>
    </body>
</html>

Kod: Zaznacz cały



body {
	background-color:#000;
	color:#FFF;
	background-image:url('./images/background.png');
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
}

#layer0, #layer1, #layer2, #layer1a {
		position:absolute;
		width:100%;
		left:0;
		top:0;
		margin:0;
		padding:0;
}

#layer0 {
	z-index:0;
	
}

#layer1 {
	z-index:1;
	
}

#layer1a {
	z-index:2;
	
}

#layer2 {
	z-index:3;

}



#bottombox {
	background-image:url('./images/bg.jpg');
	width:970px;
	background-repeat:repeat;
	margin:312px auto 0 auto;
	padding:0 0 0 0;
}

#submenu_box {
	height:34px;
	margin:0 auto 0 auto;
	padding:0;
	color:#AAA;
	
}

#submenu_box a:hover, #submenu_box a:active, #submenu_box a:focus {
	color:#FF0000;
}

#submenu_box_main a {
	color:#FFF;
	text-decoration:none;
	font-weight:normal;
}

#submenu_box_main {
	background-image:url('images/sub_bg.png');
	background-repeat:repeat-x;
	padding: 2px;
	font-size:16px;
	vertical-align:middle;
}

.deb { /*default extras box */
	width:970px;
	background-repeat:no-repeat;
	margin:0 auto 0 auto;
}

#topbox {
	background-image:url('./images/header.jpg');
	
}	

#img_trojca {
	margin:20px 0 0 288px;
	float:none;
}

#img_goblikon {
	margin:26px 0 0 344px;
}

#img_skull {
	margin:105px 0 0 40px;
}

#menubar {
	margin:307px 0 0 0;
	width:100%;
	text-align:center;
	
	
}



#menubar img {
	border:0;
}

#contents_bg {
	padding:208px 0 0 0;
	margin:0 0 0 55px;
	width:688px;
	height:515px;
	background-image:url('images/contentbox.jpg');
	background-repeat:no-repeat;
	background-position:bottom;
}

#title {
	margin:540px 0 0 235px;
	padding:0 0 10px 0;
}

#contents_box {
	margin:0 0 0 65px;
	width:668px;
	height:435px;
	position:relative;
	overflow:auto;
}

.spacer_A {
	margin:0;
	padding:0;
	width:100px;
	height:14px;
	float:left;
}

#sponsorzy, #partnerzy {
	text-align:center;
}
#sponsorzy h3, #partnerzy h3 {
	text-align:center;
	font-size:10px;
	font-weight:normal;
	letter-spacing:10px;
}

#sponsorzy img, #partnerzy img {
	border:0;
	vertical-align:middle; 
	margin:3px;
	padding:0;
}

yeetti · Post autor: **yeetti** » pt gru 12, 2008 11:15 pm

Witam,
moze Opera nie trawi dosc dobrze Twojej rozkrzewionej hierarchi div'ow ? ...
id, class, id , id , class - layery nadrzedne poprzekladane podrzednymi - moze tu tkwi problem ?
A moze burzy wszystko layer "spacer_A" i niepotrzebna spacja w srodku

Kod: Zaznacz cały

<div class="spacer_A"> </div>

W

Kod: Zaznacz cały

<h1 id="title">Tytuł</h1>

moze lepiej byloby dac class .title zamiast #title ....

emuace · Post autor: **emuace** » sob gru 13, 2008 12:33 am

spacer niczego nie burzy. wywaliłem go całkiem i nic to nie dało. Ale w zasadzie to poprzekładanie layerami jest niepotrzebne. chciałem mieć pewne elementy niezależne, ale chyba sobie daruję.

Stronka w Operze poprawna dopierdo po przeładowaniu.

Stronka w Operze poprawna dopierdo po przeładowaniu.

Re: Stronka w Operze poprawna dopierdo po przeładowaniu.

Re: Stronka w Operze poprawna dopierdo po przeładowaniu.