iEthan
Member
So, I have the following markup:
And then the CSS:
When I use Firefox, I can't select the menu items (near the logo) at all. I can highlight them or anything.
I don't know if this is a CSS error or Firefox error...
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>SocialFunction</title>
<link rel="stylesheet" href="assets/css/socialfunction.css" />
<script type="text/javascript" src="assets/jsc/socialfunction.js"></script>
</head>
<body>
<div id="contain">
<div id="head">
<h1><a href="#">SocialFunction</a></h1>
<div id="nav">
<ul id="main">
<li><a href="#">Home</a></li>
<li><a href="#">Why?</a></li>
<li><a href="#">Register</a></li>
<li><a href="#">Login</a></li>
</ul>
<ul id="sub">
<li><a href="#">Home</a></li>
<li><a href="#">Why?</a></li>
<li><a href="#">Register</a></li>
<li><a href="#">Login</a></li>
</ul>
</div>
</div>
<div id="body">
<div class="entry item">
<div id="left">
<a href="#">Welcome</a>
</div>
<div id="main">
<h2>Not your run-of-the-mill social networking site.</h2>
<div id="inner">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et est nec nunc pharetra suscipit eget ut urna. Mauris nec enim vel lectus luctus adipiscing. Pellentesque vehicula blandit lorem, ac convallis mi hendrerit ac. Nunc sodales est quis quam ultrices ultrices. Cras vel condimentum est. Donec quis turpis est. Duis viverra quam nulla, eget convallis risus. In aliquet, libero non fringilla mattis, lectus est tempus arcu, id rhoncus leo mauris sit amet sem. Phasellus imperdiet pellentesque justo, non ullamcorper eros tincidunt eu. Etiam rhoncus lorem at erat molestie sed aliquam erat varius.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et est nec nunc pharetra suscipit eget ut urna. Mauris nec enim vel lectus luctus adipiscing. Pellentesque vehicula blandit lorem, ac convallis mi hendrerit ac. Nunc sodales est quis quam ultrices ultrices. Cras vel condimentum est. Donec quis turpis est. Duis viverra quam nulla, eget convallis risus. In aliquet, libero non fringilla mattis, lectus est tempus arcu, id rhoncus leo mauris sit amet sem. Phasellus imperdiet pellentesque justo, non ullamcorper eros tincidunt eu. Etiam rhoncus lorem at erat molestie sed aliquam erat varius.</p>
</div>
</div>
</div>
</div>
<div id="foot">
<p>Copyright © 2009 by <a href="http://twitter.com/beneathearbor">Beneath the Arbor</a>. Code is <a href="http://github.com/fluffyjack/socialfunction">at GitHub</a>.</p>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">API</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Support</a></li>
</ul>
</div>
</div>
</body>
</html>
And then the CSS:
Code:
/* SocialFunction * by Beneath the Arbor * Build 0.8 * * assets/css/socialfunction.css * * This is the global stylesheet. You may find this on GitHub. *//*1. Meyer Reset2. Universal *//* Meyer Reset */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,font,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{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}/* Universal */html{ border-top: 2px solid #000;}body{ background: #f1f1f1; font: 11px "Verdana", Arial, Arial, sans-serif; margin: 50px auto 50px auto; width: 760px;}a{ border-bottom: 1px solid #000; color: #000; text-decoration: none;}a:hover{ border: none; color: #20797D;}h1{ font: 32px "Santana", sans-serif;}h1 a{ border: none; color: #000; text-decoration: none;}h1 a:hover{ color: #20797D}h2{ font: 25px "Georgia", serif; font-style: italic;}#head, #body .entry #main, #foot{ float: right; margin-left: 165px; width: 595px;}/* Header Global */#head{ border-bottom: 4px solid #ccc; margin-bottom: 15px; padding-bottom: 25px;}#head #nav ul li a:hover{ color: #20797D;}/* Body Global */#body .entry #left{ position: relative; top: 25px;}#body .entry #left a{ background: #e9e9e9; border: none; padding: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}#body .entry #left a:hover{ background: #20797D; color: #fff;}/* Footer Global */#foot{ border-top: 4px solid #20797D; clear: both; margin-top: 25px; padding-top: 15px;}#foot ul{ float: right; margin-top: -15px;}#foot ul li{ display: inline;}#nav ul li{ display: inline;}
When I use Firefox, I can't select the menu items (near the logo) at all. I can highlight them or anything.
I don't know if this is a CSS error or Firefox error...