Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    6
    Thanks
    0
    Thanked 1 Time in 1 Post

    IE to Firefox differences. trying out CSS & HTML

    I have been using w3schools to practice using CSS for the layout and design of my HTML pages.

    within the past 4hrs I am happy with what I have learnt. So I have a look using IE instead of firefox, and its wrecked! I am unsure how I overcome these problems!

    Any pointers would be greatly appreciated.

    Thanks in advance,

    Code:
    <html>
    <head>
    <style type="text/css">
    body{
    background: #E00000;
    }
    div.title{
    /*background: url('title.jpg') no-repeat top;*/
    background: white;
    text-align: center;
    width:900px;
    height:80px;
    margin: 0px auto 0px auto;
    }
    
    div.mainBody{
    height:800px;
    width: 900px;
    background: #FFB0B0;
    margin: 35px auto 0px auto;
    border: 3px solid #909090;
    }
    
    /*============== MENU TABS =================*/
    div.menu1{
    text-align: left;
    width: 900px;
    margin: 0px auto 0px auto;
    
    }
    #menuList1
    {
    padding: 3px 0;
    border-bottom: 3px solid #909090;
    font: bold 14px Verdana, sans-serif;
    width: 900px;
    }
    
    #menuList1 li
    {
    list-style: none;
    display: inline;
    }
    
    #menuList1 li a
    {
    padding: 3px 0.5em;
    margin-left: 3px;
    border: 1px solid #909090;
    border-bottom: none;
    background: #F00000;
    text-decoration: none;
    }
    
    #menuList1 li a#current
    {
    background: #FFB0B0;
    border-bottom: 3px solid #FFB0B0;
    }
    
    #menuList1 li a:link { color: #000; }
    #menuList1 li a:visited { color: #000; }
    
    #menuList1 li a:hover
    {
    color: #000;
    background: ##FFFFFF;
    border-color: ##3FFF3F;
    }
    
     ul#menuList1 li#active li ul#subMenu
    {
    display:none;
    }
     ul#menuList1 li#active ul#subMenu
    {
    display:block;
    }
     ul#menuList1 li#active li#active ul#subMenu
    {
    display:block;
    margin-top: 3px;
    }
    
    ul#subMenu
    {
    display:none;
    position: absolute;
    margin-left: -3px;
    padding: 0px 0px;
    margin-top: 6px;
    background: #FFB0B0;
    border-left: 3px solid #909090;
    border-right: 3px solid #909090;
    border-bottom: 3px solid #909090;
    width: 900px;
    text-align: left;
    
    }
    
    ul#subMenu li
    {
    background: transparent;
    }
    
    ul#subMenu li a
    {
    background: transparent;
    border:none;
    font-weight: lighter;
    }
    
    
    ul#subMenu li a#current
    {
    border:none;
    background: transparent;
    font-weight: bold;
    }
    
    /*==============END OF MENU=============*/
    </style>
    </head>
    <body>
    <div class="title">
    <h1>Title</h1>
    </div>
    
    <div class="menu1">
    <ul id="menuList1">
    <li><a href="#">Item1</a></li>
    <li><a href="#">Item2</a></li>
    <li id="active"><a href="#" id="current">Item3</a>
    
     <ul id="subMenu">
    <li><a href="#">Item3.1</a></li>
    <li id="active"><a href="#" id="current">Item3.2</a>
    
     <ul id="subMenu">
    <li><a href="#" id="current">Item3.2.1</a></li>
    <li><a href="#">Item3.2.2</a></li>
    </ul>
    
    </li>
    <li><a href="#">Item4</a></li>
    </ul>
    </li>
    <li><a href="#">Item5</a></li>
    <li><a href="#">Item6</a></li>
    <li><a href="#">Item7</a></li>
    </ul>
    </div>
    <div class="mainBody">
    main text area
    </div>
    <div>
    footer
    </div>
    </body>
    
    </html>

  • #2
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    I'm surprised you missed the part about using a proper doctype. Without one, browsers go into quirks mode, a place you never want to be, and IE, in particular, won't attempt to act like the modern browsers. Add this to your first line of your html:

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

  • #3
    ubh
    ubh is offline
    Regular Coder ubh's Avatar
    Join Date
    Apr 2008
    Location
    Portland, Oregon U.S.A.
    Posts
    443
    Thanks
    108
    Thanked 15 Times in 14 Posts
    Hi iainmackay85,
    Dang, a little too late. drhowarddrfine is correct.


    In addition, it looks like you are trying to create a content hide and display with pure css. I talk about this is my tutorial on how to create a pure css content hide and display located here. (Note:look at the .htc file and IE fix part of the tutorial)

    Pure CSS Content Hide and Display Menu

    You might also be interested in my CSS Menu Builder Tool.

    Hope this helps some.

  • #4
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    6
    Thanks
    0
    Thanked 1 Time in 1 Post
    Quote Originally Posted by drhowarddrfine View Post
    I'm surprised you missed the part about using a proper doctype. Without one, browsers go into quirks mode, a place you never want to be, and IE, in particular, won't attempt to act like the modern browsers. Add this to your first line of your html:

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

    you know how it is just skip down to the interesting parts

    it has only fixed the css alignment.

    thanks anyway.

    Regards,


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •