Chrome Update broke our website?, Font update has changed our css style Options

[Karikuy.org]

About two day our website header became corrupted, http://www.karikuy.org/index

The header is on every page and appears disaligned on chrome, but not on internet explorer, this happened around the time chrome updated it's fonts. I am wondering if that is a problem or something else, can anyone help me here. I do not understand why the chrome versions is different from the Internet explorer. Before the update the header looked the same in both browsers. Please let me know if there is a fix.

As you can see the main links are higher up then the background graphic and also the search bar is longer and overlaps with the google plus button. All text now that had been headers on the page are a little higher then the background graphic. If you visit the page on internet explorer that is how it is supposed to look. the funny part is we designed the page to look best on chrome. We are very confused over here.

I also want to say hello and thanks, I've been reading the forums for a while this is my first post, I consider myself advanced as far as html and css go, but cannot get around to a fix for this.

[Christian J]

I don't have latest Chrome so I can't see the problem. However, there are lots of HTML syntax errors: http://validator.w3.org/check?uri=http://w...rikuy.org/index in particular this:

CODE

  <div id="nav">
    <li><a href="http://www.karikuy.org/index">HOME</a>  |  </li>
    <li><a href="http://www.karikuy.org/about">ABOUT</a>  |  </li>
    <li><a href="http://www.karikuy.org/tours">TOURS </a>  |  </li>
    <li><a href="http://www.karikuy.org/perupedia">PERUPEDIA</a>  |  </li>
    <li><a href="http://www.karikuy.org/blog">BLOG</a>  |  </li>
    <li><a href="http://www.karikuy.org/testimonials">TESTIMONIALS</a>  |  </li>
    <li><a href="http://www.karikuy.org/faq">FAQ</a>  |  </li>
    <li><a href="http://www.karikuy.org/contact">CONTACT</a></li>
  </div>

--LI elements must be inside a list container element such as UL: http://www.htmlhelp.com/reference/html40/lists/li.html. You then also need to remove the UL's margin/padding with CSS.

In http://www.karikuy.org/css/style1.css the DIV element with ID #nav uses:

CODE

position: absolute;
top: 118px;

which should put it below the 100px high http://www.karikuy.org/images/peru-tours-machu-picchu.gif --even though the latter is inside #header, which uses

CODE

position: absolute;
height: 100px;
top: 5px;

You might try giving the positioned DIVs small CSS borders to confirm that they are where you want them (and to check wether the nav links are spilling out of the DIV).

[pandy]

What's this with Chrome fonts though? Does it come with its own now?

[Christian J]

What's this with Chrome fonts though? Does it come with its own now?

I think it's about DirectWrite: http://gizmodo.com/the-latest-version-of-c...s-lo-1627355740

Possibly you can toggle it for testing by typing chrome://flags/ in the address field.

[pandy]

But that seems to be about the rendering, some kind of font smoothing?

[Karikuy.org]

The Directwrite change has changed the size of the fonts at least on my machine. For example the search bar now has more width then before and although it appears normal on internet explorer on chrome it has now increased in with and overlaps with the google plus button. www.karikuy.org/index

how do I go about fixing this? if I make any changes to the css then the internet explorer version of the site will show a change. Before the site had the same look on both browsers.

Thanks for the help regarding the header and the links, I'll check out the fix, however all fonts on the page are now slightly higher on the page due to the Directwrite change. How do I go about fixing this. I have verified that on older versions of chrome the site still looks the same.

[Christian J]

how do I go about fixing this? if I make any changes to the css then the internet explorer version of the site will show a change. Before the site had the same look on both browsers.

Firefox looks OK too.

all fonts on the page are now slightly higher on the page due to the Directwrite change.

First, are you sure you haven't changed something in your own copy of Chrome? For example, check Settings > Web content > Customize fonts > Minimum font size. Also check any font extensions you may have installed.

Also, is the text visibly larger, or is it just something indirect like CSS line-height, padding etc that has suddenly changed in Chrome?

How do I go about fixing this.

In general the best solution would be a more fluid page design, that doesn't depend on fixed font sizes. There are still browsers that let the user resize text size (as opposed to zooming the whole page).

In this specific case, you could try tweaking the CSS font-size values, maybe a change of 1px or so makes the problem go away without affecting other browsers.

As a last resort you could try showing different CSS to Chrome (assuming Chrome is the browser that gets things wrong), but I'm not up to date on CSS-hiding tricks in today's browsers.

[Karikuy.org]

That is how it is coming up on my browser, there were no changes. I remember I heard about the improvement to fonts in chrome so I ran an update to my browser. Only after did I notice these changes, I checked out the customize font settings only afterwards and it does not help, changing sizes does not fix the problem. All the font on the website has been affected, I am worried that if people update their chrome then they will see the errors.

[pandy]

Huh? Exactly how is what misaligned? I don't see any difference from what I see in FF. But probably it's just me again. I'm known for not spotting small differences...

[Karikuy.org]

Yea it can be tough to see, but the most evident is the google search bar and the google plus button overlapping, all the text on the website is about 2 to 3 pixels higher then before, they are not centered on their graphics.

[pandy]

Right! Now I see it!

[Frederiek]

I don't have IE or Chrome, but Chrome uses the webkit engine, just like Safari.
In Safari, the search doesn't overlap the Google+ button. The email field doesn't touch the Facebook column either as in your screenshot.

Your page does have HTML errors: http://www.htmlhelp.com/cgi-bin/validate.c...s&input=yes .
And you have a few CSS errors too: http://jigsaw.w3.org/css-validator/validat...rikuy.org/index .
You should fix that.

[Frederiek]

A little off topic, but I suggest you read Christian J's signature link about Chrome. Finally a reference to refer to on why I don't and won't install Chrome.

Thanks Christian. I just took a look at your link out of curiosity.

[Darin McGrew]

First, are you sure you haven't changed something in your own copy of Chrome? For example, check Settings > Web content > Customize fonts > Minimum font size. Also check any font extensions you may have installed.

And keep in mind that some of your visitors may use their browsers' minimum font size settings. And some will use browsers that don't your fonts at all. And some will use browsers that don't use fonts.

[Christian J]

A little off topic, but I suggest you read Christian J's signature link about Chrome. Finally a reference to refer to on why I don't and won't install Chrome.

See also http://en.wikipedia.org/wiki/Google_Chrome#User_tracking. Alas even SRWare Iron makes a lot of background connections according to my tests: http://forums.htmlhelp.com/index.php?showtopic=20552. There's also a WebKit browser called Midori for Windows and Unix, but I haven't tested it much yet.

But regardless of which browser you use, you need to take special precautions as explained on http://www.jsware.net/jsware/browsertips.php5

Thanks Christian. I just took a look at your link out of curiosity.

You're welcome, that's what it's meant for. It's more or less the only site I've found that tries to explain how these things work (beyond the superficial "install privacy extension XYZ and you're done").

[Frederiek]

I must say, I haven't read everything in your sig link yet. I've never heard of the other browsers you talk about. But even when you take whatever precautions, nothing is secure. That's just a lure.