1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

nav bar alignment in firefox

Discussion in 'CSS' started by mikee.jk, Aug 28, 2008.

0
  1. #1
    hi guys,

    i just tried to write a hack free nav bar which works in all browsers

    i ended up with some alignment issue in firefox
    its fine in ie browsers

    can anyone review it and help me
    "plz see the attchment"


    
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>CSS Browsers Tests</title>
<meta name="keywords" content="Your, keywords, here." />
<meta name="description" content="Your Description Here." />
<link rel="stylesheet" type="text/css" href="../css/menustyle.css" media="screen" />
</head>

<body>
<ul id="nav">
	<li><a href="#">main1</a></li>
	<li><a href="#">main2</a></li>
	<li><a href="#">main3</a></li>
	<li><a href="#">main4</a></li>
	<li><a href="#">main5</a>
		<ul>
			<li><a href="#">sub1</a></li>
			<li><a href="#">sub2</a></li>
			<li>sub3</li>
		</ul>
	</li>
	<li><a href="#">main6</a></li>
	<li><a href="#">main7</a></li>
</ul>
</body>

</html>
    Code (markup):

    
ul#nav{
	margin:0;
	padding:0;
	font-family:Verdana, Arial, Helvetica, Sans-serif;
	font-size:11px;
	float:left;
}
ul#nav li{
	display:inline;
	list-style-type:none;
}
ul#nav li a{
	/*background:url(../img/img.gif) no-repeat;*/
	width:81px;
	height:39px;
	float:left;
}
ul#nav li a:hover {
/*background:url(../img/imghover.gif) no-repeat;*/
color:#000;
}
ul#nav li ul{
	float:left;
	/*background:url(../img/submenu.gif) no-repeat;*/
	width:980px;
	height:25px;
	margin:0;
	padding:0;
	clear:both;
}
ul#nav li ul li a{
	float:none;
	background:none;
	border:none;
}
    Code (markup):
     

    Attached Files:

    • ff.jpg
      ff.jpg
      File size:
      13.7 KB
      Views:
      52
    mikee.jk, Aug 28, 2008 IP
  2. bvchandu

    bvchandu Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Hi....Try this code

    ==========================================================

    <!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>CSS Browsers Tests</title>
    <meta name="keywords" content="Your, keywords, here." />
    <meta name="description" content="Your Description Here." />
    <style type="text/css">
    ul#nav{
    margin:0;
    padding:0;
    font-family:Verdana, Arial, Helvetica, Sans-serif;
    font-size:11px;
    float:left;
    }
    ul#nav li{
    float:left;
    list-style-type:none;
    }
    ul#nav li a{
    /*background:url(../img/img.gif) no-repeat;*/
    width:81px;
    height:39px;
    float:left;
    }
    ul#nav li a:hover {
    /*background:url(../img/imghover.gif) no-repeat;*/
    color:#000;
    }
    ul#nav li:hover ul
    {
    display:block;
    height:25px;
    }
    ul#nav li ul{
    display:none;
    float:left;
    /*background:url(../img/submenu.gif) no-repeat;*/
    height:25px;
    margin:0;
    padding:0;
    clear:both;
    position:absolute;
    top:6%;
    left:24%;
    }
    ul#nav li ul li a{
    float:none;
    background:none;
    border:none;
    padding:4px;
    }
    </style>
    </head>

    <body>
    <ul id="nav">
    <li><a href="#">main1</a></li>
    <li><a href="#">main2</a></li>
    <li><a href="#">main3</a></li>
    <li><a href="#">main4</a></li>
    <li><a href="#">main5</a>
    <ul>
    <li><a href="#">sub1</a></li>
    <li><a href="#">sub2</a></li>
    <li>sub3</li>
    </ul>
    </li>
    <li><a href="#">main6</a></li>
    <li><a href="#">main7</a></li>
    </ul>
    </body>

    </html>

    ==========================================================
     
    bvchandu, Aug 29, 2008 IP
  3. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #3
    If you are saying it's fine in IE then that tells me you used IE to design it and that is why you are having issues. Never, ever use IE for testing sites until it works in modern browsers like Firefox. Then you can "adjust" for IEs many quirks and bugs.

    Unfortunately, I don't have a Windows box available to look at this, and you didn't say what the problem is, so I can't help till tomorrow.
     
    drhowarddrfine, Aug 31, 2008 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #4
    Setting float:none after a float almost never works cross browser - usually it's IE that screws it up but I've seen Opera and FF ignore it too - and there's no rhymne nor reason as to when it doesn't work.

    I'm not quite certain how you are positioning your nested UL - what you have there doesn't seem to be positioning at all so what you have for a picture and what SHOULD render bear no resemblance unless there's a LOT more CSS you aren't showing us, or I'm completely misunderstanding what you are trying to do. If you are wondering why main6 and main7 are not appearing on the same line, it's because the nested UL is still display:block, full width and nested. There is no reason or even ROOM for the latter two to ride up. If they ARE riding up in IE, then ... that's the most borked IE rendering bug I've ever seen. (given it's propensity for NOT riding up content that should)

    Unless you take the nested UL out of flow (position:absolute or a negative margin equal to it's own width), it should do exactly what your thumb shows... Which is why you should probably be floating your LI and not your anchors, since position:absolute relative to inline elements is usually made of /FAIL/ in SOME browser. FF screws it up if you don't include top, Opera screws up if you DO, Safari could care either way and IE screws up both if haslayout isn't tripped!

    By yeah, as DrHowardDrFine said, if you designed this in IE you have your mistake right there. You do not write something completely to any one browser, you test against ALL of them. Ideally you should test against the most standards compliant, unfortunately there is no such thing AND there's enough vaguaries in the specs that there's room for each browser maker to do what they do best, go their own direction and to hell with what anyone else is trying to do. (see forms)
     
    deathshadow, Sep 4, 2008 IP