5 replies [Last post]
gp
Offline
newbie
Last seen: 16 years 23 weeks ago
Joined: 2004-09-28
Posts: 8
Points: 0

Hi guys, I have put an example of the site at:

http://www.goodkid.co.za/khaya/default.aspx

I have three problems with the site. The first being that the bottom div tag ("BottomPic") doesn't display the background image in Mozilla/Netscape, but it is there in IE.

Secondly I am having a major problem with absolute positioning of an image. Below is my class:

.PlantPic {
background-image:url(Images/Plant.gif);
position:absolute;
top: 851px;
height:212px;
width:107px;
z-index:1;
}

but for some reason when I look at the page in IE, the position is different to when I look at it in Mozilla.

The third problem is in Netscape. The picture is in the same position as it is in Mozilla but for some reason the colours on the image are all messed up?!

Any help would be dearly appreciated.
Thanks
GP

brockly
Offline
Regular
Kent England
Last seen: 16 years 28 weeks ago
Kent England
Joined: 2004-08-18
Posts: 22
Points: 0

Bottom Div tag not displaying background image

im not sure how to help you here but as you are having the same sort of problems as me in cross brouser compatabilty i may as well ask here, does anyone know where i can find out how firefox / monzila use tags and css difrerently.

seb
Offline
Enthusiast
Last seen: 14 years 6 weeks ago
Joined: 2003-09-20
Posts: 208
Points: 0

Bottom Div tag not displaying background image

without even bothering to look at your code or page I'm willing to bet that you have floated elements inside this div, and that if you draw a border around the div it has zero height. Furthermore I bet you've set a width on it.

Am I right? Am I? Laughing out loud

The solution is to either explicitly set the height on the div, or float it left/right. The choice, is yours.

edit: looking at it briefly (very busy) I think I was wrong Smile

gp
Offline
newbie
Last seen: 16 years 23 weeks ago
Joined: 2004-09-28
Posts: 8
Points: 0

My div tags don't have a zero height

Hi guys, my div tags don't have a zero height, not that I think that that is causing my problem.

My main problem is that for some reason the div tag at the bottom of the page doesn't want to display the image that I have set as its background. I have explicitly stated the height and width of the div tag, but that doesn't seem to make any difference.

To make matters worse, I looked at the site in Opera/IE and the image appears in the bottom div tag, but not in Netscape/Mozilla Firefox!

mini
Offline
Regular
Last seen: 16 years 23 weeks ago
Joined: 2004-09-27
Posts: 24
Points: 0

Bottom Div tag not displaying background image

where do you want that plant bit?
Under the menu?

I would not set it as absolute I would set it as relative...
I don't really know same as I have not looked at the code properly but I found that images tend to bounce all over the place when you have absolutes after headers and text ...

Why have you put it at the DIV at the top of your Html page?

Are you trying to give it a bg body tag?
If so I woud just save it has the height and width you requiere?

gp
Offline
newbie
Last seen: 16 years 23 weeks ago
Joined: 2004-09-28
Posts: 8
Points: 0

I have got the plant bit right in IE/Firefox/Netscape

OK I have sorted out the plant's positioning by using a relative position statement. I did find that the positrion was different in IE and Firefox, so I used the IE bug work-around to give a different position for IE and Firefox, but now the positioning is off in Opera!

I also fixed the image from displaying strangely in Netscape by declaring the img using an <img> tag instead of declaring as a background image in the div tag.

Now I just need to get the image at the bottom of the page to display correctly in Netscape/Firefox and I will be away!

Thanks for the help so far.