[thePurpleGiant]

Hey guys,

I posted a thread a few weeks ago asking about how to place an image at the very base of a webpage. The site I was doing at the time rendered this fine in Safari, but Internet Explorer muddled it all up.

Well I have a very similar problem now!

I am making a site for a real estate company. At the base of each page, I am placing a graphic that normally sits at the bottom of their letterhead.

I used Synotic's code to do this:

[style type="text/css"]
body { background: #000 url(http://www.domain/images/basepic.jpg) bottom right no-repeat }
[/style]

And it looks great in Safari, Camino and Omniweb. But Mac IE and Windows IE bugger it up!

The very early draft of the page is at:

http://www.kenbucklandrealestate.com.au/draft

The base is supposed to look like this:


(looks like this is Safari, Camino, Omniweb)

However, IE for Mac places it in the middle of the page??:


And Windows IE doesn't place anything there at all!


Why oh why? Any ideas fellas?

[derbs]

It's because CSS sucks

Why don't you just add another row onto the bottom of your table, and put the graphic as the the cell-background? That will work in 100% of browsers guaranteed (apart from lynx )

Let me know if you want more details.

[york28]

I wouldn't say that CSS sucks; rather, IE's anemic implimentation of it that leaves much to be desired. For the most part, however, it is supported well enough by modern browsers to use, as long as one is careful to avoid certain browser quirks.

You could add another table, as suggested, since you are already using tables for layout, but here is another option:

To fix it using CSS, do this:

Code:
body {background-image: url(images/hills.gif);
	background-position: bottom right;
	background-repeat: no-repeat; }

Frequently, IE supports something, but is picky about how you word things.

[edit: This works in IE Win 5, not sure about IE Mac, but I'm pretty sure it will. Can anyone varify this?]

[thePurpleGiant]

Originally posted by york28:
I wouldn't say that CSS sucks; rather, IE's anemic implimentation of it that leaves much to be desired. For the most part, however, it is supported well enough by modern browsers to use, as long as one is careful to avoid certain browser quirks.

You could add another table, as suggested, since you are already using tables for layout, but here is another option:

To fix it using CSS, do this:

Code:
body {background-image: url(images/hills.gif);
	background-position: bottom right;
	background-repeat: no-repeat; }

Frequently, IE supports something, but is picky about how you word things.

[edit: This works in IE Win 5, not sure about IE Mac, but I'm pretty sure it will. Can anyone varify this?]

Thanks for the responses. The reason I used CSS over a table cell background was because last time I needed to do something similar, that worked fine in everything except...you guessed it, Internet Explorer! It seemed to *always* place a gap underneath the table image. Always.

So I thought this was a more modern and simpler solution.

Your CSS worked very well thanks! Sily IE. Works perfectly in IE Win, but IE Mac has a slight issue where it will load the image in the bottom of the *window*, not the bottom of the page. So if the user goes to the site and the window shows only half of the contents of the page, the image will be resting at the bottom of that.

But who honestly uses Internet Explorer for Mac anymore? I've always made sure my sites work in all browsers, but I'm tempted to let this one slide. Am I a bad person for not supporting a browser that has been discontinued and basically replaced by Safari? (and wont be bundled with Mac OS anymore either)

Okay not to be too dependant on you guys or anything, but there is one other slight issue:

For the navigation at the top, I have the 4 section links in one cell. The cell background is an image of the same blue colour, with a white stripe across the top.

Safari:


Mac IE:


Windows IE:


It appears that IE completely ignores this image! Does IE only read table background images? (not cell background images?)

[derbs]

You must make sure the

background="whatever.gif"

is in the [td] tag and not the [tr] tag, otherwise IE will not show it.

Let us know if that works

[thePurpleGiant]

Originally posted by derbs:
You must make sure the

background="whatever.gif"

is in the [td] tag and not the [tr] tag, otherwise IE will not show it.

Let us know if that works

Hey! That worked!! Thanks!! I wonder why Dreamweaver would place it in the [tr] tag then? What is the difference between these tags?

[york28]

tr is row; td is cell. Support for background images in table elements varies by browser; some will display the image in any tag, others, as is this case, only certain ones.