<h4></h4> makes extra space thats unwanted??

blueman378 · February 18, 2008

hi guys well im trying to use this,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Title here</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body id="altbody">
<div id="wrapper-header">
<div id="header"><img src="/Night Games/images/banner.gif" align="left" /></div>
</div>

<div id="wrapper-menu">
<div id="menu">
	<ul>
<li><a href="#">link1</a>a></li>
<li><a href="#">link2</a>a></li>
<li><a href="#">link3</a>a></li>
	</ul>
</div>
</div>

<div id="content">
<div id="center">
<div id="centerhead">
<h4>Title here</h4>
</div>
<div id="centercont">
		</div>
</div>

</div>

<div id="footer">   |  © Name here</div>

</body>

</html>

and

body {
margin: 0 0 1em 0;
padding: 0;
color: black;
background-color: #eee;
line-height: 130%;
text-align: center;
}

#wrapper-header {	background: #222; }

#header {
background: #222 url('images/banner_back.gif') right repeat-x;
width: 100%;
height: 150px;
line-height: 125px;
margin: 0 auto;
border-left: 1px solid #707070;
border-right: 1px solid #707070;
text-align: left;
}

#header h1 {
margin: 0;
padding: 0;
color: #eee;
font-size: 220%;
padding-left: 10px;
letter-spacing: -1px;
font:Comic Sans MS;
}

#wrapper-menu {
background: #88ac0b url('images/menu-background.png') top left repeat-x;
float: left;
width: 100%;
}

#menu {
width: 75%;
margin: 0 auto;
font-size: 95%;
white-space: nowrap; /* stops half a menu link dropping to next line. Instead, the whole link will drop. This only happens if you have a lot of menu links, and large text size */
padding-right: 2px;	/* The menu far left, and far right borders are not quite lining up in non IE browsers for some reason. This makes it less noticable */
}

* html #menu { padding-right: 0; } /* See above comment. This re-adjusts IE to the above padding */

#menu ul {
margin: 0;
padding: 0;
list-style: none;
float: left;
border-left: 1px solid #95bc0e;
border-right: 1px solid #95bf0f;
width: 100%;
}

#menu li { display: inline; }

#menu a:link, #menu a:visited {
padding: 0.25em 1em;
background: transparent;
color:#FFFFFF;
text-decoration: none;
float: left;
border-right: 1px solid #95bc0e;
}

#menu a:hover {
background: #b6e41c url('images/menu-hover.png') repeat-x;
color:#CCCCCC;
}

#content {
width: 73%; /* 73% because it has 1% padding on each side, which brings it to 75% wide */
margin: 0 auto;
padding: 3.5em 1% 20px 1%;
border-left: 1px solid #bbb;
border-right: 1px solid #bbb;
background: white;
font-size: 90%;
text-align: left;
}

* html #content { padding-top: 1.8em; } /* Set padding top in IE to 20px */

#footer {
margin: 0 auto;
padding: 2px 1%;
width: 73%;
text-align: right;
color: white;
letter-spacing: 0.15em;
background: #88ac0b url('images/menu-background.png') top left repeat-x;
border: 1px solid #a0c80e;
font-size: 80%;
}

#center {
margin: 0 auto;
width: 90%;
background-color:#FF0000;
border: 1px groove #a0c80e;
font-size: 80%;
border:double;
}

#centerhead {
margin: 0 auto;
padding:0;
width: 100%;
background: #FF0000 url('images/menu-background.png') top left repeat-x;
	border: 1px solid #a0c80e;
}

#centerhead h4 {
color:#ffffff;
padding:0;
letter-spacing: -1px;

}

#centercont {
margin: 0 auto;
width: 100%;
background-color:#DFDFDF;
font-size: 80%;
}

#footer a:link {
color:#333333;
font-weight:bold;
}

#footer a:hover {
color:#333333;
font-weight:bold;
font-style:italic;
}

h2 {
color: #666;
padding-bottom: 3px;
border-bottom: 1px solid #a0c80e;
font-size: 150%;
letter-spacing: -1px;
}

a:link, a:visited {
color: #260;
text-decoration: none;
}

a:hover {
color: #000;
text-decoration: underline;
}

p { margin-left: 1em; }

which works fine except for well

(see screenshot) http://www.phpfreaks.com/forums/index.php?action=dlattach;topic=182876.0;attach=3835;image

it creates a extra line underneath the title bar,

the moment i remove <h4></h4>

its perfect, any ideas?

one other random thing but is it jsut me or has the php freaks logo gone byebye?

Rowno · February 18, 2008

Hello Matt , it's because the <h(insert number here)> tags act like a <p> tag too, that's why I never use them and stick to stylesheets instead.

TheFilmGod · February 18, 2008

Hello Matt , it's because the <h(insert number here)> tags act like a <p> tag too, that's why I never use them and stick to stylesheets instead.

You made absolutely no sense. Because to solve this problem, you use stylesheets, and still use the <h4>.

The solution:

/* Style Sheet */

#centerhead h4 {

margin: 0;

padding: 0;

}

blueman378 · February 18, 2008

i tried that yet it still has the same effect

TheFilmGod · February 19, 2008

I tried looking into the source code and css but I still couldn't find the problem.

So, we need to clean up some of code/css before anything. You use many empty divs - get rid of those. Get rid of double divs.

Like so:

<div id="something">
<div id="something 2">
    hello!
<?div>
</div>

to:

hello

</div>

and have the two ids' declartations combined in the same id.

Change all percent to px or em (at least for testing now).

This might take a long time, but it is almost impossible to debug something that is full of empty divs that don't do anything.

Sign In

<h4></h4> makes extra space thats unwanted??

Recommended Posts

blueman378

Link to comment

Share on other sites

Rowno

Link to comment

Share on other sites

TheFilmGod

Link to comment

Share on other sites

blueman378

Link to comment

Share on other sites

TheFilmGod

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information