Phantom empty space

devilzfan300 · 12-21-2007, 03:24 PM

http://www.missionenvironment.com/blog/

I need some help with the blog part. After reading comments that I should make my blog and forum congruent with my site, I started working on that. For the blog, I am just adding the top part of my index page to the blog. I have added the top logo, the menu, and the top image. For some reason, there is a space between the menu and the top image and I cannot get rid of it. Anyone see the problem?

devilzfan300 · 12-22-2007, 03:47 PM

Anyone? Its really bothering me and I cannot figure it out. I might just get rid of the image all together. I dont want to, but I cannot have that space there - it looks unprofessional

Costin Trifan · 12-22-2007, 10:53 PM

In HTML:

Locate this:

Code:

            <h1>
                <strong>MISSION ENVIRONMENT</strong> Take Action Now and Save the Environment
<span></span>
           </h1>

and replace it with this:

Code:

        <div class="banner">
            <h1>
                <strong>MISSION ENVIRONMENT</strong> <span>Take Action Now and Save the Environment</span>
           </h1>
        </div>

In the style.css:

Replace this:

Code:

H1 {
	PADDING-RIGHT: 8px; PADDING-LEFT: 0pt; PADDING-BOTTOM: 0pt; FONT: 18px/22px verdana,arial,sans-serif; WIDTH: 750px; COLOR: #ffffff; PADDING-TOP: 17px; POSITION: relative; HEIGHT: 90px; TEXT-ALIGN: right
}
H1 STRONG {
	DISPLAY: block; FONT: bold 32px/36px verdana,arial,sans-serif
}
H1 SPAN {
	BACKGROUND: url(http://www.missionenvironment.com/test/images/wind3top.jpg) 0% 50%; LEFT: 0pt; WIDTH: 750px; POSITION: absolute; TOP: 0pt; HEIGHT: 102px
}

with this:

Code:

div.banner {
    width: 100%; height: auto; margin: 0 0 0 0; padding: 0 0 0 0;
    BACKGROUND: url(http://www.missionenvironment.com/test/images/wind3top.jpg);
    background-position: left top;
    background-repeat: no-repeat;
}
H1 {
	PADDING-RIGHT: 8px; PADDING-LEFT: 0pt; PADDING-BOTTOM: 0pt; FONT: 18px/22px verdana,arial,sans-serif; WIDTH: 750px; COLOR: #ffffff;
	PADDING-TOP: 17px; POSITION: relative; HEIGHT: 90px; TEXT-ALIGN: right;
}
H1 STRONG {
	DISPLAY: block; FONT: bold 32px/36px verdana,arial,sans-serif
}
H1 SPAN {
   LEFT: 0pt; WIDTH: 750px; POSITION: absolute; TOP: 0pt; HEIGHT: 102px
}