14 replies [Last post]
billythekid
Offline
Regular
Last seen: 16 years 9 weeks ago
Joined: 2005-11-26
Posts: 14
Points: 0

Hello

www.hadleypropertymanagement.com - cannot be scrolled using Mac Safari


My site CSS has been validated successfully.

My site HTML was not validated successfully, it has one error which I don't think can be fixed. The value in the code is <%=Server.HTMLEncode(Request("maxprice"))%>, it doesn't seem to like this, but I'm not sure that there is anything i can do to fix.

But anyway, this isn't the issue. Just letting you know that this isn't the cause of the problem. I have isolated the problem.

You cannot scroll the site using Mac Safari. I have other sites that have used the same CSS code but have overcome this by fixing the the 'main' (line 235 +237) div attributed to the main container table with a height of 4000 pixels. This works, but doesn't look to good!

The site doesn't scroll if i keep the container (line 238) and main divs at 100%. If I keep the container div at 100% but change the main div to 4000 pixels, scrolling is fixed.

I hope i am explaining this ok.

If anyone has any ideas that would be great.

Thanks

Anonymous
Anonymous's picture
Guru

Problem with Safari Mac - no scroll.

I think most of the problem is the amateurish use of position:absolute which takes just about everything on your page out of the document flow.

That doesn't explain why it happens in Safari and not the others but it is a good place to start for a redesign.

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

Problem with Safari Mac - no scroll.

In addition to what Triumph says.

I'm not sure if all that stuff before the doctype will through IE into quirks mode.

Anyway, I note the site is a table. Ouch. We don't like tables for layout.

Also, Safari handles height very oddly. In many ways Safari is like FF, but in this, it is not.

Have you tried putting height:100% in the body css? I know you haven't done it, but when you try things, don't try height:auto anywhere where you want Safari to do full height, it doesn't like it.

Trevor

Anonymous
Anonymous's picture
Guru

Problem with Safari Mac - no scroll.

ClevaTreva wrote:
I'm not sure if all that stuff before the doctype will through IE into quirks mode.
That's ASP. If done correctly it will not show in the output page but it won't work if it is called *.html instead of *.asp (unless you tweak the server settings)

I was actually looking at the live page of the url listed in the original post. Which, by the way, has no doctype. Evil Grrr.

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

Problem with Safari Mac - no scroll.

Triumph wrote:
Which, by the way, has no doctype. Evil Grrr.

Hi there

Do you have a MAC (sic Mac)?

When I looked at it, it had a doctype. Curious.

Trevor

Anonymous
Anonymous's picture
Guru

Problem with Safari Mac - no scroll.

ClevaTreva wrote:
Do you have a MAC (sic Mac)?

When I looked at it, it had a doctype. Curious.Yeah, Apple computer here. I'll boot up Windows on it and check the page again. Smile

*edit - Hmmm...I guess the home page does have a doctype...but this one doesn't http://www.hadleypropertymanagement.com/landlords.asp Laughing out loud

I could swear that the home page didn't have a doctype before. Maybe it was just added. Smile

billythekid
Offline
Regular
Last seen: 16 years 9 weeks ago
Joined: 2005-11-26
Posts: 14
Points: 0

Problem with Safari Mac - no scroll.

Crikey, where to start.

First off, thanks for all your responses.

I would also like to say that this isn't my code, another web designer created it.

I have added doctype to the homepage only, as this is the page under scrutiny at the moment.

The code at the top of the page hasn't anything to do with the issue i have described, I have isolated it and it is something to do with the height of the 'main' div.

I will add 100% height to the body css - i don't have a Mac so if anyone has a Mac and could test that would be great.

I am aware that asp on a html page won't work, but I explained that in my original post.

Anonymous
Anonymous's picture
Guru

Problem with Safari Mac - no scroll.

billythekid wrote:
I am aware that asp on a html page won't work, but I explained that in my original post.
Eh? I'm missing it.

billythekid wrote:
I will add 100% height to the body css - i don't have a Mac so if anyone has a Mac and could test that would be great.
No change. You've got to restructure the entire CSS file. Get rid of the absolute positioning. It fails completely with a single text size increase.

billythekid
Offline
Regular
Last seen: 16 years 9 weeks ago
Joined: 2005-11-26
Posts: 14
Points: 0

Problem with Safari Mac - no scroll.

Sorry, it was a note with the attachments.

I couldn't upload a .asp page, for some reason, so I just renamed it .html for reference.

apologies for the misunderstanding

Anonymous
Anonymous's picture
Guru

Problem with Safari Mac - no scroll.

billythekid wrote:
Sorry, it was a note with the attachments.

I couldn't upload a .asp page, for some reason, so I just renamed it .html for reference.

apologies for the misunderstandingAh, gotcha. Smile

billythekid
Offline
Regular
Last seen: 16 years 9 weeks ago
Joined: 2005-11-26
Posts: 14
Points: 0

Problem with Safari Mac - no scroll.

i am aware that the css code may not be perfect, but i do not have the time to completely re-design at the mo', although I will definitely do this ASAP.

I know the site works in most browsers, the only one it doesn't work in is Mac Safari. If i can just get a temporary fix for this it would be great.

some designers wouldn't bother becuase its safari and it's minority, but i don't work like this, I'm already loosing sleep!!

I have added 100% to body css.

I will also look at fixing the amateurish use of absolute!!

cheers guys

billythekid
Offline
Regular
Last seen: 16 years 9 weeks ago
Joined: 2005-11-26
Posts: 14
Points: 0

Problem with Safari Mac - no scroll.

I have used includes to clean up asp code at top of page code now.

If anyone could offer a little info on how to make use of absolute less amatuerish, that would be great

pointing out a particular peice of code/css would be of much help. i could then fix other mis uses of absolute.

Anonymous
Anonymous's picture
Guru

Problem with Safari Mac - no scroll.

billythekid wrote:
If anyone could offer a little info on how to make use of absolute less amatuerish, that would be great
Don't use it at all in this case.

billythekid
Offline
Regular
Last seen: 16 years 9 weeks ago
Joined: 2005-11-26
Posts: 14
Points: 0

Problem with Safari Mac - no scroll.

Cheers Triumph.

I just used the CSS-Creator, the result here http://www.sorce.co.uk/css-styles/

There is a problem there that has hounded me for a while.

The left and right columns do not expand with the main content, so the page looks odd.

This is where my css issues started really. So, to fix i would use height 100% for left and right columns, but, of course, it didn't work.

I have added heights 100% to the example above, the css style sheet is attached.

What's the take on this?

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

Problem with Safari Mac - no scroll.

Hi,

Use faux columns (see alistapart).

Trevor