Jump to content
Stef's Coding Community
gunsock

My image disappears in IE

Recommended Posts

Hi All

 

I suspect this is an old chestnut. I'm changing all the pages on my site to the 3 col CSS 'holy grail'as in Matthew James Taylor's page at:

http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm

 

Its fine in FF but in IE my image disappears.

 

This page is typical:

http://hollywoodsgoldenage.com/movies/42street.html

 

I've spent hours searching and googling and I gather its the float:left property which causes the problem. But so far I've not been able to find an answer. Is there a simple solution to this?

 

Many thanks. :)

 

Chris/gunsock

Share this post


Link to post
Share on other sites

Well, I'm not exactly sure whats going on there. But, a quick trip through the validator shows 85 errors.

 

Cleaning those up would be a good place to start.

 

And just giving a glance over your source code, you really need to use the p tags to separate your paragraphs instead of

. In fact right after the first block of text you have two closing p tags but not a single one open before them.

Share this post


Link to post
Share on other sites
Hi All

 

I suspect this is an old chestnut. I'm changing all the pages on my site to the 3 col CSS 'holy grail'as in Matthew James Taylor's page at:

http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm

 

Its fine in FF but in IE my image disappears.

 

This page is typical:

http://hollywoodsgoldenage.com/movies/42street.html

 

I've spent hours searching and googling and I gather its the float:left property which causes the problem. But so far I've not been able to find an answer. Is there a simple solution to this?

 

Many thanks. :)

 

Chris/gunsock

 

haslyout issue! Add this...

 

Share this post


Link to post
Share on other sites

 

haslyout issue! Add this...

 

 

 

That's done it! Absolutely fantastic.

I can't thank you enough Eric. You've saved me hours of trouble. :D

 

Cheers

 

Chris/gunsock

Share this post


Link to post
Share on other sites
Well, I'm not exactly sure whats going on there. But, a quick trip through the validator shows 85 errors.

 

Cleaning those up would be a good place to start.

 

And just giving a glance over your source code, you really need to use the p tags to separate your paragraphs instead of

. In fact right after the first block of text you have two closing p tags but not a single one open before them.

 

 

Thanks JBall, the 2 closing p tags were left over from my frenzied efforts to use p {float:left and I forgot to delete them.

85 errors? Wow, I've got some work to do, starting now.

Many thanks for your helpful comments.

Chris/gunsock

Share this post


Link to post
Share on other sites

I just looked at your page briefly, not the code, just the page in Firefox. It doesn't look so good. The text runs all the way over to the right edge of the screen, the ad boxes cover part of it, and at least the last letter (or more?) in each line is not even visible any more.

 

And after writing this, I did look at the code ---- OUCH!

 

Start with a proper doctype (HTML 4.01 STRICT - including the link to W3S - like so


and take it from there.

 

We're here to help if you have questions.

Share this post


Link to post
Share on other sites

Yes, I jumped the gun with my celebrations earlier, I was so delighted to have recovered my images in IE that I neglected to check how everything looked in FF - and of course, as you rightly point out Thelma - half the page had lurched to the right.

 

When I put in the doc type declaration, everything magically resolved itself, without me having to change anything else. My pics now show up in IE and all looks OK in FF. I am just amazed that the declaration is so important. I had no idea.

 

Another lesson learned.

 

Thank you so much, Thelma. I'm very appreciative of your help.

 

Must go now, I've got 85 errors to check out! :D

 

Cheers,

 

Chris/gunsock

Share this post


Link to post
Share on other sites
Yes, I jumped the gun with my celebrations earlier, I was so delighted to have recovered my images in IE that I neglected to check how everything looked in FF - and of course, as you rightly point out Thelma - half the page had lurched to the right.

 

When I put in the doc type declaration, everything magically resolved itself, without me having to change anything else. My pics now show up in IE and all looks OK in FF. I am just amazed that the declaration is so important. I had no idea.

 

Another lesson learned.

 

Thank you so much, Thelma. I'm very appreciative of your help.

 

Must go now, I've got 85 errors to check out! :D

 

Cheers,

 

Chris/gunsock

 

I neglected to look at it in FX with that fix. I see your good anyway. But, in the future, "when" (not if) you have a "haslayout" issue. You can "usually" safely add either of these to fix IE.

 

IE7 min-height:0;

IE6 height:1%;

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...