none
Header out of whack in Firefox, perfect in IE RRS feed

  • Question

  • Hi,

    I finally get my web page to center in IE and now my header is out of whack in Firefox, it was fine before I added the DocType to get my page to center in IE.

    The header was created and sliced in Photoshop. Here is a link to where the page can be viewed.

    http://www.skcgraphicdesign.com/new_index
    
    
    

    Thanks,

    SKC

     

    Saturday, January 22, 2011 3:10 AM

All replies

  • Your page is a poster child for table layout gone wrong. Try temporarily adding a border to all you table cells so you can see better what is going on.

    Add this to your css in the head:

    td{border:1px solid #000}

     

    There are reasons why using tables for layout is not recommenced.

    Saturday, January 22, 2011 4:10 AM
  • Actually, except for the sad Photoshop slice and dice header, the rest of the layout is structured with styled divs. That doesn't mean that there aren't issues with it (starting with heights on containers, but those may be temporary and go away when actual content is added), but at least the whole layout isn't table-based.

    IIRC, when you go to create one of these things in Photoshop, it offers to save the table HTML as well as the image slices. Did you use that HTML unaltered, or did you muck about with it? I ask because I can't imagine PS creating markup that won't even reconstruct the image correctly. Oh, BTW, using image text such as that for your navigation is going to ding you on SEO when the search engines can't read it, and therefore don't know what it is, or even that it is there. Just a thought...

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.
    Saturday, January 22, 2011 2:35 PM
  • Scott,

    To my knowledge nothing was changed in the html provided by photoshop. I know for certain that I didn't change anything - one more person was involved, but I don't think she changed anything either, but I have sent a message asking to be certain.

    At this point in time I am looking only for a solution to the header issue, I haven't gotten to anything else yet. Any ideas on how to correct this? Or even any ideas on another way to do this that wouldn't be all jacked up?

    As for the text image as navigation - there will also be  text navigation links elsewhere on the page.

    Thanks,

    SKC

    Saturday, January 22, 2011 5:24 PM
  • The only table usage is in the header, because it was sliced and diced in Photoshop.

    Will try your suggestion.

    Thanks,

    SKC

     

    Saturday, January 22, 2011 5:28 PM
  • Scott,

    To my knowledge nothing was changed in the html provided by photoshop. I know for certain that I didn't change anything - one more person was involved, but I don't think she changed anything either, but I have sent a message asking to be certain.

    At this point in time I am looking only for a solution to the header issue, I haven't gotten to anything else yet. Any ideas on how to correct this? Or even any ideas on another way to do this that wouldn't be all jacked up?

    As for the text image as navigation - there will also be  text navigation links elsewhere on the page.

    Thanks,

    SKC


    Here's a quick and dirty check you can use to determine if the table markup provided is at fault.

    1. Re-save the slices, with HTML, from Photoshop (so you're working from a known good base)..
    2. Click the New icon on the toolbar in EW to quickly create a new, default page.
    3. Paste into that page the HTML (and CSS, if any) provided by Photoshop, and nothing else.
    4. Preview the file in Firefox.

    I don't use PS's HTML, so I don't know if there is CSS accompanying the table HTML. Given the nature of a table such as this, I wouldn't think there would be anything other than inline sizing for the cells/rows.

    Give that procedure a try see what happens. Don't worry about centering at the moment; that is the simplest part of the question to resolve. If you still see the same issues in Firefox, then there is apparently something wrong with the PS output algorithm. If not, something was done by someone to the files output from PS on the way to the Web page.

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.
    Saturday, January 22, 2011 7:36 PM
  • I can't figure out why you're slicing a graphic in the first place. Just use the whole thing as the background of the header div and place the other stuff in the div properly using margins and padding.

    I thought slicing graphics for websites went out with The Go Gos and Dexy's Midnight Runners.


    Eschew obfuscation.
    Saturday, January 22, 2011 8:56 PM
  • Bill,

     

    That's what I ended up doing.

     

    S

    Sunday, January 23, 2011 2:21 PM
  • Scott,

     

    Thanks for your help. I went a different route. I got it and it's centered now.

     

    Again thanks.

    S

    Sunday, January 23, 2011 2:22 PM