Serendipity Forums

Posted: **Tue Dec 09, 2008 10:04 am**

Hello.

I've noticed a little left bar pixels displacement in Translucency Theme in Firefox 3. This little movement isn't noticed on other browsers as far as I know.

You can see what I mean in http://www.pajareo.com/s9y/ : Look under the blocks at the right... It's just a little misalignment...

Hope that this won't be a headache to fix... Translucency is a great theme!

Thanks in advance for your time.

Posted: **Tue Dec 09, 2008 10:46 am**

The problem is also exhibited in IE7, but looks OK in Flock 1.2.7.

Posted: **Tue Dec 09, 2008 3:16 pm**

I didn't dig deeply, but I think the only problem is that some of your photos, you-tube videos, and hyperlinks are wider than the available content area, which is VERY narrow in this template.

Posted: **Tue Dec 09, 2008 4:27 pm**

Don Chambers wrote:I didn't dig deeply, but I think the only problem is that some of your photos, you-tube videos, and hyperlinks are wider than the available content area, which is VERY narrow in this template.

Ok, I'll modify the design to make entries area wider, and see what happens then.

Thanks for your answer!

Posted: **Fri Dec 12, 2008 8:41 pm**

Ok, I've modified the design and make some changes in style.css and transblue.css. (I figure you can check them in http://www.pajareo.com/s9y/templates/translucency/ )

Well, I've working and viewing the results in Firefox 3 on a Windows machine, and looked ok.

But, when I saw it on a Opera in Mac I've seen the misalignment back... Just one pixel! So I've edited bg.gif... And now the entry date area has a gap!

So, it depends on what system and browser you're watching the blog (http://www.pajareo.com/s9y), the blog shows right, wrong, or almost one of two

On PC:
- Firefox 3 : Misalignment on right white stripe. No gap on entry date block.
- IE 6.0 : Ok
- IE 7 : Not tested

On Mac:
- Firefox 3.0.4 : Misalignment on right white stripe. No gap on entry date block.
- Opera 9.62: No misalignment on right side. Gap on entry date block.
- Safari 3.2.1 : No misalignment on right side. Gap on entry date block.
- Camino : Ok

I know that this will be a CSS issue... How can I solve it?

Thanks in advance for your time.

Posted: **Mon Dec 15, 2008 10:11 am**

[UPDATE]
I'm recently install the tag plugin and this is the results now. It seems the gaps are gone:

On PC:
- Firefox 3 : Misalignment on right white stripe. No gap on entry date block.
- IE 6.0 : Ok
- IE 7 : Misalignment on right white stripe. No gap on entry date block.

On Mac:
- Firefox 3.0.4 : Misalignment on right white stripe. No gap on entry date block.
- Opera 9.62: Ok
- Safari 3.2.1 : Ok
- Camino : Ok

Posted: **Thu Jun 11, 2009 9:39 am**

Hi 3nd3r,
Can I know how you modify the width to make it bigger? Really appreciate your help. Tx

Posted: **Thu Jun 11, 2009 7:10 pm**

Sure, dude. I've already seen your PM.

Just let me remember how I did it...

First, you have to grab the new (wider) images from my web and replace them in your templates directory. I use the blue translucency theme, so, the images and their location in my web (http://www.pajareo.com) showed as [...] are:

.../public_html/templates/translucency/img/transblue/bg.gif ([...]/templates/translucency/img/transblue/bg.gif)
.../public_html/templates/translucency/img/transblue/entryfooterbottom.gif ([...]/templates/translucency/img/transblue/entryfooterbottom.gif)
.../public_html/templates/translucency/img/transblue/entryfootertop.gif ([...]/templates/translucency/img/transblue/entryfootertop.gif)
.../public_html/templates/translucency/img/transblue/footer.gif ([...]/templates/translucency/img/transblue/footer.gif)
.../public_html/templates/translucency/img/transblue/redtop.gif ([...]/templates/translucency/img/transblue/redtop.gif)

Then, you have to modify your .../public_html/templates/translucency/style.css and replace:
this

Code: Select all

#wrapper {
	width: 608px;

with this:

Code: Select all

#wrapper {
	width: 808px;

this:

Code: Select all

#wrap {
width: 588px;

with this:

Code: Select all

#wrap {
	width: 788px;

this:

Code: Select all

#content {
	float: left;
	width: 375px;
}

with this:

Code: Select all

#content {
	float: left;
	width: 575px;
}

this:

Code: Select all

#serendipity_banner {
	width:588px;

with this:

Code: Select all

#serendipity_banner {
	width:788px;

this:

Code: Select all

#menu {
	padding: 10px 5px 2px 20px;
	text-align: left;
	width:405px;

with this:

Code: Select all

#menu {
	padding: 10px 5px 2px 20px;
	text-align: left;
	width:605px;

and, finally, this:

Code: Select all

div.serendipity_entryFooterMain {
	color: #ffffff;
	text-align: left;
	line-height: 120%;
	padding: 0px 5px 0px 5px;
	font-size: xx-small;
	width:365px;
}

with this:

Code: Select all

div.serendipity_entryFooterMain {
	color: #ffffff;
	text-align: left;
	line-height: 120%;
	padding: 0px 5px 0px 5px;
	font-size: xx-small;
	width:565px;
}

I hope you can make it with these modifications. Tell me if you find any problem, and make a backup of original files first!

And, if you want, just give me some 'modified-design-credit' in your footer div section on the bottom of the index.tpl file

Regards

Serendipity Forums

Little left bar displacement in Translucency in Firefox 3

Little left bar displacement in Translucency in Firefox 3

Re: Little left bar displacement in Translucency in Firefox 3

Re: Little left bar displacement in Translucency in Firefox 3