Little left bar displacement in Translucency in Firefox 3

[3nd3r]

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.

[sonichouse]

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

[Don Chambers]

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.

[3nd3r]

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!

[3nd3r]

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.

[3nd3r]

[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

[mtcheewai]

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

[3nd3r]

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