Log in

View Full Version : 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>
<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


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



<!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


* {
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