Maddening css issue: text cut off, height, etc.

[c3str]

Oh, I humbly throw myself at the feet of anyone that might be able to point out the (probably rather obvious) issue that I am overlooking. I'm about ready to rip my hair out on this one.

Here is the problem:
In Safari (Mac, Version 2.0.4 (419.3)), the text at the bottom of the about page simply cuts off. This does not manifest in any other browser. This happens no matter the size of the window. No ability to scroll. Overflow is not set to hidden. I have tried setting the HTML and Body heights to auto, in an *internal* style on this page (as they are set to 100% in the external style sheet for layout reasons on the other page). No dice.


Here is the site, where the source may be located, as well as the style sheet:
url deleted

Note:A few of the styles are internal, as I do not copy them to the external style sheet if they are not working or only apply to one page.

Any thoughts before I tear out some hair? Thank you in advance, times a million.

 

[decksnap]

You have all the text in a div defined as '#bio'. But I see no such style in the CSS sheet. That would probably cause something bad to happen.

As a matter of fact, the style you use for the images.. '#genpics' doesn't appear to exist in the style sheet either.

I don't want to sound rude, but do you really know how to use CSS?

 

[c3str]

I don't know...do you?

They are defined internally (not inline, which is different), which I often do for ease of editing until the styles have been finalized, when they are then copied to the external style sheet.

A style can be defined in several places, as I'm sure you know, hence the term "cascading" style sheets.

 

[decksnap]

OK dude- didn't see them inline... no need to start busting balls on somebody trying to help you. Your CSS is a mess. I guess I won't bother.

EDIT: I see you edited out all your negative remarks now. A little bit of advice- When somebody is going out of their way to help you, don't get mad and yell at them. Usually doesn't help your cause.

I didn't look for the CSS inline because you posted a link to an external file.

 

[c3str]

Won't bother.

I apologize if out of turn but I'm not sure where it is that you were willing to help.

You stated that there was no style, however the style is defined. I certainly should have mentioned that it was still internal, or else pasted it into the external style sheet, so that is my bad. But really, it seems the most classic internet tactic ever , when called on something, to then state that someone else's code or CSS is a mess, but not say how it is a mess. That is always a turn off, and in many forums will get you temporarily or permanently banned.

I would not have posted the response if you simply had stated "the style is missing." However, it is, yet you felt the need to state "do you really know how to use CSS" which some might find a rather inflammatory remark.

I know how to use CSS as well as I know how to use CSS. My question is/was not out of line, and I had googled for answers before coming to the forum to request help.

The odd thing is that in spite of the CSS being a mess, the elements check out ok in every tested browser except safari and also the CSS validates via the w3c validator, apart from one property (layout:true) unfortunately necessitated by IE. So, I'm sorry but the statement was uncalled for. That said, CSS/layout/code of the form are a mess and nonworking. I am redoing the site for a friend.

 

[angelwatt]

I don't see any cut off with Safari 3.0.3 so not completely sure what it looks like to you. Taking a quick stroll through your CSS though I'd say there could be issues with the "height: 100%" statements that you use. They can have unwanted side-effects and I'm not sure they're doing any thing really, though can't be sure without trying it. Also, I don't think the "min-height" set for body does much of anything. I'm not sure there is a "layout" attribute in CSS that you use in #wrapper. Doesn't look like there's anything that could be causing that type of issue in your internal CSS.

 

[c3str]

thank you

Hi, thanks very much. I should have included a screenshot.

I think that you are on the right track with the height: 100%; idea.

Will look into it. That was mostly used during my friend's previous design phase, where they had wanted content pinned to the bottom of the browser that stays at the bottom of the browser window even as the window is resized. They wanted it/had done it without javascript. The layout attribute is a strange IE only bugfix. Ugly, but did the job (related to the bottom content above).

Again---thanks for the help. I agree myself that this seems to be a side effect of the 100% height nasty business.

 

[elppa]

I apologize if out of turn but I'm not sure where it is that you were willing to help.

You stated that there was no style, however the style is defined. I certainly should have mentioned that it was still internal, or else pasted it into the external style sheet, so that is my bad. But really, it seems the most classic internet tactic ever , when called on something, to then state that someone else's code or CSS is a mess, but not say how it is a mess. That is always a turn off, and in many forums will get you temporarily or permanently banned.

I would not have posted the response if you simply had stated "the style is missing." However, it is, yet you felt the need to state "do you really know how to use CSS" which some might find a rather inflammatory remark.

I know how to use CSS as well as I know how to use CSS. My question is/was not out of line, and I had googled for answers before coming to the forum to request help.

The odd thing is that in spite of the CSS being a mess, the elements check out ok in every tested browser except safari and also the CSS validates via the w3c validator

Surely the W3C validator will give the same result whichever browser you are using? This makes no sense?

As it is, I see no cut of text using the Safari 3 beta.

 

[c3str]

Correct.

My phrasing there was confusing.

Yes, the W3C validator only checks for valid CSS. That sentence might've read: "the elements display correctly in every browser I've tested except Safari" (The comment in regard to the W3C validator was a reply to an earlier post in which it was stated that the CSS was a mess. I was saying that I thought it was odd that it would validate if it was such a mess.)

That said, I understand that it's likely not the cleanest CSS ever written, but one has to start somewhere and I'm currently learning to write it myself instead of relying on the generally ugly code generated by an (WYSIWYG) editor.

Thanks for letting me know it looks ok in the Safari 3 beta. I haven't yet installed it on either of my machines.

 

[pengu]

um. im using safari Version 2.0.4 (419.3) on 10.4.10 and i dont see any problem?? the page scrolls fine.

however, the problem may have been caused by the order Safari was reading things. try putting !important after the height:auto

 

[c3str]

May be fixed...

Thanks. It looks as though it is scrolling correctly now.

I think I may have gotten to the bottom of it. Will post the fix but first have to figure out exactly which one did the trick, as I did several positioning and CSS attribute changes at one time. (I know, I know...make one change then test. )