HTML Query

Discussion in 'HTML' started by Jon, Jul 27, 2003.

  1. Jon

    Jon Guest

    Hi, I'm pretty good normally with HTML, but for some reason I'm blind as to
    why the following code doesn't work:

    <html>
    <head>
    <body topmargin=0 marginheight=0 leftmargin=0>
    <table cellpadding=0 cellspacing=0 width=100% border=0>
    <tr height=2>
    <td bgcolor=black width=100% height=2>
    </td>
    <td bgcolor=#666666 height=2>
    <img src="spacer.gif" width=190 height=2>
    </td>
    </tr>
    </table>
    </html>


    I simply want a 2 pixel high bar across the screen with the last 190 pixels
    being grey and the rest black. spacer.gif is a 1x1 pixel transparent gif.

    Instead of being 2 pixels high, it is (I think) 18 pixels high, and I can't
    seem to find any way of making it smaller.

    Cheers
    Jon, Jul 27, 2003
    #1
    1. Advertising

  2. Jon

    Nick Howes Guest

    > <html>
    > <head>
    > <body topmargin=0 marginheight=0 leftmargin=0>
    > <table cellpadding=0 cellspacing=0 width=100% border=0>
    > <tr height=2>
    > <td bgcolor=black width=100% height=2>
    > </td>
    > <td bgcolor=#666666 height=2>
    > <img src="spacer.gif" width=190 height=2>
    > </td>
    > </tr>
    > </table>
    > </html>
    >
    >


    I can't vouch for other browsers, you'd have to try it, but in IE6 it works
    to keep each cell on one line with no gaps like so:

    <td bgcolor=black width=100% height=2></td>
    <td bgcolor=#666666 height=2><img src="spacer.gif" width=190
    height=2></td>

    because line breaks and returns are often interpreted as a single space
    character (intented so that you can put line breaks in a paragraph of text
    to keep your source looking neat), which will try to fit in the table thus
    stretching it vertically.

    --
    Nick Howes
    Nick Howes, Jul 27, 2003
    #2
    1. Advertising

  3. Jon

    Dan Brussee Guest

    In article <3f23e2fc$0$11381$>,
    says...
    > Hi, I'm pretty good normally with HTML, but for some reason I'm blind as to
    > why the following code doesn't work:
    >
    > <html>
    > <head>
    > <body topmargin=0 marginheight=0 leftmargin=0>
    > <table cellpadding=0 cellspacing=0 width=100% border=0>
    > <tr height=2>
    > <td bgcolor=black width=100% height=2>
    > </td>
    > <td bgcolor=#666666 height=2>
    > <img src="spacer.gif" width=190 height=2>
    > </td>
    > </tr>
    > </table>
    > </html>
    >
    >
    > I simply want a 2 pixel high bar across the screen with the last 190 pixels
    > being grey and the rest black. spacer.gif is a 1x1 pixel transparent gif.
    >
    > Instead of being 2 pixels high, it is (I think) 18 pixels high, and I can't
    > seem to find any way of making it smaller.


    I agree with the other poster - keep the <td> and </td> on the same line
    with no gaps. A new line in HTML is treated as a space, so you are
    forcing the td height to be at least as tall as a character in the font
    chosen.



    --

    Remove NOT from email address to reply. AntiSpam in action.
    Dan Brussee, Jul 27, 2003
    #3
  4. On Sun, 27 Jul 2003 15:33:55 +0100, "Jon" <> wrote:

    >Hi, I'm pretty good normally with HTML, but for some reason I'm blind as to
    >why the following code doesn't work:


    [snip code]

    Good advice on the whitespace so far. You can also lose the height
    attribute for your table row as it doesn't exist.
    http://www.w3.org/TR/1998/REC-html40-19980424/struct/tables.html#edef-TR

    It is also recommended that attributes are delimited using quotation
    marks.
    http://www.w3.org/TR/1998/REC-html40-19980424/intro/sgmltut.html#idx-attribute-6


    --
    frostie
    http://www.brightonfixedodds.com
    Robert Frost-Bridges, Jul 27, 2003
    #4
  5. Jon

    Richard Guest

    "Jon" <> wrote in message
    news:3f23e2fc$0$11381$...
    > Hi, I'm pretty good normally with HTML, but for some reason I'm blind as

    to
    > why the following code doesn't work:
    >
    > <html>
    > <head>
    > <body topmargin=0 marginheight=0 leftmargin=0>
    > <table cellpadding=0 cellspacing=0 width=100% border=0>
    > <tr height=2>
    > <td bgcolor=black width=100% height=2>
    > </td>
    > <td bgcolor=#666666 height=2>
    > <img src="spacer.gif" width=190 height=2>
    > </td>
    > </tr>
    > </table>
    > </html>
    >
    >
    > I simply want a 2 pixel high bar across the screen with the last 190

    pixels
    > being grey and the rest black. spacer.gif is a 1x1 pixel transparent gif.
    >
    > Instead of being 2 pixels high, it is (I think) 18 pixels high, and I

    can't
    > seem to find any way of making it smaller.
    >
    > Cheers
    >


    Why do you have cell #1 width set to 100%??
    You declared the base of the table width to 100% in the <table> tag.
    So by declaring the #1 cell also to 100%, cell #2 has nothing to use.
    That could be what's driving the spacer height up to 18 pixels.
    It has nowhere to go.
    As a test, change the cell#1 width to 50% and see what happens.
    Richard, Jul 28, 2003
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Learner
    Replies:
    1
    Views:
    984
    Marina Levit [MVP]
    Jan 30, 2006
  2. Anonymous
    Replies:
    0
    Views:
    1,455
    Anonymous
    Oct 13, 2005
  3. David Gordon

    xpath query query

    David Gordon, May 18, 2005, in forum: XML
    Replies:
    2
    Views:
    786
    David Gordon
    May 18, 2005
  4. Eric Nelson
    Replies:
    5
    Views:
    1,522
    Alexey Smirnov
    Feb 4, 2009
  5. Jon F.

    CAML Query: Multiple Query Fields Issue

    Jon F., May 12, 2004, in forum: ASP .Net Web Services
    Replies:
    0
    Views:
    753
    Jon F.
    May 12, 2004
Loading...

Share This Page