Image positioning problem

[ekcetera]

Take a look at the site here: http://clients.ekcetera.com/thunderhook/thunderhook

I’m a novice at CSS. On this site, the words "Welcome to the Wilderness" is an image that is 85 px tall. I had it inside a div, but that didnt’ seem to do anything for me. What I want is for that image to bump up right underneath the navigation, but there’s about 20-30px of white space there now.

Here’s the CSS:

Code:

body {
background-color: #C2B59B;
margin-top: 0px;
margin-bottom: 0px;
font-family: Arial, Helvetica, sans-serif;
}
.container {
width: 980px;
margin-right: auto;
margin-left: auto;
}
.logo {
position: absolute;
top: 25px;
}
.whitebackground {
background-color: #FFF;
width: 900px;
margin-right: auto;
margin-left: auto;
height: 1000px;
padding-top: 55px;
}
.mininav {
text-align: right;
width: 835px;
margin-right: auto;
margin-left: auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
height: 25px;
color: #036;
}

.header {
background-image: url(images/header.jpg);
width: 835px;
margin-right: auto;
margin-left: auto;
padding-top: 155px;
background-repeat: no-repeat;
}
.mainnav {
background-image: url(images/transparent.png);
background-repeat: repeat;
height: 25px;
width: 835px;
}

/* Dropdown Menu Styling */

.dropdown {
float: left;
position: relative;
left: 123px;
top: -16px;
}

.dropdown dt {
cursor:pointer;
padding-right: 15px;
padding-left: 15px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
line-height: 25px;
}
.dropdown dt:hover {
background-color: #C2B59B;
}
.dropdown dd {
overflow:hidden;
width:200px;
display:none;
z-index:200;
opacity:.6;
background-color: #DED8C9;
position: absolute;
left: -40px;
}
.dropdown ul {
list-style-position: outside;
margin-left: -40px;
font-size: 13px;

}
.dropdown li {
display: inline;

}
.dropdown a, .dropdown a:active, .dropdown a:visited {
display:block;
color:#333;
text-decoration:none;
width:200px;
padding-top: 5px;
padding-right: 15px;
padding-bottom: 5px;
padding-left: 15px;
}
.dropdown a:hover {
color:#000;
font-weight: bold;
background-color: #C2B59B;
}
.dropdown .underline {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999;
}
.welcomewilderness {
text-align: center;
height: 85px;
}

My questions are:
1) Does that image need to be in a DIV?
2) How do I get it to bump up to the bottom of the navigation? There seems to be something there that’s preventing it from doing so.

HELP!!!

[kobylecki]

Oo! There are some default values of margin in the browsers, in this case browser has positive margin-top at img tag, so you shilud add to your css file line: .welcomewilderness img { margin: 0; }
or if you want to eliminate problem of default values you should make same reset ( * {margin: 0; padding: 0;} ).

[ekcetera]

Thanks for the suggestion, however, I don’t think it’s a margin issue. Take a look at the result of changing the div to margin:0.

[kobylecki]

Did you use Firebug? I recommand you!
You have navigation built in weird way (a lot of dl-s) but it isn’t a problem. Each of those dl-s is too high. It is the margin problem but I think you sholud rebuild html code first.

[Author]

Posts