...

View Full Version : Too much padding



zoobie
11-11-2002, 03:51 AM
Is this some sort of bug?

When I use this code without the image, it's fine. But when I add a small image between MY & TITLE, I get huge padding between the border and the title. Fix? Thanks :rolleyes:

<table width="600" align="center" cellspacing="0" cellpadding="0" style="border:7px #ffffff dashed;">
<tr>
<td align="center"><font style="font:bold 95px courier new; color:red;margin:0px;padding:0px;line-height:60%">MY</font><img style="margin-bottom:13px;" src="eyes2.gif" height="19" width="39"><font style="font:bold 95px courier new; color:red;margin:0px;padding:0px;line-height:60%">TITLE</font></td>
</tr>
</table>

MCookie
11-11-2002, 03:34 PM
Hi,
In Mac/IE I see no padding at all... actually, probably because of the 60% lineheight, the text is larger than the cell.. Also, in the same browser I see no Courier New but something that looks like my default Verdana. Maybe that's because in CSS font names like "Courier New" and "Comic Sans MS" must be between (double) quotes. I don't know right now for sure how to do that when using inline style since that's between quotes already. Maybe single quotes.

But in Mozilla I see what you mean.. huge padding. And I think it has something to do with the default baseline of fonts. More about that here: http://devedge.netscape.com/viewsource/2002/img-table/

And zoobie.. why are you using <font> tags? Are you getting paid for that, lol.. Most of us already forgot what they once meant :)

cg9com
11-11-2002, 03:56 PM
theres nothing wrong with good old fashion font tags ;)
sure there not as effecient, but there isnt really anything wrong with them.

applesauce
11-11-2002, 06:31 PM
the font tag is deprecated and we are not supposed to be using it anymore. future browsers will not support it, i believe, eventually.

zoobie
11-12-2002, 02:31 AM
Using the <span> tags don't help either. I'm seeing huge padding in IE6. If I take out the image, I'm ok. I'm actually calling on the css from an external sheet: .head {font:bold 95px courier new;color:red;line-height:60%} and don't know if I can put double quotes around the font in there.

So, we're supposed to use <span> for the font tag...What other tags are we supposed to use? I find myself using the <center> tag here and there...

Sorry...I've been wrapped up in php for about 8 months. :D

cg9com
11-12-2002, 03:50 AM
<center> you arent supposed to use either, you should do this.
<style type="text/css">
.center {text-align:center}
</style>
<p class="center">blah</p>

this is important only in xhtml, which you should use now.
all empty tags such as <br> or <img> that does not close at the end, will need a space and a slash ( <br /> )

all code must be lowercase, you have to nest the tags correctly, you have to use quotations .....

there are alot of rules, most of which is already implied in html, but it is now required in xhtml.
xhtml requires proper page layout, otherwise it will not work.

<edit reason="misinformation" specified="inred" corrected="true"></edit>

zoobie
11-12-2002, 06:53 AM
Ahh...Ok, I'll look into it this winter. :D

Anyone else like to take a shot at the below code? It has waaaay too much padding between the title and border. Thanks

<head>
<style type="text/css">
.hed {font:bold 95px courier new; color:red; line-height:65%;margin:0;padding:0}
</style>
</head>

<body bgcolor="#000000">
<table width="625" align="center" cellspacing="0" cellpadding="0" style="border:7px #ffffff dashed;">
<tr>
<td align="center"><span class="hed">MY</span><img style="margin-bottom:13px;" height="19" width="39" src="eyes2.gif"><span class="hed">TITLE</span></td>
</tr>
</table>
</body>

MCookie
11-12-2002, 02:09 PM
Okay Zoobie, I gave it another shot. Played with your TITLE, in a p, h1, in and out the table, negative margins and paddings, replaced the border to the p or h1, used background-colors to see what was going on, used your 65% line-height with and without 1px linebreaks, tried to set a height to the td, p, h1, used lower-case text and "text-transform:uppercase;" and so on. I can't get both the top border and the bottom border closer to the text. But apart from that, it looks good..

<html>
<head>
<title></title>
<style type="text/css">
body {background:#000;}
table {width:625px;padding:0px;}
p {margin:0px;padding:0px;border:7px dashed #fff;font:bold 95px "courier new";color:red;text-align:center;}
img {width:39px;height:19px;vertical-align:middle;}
</style>
</head>
<body>
<table align="center" cellspacing="0">
<tr>
<td><p>MY<img src="eyes2.gif">TITLE</p></td>
</tr>
</table>
</body>
</html>

meerkat
11-12-2002, 02:57 PM
Zoobie…

On the font thing

.head {font:bold 95px courier new; color:red; line-height:65%;margin:0;padding:0}

Shouldn't you put the 'font-family' in when choosing the font - also the size?

like…

.head {font:bold; font-size 95px; font-family: courier new; color:red; line-height:65%;margin:0;padding:0}

just a thought

meerkat

MCookie
11-12-2002, 04:23 PM
Applesauce, it's shorthand. You can put all font properties into one rule as long as you use this order:

font-weight
font-size
/line-height
font-family
font-variant
font-style

There are two more, but I don't know which browsers support them:
font-stretch
font-size-adjust


Everything that is left out will be diplayed as default. So this:

font {bold verdana italic;} is valid, and this also:

font {12px verdana;} or this:

font {bold 12px/15px "comic sans ms",verdana,arial small-caps oblique;}

...

Roy Sinclair
11-12-2002, 04:54 PM
Try this rewrite of that code:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
body
{
background-color: #000000;
}
.hed
{
text-align: center;
border: none;
margin: 0px;
padding: 0px;
}
.tbl
{
font-weight: bold;
font-size: 95px;
font-family: "courier new";
color: red;
border-color: #ffffff;
border-style: dashed;
border-width: 7px;
}
.eyes
{
margin-bottom: 13px;
height: 19px;
width: 39px;
}
</style>
</head>
<body>
<div class="hed">
<span class="tbl">My<img class="eyes" src="eyes2.gif" alt="">TITLE</span>
</div>
</body>
</html>


I deliberately broke out the various combination styles into their separate styles to be more precise though the combinations you had were fine. I also moved all the deprecated specifications from the HTML tags to the style sheets. And of course I removed the use of the table for formatting, the use of a table also complicates this problem by adding in unnecessary elements.

As far as I can tell the extra space you're seeing is part of what the font itself expects as white space around it's letters as room for ascenders and descenders on it's characters. You can see the descender part above with the lower case "y" I put into the text.

zoobie
11-13-2002, 02:07 AM
Heh heh...Yep...I see it. Problem is, I need all caps. Well, thanks anyway everyone for working on this. I guess it's one for the ages. :D

zoobie
11-14-2002, 01:00 PM
Hey...Guess what? Some guy @ devshed got it. Maybe someone could test this in NS6/7 because it works fine in IE5+ :D

<head>
<style type="text/css">
.hed {font:bold 95px courier new; color:red; line-height:65%;margin:0;padding:0}
</style>
</head>

<body bgcolor="#000000">
<table width="625" align="center" cellspacing="2" cellpadding="0" style="border:7px #ffffff dashed;">
<tr>
<td align="right" width="33%"><span class="hed">MY</span></td><td align="center"><img style="margin-bottom:13px;" height="19" width="39" src="eyes2.gif"></td><td align="left"><span class="hed">TITLE</span></td>
</tr>
</table>
</body>

zoobie
11-14-2002, 01:00 PM
Hey...Guess what? Some guy @ devshed got it. Maybe someone could test this in NS6/7 because it works fine in IE5+ :D

<head>
<style type="text/css">
.hed {font:bold 95px courier new; color:red; line-height:65%;margin:0;padding:0}
</style>
</head>

<body bgcolor="#000000">
<table width="625" align="center" cellspacing="2" cellpadding="0" style="border:7px #ffffff dashed;">
<tr>
<td align="right" width="33%"><span class="hed">MY</span></td><td align="center"><img style="margin-bottom:13px;" height="19" width="39" src="eyes2.gif"></td><td align="left"><span class="hed">TITLE</span></td>
</tr>
</table>
</body>

applesauce
11-14-2002, 02:44 PM
Applesauce, it's shorthand. You can put all font properties into one rule as long as you use this order:

the font code is deprecated. it can be used in css as you say, but should not be used without css directly in the tag.

zoobie
11-14-2002, 06:51 PM
Anyway, could someone please test this is NS6/7?
Thanks :D

PauletteB
11-15-2002, 03:38 AM
NN 7

http://www.mts.net/~unum/files/zoobie.jpg

zoobie
11-15-2002, 08:43 AM
Thanks...hmmm...Closer to the top.

How about this in NN6/7? You don't have to post an image...maybe just mention if the border's even all around the title.

Thanks :D

<head>
<style type="text/css">
.hed {font:bold 95px courier new; color:red; line-height:65%;margin:0;padding:0;}
</style>
</head>

<body bgcolor="#000000">
<table width="625" align="center" cellspacing="2" cellpadding="0" style="border:7px #ffffff dashed;">
<tr>
<td align="right" width="33%" valign="middle"><span class="hed">MY</span></td><td align="center" valign="middle"><img style="margin-bottom:13px;" height="19" width="39" src="eyes2.gif"></td><td align="left" valign="middle"><span class="hed">TITLE</span></td>
</tr>
</table>
</body>

PauletteB
11-15-2002, 11:26 AM
No difference.
I tried with <tr vAlign="middle" ....
to no avail.

zoobie
11-16-2002, 12:19 AM
Hmm....Ok...Thanks :)

Since I'm not designing for NS anyway, I guess you'll just have to go without...heh heh :D



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum