14 replies [Last post]
wendy
wendy's picture
Offline
Enthusiast
Boston, MA
Last seen: 12 years 3 weeks ago
Boston, MA
Timezone: GMT-5
Joined: 2005-01-31
Posts: 174
Points: 0

This page
link removed
displays fine in all my Mac browsers (FF1.0.7, Opera 8.5, Sarari 1.2.2, and the last time I had the patience, in VPC WinXP/IE6).

I've just realized that Mac IE5.2 displays a page that has spewed all the content (but in a nice way Wink ) below the page "frame" -- everything is postioned just as it should be, but it's like a great big cosmic <br /> got thrown in.

It seems to be this page only, which is why I suspect the form, but...um, why the form??

Also, IE5.2 is dumping the footer some distance below where it should be, on all pages.

Coulda, shoulda, woulda....How do I fix this? Unfortunately, as much as everybody likes to say nobody uses IE5/Mac anymore...well, seems some do! <sigh />

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 4 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Form (?) causing page to blow apart in IE5.2/Mac...why?

Hi

Not having a mac, but having done quite a bit of work for displaying on them, I suspect the problem will be a lack of width on something you assumed would just fit in.

Mac IE tends to put 100% width on items that should inherit a width from the content inside or the outside container.

I notice that the image is floated but with no width.

And the form has no width. Try adding some width to both.

As to the footer, that too may be an element with no width and no content popping out of the center. If the content box has no content, where is the footer?

Trevor

wendy
wendy's picture
Offline
Enthusiast
Boston, MA
Last seen: 12 years 3 weeks ago
Boston, MA
Timezone: GMT-5
Joined: 2005-01-31
Posts: 174
Points: 0

Form (?) causing page to blow apart in IE5.2/Mac...why?

Thanks for looking, Trevor. Here is a screenshot of what's happening now
http//www.horseink.com/workroom/web/form.jpg

There was no width to the form, as you mentioned, so I gave it (the fieldset) one, small enough so padding/margins/borders didn't clash with boxmodels. It helped...now the content is within the page, rather than below it...but the form seems to be in a netherworld, neither within the content nor without. Divs are all closed as far as I can see, and page Tidies fine.

The footer does actually have a width. You can see what it's doing in the jpg -- as I said, it's perfect in all the other Mac broswers, and no apparent problems in the Wins. Just seems to jump down about 30px below whatever's above it. Its contents are where they should be and all.

Now here's a weird other thing, which would probably give me a clue, IF I were a smarter person
http//www.horseink.com/workroom/web/smaller.jpg

(When I squish the browser window horizontally, the bottom border of the #content div starts rising up.) I've posted the revised page and css, fwiw.

I appreciate your help. I know you're busy </understatement>!

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 4 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Form (?) causing page to blow apart in IE5.2/Mac...why?

Hi

I'm wondering if IE Mac is seing this css:

html>body { /* for Opera */
	font-size: small;
	height: 100%;
	}

If it is, it WILL go wrong, coz it can't abide height:100% (sometimes).

You could hide it from the Mac if it is seeing it like this:

/* \*/html>body {
	font-size: small;
	height: 100%;
	} /* for Opera, hidden from Mac IE */

Dunno what else it could be. Has the form got height? I have also found that adding display:table to some elements gets Mac IE to treat them better, and often no side effects for other browsers.

Trevor

wendy
wendy's picture
Offline
Enthusiast
Boston, MA
Last seen: 12 years 3 weeks ago
Boston, MA
Timezone: GMT-5
Joined: 2005-01-31
Posts: 174
Points: 0

Form (?) causing page to blow apart in IE5.2/Mac...why?

OK!! We've (you've) found out something...

I commented out all the heights I could find, and stuck the MacIE hack in. It turns out that the offending heights were on the #wrapper (which caused the page to stretch down to the bottom, below the content), AND the #leftcol, which somehow was causing the problems with the form.

The html>body heights didn't seem to have an effect. I made notes in the CSS for ref.

So all is glorious in Syrupland, except...the background on the #leftcol is now truncated, since it's depending on content, of which there is only the side links. Any ideas where I could put it to fix that?

There is a weird jig inward to the first line of the form, which I can't figure...no big problem, but the old "so near, yet so far" comes to mind...
http//www.horseink.com/workroom/web/formindent.jpg

wendy
wendy's picture
Offline
Enthusiast
Boston, MA
Last seen: 12 years 3 weeks ago
Boston, MA
Timezone: GMT-5
Joined: 2005-01-31
Posts: 174
Points: 0

Form (?) causing page to blow apart in IE5.2/Mac...why?

Meant to ask one more thing

The "rows/cols" specs for "textarea" no longer being acceptable, how is "textarea" properly presented (so that there is a box displayed, instead of a line)??

Cheers!

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 4 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Form (?) causing page to blow apart in IE5.2/Mac...why?

Hi

John at positioniseverything suggests this type of technique:

#col_left, #col_middle, #col_right { 
padding-bottom: 32000px; 
margin-bottom: -32000px; 
}

I thought that rows and cols is still required, by I just style the textarea in the css with width and height.

Trevor

wendy
wendy's picture
Offline
Enthusiast
Boston, MA
Last seen: 12 years 3 weeks ago
Boston, MA
Timezone: GMT-5
Joined: 2005-01-31
Posts: 174
Points: 0

Form (?) causing page to blow apart in IE5.2/Mac...why?

I think I've got it all now / except for that first-line-in-form indent (

The reason the background wasn't displaying when I put it in the #center div was that I had forgotten to disable the "height 100%" for that div (like a knucklehead). Did so, and it seems to be doing what it's supposed to.

About the textarea thing, I had used "height 4ems", but it only displays one line. Did I do this wrong?

Thanks )

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 4 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Form (?) causing page to blow apart in IE5.2/Mac...why?

wendy wrote:
About the textarea thing, I had used "height: 4ems", but it only displays one line. Did I do this wrong?

Wrong? Dunno. I'm not much into forms. Why not try pixels instead?

As an aside, my editor (WebCoder 2005) says xhtml1.0 and html4.01 strict both require cols and rows, and the w3c validator passes this as OK. Looking at all my forms (the few I have done), I have always set these. If you set the line-height for the textarea to be, say 1em, and make it rows="4" it will be 4 ems high.

Trevor

wendy
wendy's picture
Offline
Enthusiast
Boston, MA
Last seen: 12 years 3 weeks ago
Boston, MA
Timezone: GMT-5
Joined: 2005-01-31
Posts: 174
Points: 0

Form (?) causing page to blow apart in IE5.2/Mac...why?

Thanks, Trevor. It's weird, but the W3C CSS validator says there is no such thing as "rows". Oh, well, it worked.

The only thing I cannot figure out is why the first line of the form jigs in. It's not a code - whitespace thing, the page validates, and I can see nothing that would cause it. ? Is it inheriting left-padding(?) from the legend?

Not to repeat myself, but...oh, well.

Thanks again for all your help! D

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 4 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Form (?) causing page to blow apart in IE5.2/Mac...why?

wendy wrote:
Thanks, Trevor. It's weird, but the W3C CSS validator says there is no such thing as "rows". Oh, well, it worked.

Rows and cols need to be in the html code, on the page, NOT in the css!

Trevor

Anonymous
Anonymous's picture
Guru

Form (?) causing page to blow apart in IE5.2/Mac...why?

wendy wrote:
Oh, well, it worked.

I don't know whether to *sigh* or *GRRRR!*

wendy
wendy's picture
Offline
Enthusiast
Boston, MA
Last seen: 12 years 3 weeks ago
Boston, MA
Timezone: GMT-5
Joined: 2005-01-31
Posts: 174
Points: 0

Form (?) causing page to blow apart in IE5.2/Mac...why?

Triumph wrote:
I don't know whether to *sigh* or *GRRRR!*

Me, neither ?

I'd like to get this "perfect"* but am at a loss as to how.
Code is
<p><label for="message">Message</label>
<br />
<input type="textarea" rows="4" cols="10" id="message" name="message" tabindex="5" />
</p>

Display is still one line only (not a typical textarea).

*so much to do, and so little time...

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 4 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Form (?) causing page to blow apart in IE5.2/Mac...why?

And what css have you got for #message?

wendy
wendy's picture
Offline
Enthusiast
Boston, MA
Last seen: 12 years 3 weeks ago
Boston, MA
Timezone: GMT-5
Joined: 2005-01-31
Posts: 174
Points: 0

Form (?) causing page to blow apart in IE5.2/Mac...why?

I'm definitely beating this donkey into the ground...

I went with the pixel height in the css in the end. Rows & cols in the page code had no effect. Seems to display acceptably in Mac (haven't yet checked WinXP/IE6).

Page code (part of <form>)
<p><label for="message">Message</label><br />
<input type="textarea" id="message" name="message" tabindex="5" />
</p>

CSS
#name, #email, #phone, #subject, #message {
border 1px solid #999;
margin 0;
padding 0;
width 200px;
}
#message {height 80px;}

What I would really like to figure out, just so I know, is why this indent [ http//www.birchhillfarmvt.com/syrupform.jpg ] is occurring on the #name department. I added #thisform p {margin 0; padding 0;}to the CSS, and it removed the indent...but all the other lines moved to the left by that much (removed the margin0, no change, so it's padding that's involved). Maybe something to do with the Legend? but when I put a few extra breaks below that to test (thinking that the top <p> just isn't fitting in so it's moving over until it fits), no effect. This is only in IE5.2, others (Mac) are fine.
?