Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Hotspots + table in Dreamweaver problem

I

Infinitygraphix

macrumors member
Original poster
Apr 14, 2008
82
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 !
 
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.
 
babyjenniferLB said:
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.
Click to expand...

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
 
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.
 
Infinitygraphix said:
I check rapidly and paste the code in my file

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

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

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.
 
Infinitygraphix said:
"td img"

Could you please explain a little more ?
Click to expand...

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.
 
angelwatt said:
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.
Click to expand...

So far so good, seems to works !

Thanks a lot !
 
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
 
woodlandtrek said:
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
Click to expand...

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
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back