logo-dw

Go Back   Dreamweaver Club Forums > Hand Coders Forum > HTML and CSS
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 05-30-2012, 11:24 PM   #1
tahsin1982
 
Join Date: May 2011
Location: Canada
Posts: 50
Default ul li float ie 7 css problem

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!


HTML Code:
<!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 is offline   Reply With Quote
Old 05-30-2012, 11:58 PM   #2
tahsin1982
 
Join Date: May 2011
Location: Canada
Posts: 50
Default

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.
tahsin1982 is offline   Reply With Quote
Old 05-31-2012, 10:10 AM   #3
Corrosive
Corrosive's Avatar
 
Join Date: Feb 2008
Location: Bristol, England
Posts: 7,103
Default

Forget about IE6. I have
Corrosive is offline   Reply With Quote
Old 05-31-2012, 10:53 AM   #4
tahsin1982
 
Join Date: May 2011
Location: Canada
Posts: 50
Default

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.
tahsin1982 is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 04:22 AM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com