Solved

Line Appearing in Google Chrome

Posted on 2014-04-08
3
354 Views
Last Modified: 2014-04-08
Hi,

There is a small line appearing on a section of my page that i just can't seem to debug - http://goo.gl/ji6QQJ

If you scroll down to the 'Shop Locally Globally' section and look at the bottom of this section close to the 'Up & Down' arrows, you will see a small thin white line above them (see screenshot).

screenshot
It only appears in Chrome, and it only appears if i add the 'Up & Down' arrows to the section above it.

Can anyone see why this is happening? Thanks in advance...
0
Comment
Question by:oo7ml
3 Comments
 
LVL 34

Accepted Solution

by:
Dan Craciun earned 300 total points
ID: 39986547
It disappears if you set
padding-bottom: 6.4rem;

Open in new window

instead of 6.5 on .home-section

Line 442 in template.css

HTH,
Dan
0
 
LVL 21

Assisted Solution

by:Kim Walker
Kim Walker earned 200 total points
ID: 39986730
It seems that Chrome is having trouble rendering the exactly one-half pixel resulting from the rem unit. Chrome is calculating 6.5rem as 123.500 pixels. While 6.49rem or 6.51rem are rounded and rendered properly, 6.5 is not.

I wonder if the rem unit is ready for prime time. I noticed that Firefox calculates 1rem as 19px while Chrome calculates it as 17px. It might be wise to include the following in order to standardize the root em size across browsers. (Replace "XX" with your preferred root font-size in pixels).
:root { font-size: XXpx; }

Open in new window

0
 

Author Comment

by:oo7ml
ID: 39986935
Thanks guys, i changed it to 6.4 and it worked fine, thanks for insight into how Chrome renders it too, much appreciated.
0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now