Strange behavious of text in IE7

[monique]

See: http://fo3.cemius.nl/dev_degroeneherberg.nl/wie-zijn-wij/ontstaan paragraph "Om te lopen van de stad..." and http://fo3.cemius.nl/dev_degroeneherberg.nl/laatste-nieuws paragraph "Op deze blog, die we altijd up-to-date houden...".

On both pages of this development site these paragraphs display all the words under one another (block) except inline.

Only in IE7 :mad:, not in other browsers :D

I have checked-checked-and-checked, but cannot find the reason why and how to solve this. Both are just ordinary <p></p> like all other paragraphs :confused:

Does someone know what causes this mistake and how I can solve it?

[deathbycheese]

Have you tried changing to display:block and adding float:right along with a specified width?


dbc







---------------------------------------------------------
If this was helpful, don't forget to click the 'thanks' button.

[monique]

I can do that for one item which has a specific class, and it works. Thanks.

But for the other one I can't do that because it masses up all other 'normal' paragraphs.

And I believe I should not have to, since all other 'normal' paragraphs (also <p></p> within <div class="alinea"></div> are oké.

I just cannot figure out why this one shows the words under one another instead of next to one another... :confused:

[deathbycheese]

I see you've fixed the <p> on page "Het ontstaan van De Groene Herberg". Was it the display:block that did it for you?

It seems like IE7 doesn't like the background images from what I see in your issues.

With this in mind, regarding the <p> on page "Laatste nieuws" you may be having a conflict with the background image to the right of the <p> with the three people in it. You could try a negative right margin or maybe a z-index?

dbc









---------------------------------------------------------
If this was helpful, don't forget to click the 'thanks' button.

[monique]

Indeed, the problem on "Het ontstaan van De Groene Herberg" I could fix with the display:block and fixed width like you suggested because it has a special class (.citaat) and it's easy to do.

The other problem on "Laatste nieuws" is just a normal <p> like all other <p> on all other pages. Nowhere I have this problem, only on that page.

The image with the three people (pilgrims) is seperate in the right column and (as far as I believe) does not interfere with the content column. If it would, than I suppose it would also cause problems with <p> on other pages too...???

[jscheuer1]

The default width for a p and a div for when none is specified is 100%. That means the width of its container, in this case 470px for the .content div (the first parent element with a width specified). However, because of the float and the clear on .alinea, and this is a bug as far as I can tell, this particular div.alinea.layout_01 is not laying out to 100%. The .layout_01 class has no rules as far as I can tell.

It might cause problems, probably not, and should probably solve this problem, to explicitly set the alinea class to width: 100%;

Certainly worth a try.

[monique]

Hi again John!

I tried to add width: 100% to div.alinea, but unfortunately it masses up the other div.alinea's with special classes. The widths of the special classed alinea's become too wide and somehow I seem not to be able to change those anymore and set a specific width for them...

div.alinea .layout_01 = text
div.alinea .layout_02 = text in combination with image left
div.alinea .layout_03 = text in combination with image right
(and further for text ibw documents, slideshow, etc.)

This comes from the cms I am working with and has no other function but to specify the type of alinea.

When I style those classes to add width: 100% the same happens as when I add width: 100% to div.alinea.

BTW: F12 in IE works perfect! Stupid that I had never found out before :o

[jscheuer1]

Did it mess other things up in IE 7, or just in other browsers? If just other browsers, you could make an IE 7 specific stylesheet.

Or, since the .layout_01 class as I mentioned before had no styles, you could try adding this rule:


.layout_01 {
width: 100%;
}

or:


div.layout_01 {
width: 100%;
}

or:


div.content div#pagina div.layout_01 {
width: 100%;
}

Now I know that you cannot add a class, but could you add an inline style? If so, you could make it:


<div style="width: 100%;" class="alinea layout_01">
<p>Op deze blog, die we altijd up-to-date houden, kun je alle ontwikkel . . .

Another thing you could try is:


div.alinea {
width: 98%;
}

[monique]

The first one


.layout_01 {
width: 100%;
}


seems to solve the problem! It looks like nothing else was massed up by adding this extra style!

[deathbycheese]

John rocks the house once more! woot!

dbc