Foros del Web » Creando para Internet » CSS »

>[Problema] Mi pagina no se ve bien en Opera e IE...

Estas en el tema de >[Problema] Mi pagina no se ve bien en Opera e IE... en el foro de CSS en Foros del Web. Mi pagina solo se ve bien en Firefox. Podrian decirme porque? Os dejo el codigo de la pagina y sus CSS Haver si alguien me ...
  #1 (permalink)  
Antiguo 17/10/2008, 04:47
Avatar de Shagraarath  
Fecha de Ingreso: agosto-2008
Mensajes: 151
Antigüedad: 9 años, 4 meses
Puntos: 1
Exclamación >[Problema] Mi pagina no se ve bien en Opera e IE...

Mi pagina solo se ve bien en Firefox.
Podrian decirme porque?

Os dejo el codigo de la pagina y sus CSS
Haver si alguien me dice el porque :S

Pagina HTML
Código HTML:
<html>

<head>

	<title>Scrollable view</title>
	
	<link rel="stylesheet" type="text/css" href="css/common.css" />
	<link rel="stylesheet" type="text/css" href="css/scrollable-view.css"/>
	
	<script src="js/jquery.pack.js"></script>
	<script src="js/flashembed.min.js"></script>
	<script src="js/jquery.mousewheel.js"></script>
	<script src="js/jquery.scrollable.min.js"></script>
	<script src="js/flow.embed.js"></script>	
	
	<script>
		$(function() {
				
			$("a.flowplayer").flowembed("../FlowPlayerDark.swf", {
				initialScale:'scale',
				hideControls:true
			});
			
			$("div.scrollable").scrollable({
				horizontal:true, 
				size:1, 
				onSeek:onClipDone
			}); 
			
		});	
	</script>
	
</head>

<body>
<div id="page">
<div class="scrollable">
	
		<ul class="navi">
			<li><a>First video</a></li>
			<li><a>Second video</a></li>
			<li><a>Third video</a></li>
			<li><a>Fourth video</a></li>
            <li><a>Fifth video</a></li>
		</ul>
		
		<br clear="all"/>
		
		<a class="prev"></a>
	
		<div class="items">
			<div>
				<a class="flowplayer" a href="videos/ATAQUE MOCO.flv">
					<img src="img/bo.jpg" />
				</a>
				
				<h2>First video</h2>
				
				<p>
					Sed ut magna. Duis condimentum purus non nisi. Praesent justo. 
					Suspendisse urna mi, malesuada vitae, molestie ut, sodales eu, sem.
				</p>		
			</div>
		
			<div>	
				<a class="flowplayer" href="videos/caida.mov">
					<img src="img/3m.jpg" />
				</a>
				
				<h2>Second video</h2>
				
				<p>
					Vivamus vulputate. Vestibulum eget eros sit amet ligula 
					vestibulum tincidunt. Vivamus id orci nec metus pretium rhoncus. 
					Donec tortor nisi, viverra id, fringilla sed, euismod feugiat, pede.
				</p>		
			</div>		
			
			<div>
				<a class="flowplayer" href="videos/Alien.mpeg">
					<img src="img/2m.jpg" />
				</a>
				
				<h2>Third video</h2>
				
				<p>
					Nullam dui. Vestibulum diam neque, vehicula non, dapibus non, lacinia in, neque. 
				</p>		
				
				<p>
					Tellus mi aliquet diam, eu semper tellus ante a massa. Cras leo massa, blandit vitae, pharetra ve.
				</p>
			</div>
		
			<div>	
				<a class="flowplayer" href="http://blip.tv/file/get/KimAronson-TwentySeconds58192.flv">
					<img src="img/3m.jpg" />
				</a>
				
				<h2>Fourth video</h2>
				
				<p>
					Nullam sit amet arcu vel mi commodo sodales. Donec a augue. In semper magna sit amet tortor. Aenean id ligula. Nulla facilisi.
				</p>		
			</div>
            			<div>
				<a class="flowplayer" href="http://blip.tv/file/get/Behappy-clouds106.flv">
					<img src="img/bo.jpg" />
				</a>
				
				<h2>Fifth video</h2>
				
				<p>
					Sed ut magna. Duis condimentum purus non nisi. Praesent justo. 
					Suspendisse urna mi, malesuada vitae, molestie ut, sodales eu, sem.
				</p>		
			</div>
		</div>
		
		<a class="next"></a>
		
  </div>

<br clear="all" />
	<br />
</div>
</body>
</html> 
common.css
Código HTML:
body {
	background-color:#777;	
	font-family:"trebuchet ms", verdana, "bitstream vera sans";
	padding:0;
	margin:0;
	text-align:center;
}

#page {
	width:600px;
	background-color:#fff;
	margin:0px auto;
	padding:20px 150px 20px 50px;
	min-height:600px;
	border:1px solid #000;
	border-width:0 1px 1px 1px;
	text-align:left;
}

h1 {
	font-size:22px;
	letter-spacing:-1px;
	color:#0d7b7a;
	font-weight:normal;
}

h1 em {
	font-style:normal;
	color:darkorange;	
}


h2 {
	font-size:18px;
	font-weight:normal;
}


.less {
	color:#999;
	font-size:12px;
}

scrollable-view.css
Código HTML:
/* player dimensions */
a.flowplayer, a.flowplayer img {
	display:block;				
	border:0;
	width:250px;
	height:180px;
	margin-right:15px;
	float:left;
}

/* play button on top of splash image */
div.playButton {
	background:url(../img/play.png) no-repeat;
	width:45px !important;
	height:45px;
	position:relative;
	top:-115px;
	left:105px;	
	margin-bottom:-50px;
	opacity:0.9;
}

div.playButton:hover {
	opacity:1.0;		
}

/* items */
div.scrollable {
	margin-left:-30px;		
}

div.items {
	height:180px;		
	float:left;
	width:470px;
	background-color:#efefef;
	border:1px solid #ddd;
}
	
div.items div {
	width:470px;	
}

div.scrollable div {		
	float:left;
}

div.scrollable h2 {
	margin-top:15px;		
}

div.scrollable p {
	color:#444;
	font-size:11px;
	margin-right:15px;
}

/* next / prev buttons */
a.prev, a.next {
	display:block;
	width:30px;
	height:30px;
	float:left;
	background-repeat:no-repeat;	
	margin-top:70px;
}

a.prev {
	background:url(../img/button-left.gif);
	margin-right:10px;
}

a.prev:hover {
	background:url(../img/button-left-over.gif);		
}

a.next {
	background:url(../img/button-right.gif);
	margin-left:10px;
}

a.next:hover {
	background:url(../img/button-right-over.gif);		
}


/* tabs */ 
ul.navi { 
	margin:20px 0 0 0 ;
	padding:0px;
	height:1.45em;
	position:relative;
	top:10px;
	left:39px;
	width:470px; 
}

ul.navi li {
	background:url(../img/tab-left.gif) left top no-repeat;
	padding-left:4px;
	float:left;
	margin:0;
	list-style-type:none;
}

ul.navi a {
	background:url(../img/tab-right.gif) right top no-repeat;
	padding:3px 12px;
	border-bottom:1px solid #D2D2D2;
	text-decoration:none;
	display:block;
	color:#333;
	font-size:13px;
}

ul.navi li.active a, ul.navi a:hover {
	background-position:100% -150px;
	border-bottom:1px solid #fff;
}

ul.navi li.active {
	background-position:0 -150px;	
}

  #2 (permalink)  
Antiguo 17/10/2008, 07:57
AlvaroG
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: >[Problema] Mi pagina no se ve bien en Opera e IE...

Primero que nada, no valida. Antes de intentar solucionar un problema, tenés que validar el código, tanto CSS como HTML.
En principio no estás usando un DOCTYPE y estás usando colores que no están definidos en la especificación CSS ("darkorange")


Saludos.
  #3 (permalink)  
Antiguo 20/10/2008, 02:59
Avatar de Shagraarath  
Fecha de Ingreso: agosto-2008
Mensajes: 151
Antigüedad: 9 años, 4 meses
Puntos: 1
Respuesta: >[Problema] Mi pagina no se ve bien en Opera e IE...

como que no valida? :S
  #4 (permalink)  
Antiguo 20/10/2008, 05:40
Avatar de Shagraarath  
Fecha de Ingreso: agosto-2008
Mensajes: 151
Antigüedad: 9 años, 4 meses
Puntos: 1
Respuesta: >[Problema] Mi pagina no se ve bien en Opera e IE...

He validado mi segundo CSS posteado ( en el primer post ) en esta pagina:

http://jigsaw.w3.org/css-validator/#validate_by_input

Y me dice esto:


Se ve que el CSS 2.1 no lo tiene pero el CSS 3 si, como puedo cambiarlo
para que el CSS 2.1 me lo pille?

Saludos :(
  #5 (permalink)  
Antiguo 20/10/2008, 07:37
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: >[Problema] Mi pagina no se ve bien en Opera e IE...

Según recuerdo de una respuesta dada por Mikmoro a una consulta similar, sólo tienes que elegir css3 para validarlo, en vez de css2.
Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #6 (permalink)  
Antiguo 20/10/2008, 07:51
AlvaroG
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: >[Problema] Mi pagina no se ve bien en Opera e IE...

¡También debes validar el HTML! No lo olvides. La mayoría de los problemas de "comportamientos extraños" vienen por el hecho de que no se tiene HTML correcto
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:25.