Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 20
  1. #1
    Senior Coder
    Join Date
    Jun 2002
    Location
    ColoRockyz
    Posts
    1,646
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Too much padding

    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

    <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>
    Last edited by zoobie; 11-11-2002 at 06:04 AM.
    Zoobie or not Zoobie...That is the problem.
    <body onUnload="flush( ! )">

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    NL
    Posts
    421
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #3
    Senior Coder
    Join Date
    Jul 2002
    Posts
    1,628
    Thanks
    0
    Thanked 0 Times in 0 Posts
    theres nothing wrong with good old fashion font tags
    sure there not as effecient, but there isnt really anything wrong with them.

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Location
    Dallas, Texas
    Posts
    188
    Thanks
    0
    Thanked 0 Times in 0 Posts
    the font tag is deprecated and we are not supposed to be using it anymore. future browsers will not support it, i believe, eventually.

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Location
    ColoRockyz
    Posts
    1,646
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.
    Last edited by zoobie; 11-12-2002 at 02:38 AM.
    Zoobie or not Zoobie...That is the problem.
    <body onUnload="flush( ! )">

  • #6
    Senior Coder
    Join Date
    Jul 2002
    Posts
    1,628
    Thanks
    0
    Thanked 0 Times in 0 Posts
    <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>
    Last edited by cg9com; 11-12-2002 at 07:03 AM.

  • #7
    Senior Coder
    Join Date
    Jun 2002
    Location
    ColoRockyz
    Posts
    1,646
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Ahh...Ok, I'll look into it this winter.

    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>
    Zoobie or not Zoobie...That is the problem.
    <body onUnload="flush( ! )">

  • #8
    Regular Coder
    Join Date
    Jun 2002
    Location
    NL
    Posts
    421
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Well that was fun

    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>

  • #9
    New Coder
    Join Date
    Jun 2002
    Location
    Glasgow, Scotland
    Posts
    40
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Ya don't need a weatherman to know
    which way the wind blows...

  • #10
    Regular Coder
    Join Date
    Jun 2002
    Location
    NL
    Posts
    421
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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;}

    ...

  • #11
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try this rewrite of that code:

    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.

  • #12
    Senior Coder
    Join Date
    Jun 2002
    Location
    ColoRockyz
    Posts
    1,646
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.
    Zoobie or not Zoobie...That is the problem.
    <body onUnload="flush( ! )">

  • #13
    Senior Coder
    Join Date
    Jun 2002
    Location
    ColoRockyz
    Posts
    1,646
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hey...Guess what? Some guy @ devshed got it. Maybe someone could test this in NS6/7 because it works fine in IE5+

    <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 or not Zoobie...That is the problem.
    <body onUnload="flush( ! )">

  • #14
    Senior Coder
    Join Date
    Jun 2002
    Location
    ColoRockyz
    Posts
    1,646
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hey...Guess what? Some guy @ devshed got it. Maybe someone could test this in NS6/7 because it works fine in IE5+

    <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 or not Zoobie...That is the problem.
    <body onUnload="flush( ! )">

  • #15
    Regular Coder
    Join Date
    Jun 2002
    Location
    Dallas, Texas
    Posts
    188
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •