Menu items alignment problem in Chrome

Hello. I have a problem with the menu items alignment in Chrome, could you help me to solve it? I have tried changing the paddings and margins of the menu items with no success.



I have another issue. I have followed Simple Ratings Bar from One Small Image from http://cutcodedown.com/tutorial/ratingStars , and when I change the font size in body the stars don't show up well on this browser. I also tried in an Android tablet with the same result:



With font size at 90% this issue is less noticeable except when using the zoom.

The url is vpsmojo.com

Any help will be appreciated.

 

You should've said @deathshadow it looks like it's his creation and is totally right up his alley. Otherwise you'll have people suggesting sh*t for nothing.

 

Hi, I'm still customizing the site. I'm trying to make it accessible and simple; any idea is welcome, not only from deathshadow. I've moved the menu under the logo, so the alignment is not a problem now.

This site started as an experiment to test things (that's the reason it's https and I regret doing that), later it turned into a more serious project where I write about web hosting.

 

Why do you regret it being https? All websites should be https, so... what problems do you have with it being https?

 

Accesibility. Due to having to disable SSLv3, the site has lost compatibility with IE6 and previous versions, and surely with a bunch of other devices. That's the most important reason, but there are more: HTTPS is slower; I tried to solve it using HTTP/2 but it broke the compatibility with Firefox 45.0.2, so I switched back to HTTP/1.1. Actually, the secure connection adds about 150-200ms to the loading time in the first connection :S

I don't see the point on using https for an informative site, and I don't like how the Certificate Authorities run in a centralized way - it would be better if I'd be able to sign my own certificate -. There is also the need to pay, since Let's encrypt certificates are not compatible with Java and Windows XP ( https://github.com/certbot/certbot/issues/1660 ).

HTTPS for all sites means breaking the web since legacy devices will stop working. The browsers in their current status are insecure, and they are getting more and more complex everyday.

 

None of those are real issues in my book. IE6 is long dead, XP should have been killed off at least 5 years ago and 200ms on load is nothing. Firefox 45.x is ancient, so no, I don't really see that much of a problem with it.

 

For me it's a problem when I try to load a site and it doesn't work. I suppose it's not only IE6, but other user agents like braille browsers, projectors, etc.

By the way, I'm making a new layout using Faux column.

 

I'm not seeing either alignment issue so I assume you got it sorted? In both cases inline-block alignment -- especially when dealing with pixel (like the rating bar) and em (the text next to it) can take one or two PX of relative positioning or negative margin to 'fix', but beware that due to font renderer differences across font-faces and OS when you fix it 'perfect' on one it is typically banjaxed in another turning such little details into a nasty case of whack-a-mole. I might not be seeing it as I only checked Vivaldi under Winblows -- could be totally screwed in Safari on OSuX or on whatever open sores Firefox rebadging is currently hot and trendy with the 40 year old virgins using Linsux as a desktop OS.

For the vertical alignment of a pixel metric element next to EM there is a trick you can use that works well cross browser to a degree. You set the element itself to:

vertical-align:top;
position:relative;
top:0.75em; /* half the parent element's line-height */
margin-top:-8px; /* half the height of THIS element */

Code (markup):

Sucks to do, but it tends to work fairly well when the font-size is dynamic and your ratings bar, smiley, or other such elements are not. Sometimes it also helps to shave a few px off the bottom with a negative bottom margin so that should the image element be larger than the line-height, said line-height doesn't increase in size automatically... but I'd use that with care since you don't want the image overlapping other lines.

As to HTTPS, it's MORE than just 200ms -- it's more server load as the content has to be custom encoded for EVERY client on EVERY request -- it destroys caching models and even with google's little proposed (and poorly supported) improvements it is still a performance and accessibility disaster SERVER SIDE.

As such for an informational site, I see ZERO point in wasting processor time and memory -- much less bandwidth and the extra level of handshaking -- on https unless you NEED it for security reasons; like when you're handling MONEY. Unless you can afford to throw endless farms of cargo containers filled with servers at the problem, it's generally NOT a viable first-choice.

... as anyone stuck using an outdated screen reader that ONLY works with IE6 and can't afford the few grand needed for the latest version is quick to find out. See how Google now sending everything via HTTPS has caused a lot of people with disabilities to have to go elsewhere for search -- one of the many follies in a long line of epic failures that makes me wonder if Google has forgotten what put them on top in the first damned place; and it wasn't JUST results.

DDG was really close to being able to take on Google, until they too went and shit the bed with the artsy fartsy scripttard bullshit and inaccessible front end crap that all the search engines have pissed their own beds with. Who knew all the crap that buried "Ask Jeeves" was actually just a decade ahead of its time?

 

Thank you for the reply, the issue about the menu alignment is sorted out since I moved the menu under the logo so it works fine in every browser I tested.

But I don't know how to solve the problem with the rating stars... when I change font size at body, for example:

font:normal 85%/150% arial,helvetica,sans-serif;

Code (markup):

The stars appear out of place. You can see that effect in the second image of the first post or live in the site right now, at the bottom of the right column. I don't know how to adapt this code to that font declaration:

@media (min-width:1px) { /* cute trick to target CSS3 browsers only */
  .rating,
  .rating span {
    height:1em;
    font-size:100%;
    background-image:url(/theme/images/ratingStarsQuality.png);
    background-size:1em 2em;
  }
  .rating {
    width:5em;
  }
}

Code (markup):

 

You don't seem to have set vertical-align:middle on the outer span.ratings.

-- edit -- my bad, there it is. Ok, it's the fact that text is never perfectly aligned within the line-height. Most fonts have more descender space.

Try margin-top:-0.1em; on .ratings, slowly increasing the value until it looks correct. MIND YOU different font faces, different OS, and different renderers will ALL change that alignment.

Sucks, huh? Sooner or later you learn to say "screw it" on minor alignment issues like that.

 

Thanks again. That's not the problem (I already did that but later ditched it), there is some issue with the horizontal offset... if you use the zoom you'll see some displacement in the rating horizontally... for example, the 4.5 rating looks like 5 rating, and the 5 shows a bit of the next star.

With zoom at 125% it looks perfect here (Chrome 54.0.2840.87)

 

This is what I mean. 4.5 stars look like 5, and 5 shows part of an extra star



Not the end of the world, I can use only one version without the CSS3 trick. In firefox it works fine.

 

With that behavior, I'd say something went awry with background-size not calculating EM the same as width does. the extra little bit peeking past the the fifth star is a clear indicator of this. Is it doing this in JUST firefox? If so that's their idiotic halfwit dumbass "round up but keep track of all fractions" behavior that's been biting us in the ass on everything Netscape legacy since CSS became a thing.

LITERALLY, I remember that problem on Nyetscape 4... and as much as they CLAIM gecko was a clean break, SO many buggy broken behaviors from Nutscrape 4 live on in Gecko to this day.

Hmm... making sure there's at least 1px of white-space on EACH SIDE of the star, and that any white-space is in fact identical on both sides of the image might help resolve the problem.

I'm going to test that, and if that is indeed what's going on I'll be editing my article to reflect said change.

 

It happens in Chromium, I have tried in chromium/openbsd and chromium/windows, both have this render problem. Firefox works fine.