Table content not displaying properly in IE - Apple Software and Technology forum at WebmasterWorld - WebmasterWorld

Forum Moderators: travelin cat

Message Too Old, No Replies

Table content not displaying properly in IE

Pictures float over text within a table

Isa71

3:12 am on Apr 23, 2003 (gmt 0)

10+ Year Member

I have read several threads in this forum about problems with the combination IE and Mac (threads 129, 152, 112, 48 etc.). I have a table with both pictures and text (in separate td's). My problem is that in IE on a Mac, the bottom pictures and text "jump up" and float over the top picture and text. The strange thing is that I have 13 pages, all built on the same base, but only 3 of the pages display incorrectly, the other 10 are fine!
I have tried comparing one of the faulty pages with one of the correct ones but apart from the obvious differences (like different images and texts), I cannot find anything that differs between them. In the previous threads, there was a lot about how CSS can play up in IE+Mac, but I have validated the CSS code. In the HTML there are a few things that do not validate, but this is also true for the pages that display properly!
To make matters worse, I cannot see for myself other than some print screens a friend who uses Mac sent me.
I am at a loss... ;-)
Any ideas?!

Thanks
:-) Isabelle

ControlZ

5:06 am on Apr 23, 2003 (gmt 0)

10+ Year Member

Not 100% sure, but this problem sounds like something similar that occurs in Netscape 4 versions. IF you have CSS referencing a cell where there is an image by itself or both an image and text, the result will be exactely what you described.

You can CSS in the same cell as an image, but don't set the style with the <TD> tag. Use the <span class="mystyle">copy, copy</span> My Image.

I would bet this is causing the problem.

Macguru

12:33 pm on Apr 25, 2003 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Hi Isa71,

You have a perfectly valid CSS file and you used templates where only external files calls are different?

Your text and images are in separated <td> and show superposed on some small amount of quasi similar pages?

Whoa, this one can be difficult to fix.

Lets try to isolate the bugger.

Step one, make sure your CSS is perfectly valid and written or called from the <head> portion of page.

This validator is less obscure on explanations.
[htmlhelp.com...]

Step two, Ask your friend to

A )clear the cache from IE (Edit/Preferences/Web Browser/Advanced/Cache/ press Empty Now, relaunch) and reload the pages and report to you.

B) disable CSS from IE (Edit/Preferences/Web Browser/Page Content/ uncheck Show Style Sheets) the page will reload itself and report to you.

C) disable JS from IE (Edit/Preferences/Web Browser/Web Content/Active Content/ uncheck Active sripting) and reload the pages and report to you.

Hope this helps and also hope your Mac friend is a good friend too. ;-)

Isa71

3:05 am on Apr 28, 2003 (gmt 0)

10+ Year Member

Hi Macguru and ControlZ

Thank you for your comments!

"IF you have CSS referencing a cell where there is an image by itself or both an image and text, the result will be exactely what you described. You can CSS in the same cell as an image, but don't set the style with the <TD> tag. Use the <span class="mystyle">copy, copy</span> My Image."

I DO have CSS referencing cells where there is only one image by itself but I do not reference in the <Td> tag. Often I reference it as an attribute to the image itself, i.e. <img src="myimage.gif" class="imagesquare">. This shouldn't be a problem, should it?

"Your text and images are in separated <td> and show superposed on some small amount of quasi similar pages?"
YES

"You have a perfectly valid CSS file and you used templates where only external files calls are different?"
It is not perfect. It validates but still gives me recommendations, e.g. to always set the background in conjunction with setting the color. I will do this. However, all pages use the same CSS file so if this is a problem, it should be a problem on the other pages as well?
Yes, the external file calls are different, but there is also different text on the pages. In the same style, but different words.

"Whoa, this one can be difficult to fix." I was afraid so... ;-)

My friend is flat out at the moment but hopefully we can get together one evening this week and check your tips out!
Hopefully that will bring something!

Thanks a lot for your time!

Isa

Nick_W

5:50 pm on Apr 29, 2003 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

So, take the pics from the faulty page and pop 'em in the good one.

I'll bet that you get the good page giving you problems. And if you don't, well you might not know why but it'll be fixed all the same.

My bet, if what you say is true (mistakes happen ;)) is that the images are different sizes and it's somthing you'd see on all the pages if the pics were bigger/smaller....

Nick

Isa71

4:06 am on Apr 30, 2003 (gmt 0)

10+ Year Member

Hi again

Nick, thanks for your input! I tried what you suggested, taking the pictures from one of the faulty pages and put them in one of the good ones.

"I'll bet that you get the good page giving you problems. And if you don't, well you might not know why but it'll be fixed all the same."
The good page didn't give me problems, it still displays properly. So the pics are fine! It is partly fixed but I still have to transfer the text and the external file calls. I will try that again (have tried it before) and see if I manage to avoid problems this time around. But if it causes problems there must be something that is not right in the code. I have gone through it several times but just looking at your own code makes you blind so Nick, you are right, mistakes happen...

I will try it out and let you know what happens...

Thanks for all your suggestions!

:-)Isa

Isa71

5:19 am on Apr 30, 2003 (gmt 0)

10+ Year Member

...and hi again

I tried making the changes to the text and external file calls and a few other changes, which made the page faulty again. There MUST be something wrong in my code. I wish my test editor could highlight it for me... or that my brain could start from scratch and find the fault, it might very well be something obvious...

;-) Isa

Macguru

11:23 am on Apr 30, 2003 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

I have done a little testing with similar problem. Removing all CSS usually fix the issue.

Can you post an example of your CSS file in so we can have a look?

Nick_W

11:27 am on Apr 30, 2003 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Also, when your swapping over elements do it one bit at a time, try to isolate where this is happening...

Nick

Isa71

1:15 am on May 1, 2003 (gmt 0)

10+ Year Member

Hi

Thanks Macguru and Nick!

Example from my css file:

body{font-family: Trebuchet MS, sans-serif; font-size: 9px; color: black; background-color: transparent; line-height: 9pt;}
.rolltext {font-family: Trebuchet MS, sans-serif; font-size: 14px; color: black; background-color: transparent; line-height: 15pt;}
a {font-family: verdana, sans-serif; font-size: 11px; color: #000066; background-color: transparent; line-height: 10pt; text-decoration: none;}
.imgsquare {border: 1px solid #837C83;}
.rightspace {padding: 5px 15px 0 0;} /* top, right, bottom, left */
.nopadding {padding: 0 0 0 0;}

It all validates.

As for swapping over elements one at the time, that is the ideal way of doing it in order to eliminate causes. However, since I don't have a Mac of my own it is a bit tricky to do. I can't ask my friend (since he checks for me when at work) to check after each little thing. But I am hoping that we can meet up after work sometime soon and I can sit at his Mac and try it bit by bit.

Thanks
:-) Isa