CSS Forum

**fresh-d** · 06:38 PM

for some reason there's extra space to the left of the menubar

site: http://www.hmgi.info/`/blue

html

Code:

<html>

<head>
    <title>Blue Digital | Simplicity and Usability Web Designing</title>
    <link href="main.css" rel="stylesheet" type="text/css" media="screen" />
    <!--[if IE]>
    <link rel="stylesheet" type="text/css" href="ie-only.css" />
    <![endif]-->
</head>

<body>
    <div id="content">
        <div id="header">
            <ul id="navigation">
                <li class="home"><a class="active" href="index.html">Home</a></li>
                <li class="solutions"><a href="solutions.html">solutions</a></li>
                <li class="about"><a href="about.html">about</a></li>
                <li class="portfolio"><a href="portfolio.html">portfolio</a></li>
                <li class="contact"><a href="contact.html">Contact</a></li>
                <li class="logo">Blue Digital</li>
            </ul>
        </div>

css

Code:

/*...Body...*/
body{
    background:ffffff;
    width:790px;
    margin: 0px auto;
}

/*a:active{
    outline: none;*/

a:link {text-decoration: none; color:#000;}
a:visited {text-decoration:none}
a:active {text-decoration:none}
a:hover {text-decoration:underline; color:#000;}

/*...Navigation...*/
#navigation{
    margin-top:10px;
    background:url(graphics/bg.png) repeat-x;
    height:51px;
    width:790px;
    position:absolute;
}
#navigation ul{
    height:51px;
}

#navigation li{
    list-style:none;
    display:inline;
    height:51px;
}

#navigation li a{
    float:left;
    display:block;
    height:51px;
    text-indent:-999px;
}

#navigation li.home a {
    background:url(graphics/navigation/home.png);
    width:83px;
}

#navigation li.solutions a {
    background:url(graphics/navigation/solutions.png);
    width:134px;
}

#navigation li.about a {
    background:url(graphics/navigation/about-me.png);
    width:116px;
}

#navigation li.portfolio a {
    background:url(graphics/navigation/portfolio.png);
    width:122px;
}

#navigation li.contact a {
    background:url(graphics/navigation/contact.png);
    width:128px;
}

#navigation li.logo {
    background:url(graphics/navigation/logo.png);
    width:88px;
    float:right;
    height:51px;
    text-indent:-9999px;
}

#navigation li a:hover,
#navigation li:hover a,
#navigation li.hover a {
    background-position:0 -51px;
}

#navigation li.home a.active{
    background:url(graphics/navigation/home.png);
    width:83px;
    background-position:0 -102px;
}

#navigation li.solutions a.active {
    background:url(graphics/navigation/solutions.png);
    width:134px;
    background-position:0 -102px;
}

#navigation li.about a.active {
    background:url(graphics/navigation/about-me.png);
    width:116px;
    background-position:0 -102px;
}

#navigation li.portfolio a.active {
    background:url(graphics/navigation/portfolio.png);
    width:122px;
    background-position:0 -102px;
}

#navigation li.contact a.active {
    background:url(graphics/navigation/contact.png);
    width:128px;
    background-position:0 -102px;
}

**fresh-d** · 12-23-2009, 07:26 PM

issue is solved, just add margin:0; and padding:0;