One Word Per Line Problem

Hello!

I am having a problem where in some parts of the website (links, h tags, etc for example), are shown as one word per line. It seems to be the issue with ie 7 (maybe other ones as well, but I am not sure). Firefox seems to render everything OK.

What seems to fix the problem somewhat is giving the given element a width of 100%. ‘width:auto;’ does not do the trick - it makes no difference. And the width 100% works in some cases, but not so well in others (creates other issues). I do not think that this is a width declaration problem, as heading elements and links do not behave like that under normal conditions. It’s like something is forcing that element to be at min width in IE.

Does anyone know what may be causing this? I can post some code and screenshot if that will help, but I figured I’d ask if someone deal with this before.

Thank you in advance!

are they in a really narrow div container?

No, they are in a div with a set pixel width. I have a <p>aragraph with the width set to 100% in the stylesheet that spans the entire width of the container div. The <h1> is in the same container and has the one word per line issue. The <h1> covers the container width appropriately when its width is set to 100% in the stylesheet. But I don’t think that I should be solving this problem this way.

The container styling:

#bodyText{
	width: 820px;
	margin: 0 auto;
	padding: 0;
	text-align: center;
	min-height: 460px;
	height: auto;
}

Paragraph styling:

p{
	color: #444;
	font-size: 1.3em; line-height: 1.8em;
	font-weight: lighter; padding: 15px 0 0 0; margin: 0;
	text-align: left;
	float: left;
	clear: both;
        width: 100%;
}

title styling:

h1{
	color: #f5a500;
	font-size: 3em; line-height: 1em;
	font-weight: lighter; padding: 20px 0 0 0; margin: 0;
	text-align: left;
	width: 100% /* if this line is gone, I get 1 word per line */
	float: left; clear: both;
}

Hope this helps…

Thank you!

I see nothing there that would cause that-give us your full stylesheet-a conflicting style (probably padding) is taking effect.

Hi,

You will have to provide a working demo with full html and css (or a link) as the above code does not exhibit the problem.:slight_smile:

It could be anything from “haslayout” to a typo somehwere (you already have a typo in your h1 style anyway).

Why are you floating everything anyway?

If you are giving a width of 100% then it seems unlikely that you need it floated. Only float elements that need to be floated.

One of the pages that showcases the problem in ie7 is:

http://www.print4print.com/printing-industry/print-industry.php

Home page also is a good example.

You’ve asked a good question about floating everything…I have some knowledge of putting websites together, but I am more comfortable with coding in something like php, rather than dealing with browser compatibility issues. So a while back I hired a company to design a nice looking site. For some reason they floated pretty much everything. So I just stuck to their style sheet and layout. And now it’s been way too long for me to call them up and bring up this issue (because if my memory is correct, their layout had no issues, so it must be something I introduced later on).

Thank you!

Hi, floating is the problem here

#bodyText a.body-link
{
	float:none;/*The main issue here*/
	display:block;/*New lines are made per block element*/
	text-align:left;/*Since blocks take up 100&#37; width available,they now center the text. Unsets*/
}

Update your code.

Remove the float from here and add a width.


#bodyText #price-comparisson {
    background: #f4f4f4;
[B]    /*float:left;*/
    width:100&#37;;[/B]
    clear:both;
    border-top: 1px solid #f5a500;
    border-bottom: 1px solid #f5a500;
    margin-top: 30px;
}


Thank you for the suggestions!

Paul, removing the float:left; shifts that div up into the header…but just adding the width declaration seems to have worked.

Ryan, can you explain why floating was the issue? Your solutions worked, which is awesome, but I would like to understand why.

This floating thing is something I would like to understand. If I remove the ‘width:100%’ declaration from the ‘p’ element and go to the page that has several paragraphs (say five in a row), the first one will span the entire width while the other four will be squished to one word per line. I am guessing it’s the same thing causing it.

Also, I wonder if you can spot the problem here. In the price comparison table I have the ‘show more’ button. It works in ie8, ff, and chrome. But not in ie7. I’ve turned on the option that would show script errors, but nothing is coming up. Any clue why clicking the link is not firing the script?

Thank you very much for your help!

Well floating was the issue, I don’t know the exact reason, I’d probably have to go back as it was too long ago lol. Perhaps it was haslayout (floating does that).

Post the code while it was flaoting and I’ll see if Ican come up with any reasons

This floating thing is something I would like to understand. If I remove the ‘width:100%’ declaration from the ‘p’ element and go to the page that has several paragraphs (say five in a row), the first one will span the entire width while the other four will be squished to one word per line. I am guessing it’s the same thing causing it.

In IE7? Haslayout probalby. Hard to say really.

Also, I wonder if you can spot the problem here. In the price comparison table I have the ‘show more’ button. It works in ie8, ff, and chrome. But not in ie7. I’ve turned on the option that would show script errors, but nothing is coming up. Any clue why clicking the link is not firing the script?

Thank you very much for your help!

It’s JS? Post there.

It was working when I tested.:slight_smile: (still working when I tested again locally).

As I mentioned before you shouldn’t float things when they don’t need to be floated because floats have different characteristics. Sometimes you want to use these characteristics but not all the time.

If you make and element 100% width then there is no need for it to be floated because nothing can wrap to the side which is what floats are used for.

IE gets very shaky if you float everything especially if you don’t apply widths to the float and then the children have haslayout. There are also issues in IE with clearing left and right floats and margin collapse on cleared parents.

However, you are probably running into a lack of understanding how floats actually work and using them to solve problems that should be sorted by other means.

Floats are removed from the flow and if an element follows a float the background of the element that follows the float will slide under the float and so will the borders. Floats repel the foreground content only.

Margins on static elements do not take notice of floats (unless overflow other than visible has been set) as the margin slides under the float until it reaches the containing block.

Floats are removed from the flow and once you start floating everything you have to be careful how you control the floa and avoid the bugs mentioned above.

For these reasons only float elements that really need to be floated and use static elements for the rest. Just make sure you have cleared the floats and use a logical approach.:slight_smile: