CSS is overlapping my image, browser not seeing the div id tags
New here so hi everyone.
What the problem is I'm making an email test page for a promotion that we will start running very soon, actually starting the 1st of January. Whats happening is that I've placed all the CSS to align with my div id all tag, but once the page is resized the some copy overlaps the images in my browser.
I'm not shore why this is happening but any advice will be appreciated.
I'll list the links for you guys to see:
http://www.cbcamerica.com/cctvprod/monthlypromo/january1stpromo04.htm
This is the page and you have to resize past 700 px to see the text what I'm talking about.
Suzanne posted this at 00:38 — 16th December 2003.
She has: 5,507 posts
Joined: Feb 2000
As much as it pains me to say it, why are you using CSS to position these items? Email isn't at the same place as browsers, and you'll have to dumb it down somewhat.
Also, since you're using horrific DW-generated garbage code, it will save you $$ to clean that up and use DW properly...
benjo posted this at 14:54 — 16th December 2003.
He has: 12 posts
Joined: Dec 2003
I got it. This is basic CSS being that I don't know advanced CSS. Anyhow I've fixed it now had and extra tag in the HTML. So this cut off my #all class.
I have a question, why is DW markup so bad?
Suzanne posted this at 14:58 — 16th December 2003.
She has: 5,507 posts
Joined: Feb 2000
Email applications support HTML3.2 at the max, for the most part -- your CSS shouldn't be there at all. It also overlaps the bottom information. Really, don't use CSS for this application unless people will be clicking through FROM an email TO a webpage.
DW coding isn't bad on its own, however when you don't know what you're doing, you get this:
<tr><td><img src="imagesCssP/spacer.gif" width="74" height="1" border="0" alt=""></td>
<td><img src="imagesCssP/spacer.gif" width="75" height="1" border="0" alt=""></td>
<td><img src="imagesCssP/spacer.gif" width="75" height="1" border="0" alt=""></td>
<td><img src="imagesCssP/spacer.gif" width="93" height="1" border="0" alt=""></td>
<td><img src="imagesCssP/spacer.gif" width="76" height="1" border="0" alt=""></td>
<td><img src="imagesCssP/spacer.gif" width="28" height="1" border="0" alt=""></td>
<td><img src="imagesCssP/spacer.gif" width="38" height="1" border="0" alt=""></td>
<td><img src="imagesCssP/spacer.gif" width="43" height="1" border="0" alt=""></td>
<td><img src="imagesCssP/spacer.gif" width="49" height="1" border="0" alt=""></td>
<td><img src="imagesCssP/spacer.gif" width="75" height="1" border="0" alt=""></td>
<td><img src="imagesCssP/spacer.gif" width="74" height="1" border="0" alt=""></td>
<td><img src="imagesCssP/spacer.gif" width="1" height="1" border="0" alt=""></td>
</tr>
And that is bloated, bad coding.
benjo posted this at 16:24 — 16th December 2003.
He has: 12 posts
Joined: Dec 2003
I tried to get rid of it but it breaks my rollover images and puts spacing in between them.
Do you ussualy hand code or do you use WYSIWIG apps?
The CSS is mostly done by hand. but the layout is all done in DW and Fireworks where I design the look of the page easily.
By the way I tested it and the formating for the ellements position in CSS-P is way off. So your suggesting that I go back and make this in tabels.
How do you go about cleaning up FW generated code is there a general rule of thumb or do I just have to break out the ruler and start measuring px by px and create a dreaded table structure to get this to work? I hate tables for layout they are so buggy.
I understand messurments pretty well since I'm a Graphic Artist. So to go back and meassure everything (although I wouldn't want to) I guess seems only logical.
Once I found out about CSS I started to learn it. It works just as it would for a standard page layout application. It has a stacking order, you can overlap items and you can position elements to the T. Tabels is like designing in MS Word. Alright enough babaling.
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.