Estba diseñando un theme para wordpress, lo he acabado, voy a verlo en el blog que tengo montado en mi servidor local y se ve de categoría.
Ahora, si lo ve en ie en lugar de firefox (en ie6, no he probado en el 7) se descuadra la página y hace efectos raros en algunos links.
El código hhtml es este (el post por defecto de Wordpress).
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Mi blog </title>
<meta name="generator" content="WordPress 2.3" /> <!-- leave this for stats -->
<link rel="alternate" type="application/rss+xml" title="Mi blog RSS Feed" href="http://127.0.0.1/wordpress/?feed=rss2" />
<link rel="pingback" href="http://127.0.0.1/wordpress/xmlrpc.php" />
<link rel="stylesheet" href="http://127.0.0.1/wordpress/wp-content/themes/sumolari/style.css" type="text/css" media="screen" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="blue" href="http://127.0.0.1/wordpress/wp-content/themes/sumolari/blue.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="green" href="http://127.0.0.1/wordpress/wp-content/themes/sumolari/green.css" />
<script src="http://127.0.0.1/wordpress/wp-content/themes/sumolari/styleswitch.js" type="text/javascript"></script>
<script type="text/JavaScript" src="http://127.0.0.1/wordpress/wp-content/themes/sumolari/curvy/rounded_corners_lite.inc.js"></script>
<script type="text/JavaScript">
window.onload = function()
{
content_type = {
tl: { radius: 20 },
tr: false,
bl: { radius: 20 },
br: false,
antiAlias: true,
autoPad: true
}
sidebar_type = {
tl: { radius: 20 },
tr: { radius: 20 },
bl: { radius: 20 },
br: { radius: 20 },
antiAlias: true,
autoPad: true
}
right_type = {
tl: false,
tr: { radius: 20 },
bl: false,
br: { radius: 20 },
antiAlias: true,
autoPad: true
}
var content = document.getElementById("content");
var sidebar = document.getElementById("sidebar");
var right = document.getElementById("right");
var contentObj = new curvyCorners(content_type, content);
var sidebarObj = new curvyCorners(sidebar_type, sidebar);
var rightObj = new curvyCorners(right_type, right);
sidebarObj.applyCornersToAll();
contentObj.applyCornersToAll();
rightObj.applyCornersToAll();
}
</script>
<meta name='robots' content='noindex,nofollow' />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://127.0.0.1/wordpress/xmlrpc.php?rsd" />
</head>
</head>
<body>
<h1 id="title"><a href="http://127.0.0.1/wordpress/">Mi blog</a></h1>
<div id="wraper">
<div id="content">
<div id="menu">
<ul>
<li><a href="http://127.0.0.1/wordpress/">Inicio</a></li>
<li class="page_item page-item-2"><a href="http://127.0.0.1/wordpress/?page_id=2" title="About">About</a></li>
</ul>
</div>
<br class="clear" />
<div id="page">
<div class="post">
<div class="date"><span>Oct</span> 13</div>
<h2><a href="http://127.0.0.1/wordpress/?p=1" rel="bookmark" title="Link permanente a Hello world!">Hello world!</a></h2>
<p class="metapost"><span class="metacat"><a href="http://127.0.0.1/wordpress/?cat=1" title="View all posts in Uncategorized" rel="category">Uncategorized</a></span> | <span class="metacomments"><a href="http://127.0.0.1/wordpress/?p=1#comments" title="Comment on Hello world!">2 Comentarios »</a></span></p>
<p>Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!</p>
</div>
<p>
<span id="previus-entries"><a href="#">« Anterior</a></span>
<span id="next-entries"><a href="#">Siguiente »</a></span>
</p>
</div>
</div>
<div id="right">
<p>2007 - Sumolari.com</p>
<p>Creado con Wordpress. Diseño por sumolari.com</p>
<p><a href="feed:http://127.0.0.1/wordpress/?feed=rss2" class="rss">Artículos RSS</a> <a href="feed:http://127.0.0.1/wordpress/?feed=comments-rss2" class="rss">Comentarios RSS</a></p>
<p><a href="javascript:chooseStyle('blue', 60)"><img src="http://127.0.0.1/wordpress/wp-content/themes/sumolari/images/blue.png" width="10" height="10" border="0" /></a> <a href="javascript:chooseStyle('green', 60)"><img src="http://127.0.0.1/wordpress/wp-content/themes/sumolari/images/green.png" alt="" width="10" height="10" border="0" /></a> <a href="javascript:chooseStyle('red', 60)"><img src="http://127.0.0.1/wordpress/wp-content/themes/sumolari/images/red.png" alt="" width="10" height="10" border="0" /></a>
</p>
<br class="clear" />
</div>
<div id="sidebar">
<ul>
<li id="search" class="widget_search"><h2>Buscar</h2><ul><form method="get" id="searchform" action="http://127.0.0.1/wordpress/">
<div><input type="text" value="" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Buscar" />
</div>
</form>
</ul></li>
<li id="categories-1" class="widget_catgories"><h2>Categories</h2> <ul>
<li class="cat-item cat-item-1"><a href="http://127.0.0.1/wordpress/?cat=1" title="View all posts filed under Uncategorized">Uncategorized</a>
</li>
</ul>
</li><li id="archives" class="widget_archives"><h2>Archives</h2> <ul>
<li><a href='http://127.0.0.1/wordpress/?m=200710' title='October 2007'>October 2007</a></li>
</ul>
</li> <li id="pages" class="widget_pages"> <h2>Pages</h2> <ul>
<li class="page_item page-item-2"><a href="http://127.0.0.1/wordpress/?page_id=2" title="About">About</a></li>
</ul>
</li> <li id="meta" class="widget_meta"> <h2>Meta</h2> <ul>
<li><a href="http://127.0.0.1/wordpress/wp-admin/">Site Admin</a></li> <li><a href="http://127.0.0.1/wordpress/wp-login.php?action=logout">Logout</a></li>
<li><a href="http://127.0.0.1/wordpress/?feed=rss2" title="Syndicate this site using RSS 2.0">Entries <abbr title="Really Simple Syndication">RSS</abbr></a></li>
<li><a href="http://127.0.0.1/wordpress/?feed=comments-rss2" title="The latest comments to all posts in RSS">Comments <abbr title="Really Simple Syndication">RSS</abbr></a></li>
<li><a href="http://wordpress.org/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform.">WordPress.org</a></li>
</ul>
</li> </ul>
<br class="clear" />
</div>
</div>
<br /><div style="z-index:3" class="smallfont" align="center">LinkBacks Enabled by <a rel="nofollow" href="http://www.crawlability.com/vbseo/">vBSEO</a> 3.0.0</div></body>
</html> He introducido un script en javascript para poder cambiar el css de la web dándole a un botón. En los otros css sólo cambia el fondo del blog y el color de los links.
CSS Parte 1
Código:
/*
Theme Name: Sumolari Dark
Theme URI: http://www.sumolari.com/
Description: El tema para wordpress creado por Sumolari.
Version: 0.9
Author: Lluís Ulzurrun de Asanza Sàez
Author URI: http://www.sumolari.com/
*/
@charset "utf-8";
body {
background-image:url(images/background.png);
background-repeat:repeat-x;
background-color:#CF1519;
background-attachment:fixed;
}
.rss, .rss a {
padding-left:30px;
background-image:url(images/famfamfam/rss.png);
background-position:left;
background-repeat:no-repeat;
color:#CF1519;
}
.rss a:hover {
background-image:url(images/famfamfam/rss_go.png);
background-position:10px;
background-repeat:no-repeat;
color:#FFFFFF;
}
#title {
color:#FFFFFF;
text-align:center;
}
#title a {
color:#CF1519;
text-decoration:none;
}
#title a:hover {
color:#FFFFFF;
text-decoration:none;
}
#wraper {
margin-left:5%;
margin-right:5%;
}
#content {
background-color:#494949;
margin-top:3%;
float:left;
width:65%;
margin-bottom: 3%;
}
#menu {
height:30px;
text-align:center;
font-size:20px;
}
#menu ul {
margin: 0;
padding: 0;
float: left;
font: bold 13px Arial;
width: 100%;
border: 1px solid #625e00;
border-width: 1px 0;
background: black url(images/blockdefault.gif) center center repeat-x;
}
#menu li {
display: inline;
}
#menu li a, #menu li a:visited {
float: left;
color:#FFFFFF;
padding: 9px 11px;
text-decoration: none;
border-right: 1px solid white;
}
#menu li a:hover, #menu li a.current {
color:FFFFFF;
background: transparent url(images/blockactive.gif) center center repeat-x;
}
#menu li{
list-style:none;
display:inline;
}
#page {
margin-left:7%;
margin-right: 7%;
margin-top: 7%;
}
.post {
color:#FFFFFF;
}
.post .date {
height: 50px;
width: 45px;
background: url(images/calendar.gif) no-repeat;
font: normal 22px Arial, Helvetica, sans-serif;
color: #666666;
text-align: center;
padding: 0px 2px 0 0;
line-height: 100%;
float: left;
}
.post a, .post a:visited {
color:#CF1519;
padding:0;
text-decoration:none;
}
No lo he puesto online, pero lo más normal es que esta tarde lo ponga para que podáis ver que ocurre...