Safari 6 and Chrome issues in CSS.
# May 6, 2013 at 3:19 pm
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: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 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 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.
You must be logged in to reply to this topic.