Weird CSS Error

iEthan

iEthan

Member
So, I have the following markup:
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 &copy; 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...
 
isnt working in the other browsers also :S

strange... if you change your nav div up to h1 it ill work nicely
 
#head, #body .entry #main, #foot{
float: right;
margin-left: 165px;
width: 595px;
}

margin-left: 0px; and <li> ill do the job for all browsers
 
Hay it's very late to me, been up all night, but I'm having issues visulising your code, try giving it a position:relative and that may sort it TBH.

Let us know if it doesn't. :)
 
desigium said:
#head, #body .entry #main, #foot{
float: right;
margin-left: 165px;
width: 595px;
}

margin-left: 0px; and <li> ill do the job for all browsers
Click to expand...

As mentioned by designium removing the rule "margin-left" from the above code or setting it to 0 will fix the problem. The issue is that your two rules (float & margin-left) ..

HTML: 
#head, #body .entry #main, #foot{
      float: right;
      margin-left: 165px;
      width: 595px;
  }

are two different approaches to what you want to achive, but end up clashing and where you see the links is not actually where the browser thinks that they are. You really shouldn't float all the div's to the right and setting a margin on them all is just ugly.

Floating all of your divs creates no proper hierarchy for the model, If you want to float all of these boxes to the right of your webpage, you should wrap them all in another containing div and float that alone.
 
You must log in or register to reply here.
Back
Top