en safari se ve mal

**jairo222** · 29/01/2010, 17:03

hola bueno queria hacerles una consulta. al ver mi pagina con safari algunos margenes se ven mal o corridos. esto se puede arreglar?

con los demas exploradores no tengo problemas

**Foley** · 29/01/2010, 18:16

Hola jairo222

Creo que cae de cajón que nos tienes que mostrar la página, poner los estilos css y también el código html del index no crees? Venga ;)

**jairo222** · 29/01/2010, 20:42

que tonto soy perdon alli va...

ESTILOS GENERALES

* {text-indent:0px ; margin:0px ; padding:0px ; border:0px}
p {text-align: justify}
h1 {font-size: 1.2em; color:#9C9C9C ; font-weight: bold ; text-decoration: underline ;
text-align: center}
h2 {font.size: 1.1em; color:#9C9C9C ; font-weight: bold ; text-decoration: none ;
text-align: center}
body {text-align: center }
#global {width:800px ; margin:4px auto }
#curva-superior { background-image: url(objetos/curva-superior2.gif) ;
background-repeat: no-repeat ;
width: 800px ;
height:12px ;
overflow: hidden }
#cabecera {background-color: black ; border-left: black 1px solid ;
border-right: black 1px solid ; height:85px ; color: red}
#logotipo {width:280px ; float:left }
#publicidad {width:518px ; float:right ; margin-top:25px ; font-size: 16px }
#navegacion {background-color: #B5B5B5 ; border: green 1px solid ; height:20px}
#navegacion li {float:left ; list-style:none ; margin: 0px 20px 0px 20px }
#navegacion ul { margin-left: 60px }
#contenido {background-color: black ; border-left: black 1px solid ;
border-right: black 1px solid; color: gray }
#contenido p {margin: 5px 10px 0px 10px ; text-indent: 15px ; color: red}
#menu {width: 150px ; float:left ;
text-align:left ; margin: 3px 10px 3px 3px ;
background-image: url(objetos/menu-curva-inferior2.gif);
background-position: bottom;
padding-bottom:5px }

#menu li {list-style:none ; margin: 4px 8px 4px 6px ;}
#menu h1 {text-decoration:none ; font-size:12px ;
background-image: url(objetos/menu-curva-superior2.gif);
padding-top:12px }

#pie {border-left: black 1px solid ; border-right: black 1px solid ;
border-top: black 1px solid ; height: 65px ; background-color: black}
#pie li {list-style: none ; font-size: 12px }

#curva-inferior { background-image: url(objetos/curva-inferior2.gif) ;
background-repeat: no-repeat ;
width: 800px ;
height:12px ;
overflow: hidden }
a {color: blue ; text-decoration:none ; display: block }
a:link {}
a:visited {}
a:hover {color:red ; text-decoration:underline ; background-color: silver}
a:active {}

#pie a {text-decoration:none ; display: block }
#pie a:link {color: red}
#pie a:visited {}
#pie a:hover {color:red ; text-decoration:underline ; background-color: black }
#pie a:active {color:red}

#logotipo a {}
#logotipo a:link {}
#logotipo a:visited {}
#logotipo a:hover {background-color: black }
#logotipo a:active {}

#pieuno {float:left ; width:150px ; color: red}
#piedos {float:left ; width:498px ; color: red}
#pietres {float:left ; width:150px ; color: red}

INDEX

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<LINK REL="SHORTCUT ICON" HREF="objetos/jairoicono.ico">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>jairo</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
</head>
<body>
<div id="global">

<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo">[img]objetos/logotipo.png[/img]
</div>
<div id="publicidad">Esta es mi pagina!</div>
</div>
<div id="navegacion">
<ul>[*]Portada[*]Historia[*]Discografía[*]Conciertos[*]Descargas[*]Foro[*]Souvenirs[/list] </div>

<div id="contenido">

<div id="menu">
<ul>
<h1>MENÚ</h1>[*]Enlace 1[*]Enlace 2[*]Enlace 3[*]Enlace 4[/list] </div><h1>Bienvenidos a la pagina oficial de la banda</h1>Esta será la zona principal de la web

Este es mi segundo párrafo. Acabo de poner un punto y en cambio sigue siendo un párrafo pues no le he colocado aún la etiqueta de cierre. Voy a ponersela justo aquí.</p>
<h2>Y este es el tercer párrafo.</h2>

En pocas lecciones aprenderé a darle margenes para separarlos unos de otros, e incluso hacerles sanguias por la izquierda a la primera línea, que queda mucho mejor.</p>

Anda, fijate! Salen todos centrados, que cosa. Espero que Jorgens nos enseñe a ponerlos alineados a la izquierda, o justificados. Así esto parece una poesia! je je je.
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxx</p></div>

<div id="pie">
<div id="pieuno">
<ul>[*]Foro Ejemplo[*]Contactos[*]Nos Enlazan[/list]</div>
<div id="piedos">pie dos</div>
<div id="pietres">
<ul>[*]Directorio[*]TopSite[*]Mapa de la Web[/list]</div>
<div id="curva-inferior"></div>
</div>

</body>
</html>

mi url es JAIRO222.ATWEBPAGES.COM

**Foley** · 29/01/2010, 23:33

Tranquilo si nadie nació aprendido.

Bueno, es un poco tarde, ya me voy a la cama pero te respondo rápido:

Creo que con un clear:both en el div curva inferior se arregla. Quedaría así:

#curva-inferior { background-image: url(objetos/curva-inferior2.gif) ;
background-repeat: no-repeat ;
width: 800px ;
height:12px ;
overflow: hidden;
clear:both;
}

Te paso un enlace de una web que explica la propiedad float y clear:

http://www.sidar.org/recur/desdi/mcs...los/float.html

Ojalá se te arregle, si no me avisas ;)