Scrollable Div Help needed

[hardybabe]

Hi.
I have set up a website using a CMS and I have the content in a scrollable div, On many computers the content in the white box (content area) sits outside the content area and is thus unreadable. Can anyone tell me what I can do to fix this?

Thanks in advance
Tanya

ps. the website is http://www.cleanlivingrecords.com

[minute44]

To be honest Tanya, Scrollable divs aren't the best idea in the first place... they look ugly, especially on a nice graphical interface like yours. They also, by definition require the user to scroll to get information (not a good thing in web design)

What I'd suggest is redoing the page so that it eliminates the need for a scrollable div.

Alternatively, if you really need/want to keep it I'd suggest checking and double checking all your padding/margins on the div and all tags within it. If all else fails just stipulate that <p> is a set width so not to overhang the edges of the div.

If you need any further assistance then don't hesitate to ask.

Dan.

[hardybabe]

Originally Posted by minute44

To be honest Tanya, Scrollable divs aren't the best idea in the first place... they look ugly, especially on a nice graphical interface like yours. They also, by definition require the user to scroll to get information (not a good thing in web design)

What I'd suggest is redoing the page so that it eliminates the need for a scrollable div.

Alternatively, if you really need/want to keep it I'd suggest checking and double checking all your padding/margins on the div and all tags within it. If all else fails just stipulate that <p> is a set width so not to overhang the edges of the div.

If you need any further assistance then don't hesitate to ask.

Dan.

Hi.
Thanks for replying Dan. I do want to keep the scrollable div, I believe everything is ok with the padding etc. I have been told the problem is occuring in IE6 and FF1.5.0.4. Im not sure what you mean by "stipulate that <p> is a set width" could you please clarify on this?
Cheers
Tanya

[minute44]

In CSS, as with everything else, you can set a width for the <p> tag.

For example:

p {
colour: #000000;
font-family: verdana, Ariel, MS Sans Serif;
font-size: 0.9em;
margin-bottom: 20px
width: 350px
}

This tells <p> that it cannot be wider than 350 pixels.

Hope this helps..

If not then I will be happy to continue to help you.

Dan.

[hardybabe]

Originally Posted by minute44

In CSS, as with everything else, you can set a width for the <p> tag.

For example:

p {
colour: #000000;
font-family: verdana, Ariel, MS Sans Serif;
font-size: 0.9em;
margin-bottom: 20px
width: 350px
}

This tells <p> that it cannot be wider than 350 pixels.

Hope this helps..

If not then I will be happy to continue to help you.

Dan.

Hi.
Ok i just added this, obviously edited to my needs and........
it just added a horizontal scrollbar to the div?

Any other suggestions, is anyone using any of these versions, in which the misplacement occurs? I dont know actually how bad it is?

Thanks
Tanya

[minute44]

Originally Posted by hardybabe

Hi.
Ok i just added this, obviously edited to my needs and........
it just added a horizontal scrollbar to the div?

Any other suggestions, is anyone using any of these versions, in which the misplacement occurs? I dont know actually how bad it is?

Thanks
Tanya

Do you have other elements in there that aren't <p>? If so you'll need to edit them too. shrink it down to remove the horiz scrollbar.

I really think this is the answer and urge you to persist with exploring it.

can I see some screenshots of the problem as It looks OK on mine...

[hardybabe]

Originally Posted by minute44

Do you have other elements in there that aren't <p>? If so you'll need to edit them too. shrink it down to remove the horiz scrollbar.

I really think this is the answer and urge you to persist with exploring it.

can I see some screenshots of the problem as It looks OK on mine...

It looks ok on mine aswell, but 30+ people have told me that the misplacement is occuring with them, partcularly in IE 6, obviously I would like to see some screenshots of the problem aswell, so indeed if anyone is getting the misplacement please help us out.

Cheers
Tanya

[hardybabe]

Ok, I have just installed IE 6 AND FF 1.0.5.4 and I am not getting the misplacement, so why is it that other people are?
Is it showing up ok for everyone else? What browsers/versions are you using?
Cheers all
Tanya