Padding does not seem to be working

DesignshopCSS · 16th June 10, 02:10 PM

Hi CSSERS,

I have a problem with a file.
here is a video link to explain it:
http://www.designshoptoronto.com/Diddley/CSS.mov

and some links to the css:
http://www.designshoptoronto.com/Diddley/style.css

and html files:
http://www.designshoptoronto.com/Diddley/test2.html

Does any body know what I am doing wrong?
Please help when you get a chance.

Thanks,
Tracey

meesa · 16th June 10, 03:59 PM

Hey Tracey, a video is new around here; a good idea!

But there's nothing wrong with your site, or your CSS (Although you do have a few HTML errors, those have nothing to do with it)

Your problem? Lack of spacing.

Take this example (Inline styles used for simplicity):

Code:

<p style="width:100px;border:1px solid red;">
AAAbbbCCCdddEEEfffGGGhhhIIIjjjKKKlllMMMnnnOOOpppQQQrrrSSStttUUUvvvWWWxxxYYYzzz
</p>

CSS doesn't have a way to break that up yet, as there is no spacing. So basically, just don't use super long words and you'll be fine.

A better way to do see how those boxes are would be something like:

Code:

<h1 style="text-align:justify">
A A A A A A A A A A A A A A A A A...
</h1>

That way it'll go all the way to the end, and be able to break as soon as it needs to.

DesignshopCSS · 16th June 10, 06:47 PM

Hi Meesa,
thanks for your reply.

Unfortunately I tried adding justify on my local file and it does not wrap the text.

Shorter lines are not an option, I need the text to wrap automatically when pasted in the box.

I may try an additional div.

Thanks again for your input.

Tracey

meesa · 16th June 10, 08:15 PM

Justify isn't meant to wrap it, it just shows (If you'll use exactly what I gave you) the size of your box.

As I said before, it is not possible yet for CSS to wrap text that has no breaks. So unless there is a space, or some form of puncuation, then it's going to overflow, just like in the example I gave you (First bit of code)

So basically, unless you're planning for like a 13 letter word in there, then you'll be fine. If you are, then break it properly with a hyphen.

DesignshopCSS · 17th June 10, 02:36 AM

Thanks again for the information re "breaks".

I do need the wrap to happen automatically though and it does happen within divs that I make up, so as you say css is not the right way, I guess to make it wrap automatically. I will try another div. hyphens are not a good enough solution, this is too time consuming for longer blocks of copy.

Thanks
Tracey

DesignshopCSS · 17th June 10, 02:46 AM

Hi Meesa,
I reviewed all your advice again and finally understand what you are saying, css has no way of automatically hyphenating words, looooooooooooooooooooooooooooooooooooooooooooooooo ooooooooooooooooooooooooooooooooooooooong words, unlike this clever dialog box!
Thanks for your patience and advice.

Tracey

Rayzur · 17th June 10, 04:18 AM

Quote:

I do need the wrap to happen automatically though and it does happen within divs that I make up, so as you say css is not the right way, I guess to make it wrap automatically.

Hi Tracey,

Actually what you are wanting to do can be done!

word-wrap:break-word; is what you are looking for. It was originally an IE specific property introduced by MS but it has been added to CSS3.

Current support for it is good, Opera 10.5 finally introduced support for it while other modern browsers such as FF had already supported it before Opera.

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>word-wrap:break-word</title>

<style type="text/css">
p {
    width:120px;
    margin:0 auto;
    background:#CDF;
    word-wrap:break-word;
}
span {background:yellow;}
</style>

</head>
<body>
    <p><span>Supercalifragilisticexpialidocious</span> is a long word that can wrap.</p>
</body>
</html>

DesignshopCSS · 17th June 10, 11:12 AM

Hey Rayzur,
this looks interesting and good!, I will try it out.
Thanks for your input.

Tracey

p.s. your other sites look good too

meesa · 17th June 10, 03:49 PM

That's exactly what I was thinking of when I said that it couldn't be done yet. I know that it was a CSS3 property, thus, not supported in IE. And this is why history is important.

Rayzur · 17th June 10, 07:04 PM

Quote:

Originally Posted by meesa

I know that it was a CSS3 property, thus, not supported in IE. And this is why history is important.

I guess you are saying that you did not know that it was an IE property long before it was CSS3.

There are others too:
overflow-x: & overflow-y: were originally IE only properties, yet they have been added to CSS3 also with very good current browser support.

16th June 10, 02:10 PM	#1
DesignshopCSS WLC Member Join Date: May 2010 Posts: 8	Padding does not seem to be working Hi CSSERS, I have a problem with a file. here is a video link to explain it: http://www.designshoptoronto.com/Diddley/CSS.mov and some links to the css: http://www.designshoptoronto.com/Diddley/style.css and html files: http://www.designshoptoronto.com/Diddley/test2.html Does any body know what I am doing wrong? Please help when you get a chance. Thanks, Tracey

16th June 10, 03:59 PM	#2
meesa WLC Mod Join Date: Jul 2009 Location: Milky Way Galaxy Posts: 3,134	Re: Padding does not seem to be working Hey Tracey, a video is new around here; a good idea! But there's nothing wrong with your site, or your CSS (Although you do have a few HTML errors, those have nothing to do with it) Your problem? Lack of spacing. Take this example (Inline styles used for simplicity): Code: <p style="width:100px;border:1px solid red;"> AAAbbbCCCdddEEEfffGGGhhhIIIjjjKKKlllMMMnnnOOOpppQQQrrrSSStttUUUvvvWWWxxxYYYzzz </p> CSS doesn't have a way to break that up yet, as there is no spacing. So basically, just don't use super long words and you'll be fine. A better way to do see how those boxes are would be something like: Code: <h1 style="text-align:justify"> A A A A A A A A A A A A A A A A A... </h1> That way it'll go all the way to the end, and be able to break as soon as it needs to. __________________ Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.

16th June 10, 06:47 PM	#3
DesignshopCSS WLC Member Join Date: May 2010 Posts: 8	Re: Padding does not seem to be working Hi Meesa, thanks for your reply. Unfortunately I tried adding justify on my local file and it does not wrap the text. Shorter lines are not an option, I need the text to wrap automatically when pasted in the box. I may try an additional div. Thanks again for your input. Tracey

16th June 10, 08:15 PM	#4
meesa WLC Mod Join Date: Jul 2009 Location: Milky Way Galaxy Posts: 3,134	Re: Padding does not seem to be working Justify isn't meant to wrap it, it just shows (If you'll use exactly what I gave you) the size of your box. As I said before, it is not possible yet for CSS to wrap text that has no breaks. So unless there is a space, or some form of puncuation, then it's going to overflow, just like in the example I gave you (First bit of code) So basically, unless you're planning for like a 13 letter word in there, then you'll be fine. If you are, then break it properly with a hyphen. __________________ Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.

17th June 10, 02:36 AM	#5
DesignshopCSS WLC Member Join Date: May 2010 Posts: 8	Re: Padding does not seem to be working Thanks again for the information re "breaks". I do need the wrap to happen automatically though and it does happen within divs that I make up, so as you say css is not the right way, I guess to make it wrap automatically. I will try another div. hyphens are not a good enough solution, this is too time consuming for longer blocks of copy. Thanks Tracey

17th June 10, 02:46 AM	#6
DesignshopCSS WLC Member Join Date: May 2010 Posts: 8	Re: Padding does not seem to be working Hi Meesa, I reviewed all your advice again and finally understand what you are saying, css has no way of automatically hyphenating words, looooooooooooooooooooooooooooooooooooooooooooooooo ooooooooooooooooooooooooooooooooooooooong words, unlike this clever dialog box! Thanks for your patience and advice. Tracey

17th June 10, 11:12 AM	#8
DesignshopCSS WLC Member Join Date: May 2010 Posts: 8	Re: Padding does not seem to be working Hey Rayzur, this looks interesting and good!, I will try it out. Thanks for your input. Tracey p.s. your other sites look good too

17th June 10, 03:49 PM	#9
meesa WLC Mod Join Date: Jul 2009 Location: Milky Way Galaxy Posts: 3,134	Re: Padding does not seem to be working That's exactly what I was thinking of when I said that it couldn't be done yet. I know that it was a CSS3 property, thus, not supported in IE. And this is why history is important. __________________ Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode