PDA

View Full Version : problem in IE 6, just cant solve it!


angelsanchezjr
11-28-2011, 09:30 PM
hi, i just got this free template somewhere and i upload it to my server, then a friend of mine checked it and told me is a mess in IE 6, in IE 7 and up it looks fine,also on the other most popular browsers, i´been trying to fix it but i just can´t, any body´s help will be just great
this is the url: http://www.vacacionesytours.com/ (THE PROBLEM IS WITH THE MAIN MENU)
i paste the code here:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="css/layout.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery-1.4.2.js" ></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/cufon-replace.js"></script>
<script type="text/javascript" src="js/Myriad_Pro_600.font.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="http://info.template-help.com/files/ie6_warning/ie6_script_other.js"></script>
<script type="text/javascript" src="js/html5.js"></script>
<![endif]-->
</head>
<body id="page1">
<div class="extra">
<div class="main">
<!-- header -->
<header>
<div class="wrapper">
<h1><a href="index.html" id="logo">Around the World</a></h1>
<div class="right">
<div class="wrapper">
<form id="search" action="" method="post">
<div class="bg">
<input type="submit" class="submit" value="">
<input type="text" class="input">
</div>
</form>
</div>
<div class="wrapper">
<nav>
<ul id="top_nav">
<li><a href="#">Register</a></li>
<li><a href="#">Log In</a></li>
<li><a href="#">Help</a></li>
</ul>
</nav>
</div>
</div>
</div>
<nav>
<ul id="menu">
<li><a href="index.html" class="nav1">Home</a></li>
<li><a href="About.html" class="nav2">About Us </a></li>
<li><a href="Tours.html" class="nav3">Our Tours</a></li>
<li><a href="Destinations.html" class="nav4">Destinations</a></li>
<li class="end"><a href="Contacts.html" class="nav5">Contacts</a></li>
</ul>
</nav>
<article class="col1">
<ul class="tabs">
<li><a href="#" class="active">Flight</a></li>
<li><a href="#">Hotel</a></li>
<li><a href="#">Car</a></li>
<li class="end"><a href="#">Cruise</a></li>
</ul>
<div class="tabs_cont">
<form id="form_1" action="" method="post">
<div class="bg">
<div class="wrapper">
<div class="radio">
<input type="radio" name="name1" checked>Round trip
</div>
<div class="radio"><input type="radio" name="name1">One way</div>
</div>
<a href="#">Multiple destinations</a>
<div class="wrapper"><input type="text" class="input">From</div>
<div class="wrapper"><input type="text" class="input">To</div>
<div class="wrapper check_box"><input type="checkbox" checked ><a href="#">Search nearby airports</a></div>
<div class="wrapper"><input type="text" class="input input2" value="04/11/2010" onblur="if(this.value=='') this.value='04/11/2010'" onfocus="if(this.value =='04/11/2010' ) this.value=''">Depart (mm/dd/yy)</div>
<div class="wrapper pad_bot1"><input type="text" class="input input2" value="04/11/2010" onblur="if(this.value=='') this.value='04/11/2010'" onfocus="if(this.value =='04/11/2010' ) this.value=''">Return (mm/dd/yy)</div>
<div class="wrapper">
<div class="radio"><input type="radio" name="name2" checked>Economy cabin</div>
<div class="radio end"><input type="radio" name="name2">Business</div>
</div>
<div class="wrapper pad_bot1">
<a href="#" class="button" onclick="document.getElementById('form_1').submit()">Search</a>
Audlts <select><option>1</option></select>
</div>
</div>
</form>
</div>
</article>
<article class="col1 pad_left1">
<div class="text">
<img src="images/text1.jpg" alt="">
<h2>The Best Offers</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.</p>
<a href="#" class="button">Read More</a>
</div>
</article>
<div class="img"><img src="images/img.jpg" alt=""></div>
</header><div class="inner_copy">More <a href="http://www.templatemonster.com/">Website Templates</a> at TemplateMonster.com!</div>
<!-- / header -->
<!-- content -->
<section id="content">
<article class="col1">
<h3>Hot Travel</h3>
<div class="pad">
<div class="wrapper under">
<figure class="left marg_right1"><img src="images/page1_img1.jpg" alt=""></figure>
<p class="pad_bot2"><strong>Italy<br>Holidays</strong></p>
<p class="pad_bot2">Lorem ipsum dolor sit amet, consect etuer adipiscing.</p>
<a href="#" class="marker_1"></a>
</div>
<div class="wrapper under">
<figure class="left marg_right1"><img src="images/page1_img2.jpg" alt=""></figure>
<p class="pad_bot2"><strong>Philippines<br>Travel</strong></p>
<p class="pad_bot2">Lorem ipsum dolor sit amet, consect etuer adipiscing.</p>
<a href="#" class="marker_1"></a>
</div>
<div class="wrapper">
<figure class="left marg_right1"><img src="images/page1_img3.jpg" alt=""></figure>
<p class="pad_bot2"><strong>Cruise<br>Holidays</strong></p>
<p class="pad_bot2">Lorem ipsum dolor sit amet, consect etuer adipiscing.</p>
<a href="#" class="marker_1"></a>
</div>
</div>
</article>
<article class="col2 pad_left1">
<h2>Popular Places</h2>
<div class="wrapper under">
<figure class="left marg_right1"><img src="images/page1_img4.jpg" alt=""></figure>
<p class="pad_bot2"><strong>Hotel du Havre</strong></p>
<p class="pad_bot2">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p>
<p class="pad_bot2"><strong>Nemo enim ipsam voluptatem</strong> quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur.</p>
<a href="#" class="marker_2"></a>
</div>
<div class="wrapper">
<figure class="left marg_right1"><img src="images/page1_img5.jpg" alt=""></figure>
<p class="pad_bot2"><strong>Hotel Vacance</strong></p>
<p class="pad_bot2">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa.</p>
<p class="pad_bot2">Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda.</p>
<a href="#" class="marker_2"></a>
</div>
</article>
</section>
<!-- / content -->
</div>
<div class="block"></div>
</div>
<div class="body1">
<div class="main">
<!-- footer -->
<footer>
<a href="http://www.templatemonster.com/" target="_blank">Website template</a> designed by TemplateMonster.com<br>
<a href="http://www.templates.com/product/3d-models/" target="_blank">3D Models</a> provided by Templates.com
</footer>
<!-- / footer -->
</div>
</div>
<script type="text/javascript"> Cufon.now(); </script>
</body>
</html>


CSS RESET CODE :
a, abbr, acronym, address, applet, article, aside, audio, b, blockquote, big, body, center, canvas, caption, cite, code, command, datalist, dd, del, details, dfn, dl, div, dt, em, embed, fieldset, figcaption, figure, font, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, keygen, label, legend, li, meter, nav, object, ol, output, p, pre, progress, q, s, samp, section, small, span, source, strike, strong, sub, sup,table, tbody, tfoot, thead, th, tr, tdvideo, tt,u, ul, var {background:transparent;border:0 none;font-size:100%;margin:0;padding:0;border:0;outline:0;ve rtical-align:top}
ol, ul {list-style:none}
blockquote, q {quotes:none}
table, table td {padding:0;border:none;border-collapse:collapse}
img {vertical-align:top}
embed {vertical-align:top}
* {border:none}


LAYOUT CODE:
.col1, .col2, .col3, .cols {float:left}
.col1 {width:267px}
.col2 {width:650px}
.cols {width:304px}
.col3 {width:393px}
/* index.html */
#page1 h1 {padding:27px 0 0 0}
#page1 #search {padding:46px 0 10px 0}
#page1 #menu {margin-top:32px;margin-bottom:35px}
#page1 .img {right:-13px;top:236px}
#page1 .text {text-align:center;padding:0;width:100%}
#page1 header {height:612px}
/* index-1.html */
/* index-2.html */
#page3 .cols {width:215px}
/* index-3.html */
/* index-4.html */
/* index-5.html */
/* index-6.html */

Style CODE:
/* Getting the new tags to behave */
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {display:block}
mark, rp, rt, ruby, summary, time {display:inline}
/* Left & Right alignment */
.left {float:left}
.right {float:right}
.wrapper {width:100%;overflow:hidden}
body {background:url(../images/bg.jpg) top center repeat;border:0;font:13px Arial, Helvetica, sans-serif;color:#323232;line-height:17px}
.inner_copy, .inner_copy a {border:0;float:right;background:#fff;color:#f00;w idth:50%;line-height:10px;font-size:10px;margin:-220% 0 0 0;overflow:hidden;padding:0}
.css3 {border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;box-shadow:0 0 4px rgba(0, 0, 0, .4);-moz-box-shadow:0 0 4px rgba(0, 0, 0, .4);-webkit-box-shadow:0 0 4px rgba(0, 0, 0, .4);behavior:url(js/PIE.htc);position:relative}
.body1 {background:url(../images/bg_footer.jpg) top center repeat;height:100px}
.main {margin:0 auto;width:960px;position:relative}
.block {height:100px}
.extra {min-height:100%;height:auto !important;height:100%;margin:0 auto -100px}
body, html {height:100%}
a {color:#f09e2f;text-decoration:underline;outline:none}
a:hover {text-decoration:none}
h1 {float:left;padding:17px 0 0 0}
h2 {font-size:40px;text-transform:uppercase;font-weight:600;color:#3081c8;line-height:52px;padding:2px 0 33px 0}
h3 {font-size:26px;color:#fff;color:#fff;padding-left:35px;line-height:57px;margin-bottom:30px;background:#3081c8;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;behavior:url(js/PIE.htc);position:relative;text-transform:uppercase;font-weight:600}
p {padding-bottom:17px}
/* header */
header {overflow:hidden;width:100%;height:494px}
#logo {background:url(../images/logo.jpg) no-repeat;display:block;width:354px;height:101px;text-indent:-5000px}
#search {float:right;padding:36px 0 10px 0}
#search .bg {background:url(../images/search.gif) no-repeat;width:247px;height:29px}
#search .submit {background:none;width:29px;height:29px;float:righ t;cursor:pointer}
#search .input {float:right;background:none;font:13px Arial, Helvetica, sans-serif;color:#303030;width:208px;height:17px;paddin g:6px 5px}
#top_nav {float:right;padding:0 0 0 0}
#top_nav li {float:left;padding-left:5px}
#top_nav a {display:block;background:url(../images/top_nav_bg.gif) no-repeat;width:79px;font-size:13px;line-height:29px;color:#323232;text-align:center;text-decoration:none}
#top_nav a:hover {color:#fff;background:#323232}
#menu {width:100%;overflow:hidden;margin-top:22px;margin-bottom:0px;height:57px;overflow:hidden;padding-bottom:1px;border-bottom:5px solid #323232}
#menu li {float:left}
#menu li a {display:block;font-size:26px;color:#fff;font-weight:600;padding:0 35px;border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;-webkit-border-radius:4px 4px 0 0;behavior:url(js/PIE.htc);position:relative;text-decoration:none;text-transform:uppercase;line-height:57px}
#menu li a:hover, #menu #menu_active a {background:#323232}
#menu .end a {padding-right:36px}
.nav1 {background:#3081c8}
.nav2 {background:#8cbd20}
.nav3 {background:#f09e2f}
.nav4 {background:#b530ba}
.nav5 {background:#30b6c9}
.tabs {width:100%;overflow:hidden}
.tabs li {float:left;padding-right:1px}
.tabs .end {padding:0}
.tabs a {display:block;width:66px;font-size:13px;line-height:31px;color:#fff;text-transform:uppercase;text-align:center;border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;-webkit-border-radius:4px 4px 0 0;behavior:url(js/PIE.htc);position:relative;background:url(../images/tabs_bg.gif) bottom repeat-x #3081c8;text-decoration:none}
.tabs a:hover, .tabs .active {background:url(../images/bg_form.gif) repeat}
.tabs_cont {border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;-webkit-border-radius:0 0 4px 4px;behavior:url(js/PIE.htc);position:relative;background:url(../images/bg_form.gif) repeat;padding:30px 35px 28px}
.img {position:absolute;right:0px;top:203px}
.text {padding:7px 0 0 36px;width:575px}
.text h2 {font-size:32px;color:#323232;line-height:40px;padding:4px 0 15px 0;letter-spacing:-1px}
.text p {font-size:12px;font-weight:bold;color:#323232;line-height:20px;text-align:left;padding-bottom:25px}
.text img {margin-top:43px}
/* content */
#content {padding-top:35px;width:100%;overflow:hidden;padding-bottom:60px}
.pad_bot1 {padding-bottom:17px}
.pad_bot2 {padding-bottom:7px}
.pad_left1 {padding-left:42px}
.pad {padding:0 13px}
.marg_bot1 {margin-bottom:17px}
.marg_right1 {margin-right:18px}
.marker_1, .marker_2 {display:inline-block;background:url(../images/marker_1.gif) 0 0 no-repeat;width:17px;height:17px}
.marker_2, .marker_1:hover {background:url(../images/marker_2.gif) 0 0 no-repeat}
.marker_2:hover {background:url(../images/marker_1.gif) 0 0 no-repeat}
.under {padding-bottom:20px;border-bottom:1px solid #cccccc;margin-bottom:20px}
.button {display:inline-block;font-size:16px;color:#fff;background:#f09e2f;line-height:35px;padding:0 16px;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;behavior:url(js/PIE.htc);position:relative;font-weight:600;text-decoration:none;text-transform:uppercase}
.button:hover {background:#8cbd20}
.line1 {background:url(../images/line_ver.gif) 320px 0 repeat-y}
.list1 li {line-height:22px}
.list1 li a {padding-left:13px;background:url(../images/marker_3.gif) 0 5px no-repeat}
/* footer */
footer {padding-top:31px;text-align:center;line-height:18px;color:#fff}
footer a {color:#439deb}
/* forms */
#ContactForm {margin-top:-10px;line-height:29px;font-weight:bold;width:638px}
#ContactForm a {margin-left:10px;float:right;width:86px;text-align:center;padding:0}
#ContactForm .input {float:right;margin-right:222px;width:335px;height:17px;border:1px solid #dcdcdc;background:#fff;padding:5px;margin-bottom:6px;color:#323232;font:13px Arial, Helvetica, sans-serif}
#ContactForm textarea {overflow:auto;float:right;width:557px;height:307p x;border:1px solid #dcdcdc;background:#fff;padding:5px;margin-bottom:16px;color:#323232;font:13px Arial, Helvetica, sans-serif}
#form_1 {color:#fff;line-height:24px}
#form_1 .input {float:right;background:#fff;width:133px;padding:1 px 8px;font:12px Arial, Helvetica, sans-serif ;color:#7f7f7f;height:16px;margin-top:3px}
#form_1 a {color:#439deb}
#form_1 .radio {float:left;padding-right:16px}
#form_1 .radio.end {padding-right:0}
#form_1 .radio input {float:left;margin:5px 5px 0 0px;height:12px;width:12px;overflow:hidden;padding :0}
#form_1 .check_box {margin-top:12px}
#form_1 .input2 {width:62px}
#form_1 select {width:58px;height:18px;padding:1px;margin-left:5px;margin-top:5px;display:inline-block}
#form_1 .button {float:right;font-size:12px;color:#fff;width:66px;line-height:26px;text-decoration:none;text-transform:uppercase;text-align:center;background:#3081c8;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;behavior:url(js/PIE.htc);position:relative;padding:0}

THANKS VERY MUCH FOR YOUR HELP.!!!!!!

johnMoss
11-28-2011, 09:44 PM
Better just to put in an IE6 hack to tell people to upgrade their browser. VERY few people you'll be marketing to still use it. Go here for more info...
http://www.ie6countdown.com/

BullDog
11-28-2011, 10:01 PM
Better just to put in an IE6 hack to tell people to upgrade their browser. VERY few people you'll be marketing to still use it. Go here for more info...
http://www.ie6countdown.com/

Wow... good to see those numbers dropping I thought it was still a much higher percentage.

angelsanchezjr
11-28-2011, 10:07 PM
Better just to put in an IE6 hack to tell people to upgrade their browser. VERY few people you'll be marketing to still use it. Go here for more info...
http://www.ie6countdown.com/
Hi john, Thanks for the response, the thing is that here in mexico from the 100% people that uses IE , from 20 to a 40% of they, still uses IE6, so is a must for me to fix my template, anyway it has a hack already that tell people to upgrade, but anyway they wont be able to see my page :(, so i must fix it. bu i cant find the way, i´ve been trying since a week and nothing.
Thank and see ya soon !!!

dbepp
12-06-2011, 08:07 PM
I'd start going door to door and install a better browser myself before I spent all that time fixing my site for IE6. :lol:

And that link shows only 1.3% of Mexico uses IE6 http://www.ie6countdown.com/#list

edbr
12-07-2011, 02:24 AM
die ie6 die!! I still maitain users of ie6 remain because of pirate xp copies that ship IE6. the end is coming

Rob_Che
12-07-2011, 02:49 PM
I would remove the float:left from the menu <a> tags and apply a display:inline to the <li>s.

I don't have IE6 to check but floating things already floated (within the <li>) upsets IE and it sometimes causes elements to 'step' if the <li> isn;t displayed inline.

Any chance of a screen shot of the problem?