Hotspots + table in Dreamweaver problem

Discussion in 'Web Design and Development' started by Infinitygraphix, Oct 8, 2008.

  1. Infinitygraphix macrumors member

    Joined:
    Apr 14, 2008
    #1
    Hi,

    Here is my problem.

    I am designing a new newsletter for my office in Dreamweaver CS3.

    I designed the background image in photoshop, slice it and import it in Dreamweaver.

    **** People who will see/read the newsletter are all using a PC...and I'm using a Mac*****

    So, when I put my images in table with all border to 0, everything is fine on my Mac and on all tests PC.

    But when I add some HotSpots, a white space appears between 2 rows that is visible ONLY on PC.

    Everything looks fine on Mac with every browsers I tried (safari, firefox, old Explorer, Netscape, opera). it looks also fine in Outlook 2004 on Mac but we see the white space on Outlook for PC....

    (I also test it in Yahoo... and this part is weird...

    Yahoo on Mac, I see the white space (that I don't want to see).... but If I check the email from Yahoo in Mail of the Iphone... it is ok.)


    I also makes sure that the hotspot doesn't touch 2 different cells from the table in case it can matters.

    Anybody have a solution ?

    Thanks for any help !
     
  2. Cabbit macrumors 68020

    Cabbit

    Joined:
    Jan 30, 2006
    Location:
    Scotland
    #2
    Can you perhaps post the code and maybe some illustrations or screen shots to illustrate the issue clearly please and i will be happy to help you work it out, I am guessing when you say it it not the same on the pc you mean internet explorer so its most likely a CSS error or difference between the browsers that needs a bit of fine tuning.
     
  3. Infinitygraphix thread starter macrumors member

    Joined:
    Apr 14, 2008
    #4
    Instead of just pasting some code, here is a link to a temp file displaying the problem (Only on a PC, on a Mac it looks fine)

    On the file, if viewed from a PC, there is a horizontale white gasp undeg the « red » horizontal bar at the top.

    View the file here : http://www.cch.ca/bulletins/2008/temp.html

    Thanks
     
  4. Infinitygraphix thread starter macrumors member

    Joined:
    Apr 14, 2008
    #5
    Thanks for the link, seems like some interesting reads.

    I check rapidly and paste the code in my file

    td.imgholder img {
    display:block;
    margin:0;
    padding:0;
    }

    but it didn't seems to works. For now, I have remove it.

    You can check my link above and tell me what you think.

    Thanks
     
  5. Infinitygraphix thread starter macrumors member

    Joined:
    Apr 14, 2008
    #6
    For what it's worth, I also used a HTML validator and a CSS validator.

    There is no coding mistake when I run the check.
     
  6. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #7
    Well in your code, none of your td tags have a class of "imgholder" so I wouldn't expect the CSS to change anything. Just use "td img" as the CSS selector.

    I don't have access to a Windows machines so can't reproduce the problem, so this is the extent of my help.
     
  7. Infinitygraphix thread starter macrumors member

    Joined:
    Apr 14, 2008
    #8

    "td img"

    Could you please explain a little more ?
     
  8. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #9
    Sure. Currently in your code inside the style tag there's code like,

    Code:
    body {
    	background-color: #FFFFFF;
    }
    which is part of the CSS. The CSS selector here is "body." The stuff inside the { } are the properties. Here, "body" represents the body tag, and the properties will be applied to the body tag.

    When you have a CSS selector of "td img" it will apply the properties to all img tags inside td tags. When you have a CSS selector of td.imgholder, it applies to td tags, which have a class attribute set to "imgholder." Your code doesn't use that class name so was not needed. So, instead of that first bit of CSS you applied, you would put:

    Code:
    td img { 
     display:block; 
     margin:0; 
     padding:0; 
    }
    Though the margin and padding properties aren't likely needed, but won't hurt anything either. Hope that clears it up.
     
  9. Infinitygraphix thread starter macrumors member

    Joined:
    Apr 14, 2008
    #10
    So far so good, seems to works !

    Thanks a lot !
     
  10. woodlandtrek macrumors member

    Joined:
    Jan 21, 2008
    #11
    just so you know, gmail, hotmail, and windows live mail do not support css styles in the header. If you want to use css with them, it has to be as inline styles. Outlook 2007 supports style definitions in the header, but does not support several common css selectors, such as :hover and :active. Check out http://www.campaignmonitor.com/css/ for a list of css support in email clients.

    </wonderful world of html email :rolleyes:>


    Edit: Windows Live Mail does support css in the header, but not certain selectors
     
  11. 7on macrumors 601

    7on

    Joined:
    Nov 9, 2003
    Location:
    Dress Rosa
    #12
    I've even found MobileMe to disregard <p> margins setting everything to 0 so I even have to use double <br> tags.

    http://www.favoritestaffing.com/public/newsletter/20080829.htm
     

Share This Page