Grow your CSS skills. Land your dream job.

Safari 6 and Chrome issues in CSS.

  • # May 6, 2013 at 3:19 pm

    Hey all,
    I’m working on a site right now and I’m testing it on a domain I already have hosting for. Anyway, here is my issue:

    I’ve validated the HTML and CSS. All looks good. I mean, I could DEFINITELY clean up the CSS and I will. However, it should no doubt function.

    Here is the site:[ test.elitewildlife.com](http://test.elitewildlife.com “Test Site”)

    In Safari 6, the plus signs on the phone app are about 10-15 px lower than they should be.

    Also, in Chrome, when you hover over “Recreation, Entertainment, Etc.” it looks funky. Like part of the word disappears.

    I know these are likely CSS bugs. Can anyone help?

    # May 8, 2013 at 3:20 pm

    Anyone?

    # May 8, 2013 at 3:26 pm

    Any help would be GREATLY appreciated!

    # May 8, 2013 at 3:37 pm

    Only think I can think of is to assign definite pixel widths to the plus/minus divs and center link making sure they don’t add to more than the width of the `beaccon` class

    Frankly I don’t think I would have structured it the way you have. I think a `ul` would have been better…especially as that’s what it is.

    # May 8, 2013 at 4:10 pm

    You need a license to use Neue Helvetica with @font-face unless you’re using the local property.

    You can get it at http://fonts.com

    # May 8, 2013 at 5:42 pm

    > Also, in Chrome, when you hover over “Recreation, Entertainment, Etc.” it looks funky. Like part of the word disappears.

    I don’t see it, on Windows so that might be it.

    # May 8, 2013 at 6:21 pm

    I see it on Windows, but it is very minor.

    As for the plus and minus signs the issue has to do with floats. It is often a bit unreliable to float something after some non-floated content. In this particular case it might work if instead of all sorts of margins (with magic numbers) you’d just simply used equal line-height to vertically align the text as well as use that to determine the overall height of the items.

    # May 9, 2013 at 5:31 am

    Or just use a `ul li a` with a couple of spans etc: http://codepen.io/anon/pen/xGBuD

    # May 9, 2013 at 4:38 pm

    Solved!!! I did a ul and within each li applied a span to the + and -. Thank you to everyone who contributed to the solving of this problem.

    I am completely aware that I am a total hack and do MANY things wrong. However, I have a hunger for knowledge and a willingness to learn.

    Thanks again!!!

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".