SitePoint Sponsor

User Tag List

Results 1 to 24 of 24
  1. #1
    SitePoint Addict
    Join Date
    Sep 2008
    Location
    Rudgwick, UK
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image "padding" driving me nuts!

    Hi,

    I've been going round and round and round with this one, and still not got anywhere

    http://ivideolounge.com/cgi-bin/page.cgi?p=test

    You will notice the "spacing" between the menu, and the image that shows up below it. Same goes with the images at the bottom left + bottom right, with the rounder corners.

    The bizarre thing - is that this works just fine:

    http://ivideolounge.com/cgi-bin/recommend.cgi?ID=51

    I've tried removing the calls to the CSS, in case that was the issue, but it didn't make the slightest difference

    Anyone got any ideas?

    ...oh and I appologize for it being in tables - the guy I'm doing the job for made the design like that, and I'm just having to work with it

    TIA

    Andy

  2. #2
    SitePoint Addict
    Join Date
    Sep 2008
    Location
    Rudgwick, UK
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    BTW, you can see a much more basic version here :

    http://ivideolounge.com/bla.htm

    Not sure it it will help though

    Driving me nuts

    Even changing the <tr></tr> stuff with something simpler seems to have the same problem:

    Code:
    	          <tr>
    	            <td>
    					<div id="menu_top"><a href="/"><img src="/images/home.jpg" alt="" width="135" height="48" border="0" onmouseover= src="/images/home_roll.jpg" onmouseout= src="/images/home.jpg" /></a><a href="<%config.build_root_url%>"><img src="/images/category.jpg" alt="" width="193" height="48" border="0" onmouseover= src="/images/category_roll.jpg" onmouseout= src="/images/category.jpg" /></a><a href="<%config.db_cgi_url%>/add.cgi"><img src="/images/upload.jpg" alt="" width="161" height="48" border="0" onmouseover= src="/images/upload_roll.jpg" onmouseout= src="/images/upload.jpg" /></a><a href="<%config.db_cgi_url%>/user.cgi?signup_form=1"><img src="/images/account.jpg" alt="" width="163" height="48" border="0" onmouseover= src="/images/account_roll.jpg" onmouseout= src="/images/account.jpg" /></a><a href="<%config.db_cgi_url%>/myfaves.cgi"><img src="/images/help.jpg" alt="" width="121" height="48" border="0" onmouseover= src="/images/help_roll.jpg" onmouseout= src="/images/help.jpg" /></a><a href="<%config.db_cgi_url%>/user.cgi"><img src="/images/login.jpg" alt="" width="137" height="48" border="0" onmouseover= src="/images/login_roll.jpg" onmouseout= src="/images/login.jpg" /></a></div>
    					<div style="background: url(/images/bg_12.jpg); height: 30px; "></div>
    				</td>
    	          </tr>

  3. #3
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually, it's pretty straight forward:

    • in the "good" one you have an empty <td>:
      Code:
      <td height="37" style="background: url(/images/bg_12.jpg)"></td>
    • while in the "bad" one you have an image element in the same <td>:
      Code:
      <td height="37"><img src="/images/bg_12.jpg"></td>


    That makes the <td> height in the "good" one to be 37px (because background images are not affecting an element height) and the height in the "bad" one to be 42px (because an image element inside it makes it readjust its height).

  4. #4
    SitePoint Addict
    Join Date
    Sep 2008
    Location
    Rudgwick, UK
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Thanks for the reply - that didn't fix it though (Also, see the above post - as I've changed how that code is done, in case it was a cell padding issue or something)

    I've tallied up the number of tr, /tr , td /td , table /table div /div tags, and they all seem to match up - so I'm pretty sure its not a missing tag somewhere

    Driving me up the wall

    TIA

    Andy

  5. #5
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I didn't provide you with a fix, rather with an understanding, hopping you'd know what to do with it Did you look at it now? It seems OK to me

  6. #6
    SitePoint Addict
    Join Date
    Sep 2008
    Location
    Rudgwick, UK
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Did you look at it now? It seems OK to me
    Which URL? All of them still look broken to me

    I'm just having a go with designing it in a CSS template instead, cos I REALLY despise table - real PITA almost every time I work with them.

    Cheers

    Andy

  7. #7
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm looking at this one
    http://ivideolounge.com/cgi-bin/page.cgi?p=test
    and it looks fine... if I look where I'm suppose to

    The green "your marketing plan" top edge is aligned with the red top edge.

  8. #8
    SitePoint Addict
    Join Date
    Sep 2008
    Location
    Rudgwick, UK
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    The issue is with the "red" space thats showing up between the menu and the "grey" bar that shows up with it

    Same with the bottom left + bottom right images (the "rounded" corner ones) .... seems to just be some padding coming from somewhere :/

    Cheers

    Andy

  9. #9
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I must be seeing things. The red band under the
    Code:
    <div id="menu_top"
    and above the
    Code:
    <div style="background: url(/images/bg_12.jpg); height: 30px; "></div>
    is present in both your initial links ???

    Why did you said it's fine in the second link? Am I looking at what I should?


    Have you tried a CSS reset yet?

  10. #10
    SitePoint Addict
    Join Date
    Sep 2008
    Location
    Rudgwick, UK
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think your looking at the wrong bit

    See this image: http://ivideolounge.com/example.png

    The first one is "bad" (which is what we see on all the URL's, appart from recommend.cgi one)

    The second one is how it *should* look, but doesn't

    Cheers

    Andy

  11. #11
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You should check again your links. Those are not the ones in your latest screenshots.

    My final point is: try a CSS reset.

  12. #12
    SitePoint Addict
    Join Date
    Sep 2008
    Location
    Rudgwick, UK
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by noonnope View Post
    You should check again your links. Those are not the ones in your latest screenshots.

    My final point is: try a CSS reset.
    You sure? I just double checked all of them, and they are all showing up how I expected (with the recommend.cgi one being the only one thats ok)

    Cheers

    Andy

  13. #13
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Again, add a CSS reset to your css files.


  14. #14
    SitePoint Addict
    Join Date
    Sep 2008
    Location
    Rudgwick, UK
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Man, finally found it!

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    ...needed to be:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    Wish I'd found that out earlier :S

    Thanks anyway - just gotta work out why the "bottom corner" images are not working right now :/

    Cheers

    Andy

  15. #15
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Really???

    Quote Originally Posted by ultranerds View Post
    I've tallied up the number of tr, /tr , td /td , table /table div /div tags, and they all seem to match up - so I'm pretty sure its not a missing tag somewhere
    That means you do have errors in your markup. Validation errors. That didn't go away when changing the DTD, trust me!

    But since it appears you work on a different set of pages than those you've posted, I can only guess.

  16. #16
    SitePoint Addict
    Join Date
    Sep 2008
    Location
    Rudgwick, UK
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by noonnope View Post
    Really???



    That means you do have errors in your markup. Validation errors. That didn't go away when changing the DTD, trust me!

    But since it appears you work on a different set of pages than those you've posted, I can only guess.

    Yeah, tell me about it. Thats why I wanted to go from a CSS design from stage 1, but it was giving to me in Table format, and not being paid enough to re-do the whole design into CSS

    Ah well - will have to have validate the pages once the rest of the site is done.

    Cheers

    Andy

  17. #17
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    Is validation even worthwhile with a Tranny doctype? That allows pretty much anything in... font and center tags, align attributes, whatever.

    Anyway, I didn't look at the code closely but is this the mysterious gap under images?

  18. #18
    SitePoint Addict
    Join Date
    Sep 2008
    Location
    Rudgwick, UK
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Is validation even worthwhile with a Tranny doctype? That allows pretty much anything in... font and center tags, align attributes, whatever.

    Anyway, I didn't look at the code closely but is this the mysterious gap under images?
    Hi,

    I'm not trying to validate it I'm not being paid enough for that When (if) he decides to convert the site into using pure CSS /XHTML, instead of crappy tables - then I will validate it

    ...and yes, thats the padding issue I had (the menu above, had a "space" between it and the cell below) ... same with the other images.

    Either way, changing the strict type seems to have done the trick

    Cheers

    Andy

  19. #19
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    Well in that link, the mysterious gap goes away if you either put the image in block context OR set the vertical-align to something other than the default (I use bottom) so possibly that would work. If those don't work, it's not the same gap : )

  20. #20
    SitePoint Addict
    Join Date
    Sep 2008
    Location
    Rudgwick, UK
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah ok - well its gone now ... don't wanna spend any more time testing it I've just about had enough with this job

  21. #21
    SitePoint Evangelist Ed Seedhouse's Avatar
    Join Date
    Aug 2006
    Location
    Victoria, B.C. Canada
    Posts
    592
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ultranerds View Post
    I'm not trying to validate it I'm not being paid enough for that
    The Firefox "HTML Validator" add on will do it for you in a few seconds and a cut and paste operation. Sure the code will still be lousy, but at least it will be valid lousy code.
    Ed Seedhouse

  22. #22
    SitePoint Addict
    Join Date
    Sep 2008
    Location
    Rudgwick, UK
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    True, but I'm using a "template system", so the overall design is held in many many templates, all which are included to make the specific design. So not really as simple as doing that For example, we have a sidebar, copyright, header, footer, featured videos, etc)

    Thanks for the suggestion though

  23. #23
    SitePoint Evangelist Ed Seedhouse's Avatar
    Join Date
    Aug 2006
    Location
    Victoria, B.C. Canada
    Posts
    592
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ultranerds View Post
    True, but I'm using a "template system", so the overall design is held in many many templates, all which are included to make the specific design.
    If you are using php for the backend, all you have to do is write a straightforward little program to run through all the files and clean them up with "tidy", which I believe is a built in function in the default package.
    Ed Seedhouse

  24. #24
    SitePoint Addict
    Join Date
    Sep 2008
    Location
    Rudgwick, UK
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Not using PHP I'm afraid

    Its ok - I'm hoping we are gonna do a CSS re-work of the site at some point in the future, as it will most definatly help make the site faster (especially once it starts getting traffic)

    Cheers

    Andy


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
  •