PDA

View Full Version : ul li float ie 7 css problem


tahsin1982
05-30-2012, 11:24 PM
Hi guys,

This is a concept page I created here for having two menu on top and the other at bottom.

http://tahsinwonders.net/testing/concept.html

The page looks perfect in all browsers except older browsers in IE7 there seems to be a break and ie6 the bottom menu is not floating all the way to the right but dosent have the break line like in ie7. If you have IE Tester you will see what I mean.

here is my code. If anyone has any ideas would be great cheers!


<!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>Untitled Document</title>

<style>

/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {

color:white;

font-family:Arial, Helvetica, sans-serif;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}


#wrapper {

width:960px;
margin-left:auto;
margin-right:auto;

}


#header {

height:50px;
background:black;
overflow:hidden;
padding:25px 0 25px 0;

}


#header ul li.logo {

width:100px;
background:red;
float:left;



}

h1 {

font-size:30px;
font-weight:bold;

}

#header ul li.nav {


background:green;
width:auto;
overflow:hidden;

}




li.nav ul{


overflow:hidden;
float:right;
padding:0;



}

li.nav ul.topNav {

background:blue;
margin:0 0 10px 0;
padding:0;

}


li.nav ul.bottomNav {

background:brown;

}


li.nav ul li {
display:block;
float:left;
margin:0 10px 0 0;
font-size:11px;

}

li.nav ul li a {

color:white;
text-decoration:none;

font-weight:bold;



}

li.nav ul.topNav a:hover, li.nav ul.bottomNav a:hover {

text-decoration:underline;

}




</style>




</head>

<body>

<div id="wrapper">

<div id="header">


<ul>


<li class="logo"><h1>LOGO</h1></li><!--end .logo-->

<li class="nav">

<ul class="topNav">


<li><a href="">ITEM 1</a></li>
<li><a href="">ITEM 1</a></li>
<li><a href="">ITEM 1</a></li>
<li><a href="">ITEM 1</a></li>
<li><a href="">ITEM 1</a></li>
<li><a href="">ITEM 1</a></li>




</ul><!--end nav-->


</li><!--end .nav-->

<li class="nav">

<ul class="bottomNav">


<li><a href="">ITEM 1</a></li>
<li><a href="">ITEM 1</a></li>
<li><a href="">ITEM 1</a></li>
<li><a href="">ITEM 1</a></li>
<li><a href="">ITEM 1</a></li>
<li><a href="">ITEM 1</a></li>



</ul><!--end nav-->


</li><!--end .nav-->




</ul>



</div><!--end header-->



</div><!--end wrapper-->



</body>
</html>

tahsin1982
05-30-2012, 11:58 PM
Ok after researching I tried to replace all the ul li with dl dt

http://tahsinwonders.net/testing/concept_dt.html

and it looks perfect in ie7 and all other browsers except in ie 6 all messed up. Weird.

Corrosive
05-31-2012, 10:10 AM
Forget about IE6. I have :)

tahsin1982
05-31-2012, 10:53 AM
ur right its rediculous to be trying to get this right over a 10 year old browser. But it is interesting that dl dt tags seems more stable in ie7 with floats than ul li.