a phantom pixel space!

Discussion in 'Mac Programming' started by stoid, Jul 3, 2005.

  1. stoid macrumors 601

    stoid

    Joined:
    Feb 17, 2002
    Location:
    So long, and thanks for all the fish!
    #1
    I'm designing a new layout for my website (first time I've touched the poor thing in months :eek: ) and I'm getting a phantom pixel wide space in the top navigation area. This problem does not occur in Safari, but does in Firefox on both Mac and PC, and IE on PC.

    Check the link:
    http://www.purentropy.com/index_new.html

    Notice that the logo is shifted off a pixel. The problem seems to be somewhere around the first link for 'video'. Notice that when you roll-over the button, there is a white line next to the hi-light. I've tried messing around with the table, but I can't find the value that is throwing it off. Ideas?

    Thanks guys.

    Also, post if you have comments about the new design, a quick mock-up can be found: here
     
  2. lgoss007 macrumors newbie

    Joined:
    Jun 17, 2005
  3. Sun Baked macrumors G5

    Sun Baked

    Joined:
    May 19, 2002
    #4
    Yep, the force was definitely not strong with that site. :(
     
  4. lgoss007 macrumors newbie

    Joined:
    Jun 17, 2005
    #5
    Redirected I was... help I cannot, unless fix you do.
     
  5. stoid thread starter macrumors 601

    stoid

    Joined:
    Feb 17, 2002
    Location:
    So long, and thanks for all the fish!
    #6
    Yeah, sorry guys, apparently the guy I that was reselling (via mesopia) some webspace didn't renew and so it's all down for awhile. I'm probably going to just purchase my own unique account once I finish off another project I'm working on.

    However, after massive tooling tonight, I found the problem. The layout was based on nested tables (IE HATES layers and it's hard to get them centered the way I want), and apparently a nested table must be at least one pixel shorter than the cell it is located in. In this example the table that housed the navigation graphics was inside a cell that had a width set to 750 px. Naturally then I set the table to be 750 px wide to fill the cell. Firefox/IE (though oddly not Safari) would only render properly when the table was 749 px wide.

    Go figure! Well, you learn something new everyday.

    Posted a screenie though as I am still interested in feedback on the design (as if you can make a call from a screenshot! :rolleyes: ) Still, any comments would be appreciated!
     

    Attached Files:

  6. homerjward macrumors 68030

    homerjward

    Joined:
    May 11, 2004
    Location:
    fig tree
    #7
    i really love the drop-shadows on the various boxes :D
     
  7. lgoss007 macrumors newbie

    Joined:
    Jun 17, 2005
    #8
    Maybe if I saw the screenshot of the messed up page I could deduce what the problem was (your solution sounds correct though, small little tweaks are often needed for strange reasons). But why are you using tables instead of CSS? Though IE messes up CSS too, but I find CSS much easier to work with (unless you tried CSS and IE killed it, which is definately possible).

    This is the reason I dislike Microsoft though. They always break standards (and make up their own) so that you have to keep using their software. I'm positive they do this deliberately to keep people tied to their platform. A developer nightmare though (I'm just gonna tell people to download Firefox if they're using Windows to view my site, :p ).
     
  8. stoid thread starter macrumors 601

    stoid

    Joined:
    Feb 17, 2002
    Location:
    So long, and thanks for all the fish!
    #9
    Yeah, this is my first attempt at a real website for myself. This past year at college my course work included a couple of web design/coding classes and I needed a guinea pig. As I learned more, I incorporated those ideas. The site was constantly being redesigned, and what you see is a fifth version. I started using tables, and shifted to CSS and PHP, but in the end those all just made it too complex and introduced crazy errors in IE, so while there are layers used in the site to determine z-index and such, the main layout tool is tables.
     
  9. stoid thread starter macrumors 601

    stoid

    Joined:
    Feb 17, 2002
    Location:
    So long, and thanks for all the fish!
    #10
    Thanks! the content area is one fat load of alpha channel PNGs so that I could change the layout of the boxes depending on the page. And it works great in every browser except of course IE! There's a workaround hack that I'm going to use now that I've got the errors worked out for real browsers.
     
  10. lgoss007 macrumors newbie

    Joined:
    Jun 17, 2005
    #11
    Looks pretty good for a first attempt at a real website. Though you'll run into IE problems whether you use tables or CSS. I really think CSS is the way to go as changing the layout is simplified since you don't have to redo the html page, just the css style (like here zengarden).

    Here are some other good sites for some cool CSS techniques:
    http://css.maxdesign.com.au/listamatic/
    http://www.alistapart.com/topics/css/

    Anyways, keep up the good work it's looking nice. ;)
     
  11. snkTab macrumors 6502a

    snkTab

    Joined:
    Nov 13, 2004
    Location:
    Cincinnati, OH
    #12
    you need to make the background more diverse, otherwise, it throws of the whole transparency thing.
     

Share This Page