Background images IE6 vs FF2

@WolfShadeMar 24.2008

Hello, everyone.

I’m building a template for a website and am trying to use background images because I sliced the mock-up for it and need some areas to be empty for the database driven content that will be inserted when I’m done.

The problem is that it looks great in both IE6 and FF2 if I keep the <img> tags in all the table cells, but only looks good in IE6 when I change the images to spacer.gif 1×1 and apply “background=” to place the images; it’s not working in FF2 because everything is out of alignment.

Here is the link to the template I am working on, please look at it in both IE6 and FF2 (PC versions of both):

~~[url]~~http://www.parliamentofreligions.org/staging/_templates/templateprepar.cfm[/url]

Any suggestions greatly appreciated.

Thanks,

^{^_^{^}}

to post a comment

HTML

8 Comments(s) _↴

@dtm32236Mar 24.2008 — #write your background images like this:

<td style="background-image:url(http://www.parliamentofreligions.org/staging/_images/preparliament/2008/pre-parliament_r3_c1.jpg);">...</td>

@WolfShadeauthorMar 24.2008 — #write your background images like this:

<td style="background-image:url(http://www.parliamentofreligions.org/staging/_images/preparliament/2008/pre-parliament_r3_c1.jpg);">...</td>[/QUOTE]

I've tried both, same result:

<i>
 </i>&lt;td style="background-image:url(http://www.parliamentofreligions.org/staging/_images/preparliament/2008/pre-parliament_r3_c1.jpg);"&gt;...&lt;/td&gt;

<i>
 </i>&lt;td background="http://www.parliamentofreligions.org/staging/_images/preparliament/2008/pre-parliament_r3_c1.jpg)"&gt;...&lt;/td&gt;

^{^_^{^}}

@WolfShadeauthorMar 25.2008 — #The situation is worse, now.

Since the index.cfm file this template is going to be inserted into has a strict doctype, I gave the template a strict doctype, just to make sure the final product works.

Now it's more screwed up in FF, and even IE6 & IE7 aren't viewing it properly.

http://www.parliamentofreligions.org/staging/_templates/templateprepar.cfm

Any ideas?

Thanks,

^{^_^{^}}

@CentauriMar 25.2008 — #This is heading very much in the wrong direction, and would be [B]much[/B] easier if the table layout and image slicing was ditched. At this stage, I could not see why any more than 4 graphics would be needed, with the bulk of the layout being handled with background colours and borders. Semantic html markup and css styling would make this page much quicker to load, and would be more accessible for screen readers etc.

To offer further advice on the layout and image extraction though, I would need to see the original layered, unsliced Photoshop mockup - various images would need to be extracted differently to what you currently have.

@WolfShadeauthorMar 26.2008 — #The client wants the banner between the header and the email form to be changeable from the CMS (a selection from many that can be uploaded to the server); the text of the header, left side, and area to the left of the email form changeable from the CMS; and the area immediately below the email form (the huge chunk of no graphics) editable from the CMS.

I've told them that they don't want a graphic intensive site, that it will take longer to load for dial-up connections, etc., but they like the design so I'm doing what I can to accomodate.

^{^_^{^}}

@dtm32236Mar 26.2008 — #you're also declaring a HTML doctype, but you have this in your html tag: [B]xmlns="https://www.w3.org/1999/xhtml"[/B] (remove this)

then, look into CSS to fix these [url=http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.parliamentofreligions.org%2Fstaging%2F_templates%2Ftemplateprepar.cfm]html errors[/url]

if you use Firefox, check out the HTML Validator / HTML Tidy Add-on, it will give you a better idea of how to fix these errors using CSS:

https://addons.mozilla.org/en-US/firefox/addon/249

when you view source on your page, it will highlight the errors and suggest a way to fix them.

@WolfShadeauthorMar 26.2008 — #you're also declaring a HTML doctype, but you have this in your html tag: [B]xmlns="https://www.w3.org/1999/xhtml"[/B] (remove this)

then, look into CSS to fix these [url=http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.parliamentofreligions.org%2Fstaging%2F_templates%2Ftemplateprepar.cfm]html errors[/url]

if you use Firefox, check out the HTML Validator / HTML Tidy Add-on, it will give you a better idea of how to fix these errors using CSS:

https://addons.mozilla.org/en-US/firefox/addon/249

when you view source on your page, it will highlight the errors and suggest a way to fix them.[/QUOTE]
Removed the xmlns, installed HTML Validator, got this:

Result: 19 errors / 0 warnings

line 19 column 15 - Error: there is no attribute "BORDER"

line 19 column 31 - Error: there is no attribute "CELLPADDING"

line 19 column 47 - Error: there is no attribute "CELLSPACING"

line 19 column 135 - Error: there is no attribute "BORDER"

line 29 column 173 - Error: there is no attribute "HSPACE"

line 29 column 184 - Error: there is no attribute "VSPACE"

line 29 column 221 - Error: required attribute "ALT" not specified

line 39 column 221 - Error: required attribute "ALT" not specified

line 40 column 221 - Error: required attribute "ALT" not specified

line 41 column 220 - Error: required attribute "ALT" not specified

line 51 column 208 - Error: required attribute "ALT" not specified

line 52 column 220 - Error: required attribute "ALT" not specified

line 53 column 207 - Error: required attribute "ALT" not specified

line 62 column 222 - Error: required attribute "ALT" not specified

line 63 column 222 - Error: required attribute "ALT" not specified

line 64 column 221 - Error: required attribute "ALT" not specified

line 68 column 209 - Error: required attribute "ALT" not specified

line 69 column 209 - Error: required attribute "ALT" not specified

line 79 column 62 - Error: there is no attribute "BACKGROUND"

All of these except the HSPACE/VSPACE/ALT are for table cells; the rest are for IMG tags. Coulda swore background/border/cellpadding/cellspacing were valid TD attributes. Are these being deprecated?

^{^_^{^}}

@dtm32236Mar 26.2008 — #yeah, they're all depeciated... and images require an ALT tag.

instead of [B]border="0" cellpadding="0" cellspacing="0"[/B] on every TD, just do (in the head, as you started):

<i>
 </i>&lt;style type="text/css"&gt;
 table {
 border-collapse:collapse;
 border:none;
 }
 tr, td {
 border:0px;
 margin:0px;
 padding:0px;
 background-repeat:no-repeat;
 text-align:left;
 vertical-align:top;
 }
 &lt;/style&gt;

now, border="0" cellpadding="0" cellspacing="0" is applied to EVERY TD, no need to keep writing it.

you can replace HSPACE/VSPACE with Padding and Margin.

and use CSS for the background image:

instead of

<td background="abc.jpg">...</td>

do

<td style="background-image:url(abc.jpg)">...</td>

read about and learn CSS it will make your life much, much easier

http://www.w3schools.com/css/css_intro.asp

Also in #HTML _↴

Maintaining color of link Preventing people stealing my images How do I make my html seen as well as hidden?

Success!

Help @WolfShade spread the word by sharing this article on Twitter...

Tweet This

Background images IE6 vs FF2

8 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

Background images IE6 vs FF2

8 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

8 Comments(s) _↴

Also in #HTML _↴