So why does this line show up in Chrome but not Firefox and Safari? What have I done incorrectly in in the css that would make Chrome, of all browsers, not to play nice?
http://oxbridgecustomhomes.com/
See screen shot of the issue > http://grab.by/HtAu
Many thanks,
Houston
I’m not seeing that. What OS? Browser version? Have you cleared your cache?
I’m not seeing it either - probably a cache issue.
Chrome is version Version 43.0.2357.65 (64-bit)
OS is Yosemite (10.10.3) on a mac.
Cache has been cleared as well. My client it also seeing it. Not sure about his details.
I’m not seeing it in Firefox or Chrome
I notice that
3200 Purdue (no line) is
511 x 392
But 3621 Wentwood (has line) is
613 x 393
Might it be that 1px difference at 100% is “pushing up” enough for background to show?
Is the line there for the other 613 x 393 images?
I can see it, Linux Chromium 41.0
I didn’t notice first, but in your screenshot at tinygrab.com the left “correct” image has a grey line beneath the image. The right “faulty” image does not have that line beneath.
:d’oh: I wasn’t looking there.
I think the easiest thing to do would likely be to give all the images the same height.
I don’t think that resizing by 1px, even without maintaining the original aspect ratio, would distort the image by any noticeable amount.
The line for me and my client is at the top of every image in Chrome on the home page. Hmm, I will play around with it and see what I can do. Thanks for the info on the sizing. The thing is, there is a div that these images show up in so the image should get sized to the div if it is too large.
Ok, so here is what I have found now. If I look at code inspector in Chrome I see that the class, .site-header has a padding at the bottom of 5px. If I change that in code inspector to 3px, the line goes away. Then I change it right back to 5 using my up arrow key and the line is still gone. So if it works at 5px when I move it, why doesnt it work in the first place? Arghhhh.
Screen capture of code editor - http://grab.by/HuWi
Did you disable JavaScript while testing so the slider wouldn’t change to a different image?
I know I had a heck of a time while using the inspector because they kept changing.
The images did not change for me while I was looking at the code inspector. Once you click on one of the arrows to advance the images, they will stop rotating automatically.
I think the problem is (although it doesn’t show in chrome pc or mac for me) is that you are placing your content on a background image and you haven’t accounted for every pixel in the header.
You are using margin to make things meet which will only work if all browsers make the text the same height (which they don’t) and also assuming that they all round up the same. You also have inline images thrown into the mix so they are stacked on the base line causing an extra gap.
You should have given the header content an exact height (92px) to match the start of the background image that you are placing your content onto. It’s this background image that is showing I believe giving the effect of a line.
Try this and see if it corrects the fault.
#site-navigation{
height:22px;
}
.site-header{
padding:0;
height:22px
}
.oxbridge-logo{display:block}
.rsContent img{display:block;margin:auto}
Note also that the gray in the background image is 392px tall yet you are sizing your slider to 393px tall and I can see a 1px offset at the edges where they don’t meet.
Thank you Paul. I have been coming here for years and I have to say that I really appreciate your help in thie forum and your expertise with CSS.
You’re welcome 
(Glad I can still help.)
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.