Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
- Friends
Browser Specific Problems: Font placement 1px off in different browsers- help?
Bottom of Page1 to 9 of 9
-
- CommentAuthorrobotronik
- CommentTimeAug 29th 2007 edited
(Note: I edited the URL. Sorry about that, woops.)
Hi,
I am trying to solve an issue that is just driving me crazy. The text within <div>"navbar" and <div>"video_header" change their placement by one pixel depending on which browser you use. I am trying to get the text to be centered vertically within their divs.
Safari and Windows Firefox show them centered.
Mac Firefox shows the text one pixel too high.
IE7 shows the text one pixel too low.
The URL is: http://diversionmedia.com/thirteen/news.html
Here I have tried setting line-height to be the same height as the parent div. I have tried using "vertical-align:middle;" but I haven't been able to get it to work. Using top padding makes the browser differences worse.
I am guessing that the problems I am facing are due to minute differences in font-height for each browser, though I am not sure how to get around this.
Any ideas?
Thanks! -
-
CommentAuthorkari.patila
- CommentTimeAug 29th 2007
The URL is: http://192.168.8.113/chanelHome.html
Does that URL actually go somewhere? It looks a bit like an address for a home network.
-
-
The URL isn't working for me either.
I personally don't use "vertical-align" -- maybe things have changed, but it never used to do what I expected it to do. Without seeing the code, I am not exactly sure what is happening. I always do a CSS Reset -- that will help with some of your frustrations, especially if you want to use conditional comments to adjust the padding to make things look nice. -
Oh, please don't edit your first post, especially if the discussion gets very long, most of the time people don't check to see if a response was edited.
------
Usually to get text to align vertically you must use line-height and total-height(padding will effect this).
They must be the same.
So if your height is 20px, and you want the text to be in the middle of that make the line-height of that element the same as the height.
vertical-align won't work. But this should fix your problem, and guide you in the right direction. -
- CommentAuthorrobotronik
- CommentTimeAug 30th 2007
Thanks jernigani-
I have tried that technique. In different browsers the slight difference in the way each browser renders font height was (and continues to be) setting the text off by 1px as I mentioned in my first post. I am wondering if there are any other techniques to correct this besides line-height? It is definitely some sort of cross-browser bug....even a hack would be appreciated at this point. -
I think the solution is to not worry about 1px. This is the web, not print. Embrace the browser differences.
-
- CommentAuthorrobotronik
- CommentTimeAug 30th 2007
Hmm...I wish I could tell that to my boss. He is not so flexible, though he may have to be since this project is due really soon. -
Also CSS has what is called leading. They derive this leading value from the difference between font-size and the lineheight. Half of the difference is applied to the top and bottom of the inline-element.
So if the difference between the two is not an even number you won't get an even alignment.
You could always find a technique that works in all mozilla browsers, and then load a separate stylesheet for IE users. This is usually the way to fix really nit picky stuff in a short period of time. -
I mean does your boss think that someone is gonna break out a ruler and see that its 1px different in FF than IE? I think you have bigger fish to fry in IE6. Like the fact that the column of videos drops below the left sidebar.
1 to 9 of 9