33 replies [Last post]
shewomancat
shewomancat's picture
Offline
Regular
leicestershire,UK
Last seen: 14 years 38 weeks ago
leicestershire,UK
Joined: 2005-11-17
Posts: 18
Points: 0

Hi there

I have a site done in php and with css ...

I have added a scroll box for my text. But it doesn't work in safari.

I am compatible with every browser except safari on the MAC. ie. I have tried IE and Netscape and FF on the PC and IE on the Mac.

I use dreamweaver to make my sites as I am more of a designer than programmer. So the site is in tables as I find this easier for me, but use includes and css for text styles.

For the scroll I have used this script in the css:-

div.scroll {
height: 380px;
width: 385px;
overflow: auto;
background-color: #ffffff;
padding: 2px;
}

and found this to work like I say except for safari

I have searched the internet for a solution and the answers I get are either too complicated for my little mind or just dont work. I just think I need some help in simple english.

please please save me... I am not technical so please bear with me.

I know you will look at my css and go yeah do this... and it will take you 2 seconds... I have looked through the forum but because its not specific information to my problem I find it hard to understand what I am doing.

this is the link to my testsite if that helps...

http://www.trondez.co.uk/testsites/johnatkin/biography.php

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 20 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Re: Scroll Box Compatible with Safari

Could you do us a favour and read the stickies?

http://www.csscreator.com/css-forum/ftopic6045.html

Verschwindende wrote:
  • CSS doesn't make pies

shewomancat
shewomancat's picture
Offline
Regular
leicestershire,UK
Last seen: 14 years 38 weeks ago
leicestershire,UK
Joined: 2005-11-17
Posts: 18
Points: 0

Scroll Box isn't compatible with Safari

this is how bad I am at all this... wats a stickie????

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 20 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Scroll Box isn't compatible with Safari

Laughing out loud Sorry about this Laughing out loud

A "sticky" is forum-speak for the posts that are found at the top of each forum. They are usually distinguishable by a different color icon, or different color text.

There are two at the top of this forum; "How to ask for help" and "How to reply".

I suggest you read the "How to ask for help" one Laughing out loud

I posted the url, here it is again:

http://www.csscreator.com/css-forum/ftopic6045.html

Verschwindende wrote:
  • CSS doesn't make pies

shewomancat
shewomancat's picture
Offline
Regular
leicestershire,UK
Last seen: 14 years 38 weeks ago
leicestershire,UK
Joined: 2005-11-17
Posts: 18
Points: 0

Scroll Box isn't compatible with Safari

hi there

I have edited my above question in the hope it follows your guides a bit better...

Have I now done it correctly explaining myself and the situation i have better.

Smile

shewomancat
shewomancat's picture
Offline
Regular
leicestershire,UK
Last seen: 14 years 38 weeks ago
leicestershire,UK
Joined: 2005-11-17
Posts: 18
Points: 0

Scroll Box isn't compatible with Safari

I have put it through the W3 css thing and it passes now as well...

Anonymous
Anonymous's picture
Guru

Scroll Box isn't compatible with Safari

shewomancat wrote:
I have edited my above question in the hope it follows your guides a bit better...
Not quite there yet:

Quote:
Before Asking:
Search and see if you can find a similar problem with a solution.

Check the FAQ, Frequently Asked Questions as often the answer is already there.

Validate your CSS and Markup (HTML or XHTML)

Ensure that you have a valid, full DTD and that you are rendering in 'Standards' mode.

shewomancat
shewomancat's picture
Offline
Regular
leicestershire,UK
Last seen: 14 years 38 weeks ago
leicestershire,UK
Joined: 2005-11-17
Posts: 18
Points: 0

Scroll Box isn't compatible with Safari

My site is PHP so do i still put it throught the HTML Markup?

as I said I have done the css and got it to pass.

Anonymous
Anonymous's picture
Guru

Scroll Box isn't compatible with Safari

shewomancat wrote:
My site is PHP so do i still put it throught the HTML Markup?
php outputs xhtml (or html).

shewomancat
shewomancat's picture
Offline
Regular
leicestershire,UK
Last seen: 14 years 38 weeks ago
leicestershire,UK
Joined: 2005-11-17
Posts: 18
Points: 0

Scroll Box isn't compatible with Safari

ok give up....

i put it through at it had 22 errors so I corrected the first one I thought by putting in docutype... and tested again... and now I have 116... of which I have no idea why there errors anyway as the page looks fine and dreamweaver puts those elements in.

can I have some help. I am so sorry for being so rubbish.

Anonymous
Anonymous's picture
Guru

Scroll Box isn't compatible with Safari

shewomancat wrote:
can I have some help.
Yes. Either close all of your tags or change your doctype.

My suggestion:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

That way you won't have to properly close your tags, something that you should do if you start a new page from scratch but for this instance just change the doctype to get the browser into standards mode and revalidate.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 20 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Scroll Box isn't compatible with Safari

Please do not worry about being "rubbish", you are willing to put some effort into helping yourslef, which is more than I can say for some people on this site Laughing out loud

It is a pleasure to help you as you seem genuinely willing to learn.

I will give you the basics to sort your 176 warnings and errors Laughing out loud

<meta http-equiv="Content-Type" content="text/html;">

must be replaced with

<meta http-equiv="Content-Type" content="text/html;" />

Note the / at the end? ALL meta tags and the <link> must have this at the end. This will clear the first 96 errors Laughing out loud

<body topmargin="0">
<body bgcolor="#ffffff">

is inccorect. Replace with this:

<body>

and put this in your CSS:

body {
background: #fff;
margin: 0;
}

You must ask yourself one question.

Do you want to leave the table design at the moment?

If so, then consider replacing your Xhtml1.0 doctype with a HTML4.01 doctype. This will clear up all the errors relating to tables.

Then, make sure all <br> are changed to <br />

Have a go at that, it seems daunting but it's just simple things.

Let us know how you get on.

Verschwindende wrote:
  • CSS doesn't make pies

Anonymous
Anonymous's picture
Guru

Scroll Box isn't compatible with Safari

Me and TPH will just go on playing leap frog for the rest of the day. Wink

shewomancat
shewomancat's picture
Offline
Regular
leicestershire,UK
Last seen: 14 years 38 weeks ago
leicestershire,UK
Joined: 2005-11-17
Posts: 18
Points: 0

Scroll Box isn't compatible with Safari

I shall spend tomorrow trying to fix then get back to you...

Anonymous
Anonymous's picture
Guru

Scroll Box isn't compatible with Safari

I suppose I am being ignored ...

...again.

Sad

shewomancat
shewomancat's picture
Offline
Regular
leicestershire,UK
Last seen: 14 years 38 weeks ago
leicestershire,UK
Joined: 2005-11-17
Posts: 18
Points: 0

Scroll Box isn't compatible with Safari

hi sorry triumph wasn't ignoring you... honest I value your help..

Decided to do changes tonight..

I couldn't help myself and went through wat you both explained, and I have got it down to 55 errors... some that are coming up seem to be the things i just changed ie, /> at the end of all meta like you explained...

and I change to the html 4. etc

I am definately making progress....

shewomancat
shewomancat's picture
Offline
Regular
leicestershire,UK
Last seen: 14 years 38 weeks ago
leicestershire,UK
Joined: 2005-11-17
Posts: 18
Points: 0

Scroll Box isn't compatible with Safari

morning...

ok ready for my next lesson I think...

Anonymous
Anonymous's picture
Guru

Scroll Box isn't compatible with Safari

shewomancat wrote:
ok ready for my next lesson I think...
OK, declare a content type:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
You left out the charset item. Smile

The problem with changing your doctype and switching to /> closing tags is you can't use /> with html 4.01. It was either one or the other but not both. As I said above:

Triumph wrote:
Either close all of your tags or change your doctype.

Go ahead and switch your doctype back to

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

and lower case all of your META and any other element and attribute that may be capitalized (for example, even onMouseOver is illegal in XHTML, use onmouseover instead). Then add and alt="description of picture here" to all your image tags and we'll be over half way done.

shewomancat
shewomancat's picture
Offline
Regular
leicestershire,UK
Last seen: 14 years 38 weeks ago
leicestershire,UK
Joined: 2005-11-17
Posts: 18
Points: 0

Scroll Box isn't compatible with Safari

oops...

Ok have done everything.. and got it to 28 errors... hurrah.. i need a stiff drink!

on another note I would like to keep my tables please. Have noticed both scrolling is now buggered... that'll teach me!!!

ok next part of lesson... my wise one! Laughing out loud

Anonymous
Anonymous's picture
Guru

Scroll Box isn't compatible with Safari

shewomancat wrote:
on another note I would like to keep my tables please.
Uh, no.

shewomancat
shewomancat's picture
Offline
Regular
leicestershire,UK
Last seen: 14 years 38 weeks ago
leicestershire,UK
Joined: 2005-11-17
Posts: 18
Points: 0

Scroll Box isn't compatible with Safari

please... is there no way of solving my scroll box problem in safari without re designing...

please... please don't make me hate mac users even more than I do already...

Anonymous
Anonymous's picture
Guru

Scroll Box isn't compatible with Safari

shewomancat wrote:
please don't make me hate mac users even more than I do already...
You mean like the one helping you now? :twisted:

Come on, this is 2005, tables based layout is so 1998.

Continue fixing your validation errors. Honestly, if you want an outdated web page it is up to you.

shewomancat
shewomancat's picture
Offline
Regular
leicestershire,UK
Last seen: 14 years 38 weeks ago
leicestershire,UK
Joined: 2005-11-17
Posts: 18
Points: 0

Scroll Box isn't compatible with Safari

ok this is my situation....

the chap I am doing this for is not paying me.... he is a mac user and says he wants to see his site... which is fine... I am trying to sort the site cause I like the design I came up with...

he now wants it done within the next 3 weeks.... I have paying clients and I have had to re-learn everything I have ever learned about websites because macs have there own rules.

So you can see that it is taking me a long time to design this site, I am only doing to be nice...

I would like to solve that one problem of scrolling in a box for now so that I can finish his site so that then I may be able to learn css in more depth for my paying clients....

my programmer tends to do everything in tables so this is why I stuck to this form.

can you bear with me, and help me fix that problem or should I just tell this chap for now that he can only view his site on the browsers i say.

Anonymous
Anonymous's picture
Guru

Scroll Box isn't compatible with Safari

shewomancat wrote:
...because macs have there own rules. ...
I'm not aware of this. Please explain.

shewomancat wrote:
So you can see that it is taking me a long time to design this site, I am only doing to be nice...
Free work takes the back burner. Smile That's my philosophy.

shewomancat wrote:
I would like to solve that one problem of scrolling in a box for now so that I can finish his site so that then I may be able to learn css in more depth for my paying clients....
Scrolling box has been working since you included a proper doctype. :shrug: Hopefully you are not they type that will disappear after hearing that.

shewomancat wrote:
my programmer tends to do everything in tables so this is why I stuck to this form.
Read this: http://www.hotdesign.com/seybold/index.html

Seriously, this is holding you back among all the modern web designers. It is outdated programming.

shewomancat wrote:
can you bear with me, and help me fix that problem or should I just tell this chap for now that he can only view his site on the browsers i say.
For free? That's what I'd say.

Back to it: have you fixed all of your validation errors yet?

shewomancat
shewomancat's picture
Offline
Regular
leicestershire,UK
Last seen: 14 years 38 weeks ago
leicestershire,UK
Joined: 2005-11-17
Posts: 18
Points: 0

Scroll Box isn't compatible with Safari

no I'm not gonna disappear...

in fact I have gone to the css layout template pages you have on this site and I have started trying to start this site via css...

/* generated by csscreator.com */
html, body{
margin:0;
padding:0;
text-align:center;
}

#pagewidth{
width:780px;
text-align:left;
margin-left:auto;
margin-right:auto;
}

#header{
position:relative;
height:39px;
background-color:#FFFFFF;
width:100%;
}

#leftcol{
width:121px;
float:left;
position:relative;
background-color:#FFFFFF;
}

#maincol{background-color: #FFFFFF;
float: right;
display:inline;
position: relative;
width:659px;
}


/* *** Float containers fix:
http://www.csscreator.com/attributes/containedfloat.php *** */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix{display: inline-table;}

/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */


/*printer styles*/
@media print{
/*hide the left column when printing*/
#leftcol{display:none;}
#twocols, #maincol{width:100%; float:none;}
}

I realise this is gonna take some learning but I want to be able to do things correctly...

I think my Mac hatered is cause I haven't got one and can't afford to buy one to just test sites on to see If the sites I design are compatible on safari... but if designing in css would mean this wouldn't occur then great...

lets get learning/... Laughing out loud

ps. sorry if I offended u... i spose when you dont know something you tend to hate it... and this past few weeks has caused me so much trouble... *crys*

Anonymous
Anonymous's picture
Guru

Scroll Box isn't compatible with Safari

shewomancat wrote:
ps. sorry if I offended u... i spose when you dont know something you tend to hate it... and this past few weeks has caused me so much trouble... *crys*
Pfft. No one's offended me yet. Laughing out loud

But seriously if you are doing free work then I'd package it up and ship it out, as is. Laughing out loud

But keep learning for the paying customers.

shewomancat
shewomancat's picture
Offline
Regular
leicestershire,UK
Last seen: 14 years 38 weeks ago
leicestershire,UK
Joined: 2005-11-17
Posts: 18
Points: 0

Scroll Box isn't compatible with Safari

ok I think biography is getting there but I have noticed that the top scroll menu has now got a vertical scroll and as you can see if you jump to the cv... it doesn't so something I have changed while doing this change has moved something...

any idea what has made this menu change...?

I know i shouldn't bother with a non paying job but at least it has taught me something...

shewomancat
shewomancat's picture
Offline
Regular
leicestershire,UK
Last seen: 14 years 38 weeks ago
leicestershire,UK
Joined: 2005-11-17
Posts: 18
Points: 0

Scroll Box isn't compatible with Safari

great it works in IE and not in FF for PC how does it look in Safari.....

Anonymous
Anonymous's picture
Guru

Scroll Box isn't compatible with Safari

shewomancat wrote:
great it works in IE and not in FF for PC how does it look in Safari.....
Looks not validated.

shewomancat
shewomancat's picture
Offline
Regular
leicestershire,UK
Last seen: 14 years 38 weeks ago
leicestershire,UK
Joined: 2005-11-17
Posts: 18
Points: 0

Scroll Box isn't compatible with Safari

ok... I tried to fix the scroll issue... probably a bad idea as now I have gone back up to 37 errors and the whole site seems buggered....

god this is and impossible task I have set myself...

i now have a site that works in less browsers but I don't know how I managed this as I followed your instructions so carefully and even went through all the site trying to conform everything I have done so far...

can you tell me does the site look really bad in safari?

shewomancat
shewomancat's picture
Offline
Regular
leicestershire,UK
Last seen: 14 years 38 weeks ago
leicestershire,UK
Joined: 2005-11-17
Posts: 18
Points: 0

Scroll Box isn't compatible with Safari

from what I can tell it won't validate until it is done all as css... am I correct?

shewomancat
shewomancat's picture
Offline
Regular
leicestershire,UK
Last seen: 14 years 38 weeks ago
leicestershire,UK
Joined: 2005-11-17
Posts: 18
Points: 0

Scroll Box isn't compatible with Safari

in fact I'm going off to slit wrists now..... ahhhhhh Oups

i think i need to start this again when I feel less beaten...

thanx so far... will be back tomorrow...

Anonymous
Anonymous's picture
Guru

Scroll Box isn't compatible with Safari

shewomancat wrote:
... does the site look really bad in safari?
Not at all. I'm no fan of scroll bars in the middle of the page but if you want them there ...

Anonymous
Anonymous's picture
Guru

Scroll Box isn't compatible with Safari

shewomancat wrote:
from what I can tell it won't validate until it is done all as css... am I correct?
You've got to rid the page of deprecated attributes (bordercolor, height, etc.) finish closing the tags that need closing (you skipped a few) and add the alt text to the images you skipped ... well basically you are probably right.

This is only the first page and you will have to go back and do the others as well.