Visualización de web en IE

Wasd #1 Ago '12

Hola compañeros.
Llevo un año estudiando Desarrollo de Aplicaciones Web (CFGS DAW) y aunque he aprendido bastante, perlas como estas han salido de la boca de mis profesores: "nosotros no enseñamos a desarrollar para Internet Explorer, sino para Chrome y Firefox".

Supongo que todos los usuarios experimentados en el mundo del desarrollo web os habréis encontrado con la situación de que vuestra página se ve bien en diversos navegadores, pero IE, como siempre, jodiendo al prójimo.

No es la primera vez que me encuentro con el problema, pero esta vez necesito solucionarlo y aprender a superar el reto.

Ya me he encargado de encontrar artículos de información de cómo adaptar la página para nuestro querido explorador, pero quisiera escuchar vuestros consejos de primera mano.

Os muestro una imagen de cómo se ve la web que estoy haciendo en Chrome/Firefox y Internet Explorer:

Chrome/Firefox

Internet Explorer

En cuanto a la web, no seáis muy crueles, es mi segunda web y apenas le he dedicado algunas horas.

Bueno, gracias de antebrazo, un saludo.

squ4r3 #2 Ago '12

Puedes pasar el codigo?

Fyn4r #3 Ago '12 Inocente

sino para Chrome y Firefox

Porque en el mundo solo existen 3 navegadores, dile a tus profesores que son retards de mi parte

Wasd #4 Ago '12

#2 Bueno, yo más que a nivel de código me refería a algo mas general, de todas formas aquí lo dejo, aunque desde el navegador también puedes verlo.
De momento solo tiene HTML, CSS, JavaScript y JQuery. Dejo aquí el HTML y el CSS:

HTML

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
		<title>Dester || Grabados en Cristal</title>
		<link href="css/styles.css" type="text/css" rel="stylesheet"/>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
		<script type="text/javascript" src="scripts/slide.js"></script>
	</head>
	<body>
		<div class="body-inicio">
		</div>
		<div class="body-medio">
			<a href="index.html">
				<div class="header"></div>
			</a>
			<div class="menu">
				<ul class="menu-list">
					<a href="index.html"><li id="inicio">Inicio</li></a>
					<a href="info.html"><li id="dester">Dester</li></a>
					<a href="contacto.html"><li>Contacto</li></a>
					<a href="faq.html"><li>FAQ</li></a>
					<a href="pedidos.html"><li id="pedidos">Hacer Pedido</li></a>
				</ul>
			</div>
			<div class="flechas">
				<a href="#siguiente" class="next" title="Siguiente"></a>
				<a href="#anterior" class="prev" title="Anterior"></a>
			</div>
			<div id="slider">	
				<div class="slidesContainer">
		  			<div class="slide">
						<img src="images/Slide/1.png" alt="imagen de ejemplo 1"/>
					</div>
					<div class="slide">
						<img src="images/Slide/2.png" alt="imagen de ejemplo 2"/>
					</div>
					<div class="slide">
						<img src="images/Slide/3.png" alt="imagen de ejemplo 3"/>
					</div>
				</div>
			</div>
			<div class="main-content">
				<br>
				<br>
				<br>
				<h2>Lorem Ipsum</h2>
				<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit.
				Aliquam gravida ornare euismod. Donec nunc dui,
				molestie eu commodo sed, vulputate et nunc.
				Curabitur ut aliquam dolor. Sed justo leo,
				vestibulum at adipiscing quis, faucibus sed ante. 
				
			Nam fringilla arcu eu purus malesuada aliquet. 
			Vivamus risus odio, ultricies non tempor id, condimentum sed neque. 
			Donec tempor rhoncus eros, eget consequat dolor tempor nec. 
			Phasellus a est erat. Quisque ut lorem felis. 
			Cras nec mauris arcu. Nulla pharetra.
			</p>
			<br>
		</div>
		<div class="ultimotweet">
		&Uacute;ltimo Tweet:
		</div>
		<div id="last-tweet">
			<p align="left"><script type="text/javascript">
				$(document).ready(function(){
					var username='DidacPF';
					var format='json';
					var url='http://api.twitter.com/1/statuses/user_timeline/'+username+'.'+format+'?callback=?';
				
					$.getJSON(url, function(tweet){
						$("#last-tweet").html(tweet[0].text);
					})
				})
			</script></p>
		</div>
		<div class="social">	
			<div class="twitter">
				<a href="https://twitter.com/DidacPF" class="twitter-follow-button" data-show-count="false" data-lang="es" data-show-screen-name="false">Seguir a @DidacPF</a>
				<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>	
			</div>
			<div class="facebook">
				<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.dester.es%2Findex.html&amp;layout=button_count&amp;show_faces=false&amp;width=450&amp;height=60&amp;action=like&amp;font=tahoma&amp;colorscheme=dark" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:450px; height:60px"></iframe>
			</div>
		</div>
		<div class="cc">
			<a rel="license" href="http://creativecommons.org/licenses/by-nc/3.0/deed.es_CO"><img alt="Licencia Creative Commons" style="border-width:0" src="http://i.creativecommons.org/l/by-nc/3.0/88x31.png" /></a>
		</div>
		<div class="body-final"></div>
</body>
</html>

CSS

body{
	//background-color: #DBFFBA;
	margin: 0 auto;
	background-image: url('../images/back.png');
	background-repeat: x-repeat;
	//background-position: fixed;
	background-attachment: fixed; 
	background-position: 0 0; 
}
.body-inicio{
	width: 750px;
	height: 13px;
	margin: 0 auto;
	margin-top: 5px;
	background-image: url('../images/inicio.png');
	background-repeat: no-repeat;
	
}
.body-medio{
	width: 750px;
	background-image: url('../images/medio.png');
	background-repeat: repeat-y;
	margin: 0 auto;
}
.body-final{
	width: 750px;
	height: 15px;
	background-image: url('../images/final.png');
	background-repeat: no-repeat;
	margin: 0 auto;
}
.header{
	margin: 0 auto;
	background-image: url('../images/header12.png');
	width: 650px;
	height: 100px;
	background-repeat: no-repeat;
	color: red;
}
.header:hover{
	background-image: url('../images/header11.png');
}

.menu{
	
background-color: #545454;
width: 726px; /*Anchura del Menu, muy modulable. */
height: 20px;
margin: 0 auto;
margin-top: -10px;
}

.menu li{
	margin: 0px;
	padding-left: 15px;
	padding-right: 15px;
	padding-top: 4px;
	padding-bottom: 2px;
	display: inline;
	//font-family: Courier, monospace;
	font-family: Arial;
	//font-family: Impact, fantasy;
	font-size: 11px;  

	font-weight: normal;
	color: #fff;
	font-size: 11px;
	font-weight: bold;

}
.menu a{
	text-decoration: none;
}
.menu li:hover{
	background-color: #383838;
}
.menu ul{
}
 #inicio{
	margin-left: -40px;
	margin-right: 85px; /* Distancia entre Inicio y Dester*/
	padding-left: 110px;
	padding-right: 30px;
}
#dester{
	color: #FFA21F;
}
#pedidos{
	
margin-left: 80px;
padding-right:75px;
//font-size: 12px;
font-weight: bold;
background-color: #454545;
//margin-top: 10px;
}
#pedidos:hover{
	background-color: #ED8A00;
}
/**
  * Slide 
  */  
  

#slider{
	width: 400px;
	height: 200px;
	overflow: hidden;
	position: relative;
	// -moz-border-radius: 10px;
    //-webkit-border-radius: 10px;
	border: 2px solid #B5B5B5;
	margin: 0 auto;
	margin-right: 250px;
	margin-top: 20px;
}
.slide{
	width: 400px;
	height: 200px;
	float: left;
}
.slidesContainer{
	width: 800px;
}
.flechas{
	margin-left: -76px;
}
.prev, .next{
    display: block;
    height: 37px;
    width: 19px;
    position: absolute;
	margin-top: 100px;
	

}
.prev{
    background-image: url('../images/flecha-izquierda.png');
	background-repeat: no-repeat;
	margin-left: 150px;
}
.prev:hover{
    background-image: url('../images/flecha-izquierda-hover.png');
}
.next{
    background-image: url('../images/flecha-derecha.png');
	background-repeat: no-repeat;
	margin-left: 580px;
}
.next:hover{
     background-image: url('../images/flecha-derecha-hover.png');
}
.main-content{
	width:600px;
	margin: 0 auto;
	margin-top: -50px;
	color: lightgrey;
}
.main-content h2{
	color: orange;
	background-color: #545454;
	font-family: Arial;
	font-weight: bold;
	padding-left: 20px;
}
#last-tweet{
	position: absolute;
	color: lightgrey;
	margin-top: -400px;
	margin-left: 540px;
	width: 180px;
	font: italic 18px/20px Georgia,"Times New Roman",serif;
	text-align: center;
	height: 10px;
}
.ultimotweet{
	color: orange;
	position: absolute;
	margin-top: -430px;
	margin-left: 540px;
	width: 200px;
	height: 20px;
	font: italic 16px/20px Georgia,"Times New Roman",serif;
	font-weight: bold;
}
.social{
	position: absolute;
	margin-left: 550px;
	margin-top: -240px;
	width: 300px;
	height: 50px;
}
.social div{
	
}
.twitter{
	position: absolute;
	margin-left: 00px:
}
.facebook{
	width: 100px;
	position: absolute;
	margin-left: 70px;
}
.cc{
	margin-left: 630px;
	font-family: Arial;
	font-size: 9px;
}

#3 Si, eso mismo lo pensé yo, por eso he transcrito sus palabras literalmente.

Thiran #5 Ago '12 Penitente

Reglas en la css para distintos navegadores fin

Merkury #6 Ago '12

Para el align del body para IE utiliza el hack del asterisco y en la regla css que controla la posición por

.whatever
{
    *text-align: center;
}

Y ya esta, eso te centrará lo descentrado, porque por alguna razón IE no coje el margin: 0 auto;

tada #7 Ago '12

Y solo habrás mirado una versión de IE.. si lo vas a arreglar para este navegador empieza mirando desde la versión 6 y ve subiendo.

pd: opera y safari ni lo miras, no?

2 respuestas

HeXaN #8 Ago '12

#7 Normalmente esos dos cumplen los estándares

1 respuesta

Wasd #9 Ago '12

#7 Ya busqué información acerca de eso cuando escribí #1, he encontrado algo interesante que probablemente colgaré cuando haya comprobado que funciona (mañana, supongo).
En cuanto a Opera y Safari, de momento voy sobrado con los tres exploradores "líderes" así que por ahora no me centraré en ellos.

1 respuesta

Merkury #10 Ago '12

#9 Hombre si te funciona en Chrome te funcionara en Safari y en Opera si utilzias los sufijos de webkit te funcionará tambien bien, así que..

Y para Firefox solo has de tener en cuenta que las medidas entre firefox y chrome se diferencian entre 5 y 10px depende de la res

tada #11 Ago '12

#8 Es cierto que por lo general no dan mucho problema. De todas formas yo los reviso siempre, solo son un par de navegadores mas y no cuesta nada xD

BLZKZ #12 Ago '12

le falta el doctype.

Para alinear cosas sin doctype en ie8 e inferior puede dar problemas

Visualización de web en IE

Usuarios habituales

Tags