El JQuery Corners deforma mi pagina

Distriker · #1 (**permalink**) 06/04/2009, 10:00

Hola a todos, mi web tiene bordes y ahora mismo estoy haciendo que sean visibles para todos los navegadores, gracias a la propiedad border radius le puede aplicar el borde a los navegadores Gecko y Webkit, pero me falta el IE y el Opera que son los dos despues de Mozilla, Safari y Google Chrome que mas me importan.

Resulta ser de que si le meto este JQuery me sale deformado, miren el codigo:

Código HTML:

<div style="background-color:#acc; padding:5px" class="rounded">
  Simple Example
</div>
<script>$(document).ready( function(){
  $('.rounded').corners();
});</script>

Y miren como se queda, pero, debería de quedarse así.

Aquí os dejo el HTML entero de la página:

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
	
<link rel="StyleSheet" href="style.css" type=text/css>

		<title>index</title>
		<meta name="author" content="Distriker" >
		<meta name="generator" content="screem 0.16.1" >
		<meta name="description" content="" >
		<meta name="keywords" content="" >
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" >
		<meta http-equiv="Content-Script-Type" content="text/javascript" >
		<meta http-equiv="Content-Style-Type" content="text/css" >


</head>
	<body>
<div id="contenido">

            <div id="cabecera">
						<img alt="logo (75K)" src="images/logo.jpg" height="144" width="145" />
<div id="menu">

<ul>
  <li class="nivel1"><a href="http://www.forosdelweb.com" class="nivel1">OpciÃ³n 1</a>
<!--[if lte IE 6]><a href="http://www.forosdelweb.com" class="nivel1ie">OpciÃ³n 1<table class="falsa"><tr><td><![endif]-->
	<ul class="uno">
		<li><a href="#">OpciÃ³n 1.1</a></li>
		<li><a href="#">OpciÃ³n 1.2</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
  </li>

  <li class="nivel1"><a href="#" class="nivel1">OpciÃ³n 2</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">OpciÃ³n 2<table class="falsa"><tr><td><![endif]-->
	<ul class="dos">
		<li><a href="#">OpciÃ³n 2.1</a></li>
		<li><a href="http://www.google.es">OpciÃ³n 2.2</a></li>
		<li><a href="#">OpciÃ³n 2.3</a></li>
		<li><a href="#">OpciÃ³n 2.4</a></li>

		<li><a href="#">OpciÃ³n 2.5</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
  <li class="nivel1"><a href="#" class="nivel1">OpciÃ³n 3</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">OpciÃ³n 3<table class="falsa"><tr><td><![endif]-->
	<ul class="tres">
		<li><a href="#"></a></li>
		<li><a href="#">OpciÃ³n 3.1</a></li>

		<li><a href="#">OpciÃ³n 3.2</a></li>
		<li><a href="#">OpciÃ³n 3.3</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
  <li class="nivel1"><a href="#" class="nivel1">OpciÃ³n 4</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">OpciÃ³n 4<table class="falsa"><tr><td><![endif]-->
	<ul class="cuatro">
		<li><a href="#"></a></li>

		<li><a href="#">OpciÃ³n 4.1</a></li>
		<li><a href="#">OpciÃ³n 4.2</a></li>
		<li><a href="#">OpciÃ³n 4.3</a></li>
		<li><a href="#">OpciÃ³n 4.4</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
  <li class="nivel1"><a href="#" class="nivel1">OpciÃ³n 4</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">OpciÃ³n 4<table class="falsa"><tr><td><![endif]-->
	<ul class="cinco">
		<li><a href="#"></a></li>

		<li><a href="#">OpciÃ³n 4.1</a></li>
		<li><a href="#">OpciÃ³n 4.2</a></li>
		<li><a href="#">OpciÃ³n 4.3</a></li>
		<li><a href="#">OpciÃ³n 4.4</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</ul>
</li>


</div>

                <h1>Bienvenido a Betaconsolas.com</h1>
                <h2>:D:D:D</h2>

</div>
    <div id="sidebar-izquierda">
		
        <h3>SecciÃ³n</h3>
        <p>Bla bla ...</p>

    </div>

    <div id="centro">

        <h3>Vacio</h3>
        <p>Vacio</p>
<p>dsd</p>
<p>dsa</p>
<p>asas</p>

    </div>

<div id="sidebar-derecha">

<h3>Seccion 2</h3>
<p>Bla bla ....</p>

</div>
    <div id="footer">

        Pie - Datos aquÃ*

    </div>
		
</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-4602067-3");
pageTracker._trackPageview();
} catch(err) {}</script>
	</body>
</html>

¿Necesitais algo mas?

Saludos

#2 (**permalink**) 06/04/2009, 14:57

El HTML no es igual en un caso y en otro. Y en el que has metido lo de redondear las esquinas, has anidado mal el <div> que has metido.

Distriker · #3 (**permalink**) 06/04/2009, 16:16

A ver, yo lo coloco de esta forma:

Código HTML:

<div id="sidebar-izquierda">
<div style="background-color:#acc; padding:5px" class="rounded">
		
        <h3>SecciÃ³n</h3>
        <p>Bla bla ...</p>
</div>
    </div>
<script>$(document).ready( function(){
  $('.rounded').corners();
});</script>

¿Así está bien?

Saludos