Solved

Line Appearing in Google Chrome

Posted on 2014-04-08
3
362 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 22

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
.php tree directory? 5 57
Error on Add method 1 38
ASP.NET MVC 2 6
execute script based on HTML event 7 0
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

864 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

21 Experts available now in Live!

Get 1:1 Help Now