Joomla Templates Club 406,261 posts

[brieuc Friend brieucJoin date: June 2007Posts: 39Downloads:0Uploads:5]

#135749

Hi, i’ve a big problem and i can’t resolve.. It’s a problem with css :

In attachment i post an image with the problem. The main text (in the middle column) is cut (see attachment) and y try to resolve with css but there’s alway the problem..
Attention this problem is in Internet Explorer (windows vista) and Safari (v 1.3.2) (mac).

Thank if you can tell me where i do change in css with see all my main texte and image for the middle column.

🙂

---

Attachments:

1. 

[jsliao Friend jsliaoJoin date: April 2008Posts: 817Downloads:0Uploads:12 Thanks: 25 Thanked: 236 times in 210 posts]

#280485

can you post a link to the live site?

[brieuc Friend brieucJoin date: June 2007Posts: 39Downloads:0Uploads:5]

#280497

yes, it’s http://www.chateaulambert.fr

[jsliao Friend jsliaoJoin date: April 2008Posts: 817Downloads:0Uploads:12 Thanks: 25 Thanked: 236 times in 210 posts]

#280570

hi, i have viewed your site and don’t really understand what is the problem there.

[scotty Friend scottyJoin date: March 2008Posts: 2339Downloads:0Uploads:13 Thanks: 76 Thanked: 827 times in 595 posts]

#280636

The problem is the main article container is stretching beyond the main content container so some of the text is being cut off along the right (IE7 ONLY!)

I think the problem might be the HTML of the article itself.

Brieuf can you remove the hspace you have applied to the images and see if it fixes the problem? The problem does not occur in the pyrite demo version with 475px wide images so the only difference I can see is the hspace you have applied.

[brieuc Friend brieucJoin date: June 2007Posts: 39Downloads:0Uploads:5]

#280843

ok i try that today thanks

[brieuc Friend brieucJoin date: June 2007Posts: 39Downloads:0Uploads:5]

#280925

Hi Scotty, y don’t have applied hspace in the image.. (can you see me how to change..)
Thanks

[cjmicro Friend cjmicroJoin date: June 2008Posts: 501Downloads:3Uploads:0 Thanks: 198 Thanked: 81 times in 10 posts]

#280938

I couldn’t figure out what the problem was because I was looking at the home page!! So on the Vigne page, after the first image and before the type there is no break.

<p><img src=”http://www.chateaulambert.fr/images/stories/petites/vendanges2.jpg” width=”475″ height=”200″ hspace=”6″ alt=”Image” title=”Image” border=”0″ />Dans sa TOPOGRAPHIE DE TOUS LES VIGNOBLES…

Close the <p> tag and start a new one, or just use <br> after the image.
Cheryl

[brieuc Friend brieucJoin date: June 2007Posts: 39Downloads:0Uploads:5]

#281130

Hi, i always’ve the problem look at : http://www.chateaulambert.fr/index.php?option=com_content&task=view&id=46&Itemid=72
The main text is cut. it’s very strange that i can not to repare in the css file..?

[cjmicro Friend cjmicroJoin date: June 2008Posts: 501Downloads:3Uploads:0 Thanks: 198 Thanked: 81 times in 10 posts]

#281133

I see your vigne page is now fixed. The problem on the link you just posted is similar.

Your image (the graph) coaching.gif is too wide for the content pane, so it pushes it out too wide, then the right column overlaps it. It is possible to change all the divs in your css but that is also going to affect the layout of your other pages by having to make the side columns more narrow.

The simple solution is not to include any images that are wider than what your content pane allows. I am not sure of the dimensions, but the way the template is set up it is 950px wide. You could try to make that a % of the screen. Try making the width in the following css 90% or 100% or whatever % you want, that should help with the overlap, at least down to a certain screen size.

<blockquote>/* MAIN LAYOUT DIVS
——————————————————— */
#ja-tp,
#ja-header,
#ja-mainnav,
#ja-subnav,
#ja-container,
#ja-footer {
width: 950px;
margin: 0 auto;
clear: both;
}</blockquote>

This may appear to solve your problem, but if you make the images too wide it will still affect the layout. There is only a certain amount of room on the screen for each module and your images being too wide are pushing it past its limit. (On the Vigne page it was not too wide, but the text following right afterward with no break made it too wide).

Hope this helps, just try to keep your images under 475px wide in that middle column and make sure if they are that wide to put in a line break afterward and you should be ok.

Cheryl

[scotty Friend scottyJoin date: March 2008Posts: 2339Downloads:0Uploads:13 Thanks: 76 Thanked: 827 times in 595 posts]

#281139

…and don’t apply any vspace!

1 user says Thank You to scotty for this useful post

1. cjmicro

[brieuc Friend brieucJoin date: June 2007Posts: 39Downloads:0Uploads:5]

#282351

Hi and thanks for response 🙂
I put the images 468px but i don’t understand why the text is always cut..
I try with the css but no succes.
I don’t know how to verify for the vspace..??
IE is sh.. !! 😉

[cjmicro Friend cjmicroJoin date: June 2008Posts: 501Downloads:3Uploads:0 Thanks: 198 Thanked: 81 times in 10 posts]

#282355

Somehow the column is getting pushed beyond its size, and the right column then overlaps it. I thought it was your images, but it may be something else too.

If you download the firefox web developer kit you can view the page’s css and at least try to narrow down which css is affecting the layout.

Maybe you can edit the css and try this

table.contentpaneopen, table.contentpane, table.blog {
width: 100%;
}

I would try to change width to 90% or add some padding to the table to keep it from going so far tot he right and containing the elements. Can’t say for sure it will work and sometimes when you change things and it fixes one page, another page which uses same css code might get screwy!

Have you made any other changes to the html or css of the template? If so, you can try reloading the originals and see if that fixes your problem too.

Good luck,
Cheryl

[scotty Friend scottyJoin date: March 2008Posts: 2339Downloads:0Uploads:13 Thanks: 76 Thanked: 827 times in 595 posts]

#282358

I don’t see the problem on the site any more. Has reducing the image width fixed it?

To set vpsace…

Open the article in the admin section. Click on the image to highlight it. Click on the image Icon. Click on ‘Appearance. Set Horizontal (hspace) and Vertical Space (vspace) to 0.

[cjmicro Friend cjmicroJoin date: June 2008Posts: 501Downloads:3Uploads:0 Thanks: 198 Thanked: 81 times in 10 posts]

#282359

Scotty, it does still show cut off on my browser, ie 7, not on ff though. Do you konw what the width of the content pane area is (some % like 66.7??).

[Author]

Posts