Joomla Templates Club 406,261 posts

[itgl72 Friend itgl72Join date: March 2008Posts: 230Downloads:0Uploads:1 Thanks: 41 Thanked: 10 times in 1 posts]

#138802

As you can see from the image above where the arrows are pointing there is some over lap in IE. I can not reproduce this in firefox, so when I fire up firebug to try and figure it out its no use.

I have a live DEV site up now, but it seems to do it to more than just the shoutbox.

IT DOES IT TO ALMOST ANYTHING ON THE RIGHT and left SIDE COLUMN. Scroll the page slowly and look at the right side column as it does the effect in the picture above. I only see this in IE.

CLICK THIS LINK[/url]

Suggestions, comments solutions? Thanks! :((

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

#294491

since i cant test it with firebug on ie, i am not sure if this could solve the problem but i think it has something to do with the overflow:hidden

try reading this link to see if anything helps

http://fplanque.com/dev/xhtml-css/css-fixing-overflow-hidden-in-ie-ie6-win

[itgl72 Friend itgl72Join date: March 2008Posts: 230Downloads:0Uploads:1 Thanks: 41 Thanked: 10 times in 1 posts]

#294503

Maybe someone who made the template can help out with that information. It is the same thing it seems on the LEFT columns too. SO, I don’t know. Looks like a good issue to mess with.

Here is an image of the LEFT side doing the same thing:

[itgl72 Friend itgl72Join date: March 2008Posts: 230Downloads:0Uploads:1 Thanks: 41 Thanked: 10 times in 1 posts]

#294595

UPDATE

I have discovered something. I switched templates from sanidine 1 to sanidine II and the problem no longer appears.

SO IT SEEMS TO BE SOMETHING WITH ONLY SANIDINE!

Hope to see some suggestions soon… I need the DARK version of this website to work so sanidine ii won’t work for me.

[itgl72 Friend itgl72Join date: March 2008Posts: 230Downloads:0Uploads:1 Thanks: 41 Thanked: 10 times in 1 posts]

#294605

It seems to be caused by the ‘background:none;’ declaration on the
inner divs. (line 822 or sp in your template.css)

You use it to cancel out the box-tl.gif that is set on the direct
parent of those divs, but somehow it causes problems.

Setting any color on that div fixes the problem, but of course it’s a
gradient behind it, so you can’t have a solid color.

background:transparent; does not fix the problem.

What does fix the problem, is setting a different background image on
it, such as ‘clear.gif’, a simple small totally transparent image.

This behavior has been seen before in IE, where in some case you need to
use a transparent background image to fix a layout or link clickability issue, but I have no clue whatsoever why.

This was found out with a lot of searching and time wasting.

I hope this helps someone.

I think it will work for me now.

I only tested this on my local server, so you may click on the link above and it may still be the old version or gone completely.

If you see it, and find a better solution let me know.

Here is my code edit in template.css and my addition of a transparant clear.gif.

div.module div div div div,
div.module_text div div div div,
div.module_menu div div div div,
div.module_hilite div div div div,
div.module_fixbr div div div div {
margin: 0;
padding: 0;
background: url(../images/clear.gif);
}

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

#294608

open your template.css and find on line 750…

div.module h3,
div.module_text h3,
div.module_menu h3,
div.module_hilite h3,
div.module_fixbr h3,
div.ja-box-br h3 {
margin: 0 -6px 10px;
padding: 0 0 0 30px;
font-size: 100%;
height: 28px;
line-height: 28px;
color: #333333;
background: url(../images/h3-bg.gif) no-repeat left;
text-transform: uppercase;
}

div.module h3 span,
div.module_text h3 span,
div.module_menu h3 span,
div.module_hilite h3 span,
div.module_fixbr h3 span,
div.ja-box-br h3 span {
display: block;
height: 28px;
background: url(../images/h3-bg.gif) no-repeat right;
}

div.module,
div.module_text,
div.module_menu,
div.module_hilite,
div.module_fixbr,
div.ja-box-br {
padding: 0;
float: left;
clear: both;
width: 100%;
background: url(../images/box-br.gif) no-repeat bottom right #222222;
overflow: hidden;
margin-bottom: 5px;
}

div.module div,
div.module_text div,
div.module_menu div,
div.module_hilite div,
div.module_fixbr div,
div.ja-box-bl {
padding: 0;
background: url(../images/box-bl.gif) no-repeat bottom left;
}

div.module div div,
div.module_text div div,
div.module_menu div div,
div.module_hilite div div,
div.module_fixbr div div,
div.ja-box-tr {
padding: 0;
background: url(../images/box-tr.gif) no-repeat top right;
}

div.module div div div,
div.module_text div div div,
div.module_menu div div div,
div.module_hilite div div div,
div.module_fixbr div div div,
div.ja-box-tl {
padding: 15px 20px 15px;
background: url(../images/box-tl.gif) no-repeat top left;
}

div.module div div div div,
div.module_text div div div div,
div.module_menu div div div div,
div.module_hilite div div div div,
div.module_fixbr div div div div {
margin: 0;
padding: 0;
background: none;
}
and change to…


div.module h3,
div.module_text h3,
div.module_menu h3,
div.module_hilite h3,
div.module_fixbr h3,
div.ja-box-br h3 {
margin: 0 0px 10px;
padding: 0 0 0 30px;
font-size: 100%;
height: 28px;
line-height: 28px;
color: #333333;
background: url(../images/h3-bg.gif) no-repeat left #333333;
text-transform: uppercase;
}

div.module h3 span,
div.module_text h3 span,
div.module_menu h3 span,
div.module_hilite h3 span,
div.module_fixbr h3 span,
div.ja-box-br h3 span {
display: block;
height: 28px;
background: url(../images/h3-bg.gif) no-repeat right;
}

div.module,
div.module_text,
div.module_menu,
div.module_hilite,
div.module_fixbr,
div.ja-box-br {
padding: 0;
float: left;
clear: both;
width: 100%;
background: url(../images/box-br.gif) no-repeat bottom right #FFFFFF;
overflow: hidden;
margin-bottom: 5px;
}

div.module div,
div.module_text div,
div.module_menu div,
div.module_hilite div,
div.module_fixbr div,
div.ja-box-bl {
margin: 0;
padding: 0;
background: url(../images/box-bl.gif) no-repeat bottom left;
}

div.module div div,
div.module_text div div,
div.module_menu div div,
div.module_hilite div div,
div.module_fixbr div div,
div.ja-box-tr {
padding: 0;
margin: 0;
background: url(../images/box-tr.gif) no-repeat top right;
}

div.module div div div,
div.module_text div div div,
div.module_menu div div div,
div.module_hilite div div div,
div.module_fixbr div div div,
div.ja-box-tl {
padding: 15px 20px 15px;
background: url(../images/box-tl.gif) no-repeat top left;
}

div.module div div div div,
div.module_text div div div div,
div.module_menu div div div div,
div.module_hilite div div div div,
div.module_fixbr div div div div {
margin: 0;
padding: 0;
background: none;
overflow: hidden;
}

This may work. I haven’t tested.

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

#294609

Hadn’t seen your last post when I posted mine.

Just try the last bit of mine first. Add overflow: hidden to div.module div div div div,

1 user says Thank You to scotty for this useful post

1. itgl72

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

#294610

On second thoughts you may have to apply all my changes ie. the margins: 0; on the other div’s. It’s definitely a margins/padding problem. I think… :p

[Anonymous Moderator JA DeveloperJoin date: September 2014Posts: 9914Downloads:207Uploads:152 Thanks: 1789 Thanked: 2008 times in 1700 posts]

#294669

For this case, please open file templates/ja_sanidine/css/template.css, at about line 812, find following code:

div.module div div div, div.module_text div div div, div.module_menu div div div, div.module_hilite div div div, div.module_fixbr div div div, div.ja-box-tl {
background:transparent url(../images/box-tl.gif) no-repeat scroll left top;
padding:15px 20px;
}

and change to:

div.module div div div, div.module_text div div div, div.module_menu div div div, div.module_hilite div div div, div.module_fixbr div div div, div.ja-box-tl {
background:transparent url(../images/box-tl.gif) no-repeat scroll left top;
padding:15px 20px;
width: 85%;
}

If not, please send me your ftp account via PM, i will help you to fix this issue.

[itgl72 Friend itgl72Join date: March 2008Posts: 230Downloads:0Uploads:1 Thanks: 41 Thanked: 10 times in 1 posts]

#294690

JA Developer,

You asked me to find code at line 812:


div.module div div div,
div.module_text div div div,
div.module_menu div div div,
div.module_hilite div div div,
div.module_fixbr div div div,
div.ja-box-tl {

padding: 15px 20px;
background:transparent url(../images/box-tl.gif) no-repeat scroll left top;


But this is not an exact match to what I have in the template.css file at line 812 as seen below:


div.module div div div,
div.module_text div div div,
div.module_menu div div div,
div.module_hilite div div div,
div.module_fixbr div div div,
div.ja-box-tl {
padding: 15px 20px 15px;
background: url(../images/box-tl.gif) no-repeat top left;
}


However it looks like the only change you want me to try is adding the line width: 85%;

I will reiterate that the solution I did post up top did fix my issue. But if your methods are a better practice I will continue to explore them.

SECOND EDIT:
I added the line width: 85% to where I THINK you meant and it seemed to make that breaking the column template go away. However I noticed things I had in the column like a calendar and shoutbox got pushed to the left a little and were no longer centered in the div.

SCOTTY — Have not gotten to your change yet. Ill report on it as well when I get a chance here.

[itgl72 Friend itgl72Join date: March 2008Posts: 230Downloads:0Uploads:1 Thanks: 41 Thanked: 10 times in 1 posts]

#294706

<em>@scotty 116048 wrote:</em><blockquote>Hadn’t seen your last post when I posted mine.

Just try the last bit of mine first. Add overflow: hidden to div.module div div div div,</blockquote>

I took your entire section in the post above and replaced what you stated. I have it on the LIVE link above.

So far, my solution worked, youre solution worked, JA Dev’s worked but it uncentered what was inside the column.

If there are any concerns over doing it either way let me know.

I would like to move on to other issues and tasks and consider this solution safely solved.

[Author]

Posts