Les presento aqui un problema que me ha surgido con internet explorer 8, el asunto es que tengo un menu horizontal con listas y todo lo necesario para sus rollover, lo tengo con flotacion a la derecha, un ancho fijo de 620 px que es mas que suficiente, ahora cuando lo reviso en las diferentes versiones de internet explorer tenemos que en la version 8 el menu sale quebrado como si le faltara espacio.
este es mi codigo html, tiene un poco de CodeIgniter en el :
Código :
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Sonoran Resorts - Proudly Presenting Sonoran Sky at Sandy Beach</title>
<style type="text/css">
@import url(<?=base_url();?>css/modal.css);
</style>
<!--[if lte IE 6]>
<script type="text/javascript" src="<?=base_url();?>js/supersleight-min.js"></script>
<![endif]-->
<script type="text/javascript" src="<?=base_url();?>js/swfobject.js" ></script>
</head>
<body>
<div id="header" class="clearfix">
<form id="signup_form" method="post" action="<?=base_url();?>feeds/signup" class="alpha">
<input type="text" class="itext" name="email" value="your email" />
<button class="submitButton" value="subscribe"><img src="<?=base_url();?>images/forms/subscribe.png" alt="button" /></button>
</form>
<div class="clearfix">
<a href="<?=base_url();?>" title="go to home page" id="logo"><img src="<?=base_url();?>images/logo_glow.png" alt="logo" /></a>
<ul id="menu" class="lineal_menu">
<li id="curr_home" class="curr"><a href="" title=""><span><img src="<?=base_url();?>images/nav/home.png" alt="home" /></span></a></li>
<li id="ref_fplan"><a href="" title=""><span><img src="<?=base_url();?>images/nav/floorplans.png" alt="floorplans" /></span></a></li>
<li id="ref_building"><a href="" title=""><span><img src="<?=base_url();?>images/nav/thesky.png" alt="the building" /></span></a></li>
<li id="ref_location"><a href="" title=""><span><img src="<?=base_url();?>images/nav/location.png" alt="our location" /></span></a></li>
<li id="ref_gallery"><a href="" title=""><span><img src="<?=base_url();?>images/nav/gallery.png" alt="gallery" /></span></a></li>
<li id="ref_virtual"><a href="" title=""><span><img src="<?=base_url();?>images/nav/virtual_tour.png" alt="virtual tour" /></span></a></li>
<li id="ref_enquiries"><a href="" title=""><span><img src="<?=base_url();?>images/nav/enquiries.png" alt="enquiries" /></span></a></li>
</ul>
</div>
<div id="slider">
<p>You need to download the <a href="http://adobe.com" title="download flash player" >Adobe's Flash Player</a> in order to see this content</p>
</div>
<script type="text/javascript">
var sx = new SWFObject("<?=base_url();?>embed/slider.swf",'mpl','365','160','9');
sx.addParam("wmode", "transparent");
sx.write('slider');
</script>
</div>
<div id="main">
<div class="container_16">
<div id="floor_plans_index" class="clearfix">
<a href="<?=base_url();?>unit_floorplans" title="go to floorpans page"><img src="<?=base_url();?>images/titles/check_floorplans.gif" alt="title" /></a>
<br />
<br />
<div class="grid_4">
<div class="clearfix">
<h1><a href="" title="">4bd</a></h1>
<ul class="left">
<li><a href="" title="">Especifications</a></li>
<li><a href="" title="">Virtual tour</a></li>
<li><a href="" title="">Download Brochure</a></li>
</ul>
</div>
</div>
<div class="grid_4">
<div class="clearfix">
<h1><a href="" title="">3bd</a></h1>
<ul class="left">
<li><a href="" title="">Especifications</a></li>
<li><a href="" title="">Virtual tour</a></li>
<li><a href="" title="">Download Brochure</a></li>
</ul>
</div>
</div>
<div class="grid_4">
<div class="clearfix">
<h1><a href="" title="">2bd</a></h1>
<ul class="left">
<li><a href="" title="">Especifications</a></li>
<li><a href="" title="">Virtual tour</a></li>
<li><a href="" title="">Download Brochure</a></li>
</ul>
</div>
</div>
<div class="grid_4">
<div class="clearfix">
<h1><a href="" title="">1bd</a></h1>
<ul class="left">
<li><a href="" title="">Especifications</a></li>
<li><a href="" title="">Virtual tour</a></li>
<li><a href="" title="">Download Brochure</a></li>
</ul>
</div>
</div>
</div>
<hr />
<div class="clearfix">
<div class="grid_11" id="mainbar">
main
</div>
<div class="grid_5" id="sidebar">
<div class="mod">
sidebar
</div>
<div class="mod">
sidebar
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<div id="top">
</div>
<div class="container_16 clearfix">
<div class="grid_11">
<div class="grid_3" id="logo_footer">
<a href="" title="" class="opaco"><img src="<?=base_url();?>images/logo_negro.jpg" alt="logo sonoran sky" /></a>
</div>
<div class="grid_8" id="footer_menu">
<ul class="lineal_menu">
<li><a href="" title="">home</a></li>
<li><a href="" title="">unit floorplans</a></li>
<li><a href="" title="">the sky</a></li>
<li><a href="" title="">location</a></li>
<li><a href="" title="">gallery</a></li>
<li><a href="" title="">virtual tour</a></li>
<li><a href="" title="">enquiries</a></li>
</ul>
</div>
<div class="clear">
</div>
<div id="partners" class="clearfix">
<div class="grid_3">
<a href="" title="" class="opaco"><img src="<?=base_url();?>images/logo_sea_negro.jpg" alt="logo sonoran sea" /></a>
</div>
<div class="grid_3">
<a href="" title="" class="opaco"><img src="<?=base_url();?>images/logo_spa_negro.jpg" alt="logo sonoran sea" /></a>
</div>
<div class="grid_3">
<a href="" title="" class="opaco"><img src="<?=base_url();?>images/logo_sun_negro.jpg" alt="logo sonoran sea" /></a>
</div>
</div>
</div>
<div class="grid_5" id="footprint">
<ul class="lineal_menu_right clearfix">
<li><a href="" title="">about</a></li>
<li><a href="" title="">contact us</a></li>
<li><a href="" title="">reservations</a></li>
</ul>
<p>copyright © Sonoran Resorts 2008 <br />web design & development by <a href="" title="">fack.us</a></p>
</div>
</div>
</div>
</body>
</html>ahora el css, aun no esta standar ni terminado
Código :
body{}
.lineal_menu li, .lineal_menu_right li{ display:inline;}
.lineal_menu li a, .lineal_menu_right li a{ display:block; float:left; margin:5px; padding:5px}
.lineal_menu_right li a{ float:right}
#header{ min-width:960px;background:url(../images/heads/hd1.jpg) no-repeat center top; height:300px; border-bottom:1px solid #112035}
ul#menu{ float:right;margin-top:80px; width:620px}
ul#menu li *{ margin:0; padding:0; height:30px}
ul#menu li a{margin-right:1px;border-bottom:1px solid #000}
ul#menu li.curr a{ background:url(../images/nav/bg.jpg) no-repeat; }
ul#menu li.curr a span{ display:none}
ul#menu li a:hover{ background:url(../images/nav/bg.jpg);}
ul#menu li a:hover span{ display:none;}
ul#menu #ref_home a:hover{ width:50px; background-position:-6px 0 }
ul#menu #ref_fplan a:hover{ width:120px; background-position: -54px 0}
ul#menu #ref_building a:hover{ width:71px;background-position: -179px 0}
ul#menu #ref_location a:hover{width:77px; background-position: -253px 0}
ul#menu #ref_gallery a:hover{width:74px;background-position: -329px 0}
ul#menu #ref_virtual a:hover{ width:106px;background-position: -402px 0}
ul#menu #ref_enquiries a:hover{ width:77px;background-position: -513px 0}
ul#menu #curr_home a{width:50px; height:30px;}
#logo{float:left; margin-left:50px; margin-top:60px}
#signup_form{ position:absolute; top:1px; right:35px; padding:10px; border-bottom:1px solid #000; background:url(../images/bg_nav.png)}
#signup_form input.itext{ width:200px}
#signup_form input:focus { outline: none; }
#signup_form button{ border:0; background:transparent; padding:0; margin-left:5px}
#slider{ margin:0; margin-left:70px; margin-top:5px}
#main{ border-top:1px solid #fff; background:url(../images/bg_main.jpg) repeat-x; padding-top:20px; margin-bottom:20px}
#main>.container_16{ background:url(../images/bg_main.jpg) no-repeat center 1px;}
#mainbar{ margin-right:0; margin-top:20px; border-right:1px solid #fff}
#sidebar{ margin-left:0; margin-top:20px;}
#sidebar .mod{ height:270px; background:url(../images/bg_mod.gif) no-repeat}
#floor_plans_index .grid_4{ height:90px; background:url(../images/bg_floorplans_index.gif) no-repeat}
#floor_plans_index .grid_4 div{ padding:5px; padding-top:10px}
#floor_plans_index .grid_4 div h1{ font-size:30px; margin:0; padding:0; margin-right:10px; margin-left:5px; float:left}
#floor_plans_index .grid_4 div h1 a{ border-bottom:4px solid #db942d; text-decoration:none; color:#db942d}
#floor_plans_index .grid_4 div h1 a:hover{ text-decoration:underline; border-width:5px; padding-bottom:5px}
#floor_plans_index .grid_4 ul { padding:0; margin:0; margin-left:10px;}
#floor_plans_index .grid_4 ul li{ padding:0; margin:0; list-style:none;}
#floor_plans_index .grid_4 ul li a{ text-decoration:none; color:#574d2f; border-left:1px solid #574d2f; padding-left:5px}
#footer{ margin-bottom:20px; color:#8c9db0}
#footer .container_16{ border-top:1px solid #8c9db0;}
#footer #logo_footer{ margin:10px; margin-top:20px}
#footer .grid_5#footprint{ text-align:right; margin-right:0; margin-top:20px}
#footer .lineal_menu_right li a{text-transform:capitalize}
#footer a{color:#ff850d;}
#footer a:hover{ color:#551a8b;}
#footer_menu{ margin:0}
#footer_menu li a{ padding:0; margin-top:35px; text-transform:capitalize}
#footer #partners{ margin-top:20px}
a.opaco{filter: alpha(opacity=70); opacity: .7}
a.opaco:hover{filter: alpha(opacity=100); opacity: 1}
aqui pueden revisar lo que llevo de este trabajo y aver si a alguien le ha pasado este problema
sonoran-resorts
Saludos
y quedaron casi invisibles, se que estan ahi a la derecha de toda la lista pero ya no me quiebran el menu, lo mismo para las clases de .menu_lineal