Space Elimination between Large Headers

**Fighterfox** · 12-01-2010, 07:53 PM

I've been trying to create a header and subheader on my webpage using the <h1> and <h2> tags, and I am using relatively large text (for example, 5 em and 3 em, respectively). Header 1 will be directly above Header 2, and I want the space between the two to be minimal (as it is, it's too big). I have tried almost everything to get this space minimized, and I have had no consistent cross-browser success--whatever works in Firefox fails in IE, and vice versa. Still, I'm sure that there is a simple styling solution. I've posted a very simple example of what I'm doing, and I'm look forward to a reliable cross-browser solution soon. Thanks in advance!

HTML Code:

<html>
<body>

<div>
<h1 style="font-size:5em;">My Webpage Title</h1>
<h2 style="font-size:3em;">The subtitle of my webpage</h2>
</div>

</body>
<html>

**Beverleyh** · 12-01-2010, 08:21 PM

Ok - so what have you tried already so we're not wasting time duplicating stuff?

I can't test anything from my BlackBerry but things that spring to mind to try are settings for;

Top and bottom margins
Top and bottom padding
Line height

Also make sure you're using a proper doctype

**Fighterfox** · 12-01-2010, 10:17 PM

I've used all three, but nothing more. Line height doesn't take away enough space, and margins cut actual text from Internet Explorer. As to padding, it didn't help much either. I'm using XHTML 1.0 Strict Doctype.

**bluewalrus** · 12-01-2010, 10:23 PM

You've already tried

Code:

h1 {
padding: 0;
maring: 0;
}
h2 {
padding: 0;
maring: 0;
}

Do you have it in any div's or anything else that has definitions? A link or your full code would be the most helpful.

**Fighterfox** · 12-02-2010, 12:53 AM

I attached my code--I'd have to be honest but it is still a royal mess. I'm in the very preliminary stages of development, and this header spacing stuff is definitely giving me some problems.
It seems to me that every header leaves a certain amount of space beneath it. It's just like the spaces between paragraphs. I hope this code helps clarify some things. Thanks.

**Fighterfox** · 12-02-2010, 12:54 AM

Sorry, here's my code:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html lang=en-US xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US">
<head>
<title>Lowell Red Arrows FIRST Robotics Team 3234</title>
<link href="/favicon.ico" rel="shortcut icon">
<meta name="description" content="FIRST Robotics Team 3234 from Lowell High School, Michigan." />
<meta name="keywords" content="lowell,robotics,first,3234,robotics,frc,red arrows,high school,michigan,kamen,science,technology,inspiration,recognition,competition" />
<meta name="author" content="Lowell Robotics Team students Zachary DeBruine with Ben Veltman and Caleb Pratt" />
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
<link rel="stylesheet" type="text/css" href="files/mainstyle.css" />

<style type="text/css">
li:before
{
content:url(favicon.ico);
}

h3
{
font-family:georgia;
font-size:15px;
color:#ffffff;
text-align:center;
}

#header
{
background:#990000;
width:85%;
border-top:#b00000 3px solid;
border-right:#b00000 3px solid;
border-left:#b00000 3px solid;
-moz-border-radius-topright:3%;
-moz-border-radius-topleft:3%;
border-top-right-radius:3%;
border-top-left-radius:3%;
padding:.5em;
}

#pagebody
{
background:#d0d0d0;
width:85%;
border:#b00000 3px solid;
-moz-border-radius-bottomright:3%;
-moz-border-radius-bottomleft:3%;
border-bottom-right-radius:3%;
border-bottom-left-radius:3%;
padding:.5em;
}

</style>

</head>

<body>

<center>

<div id="header">
<table><tr><td><img src="files/lowelllogo.png" style="float:left;width:150px;height:125px;" /></td>
<td style="width:100%;">
<table>

<tr><td><div><h1 style="font-family:georgia;font-size:48px;color:#ffffff;font-variant:small-caps;text-align:left;height:48px;">Red Arrow Robotics</h1></div></td></tr>
<tr><td><div><h2 style="font-family:georgia;font-size:24px;color:#ffffff;text-align:left;height:24px;">Lowell High School FIRST Robotics Team 3234</h2></div></td></tr>
</table>
<td><img src="files/firstlogo.png" style="float:right;width:180px;height:125px;" align="right" /></td></tr></table>

<table style="width:100%;"><tr><td>

<table style="border-right:#200000 1px solid;border-right:#200000 1px left;border-top:#200000 1px solid;background:#202020;-moz-border-radius-topright:15px;-moz-border-radius-topleft:15px;border-top-right-radius:15px;border-top-left-radius:15px;margin-right:10px;">
<tr>
<td style="min-width:10%;padding:5px;"><h3>Home</h3></td>
<td style="min-width:10%;padding:5px;"><h3>About Us</h3></td>
<td style="min-width:10%;padding:5px;"><h3>About FIRST</h3></td>
<td style="min-width:10%;padding:5px;"><h3>News for You</h3></td>
<td style="min-width:10%;padding:5px;"><h3>Members Area</h3></td>
<td style="min-width:10%;padding:5px;"><h3>Last Item</h3></td>
</tr></table>

</td><td>

<table style="border-right:#200000 1px solid;border-right:#200000 1px left;border-top:#200000 1px solid;background:#202020;-moz-border-radius-topright:15px;-moz-border-radius-topleft:15px;border-top-right-radius:15px;border-top-left-radius:15px;">
<tr>
<td style="min-width:10%;padding:5px;"><h3>Website</h3></td>
</tr></table>

</td></tr></table>

</div>
</body>
</html>

**bluewalrus** · 12-02-2010, 01:46 AM

Your DOC type isn't valid those " are microsoft quotes try

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Going further:

Your table within a table I don't believe is valid either and the tables I believe have default paddings and margins as well.

You can try and default everything out by using

Code:

* {
margin: 0;
padding 0;
}

As your first css declarations this will clear all paddings and margins from all elements that is not specified in your css.

**Beverleyh** · 12-02-2010, 07:12 AM

Try removing the div tags from around the h1 and h2 tags too.

**Fighterfox** · 12-02-2010, 02:40 PM

Thanks a lot, I took out the extraneous div tags, changed my DOCTYPE to the proper code, defined the margin, padding, and whatever else I did... It worked very well! It seems like IE and Firefox have different margin and/or padding defaults.
Thanks a lot for your time and effort, and I'm glad I got it working!

**Beverleyh** · 12-02-2010, 03:58 PM

Yep - those margin and padding differences are a pain. This CSS Box Model article will arm you with further helpful knowledge: http://www.w3schools.com/css/css_boxmodel.asp

Ps - glad you got everything fixed