css text position problem

[asthyanax]

Hi,

 

I'm a real newbie with osc. I used sts to "simply" change the layout..it's more difficult that i thought. Here's my "problem". I use css in my template. If you see the main content text on the english version, it fits perfectly, when i switch with the french, the text doesn't fit. Any ideas ?

Here's the link if you want to see what's wrong. It's a mess but i'm stille working on it....

And worse if i look at the page with IE, it's a mess.

Thank's a lot for your help.

Chris

[Terra]

Can you post the link? Terra

[asthyanax]

oups i forgot the most important : here's the link.

It's on work so it's kinda mess...

http://www.francesca-brandy.com/catalog/

[Terra]

Not easy. My normal troubleshooting appraoch to CSS is:

 

First - validate. Your HTML code throws up 94 validation errors:

W3C HTML Validator

and a few minor CSS errors:

W3C CSS Validator

With all these errors, it makes it harder to track down the culprit, so I'd address these first.

 

Secondly - you are mixing <p> with <table> which I would not recommend. As osCom is in table structure, I'd recommend sticking with <table> format and for containers to use <div> - the additional <p> mark-up won't make the osCom table mess any better and adds another layer of markup which you don't really need. You should be able to apply the styling you need via marking up the <table class="">.

 

Thirdly, apply borders to your key containers to see where the problem is. If you e.g. apply "border: 1px solid red;" to div#centre and div#conteneur, you'll see that the div has the correct width but the content spills over - so somewhere in the setting or code there's an error.

 

*********************

Mhh - just had a look in IE and have an idea - I don't think the float mixes with tables. Basically, the table can't wrap around the float, so it pushes the whole thing out to the right. Try getting rid of the float (just do it as a table cell / table) and see if that fixes it. I'm sorry but floats and the table osCom layout just don't like each other!

 

***********************

Finally, You are using width with padding - be careful with regards to IE5+ which gets the box model wrong. For possible workarounds please go here:

http://css-discuss.incutio.com/?page=BoxModelHack

another solution is not use width together with padding and borders for the same element but that will depend on your style whether that's doable.

 

Okay - sorry for the long list, hope there's at least somethin in there to help. My gut feeling is that the problme is mixing floats with tables and that only a table layout will cure it.

 

all the best! Edith

[asthyanax]

Thank's a lot for your complete answer. I don't really use the tables but in my page here i let all the ancient code to see what happens with tables, with css....

I'm gonna check everything.

Thank you again.

Chris