img with float:left can only show in IE, not FF

[sirpelidor]

Hi, I have an img tag with css like this:

style="position:relative;float:left;"


it display in IE fine, but it won't display in FF. If you remove float:left, then it display fine in both IE and FF. Would someone please help me take a look at it (http://www.millenniummemories.com/Biography.html) and point out what I did wrong?

Thank you.

[Fang]

Remove all position:relative; and float:left and start again.
position:relative; is not often required and float:left maybe 2x

[sirpelidor]

hi fang, thx for the reply. please click "it" my thread above to see the actual link, let me know if there's any more infor I can provide for you.

Thank you :)

[Fang]

Just removing all position:relative will be enough to work with.

[sirpelidor]

oh.... so it was position:relative that is causing the problem?? (i wonder why)


So I'll need to remove all position:realtive in that page, or just the one for img tag?

thanks :)

[Fang]

When you remove all position:relative your page will appear almost correct, (a visible image).
A few changes to margins or padding should correct the layout.
Even Microsoft recommends not using position:relative unless strictly necessary.

[knieveltech]

Try all of the following:

specify height and width of the image in the img tag
remove the position:relative from the inline style declaration inside the img tag
slap some 1px borders on your divs and stuff just to make sure it isn't an errantly placed object with the same background color as the page that's getting positioned over the top of your picture.

Good luck!

[felgall]

The only time I know of where you need to use position:relative is where you have entries defined with position:absolute that are relative to the object defined as position:relative rather than the top of the page. Most of the time position:static (which is the default) is quite sufficient).

[sirpelidor]

hi guys,

I took my "position:relative;" away and the image got displayed, however... after I add my scrolling feature, now I can only display images at FF and not IE :(

A picture worth thousand words, please take a look at this (http://www.millenniummemories.com/Biography.html) .

In order to keep the scrolling feature, (I think) I need that position:realtive, it just this time is the other way around - display in FF and not IE.

I'm still very weak at CSS, please help me what I did wrong, and how I can keep my scrolling feature with the image display.

Thank you :)

[Fang]

Without a complete re-write of the html and css, adding position:relative to the images is a quick fix.

[sirpelidor]

Hi fang, thanks for the tip and it worked!!!! :)

I am trying to understand why it works now and didn't work before (since I had position:relative at my image style to begin with).

I guess maybe it didn't work after i put my js scrolling feature back on was because img tag was in position:static (can't scroll) and my div tags were in relative (scrollable) ?

You hinted in order to make everything works as planned, I probably have to completely re-write the entire thing. Would you mind share how (or what approaches) you would have done if you are the web designer; since I don't mind to re-do the whole thing all over.

I'm trying to be a better (x)html coder, so I hope I can learn from mistakes.

Once again, thank you for your time :)