Elements not aligning the same in Chrome vs Firefox

I am trying to get the search box, social media buttons & navigation menus to line up in the header of my site. It looks fine in Firefox (yay) but not in Chrome … the navigation is about 15px out.

Would really appreciated being pointed in the right direction to make this work.

The site is at: bloomonline.co.nz/ifs

The css I have used to position those specific elements is:
/* Top Navigation */
.top-nav {
width: 940px;
margin-left: 16.6%;
}

/* Social Icons */
.social {
float: right;
margin-right: 5.7%;
}

/* Main Navigation */
#block-4 .nav-horizontal ul.menu > li:last-child > a {
padding-right: 26.3%;
}

Thanks so much

Meg

I don’t see any difference in rendering between FF30 and Chrome35. Which versions are you using? And can you make some screenshots to show the difference that you see?

(Please post code as code, by using one the code buttons, on the RH side of the form icons bar. It would actually be appreciated if you would edit your post as such.)

Hi Frank

Thanks for the heads up re typing in the code … I cannot figure out how to edit my original post. Is it possible? If so please let me know how to do it … obviously I should not be let loose with technology!!

I am using Chrome v35 and Firefox v29 running on a mac.

Here’s how I am seeing it in Chrome

And here is how I am seeing it in Firefox

Thanks for your help
Meg

I can’t see a problem either—they look pretty much identical in both browsers for me (even in your screen shots!). :-/

If you are really concerned, then perhaps indicate in the screen shot what you don’t like. But it seems like you are being ultra picky, as the layout looks fine to me!

Yep …I am being picky :slight_smile:

But the end of the navigation menu is about 15px too far to the left in Chrome. It needs to line up with the end of the search box and the last social media icon… have drawn a line on the image to show the difference.

It actually aligns the way you want for me in Chrome for Mac, but anyhow, I notice that you have a % padding on the list items, which is pretty unreliable—along with a % right margin on the social icons. Trying to get those two things to match is a massive hit/miss. Why not just use a pixel value padding/margin on both to make this more reliable?

Try viewing the page on a tablet and I think you will be most upset.

The difference is cause by the way the fonts are rendered and the space between the list items. If the list were right aligned, you could achieve pixel perfect right end alignment but the left end would be a few pixels off. Browser differences. Pixel perfection should not be expected between browsers, especially if you are expecting a responsive page. It is also true that percent widths should not be used indiscriminately in a responsive/fluid page. Their appropriate application depends entirely on the effect desired and how they affect their surroundings (in this case).

Does your page actually begin with a jQuery script above the doctype, or are by browsers playing tricks on me? For all practical purposes, the doctype should be the topmost line on your HTML page.

In the quest for pixel perfection (as futile as it may be), you should not overlook the value of the HTML validator. If you’re gonna be picky, then write picky clean code.

The dropdowns appear to the right of their parent list item and are unreachable if JavaScript is turned off. You’ll lose the people who browse with JS disabled.

Finally, @John_Betong is right. If you drag the width of your desktop browser narrower, you can watch the layout fall apart.

Good luck.

Hi,

The difference between Firefox and Chrome is due to the negative word spacing you are using which Firefox does not honour.

If you remove the negative word spacing from here then they will both be the same.


block-type-navigation ul {
width: 100%;
display: inline-block;
letter-spacing: -4px;
[B]/*word-spacing: -4px; remove */[/B]
}

That is a bad fix for the inline-block white space node issue anyway and if you really need to collapse the space then see this thread.

Yep … already seen that it looks terrible as the screen gets smaller … next on my list of stuff to fix.

Awesome, thank you! That seems to be part of the framework that the site uses … makes no appreciable difference if I remove it - other than letting my menu line up properly.

@ronpat Thanks for your help.

The site is built using Headway Themes … and the jQuery script that is showing up above the doctype appears to have come from the Gravity Forms plugin. Am guessing that is something I should be talking with the lovely folk at Headway Themes about?

Oops, I forgot that there is a time limit on edits on Sitepoint. You can ignore the request, other than for a next time.

Does that mean that the menu alignment issue is solved?