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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Horizontal drop down menu - CSS problem

    Hi!

    I hope someone is willing to help me with a CSS problem I have with a horizontal drop down menu. I'm new in this and can need some help!

    The following link shows how I would like to have it. However, this only works in firefox and the CSS is a mess...

    http://www.dekersenkraam.nl/new/index.html

    In short, this is the my 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>
    <link href="style - kopie2_2.css" rel="stylesheet" type="text/css" />
    <title>Kersenboomgaard Rhijnestein</title>
    </head>
    <body>
    <div id="container">
    <div id="header">
    <ul id="nav">
    	<li><a href="../index.html"><b>Home</b></a></li>
    	<li><a href="../index.html"><b>De boomgaard</b></a>
    	<ul>
    	<li><a href="../boomgaard/geschiedenis.html">Toen en nu</a></li>
    	<li><a href="../boomgaard/kersensoorten.html">Kersensoorten</a></li>
    	<li><a href="../boomgaard/omgeving.html">Omgeving</a></li>
    	<li><a href="../boomgaard/terechtanders.html">Terecht Anders</a></li>
    	</ul>
    	</li>
    	<li><a href="../kraam.html"><b>De kraam</b></a></li>
    	<li><a href="../fotos.html"><b>Foto's</b></a>
    	<ul>
    	<li><a href="../fotos/oudedoos.html">Oude doos</a></li>
    	<li><a href="../fotos/seizoenen.html">Seizoenen</a></li>
    	<li><a href="../fotos/kersenkraam.html">Kersenkraam</a></li>
    	</ul>
    	</li>
    	<li><a href="../contact.html"><b>Contact</b></a></li>
    	<li><a href="../gastenboek.html"><b>Gastenboek</b></a></li>
    </ul> 
    </body>
    </html>
    and this the incomplete CSS:
    Code:
    body {
    	background-color:#a6bf79;
    	color:#000000;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	margin: 10px 10px;
    	padding: 0px;
    }
    .clear{clear:both;}
    * {
    	margin: 0px;
    	padding: 0px;
    }
    #container {
    	margin: 0px auto;
    	text-align: left;
    	width: 717px;
    }
    a{
    	font-size: 12px;
    }
    p{
    	margin: 15px 0px;
    }
    #header {
    	margin: 0px 0px 0px 0px;
    	background-image:url(images/header.jpg);
    	width:717px;
    	height:288px;
    	position:relative;
    }
    #nav, #nav ul {
    padding: 5px 0 0 0;
    margin: 0;
    list-style: none;
    }
    Can someone please help me with the right CSS, which is working in both Firefox and Explorer?

    Thanks in advance,

    Anneke

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Anneke vD,
    <li2> is kind of an odd thing to see. It is also invalid.
    If you need to style that li differently than the other li's you can give it a class or an id.

    Check you code with the validator - see the link about validation in my signature line below.


    .
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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