PDA

View Full Version : text shift in Firefox please help


Alfavista
09-25-2012, 01:24 PM
Hi all, my first post here and i'm new to dreamweaver and html/css so would really appreciate any help.
I'm finding a text shift of about a pixel in the red title blocks that only seems to happen in Firefox. I have attached html and css.
Also I have lots of variation on the @fontface copy which looks okay in safari but awful in chrome and firefox. Does anyone know why this is happening? I have tried searching but can't solve.
once again any help appreciated.

d a v e
09-25-2012, 08:54 PM
link to a live site would be easier - use a testing folder if you need to

Alfavista
09-26-2012, 08:34 AM
Hi Dave

Is it possible to explain about the testing folder please, I'm not familiar with this.

many thanks

johnMoss
09-27-2012, 02:39 AM
What he means is load your site onto a server so we can look at your problem live. If you have an active site already, such as your own, you can create a "testing folder", call it testfolder for example, and load your site into that subdirectory.
Example: www.alfavista.com/testfolder/(site (http://www.alfavista.com/testfolder/(site) goes here)

That said, your problem smacks of different browsers invoking their own presets into situations where css declaration has not been made. The way around this problem is to do a css reset.
The topic came up today, so click here to go to this thread, & follow Gentleone's Instructions...
http://www.dreamweaverclub.com/forum/showthread.php?t=43524

Alfavista
09-27-2012, 08:38 AM
Thank you John for the explanation, I now understand about the testing folder.
I have looked into the margin reset and have that in my css, except it doesn't seem to work, I must be still missing something in the code.
I now need to choose a service provider for some server space, so once I'm done I will post a link.

many thanks

gentleone
09-27-2012, 09:07 AM
I now need to choose a service provider for some server space, so once I'm done I will post a link.
You can also use Dropbox to show us your page. The free plan comes with 5Gb storage. Create a testing folder in the public folder of Dropbox and upload everything in there. Then you can share your webpage url with us so we can have a look.

https://www.dropbox.com/

Alfavista
10-01-2012, 12:46 PM
Hi thank you gentle one for informing about the drop box service.

I have uploaded the html and css files to a public folder (link below), but can't get it to link to css, any help greatly appreciated with this.

https://www.dropbox.com/sh/udr72bpxj5f3xbh/yD6mGc0Hiv/testing/testredboxshift

gentleone
10-01-2012, 02:30 PM
Okay... I'm not sure what you did, but let me explain what you should do.

This is all what you can do locally on your computer, because Dropbox will automatically upload & update everything on the dropbox server.

Create a folder named 'test' in your 'public' folder.
Copy 'red block.html' and your CSS folder in there.
When done, do a right mouse click on 'red block.html'
In the context menu you go to 'Dropbox' > 'Copy Public Link'
Paste that link here in the thread

You will get then something similar to this (this is a 'test' folder from my 'public' folder):
https://dl.dropbox.com/u/17359641/test/index.htm

Alfavista
10-01-2012, 03:49 PM
Thank you for your response,

I think I did a share link from the dropbox website originally rather than to copy the public link from my own dropbox folder so I hope this now works

copy of public link
https://dl.dropbox.com/u/109712164/testing/testredboxshift/red%20block.html

Many thanks

gentleone
10-01-2012, 09:34 PM
Each browser has it's own default css properties for certain elements and tags.

If you see a slight difference then this can be one of the reasons why there is a difference. For example if you give those h3 tags in the red boxes a line-height of 100% you will see the shift in Firefox is gone and the h3 tag is in all browsers centered vertically in the middle of the red box.

I'd recommend that you use a CSS reset which solves a lot of these differences.
http://necolas.github.com/normalize.css/

For the difference in rendering fonts between the browsers, that's just how it is. You can't do much abou that. For webkit (safari & chrome) and for IE with some nasty filter, you can adjust the font smoothing through CSS. For Firefox and Opera nothing.

http://maxvoltar.com/archive/-webkit-font-smoothing

For IE: https://gist.github.com/1370958

Alfavista
10-02-2012, 10:32 AM
Thank you once again for your reply and useful information.

I have adjusted the h3 tag as suggested, which solves the 1px shift in firefox.
The issue now is that it has shifted the copy up 1px in safari and chrome instead.
I have copied the typography code as suggested from the normalise css link, i'm a little unsure if I have used the correct part of this code.

Your help is greatly appreciated.

https://dl.dropbox.com/u/109712164/testing/testredboxshift/red%20block.html

johnMoss
10-02-2012, 02:16 PM
Alf, I don't see a definitive response so question stands; have you done a complete CSS reset?

Alfavista
10-02-2012, 06:04 PM
Okay John, taken on board, I have pasted in the normalise CSS in full.

https://dl.dropbox.com/u/109712164/testing/testredboxshift/red%20block.html

The issue is that the copy in the bottom two red rectangles shift up 1px in safari and chrome whilst now being correct in Firefox.
The 'about' red rectangle copy shifts down in Firefox.
Any help in pointing me in the right direction for solving this will be appreciated.

johnMoss
10-02-2012, 08:17 PM
The text all shows to be centered for me in chrome, ie9 & safari. I don't have firefox.

Look at your style sheet & do note that you have a body declaration above the reset. If you're still using it you need to move it down, but you also have conflicting margin information in that tag you need to fix first.

Alfavista
10-03-2012, 12:42 PM
Thank you for pointing that out.
I have adjusted to reflect your comments, but still have no joy. I am getting the 1px shifting that seems uncontrollable.

https://dl.dropbox.com/u/109712164/testing/testredboxshift/red%20block.html

Also still struggling with the @fontface 'Aller' typeface. When I visit their site and preview their specimen via different browsers theirs all looks fine. I have revisited their site and re-read their documentation, but still I get a wild variation, i'm unable to pin point why.

Any help solving appreciated

johnMoss
10-03-2012, 02:14 PM
Again temporarily I don't have firefox loaded, so I'm making a suggestion here without verifying (my bad):

First try adding the property of
display:inline-block;
to your studio_about_text declaration.

If that fails then try adding a line height declaration. The right size line height should effectively 'trap' the text inside its immediate container and keep it from moving.

Alfavista
10-04-2012, 10:15 AM
John, Thank you once again.

I have adjusted the line height to match the box height which appears to look right with the 'about' copy in inspection mode within dreamweaver.
The reverse is happening now though, the 1px shift is in Chrome and Safari instead of Firefox.

https://dl.dropbox.com/u/109712164/testing/testredboxshift/red%20block.html

Any other ideas greatly appreciated.

johnMoss
10-04-2012, 12:47 PM
Next I'd play with the top & bottom padding; right now you have it set to zero.

Alfavista
10-04-2012, 03:56 PM
I have added the 1px padding to the top which brings the copy down to the correct position in Safari and Chrome but the same 1px shift happens in Firefox so it ends up in the wrong position. I have tried adding various padding to the bottom but it doesn't clamp it in the central position.

https://dl.dropbox.com/u/109712164/testing/testredboxshift/red%20block.html

Any other ideas appreciated.

gentleone
10-04-2012, 04:15 PM
Any other ideas appreciated.
Yes, stop worrying about a 1px browser display difference. :)
Firstly... no one will ever notice the difference and if a client notice it and complains about it (which is sporadically to none with little differences like this), then you center it for his browser.
Secondly... there will always be little differences in the browsers, but does this 1px shift break the layout? No! So, move on with the rest of the website. ;)

johnMoss
10-04-2012, 04:23 PM
Yes, stop worrying about a 1px browser display difference. :)

My hero...:) I have actually stopped to research this and still can't get a good solution. I remember I had this problem before and finally gave up & lived with it.

What is happening is that somewhere in your code a situation is being created such that browsers are being forced to "round out" the positioning.
FF is rounding up, the others are rounding down.

Alfavista
10-04-2012, 04:53 PM
Thank you all for your time and input it is very much appreciated.

It has been quite a frustrating process for my first attempt at my website. This was really the final step in trying to iron out those finer details, hence the extracted part of one of the pages you were looking at.
Finding out about the nuances of specific browsers has been a learning curve with so much more to learn.
Also dropbox a real gem for testing, thank you for the info.
I came across this link and tried the various methods also to no avail.

http://blog.themeforest.net/tutorials/vertical-centering-with-css/

johnMoss
10-04-2012, 05:05 PM
You're welcome, sorry I'm not getting more definitive. Middle of the workday & all here... Gentleone's dead-on with his opinion on the matter, and bottom line if your client complains you can always browse to this thread, the problem is caused by rounding (I believe) and we don't have a quick solution.
You could in the end set it for firefox & then install a hack for IE, but if it renders wrong in chrome & safari thereafter you've accomplished nothing...

gentleone
10-04-2012, 05:05 PM
If you want to center that h3 tag vertically in that red box (studio_red_rectangle_no_margin), then you must give the the h3 tag a line-height that's equal to the height of 'studio_red_rectangle_no_margin'. In this case a line-height of 20px.
This is how you center vertically and as far as I know it is cross browser. But... maybe there will be stil a 1px difference, because I don't see those differences anymore :)

domedia
10-04-2012, 07:26 PM
But... maybe there will be stil a 1px difference, because I don't see those differences anymore :)

Two thoughts:
1. The web was never intended to be a pixel perfect environment. Look at responsive design.
2. With retina displays and higher points-per-inch, few people are going to be able to tell if something is one pixel off.
3. Spending time on something that is one pixel off is not productive. 8)

gentleone
10-04-2012, 07:57 PM
Two thoughts
I count 3 there... trying to sneak in 1 extra, huh? :D

...but that's what I told him too!

Alfavista
10-05-2012, 01:08 PM
Okay chaps comments taken on board.
As a designer I generally aim to perfect and as this is my first attempt at coding in dreamweaver, I thought this was possible to do. I have concluded that the copy sits in the correct place in all my browser tests except for in Firefox where i have the 1px shift so will just have to stick with that.

On a separate note with testing, does anyone know why I am getting an additional character © 2012 appearing next to my copyright symbol? This is also happening in my paragraph copy 15 years’ where the apostrophe is being replaced with the 3 characters. This is all when viewing from dropbox.
The unusual part about it is that if I click the copyright link and go to the linked page it doesn't occur in the footer of that page and the code is identical.

Many thanks

johnMoss
10-05-2012, 02:07 PM
Would need to see the code... I don't see anything on your drop box page.

domedia
10-05-2012, 04:40 PM
The unusual part about it is that if I click the copyright link and go to the linked page it doesn't occur in the footer of that page and the code is identical.
It doesn't matter. It's in Dropbox, and the way they treat character encoding is irrelevant for your web site.

Alfavista
10-07-2012, 09:09 AM
Just to clarify please, is this specific to drop box as to why this is happening?
When I select a web host and load it on their server from dreamweaver will the site work with typeface displaying as I would expect with the @fontface declaration?

Alfavista
10-07-2012, 12:43 PM
Okay, I came across the HTML ISO-8859-1 Reference which came about from validating my site with the W3C checker.
I have effectively replaced the extended characters with the corresponding code from the tables and now it appears okay in my browser tests.

http://www.w3schools.com/tags/ref_entities.asp

johnMoss
10-07-2012, 12:49 PM
Yes it should work just fine. If it doesn't for whatever reason it matters not, once uploaded we can easily see what the cause is...

domedia
10-08-2012, 01:29 PM
Stick with UTF-8, and please don't rely on w3schools for anything important:)