SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Guru Marc's Avatar
    Join Date
    Nov 2000
    Location
    New York
    Posts
    765
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hey, im havin a problem with some tables in a layout im working on and ive gotten past the point where u bang your keyboard up and down and sweat because no matter what u do the @#!$#$@#$ computer won't listen! grrr... well actually i didnt get that frustrated with this problem... but i have with many many others before! haven't u?

    anyway... check out the site..
    www.mycgiserver.com/~ogoog/estock/index02.html

    see up on the very top right i have that gradient fading from the orangish color to the background color? why won't it fill that entire top bar - why is there like a strip of the actual color of the bar showing below the gradient? its like the gradient image is not filling the whole bar.. i know i made it 20 pixels high and i told the table to also be 20 pixels.... i tried setting the img border to 0 but that did nothing...

    any ideas?
    Marc Gugliuzza
    marc.gugliuzza.com



  2. #2
    I'm baaaaaaaaaaaaack! Fluffykins's Avatar
    Join Date
    Aug 2000
    Location
    Manchester, UK
    Posts
    1,046
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your first port of call would be setting the cellpadding and cellspacing attributes of the <table> tag to 0.

    If that doesn't work post again and we'll see what we can do

    Ady
    v-technologies - Freelance Goodness.

  3. #3
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is your solution.

    a) start using quotes around your values...that won't help the site itself, but it will make you practice clean code
    b) Your table cells should be setup better. Your ordering was td width="20%" for a small corner graphic. Use the method listed below. If the only contents of a table cell is a graphic, then make the cell the width of that image.
    Also, you will be better off if you DO NOT put a hard return after table cells that need tight alignment such as this. It is best to put the tags on one line as below.

    One of the things throwing your alignment off was the fact that you specify a height of 100% for your "dot.gif". If the other images are 20 tall, then make that 20 tall as well. I also put the gradient corner piece into it's own cell. Since you had that table cell align="right" both images were fighting for the same space and it added extra space.

    The last thing that added space was your text. YOu did not specify a size so the browser use default of 3 which was too mcuh for the table.

    Use the code that I gave you and that should take care of any of the problems you were having.

    ps...when specifying a color (any color) you need to make sure that you put the # sign in front of the hex code or the color may shift in some browsers

    <table cellspacing="0" cellpadding="0" border="0" width=100% valign="top">
    <tr bgcolor="#FFCC66" valign="top">
    <td width="21"><img src="img/corner01.gif"></td>
    <td width="100%" align="center"><font size="2" face="arial, helvetica, sans-serif">...Here is some ****..... </font><img src="img/dot.gif" width="200" height="5" border="0"></td>
    <td width="100"><img src="img/gradient.gif" border="0"></td></tr>
    </table>
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  4. #4
    SitePoint Guru Marc's Avatar
    Join Date
    Nov 2000
    Location
    New York
    Posts
    765
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmm.. well to respond to the first post: i do have cellspacing and cellpadding set to 0 already. thanks though!

    to respond to the second post:
    i made all the changes u listed (except the ending /table tag because i incorporated most of the rest of the top into one big table).

    What happens now is, the third td in that row (with the gradient image) is pushed way off the table, it sticks out in its own column. I'm pretty shure this happens because u defnied the td before that as td width="100%" and that took up all the rest of the space to the right edge of the page, and the next one with width="100" just gets attatched to that and it looks pretty ridiculous, and u can still see the bar underneath it...i uploaded it to
    http://smoke.csoft.net/~marc/estock/index03.html

    well thanks a lot for your help! i think i might try setting the background of the td to the gradient image.. that way it has to fill the whole space..


    Marc Gugliuzza
    marc.gugliuzza.com



  5. #5
    SitePoint Addict
    Join Date
    Oct 2000
    Posts
    304
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You'll drive yourself batty doing it this way... lol.

    I'd suggest this:

    Things will be a great deal simpler for you if you take this apart, and use stacked tables.

    Put just the top bar with the "here is some..." and the corner and gradient in one table.

    Then start a fresh table, with just the blue bar in it.

    Then do another table for the E$Pickers strip.

    And so on...

    I believe you'll find this gives you much better layout control, and makes it a great deal easier for you to follow your own code.


  6. #6
    SitePoint Guru Marc's Avatar
    Join Date
    Nov 2000
    Location
    New York
    Posts
    765
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    grr yea i was thinking i should probably do it that way, but now i gotta practically recode the whole table. i think i might jus try setting the backgruond of the table with the gradient to the gradient so it fills it all...

    and having so many seperate tables will create more html code and make the page bigger, therefore slower load times... and im still not sure that will solve my original problem! heh.

    thanks for your help
    Marc Gugliuzza
    marc.gugliuzza.com



  7. #7
    SitePoint Addict
    Join Date
    Oct 2000
    Posts
    304
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    About that growling, there, Marc -- you and the rest of the HTML world... lol; I guess most everybody hates tables. Even when you know them inside-out, they're uncooperative at best.

    A few years ago, I got completely fed up with crashing into their shortcomings (and mine) so much, so I forced myself to do nothing but table layout exercises for a couple of hours every day until I got 'em down pretty much cold.

    If you can spare the time, I recommend this. My Aspirin bill has been much lower since.

  8. #8
    SitePoint Guru Marc's Avatar
    Join Date
    Nov 2000
    Location
    New York
    Posts
    765
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ah shiet, i dont wanna spend hours a day doing table exercises! heh.

    i completely re-coded that page to be all seperate nice organized tables and i commented everything so that the html is now very easy to understand.. and i solved the problem in IE, but not netscape...
    http://smoke.csoft.net/~marc/estock/index04.html
    Marc Gugliuzza
    marc.gugliuzza.com



  9. #9
    SitePoint Addict
    Join Date
    Oct 2000
    Posts
    304
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First, tighten up that code and get all the slop out of it caused by the spaces and linefeeds. Netscape hates it.

    Second, you *must* dimension the images explicity, in pixels, in this usage.

    Third, ya gotta tell NS where you want the image in the cell by setting the alignments for the cell.

    Try this:

    <table cellspacing="0" cellpadding="0" border="0" width="100%">
    <tr bgcolor="#FFCC66">
    <td width="10%" valign="top" align="left"><img src="img/corner01.gif" width="21" height="20"></td>
    <td width="60%">...Here is some stuff...<img src="img/dot.gif" width="40" height="20">Today is November 18<sup>th</sup> 2000 A.D</td>
    <td align="right" width="30%"><img src="img/gradient.gif" height="28" width="100"></td>
    </tr>
    </table>

    (Double-check this, Marc -- I think it's right, but I was typing it on the fly.)

  10. #10
    SitePoint Guru Marc's Avatar
    Join Date
    Nov 2000
    Location
    New York
    Posts
    765
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    WOW! thats amazing. that code works in both netscape and IE.

    So.. i have to set the height and width attributes of any img tag to exactly what the image is?

    and what do u mean by get rid of the slop caused by spaces and linefeeds?

    i understand what u mean about the spaces... i can get rid of those.. i just made it like that so it'd be easiest for me to see and fix stuff... what what is a linefeed?

    thank you very very much!

    Marc Gugliuzza
    marc.gugliuzza.com



  11. #11
    SitePoint Addict
    Join Date
    Oct 2000
    Posts
    304
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Marc...

    WOW! thats amazing. that code works in both netscape and IE.
    Yeah, like I said, Marc -- practice makes perfect (or at least less frustrated, in this case... lol). Once you just bite the bullet and force yourself to deal with them, tables aren't that tough.

    So.. i have to set the height and width attributes of any img tag to exactly what the image is?
    Marc, that's good general practice, anyway. In the case of Netscape, it gets all screwy dealing with tables and images at the same time (in some cases) -- so it's best to tell it the exact image dimensions explicity. Keep that in the back of your head, because Netscape also takes a walk in outer space if you put dynamically generated content (say, SSI) in a table cell.

    ...and what do u mean by get rid of the slop caused by spaces and linefeeds? i understand what u mean about the spaces... i can get rid of those.. i just made it like that so it'd be easiest for me to see and fix stuff... what what is a linefeed?
    A linefeed is one of those no-see-um characters at the end of a line that tells the interpreter to start a new line. In tables, their presence can often cause spacing problems... and devils to find at that, because, well -- you can't actually see the character in a regular editor.

    Overall, it's just good practice to tighten down your code and remove junk spaces -- within reason, of course; you still have to be able to read your own code!

    thank you very very much!
    Welcome!


  12. #12
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hella job etLux...Exactly what I would have said...kid of did say at the beginning...somehow you just explained it all better.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  13. #13
    SitePoint Addict
    Join Date
    Oct 2000
    Posts
    304
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, creole.

    When you've been married for a number of years, you learn how to explain your way out of just about anything...

  14. #14
    SitePoint Guru Marc's Avatar
    Join Date
    Nov 2000
    Location
    New York
    Posts
    765
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmm well i will then take some time to tighten up my code.

    thanks guys for your help
    Marc Gugliuzza
    marc.gugliuzza.com




Bookmarks

Posting Permissions

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