tHis is driving me crazy....!

HTML & CSS
1

I have been trying to figure this out for the last 4-5 hours, but !!! Please help me…

Heres my css:


body {
    background-image:url('images/bodyPattern.jpg');
    margin:0px;
    margin-top:0px;
    padding:0px;
}
.topNav {
    border:1px solid #ffffff;
    background-image:url('images/topNavGrad.jpg');
    height:55px;
}
.banner {
    background-image:url('images/bannerPattern.jpg');
    height:175px;
}
.mainBody {
    background-color:#ffffff;
    min-height:1000px;
    width:1000px;
    margin-left:auto;
    margin-right:auto;
    margin-top:-50px;
}
.topNavList {
    padding:0px;
    width:1000px;
    margin:auto;
}
.topNavList ul {
    text-align:left;
    list-style-type:none;
}
.topNavList ul li {
    width:90px;
    float:left;
    margin:4px;
}
.topNavList ul li a {
    font-family:arial;
    font-size:14px;
    color:#ffffff;
    text-decoration:none;
}

Html:


<!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 rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
    <div class="topNav">
        <div class="topNavList">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Resources</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
    <div class="banner"></div>
    <div class="mainBody"></div>
</body>
</html>

This is the result:

But do you guys see the border on the topNav? When i remove it, so…


.topNav {
    border:1px solid #ffffff;
    background-image:url('images/topNavGrad.jpg');
    height:55px;
}

remove the border line…it becomes:


.topNav {
    background-image:url('images/topNavGrad.jpg');
    height:55px;
}

the final result goes totally crazy!!
here it is:

Please help me figure this out!! Thanks guys

2

the problem is not the border.

its the default margin and padding of <ul> list that is giving problem. reset them to 0.

then reduce height of topnav and increase top padding.

try replacing these two classes


.topNav {
    border:1px solid #ffffff;
    background-image:url('images/topNavGrad.jpg');
    [COLOR="Red"]height:45px;
	padding-top:10px;[/COLOR]
}


.topNavList ul {
    text-align:left;
    list-style-type:none;
[COLOR="Red"]margin:0px;
padding:0px;[/COLOR]
}

vineet

3

It’s the phenomenon of collapsing margins :slight_smile: