I have a problem making the following website display correctly under Google Chrome. (giantmatrix.com)
When tested under FireFox and Internet Explorer everything looks fine, but when tested under Google Chrome the site look so expanded
So can someone please advice me and tell me what exactly I am doing wrong here?
Thanks in advance for your help
Can you be more specific? Chrome and FF (and Opera) are displaying identical on my machine 
Since a picture is worth 1000 words, please find attached screen shots from my Chrome and FireFox browsers
I have marked the problem in Chrome for you with Red circles
Also in the top of the Chrome image you will see an arrow showing the space in header (expansion)
Thanks in advance for your help and time
It would be much quicker just to upload the image to tinypic or something like that and then give me a direct link to it. Otherwise we have to wait for a moderator to approve it and that could take a few hours (depending on how fast they check)
Here is the link to the Chrome screen shot, please let me if it appears OK as this is the first time I use the TinyPic service:
and here is the FireFox image:
Thanks in advance for your help
My chrome is not displaying like that. Are you using a beta version of Chrome still? Tell me your browser version and then go clear your cache :).
Chrome version 3.X (not beta) and after clear cache…problem is still there 
Any suggestions?
Hi the problem happens in Safari also. It looks like you just need to reset your margin to zero on the #nav.
#nav {
height:23px;
padding:21px 0 12px 320px;
[COLOR=Blue] margin:0;/*add this*/[/COLOR]
} /*----- Main Navigation -----*/
You might want to think about backing off on that line height of the #intro_content p. Safari renders the font bolder and it throws the three gold span images outside of the header image.
#intro_content p{
font-size:14px;
color:#fffff1;
[COLOR=Blue] line-height:16px;/*was 20px*/[/COLOR]
padding-bottom:15px;
}
Hi Ray,
Thanks A LOT! Big part of the problem is now solved, at least the home page under Chrome is looking better know
Having said that, I am still facing problems with Chrome as after testing I can see that:
>>> in home page (News text block) is still expanded even after applying the last changes to the CSS file
Also there is a BIG separator between blocks header / footer like in giantmatrix.com/products/giant-disk-cleaner/ where the header of (Benefits, features…etc) and also footer of the same block
Same thing for Clients testimonials block in the same page
So any suggestions? I’ve tried manipulating the CSS file but couldn’t reach any solution
Thanks for your time
Hi,
I see you are using the universal reset at the top of your styles.css but the webkit engine (safari,chrome) does not seem to be honoring everything. I don’t see any other stylesheets linked after the styles.css in your page head that would be overriding the elements in the styles.css either. I have not had time to look into the cause of that since I am not a big fan of debugging WP themes.
It seems to be the same problem with the h2 in the #news_box. I am using Safari at the moment as I don’t have chrome installed right now but it is renedering the same as you are describing. Safari is giving a bottom margin on that h2 which is pushing everything else down. You had a top margin declared, but go ahead and reset the others to zero and it works.
#news_box h2{
float:left;
font-size:23px;
color:#0599d1;
font-weight:700;
border-bottom:1px #dedee0 solid;
padding:0 5px 0 9px;
width:215px;
[COLOR=Red]/*margin-top:24px; replace this with shorthand below*/[/COLOR]
[COLOR=Blue]margin:24px 0 0 ;[/COLOR]
}
Also there is a BIG separator between blocks header / footer like in giantmatrix.com/products/giant-disk-cleaner/ where the header of (Benefits, features…etc) and also footer of the same block
Same thing for Clients testimonials block in the same page
Let me look into that and see if I can see what is going on.
I believe this is a strong reason
Your CSS error. About 2 months ago I was debugging someons page for a friend and I noticed hte charset screwed up the entire page when done wrong in webkit. I believe this is the same issue.
Remove the c harset rule and I believe it will all be good.
But to answer the question about the space between the Benefits/features and the c ontent below, the margin needed to be set to 0 on this
.TabbedPanelsTabGroup {
margin:0;
}
But that goes along with the universal reset (it should do that for you). Which leads me to believe validation
Also there is a BIG separator between blocks header / footer like in giantmatrix.com/products/giant-disk-cleaner/ where the header of (Benefits, features…etc) and also footer of the same block
Same thing for Clients testimonials block in the same page
Same problem as the others. The real question here is why isn’t webkit honoring the universal reset?
The gap above the .content_bottom div (bottom round corner) is caused by a margin on that clearing “p”.
<ul type=circle>
<li ><h4>Clear out all junk and obsolete files that prevent your system from operating at peak performance!</h4>
<li ><h4>Scan and locate all unnecessary duplicate files on your computer and easily clean them out without losing anything important!</h4>
<li ><h4>No "accidental" erasing...backup obsolete, duplicate files prior to erasing them and keep for later should you need to restore them!</h4>
<li ><h4>Securely erase any file or folder and prevent prying eyes from recovering it later no matter what file recovery tool they try!</h4>
<li ><h4>Securely erase all previously erased files and folders from your hard drive, so that they can't be recovered even with the best file recovery tools on the market!</h4>
</ul>
[COLOR=Blue] [COLOR=Red]<p class="clear"></p>[/COLOR][/COLOR]
</div> <!-- End Company Bloc -->
</div><!-- End Center Tab Content -->
</div><!-- Benifits Content -->
v
v
v
v
[COLOR=Blue]<div class="content_bottom clear"></div>[/COLOR]
[B]#single_product_pg h3[/B] {
color:#00a5d4;
font-size:16px;
[COLOR=Blue]margin:0;[/COLOR]
padding-top:5px;
}
[B]#single_product_pg p[/B] {
[COLOR=Blue]margin:0;[/COLOR]
padding:12px 0;
line-height:18px;
}
[B]#single_product_pg h4[/B] {[COLOR=Blue]margin:0[/COLOR];}[COLOR=DarkGreen]/*add this new selector*/[/COLOR]
Hopefully that is the problem because this is not making any sense to have to reset all margins just for webkit. I was not aware of any such problems but it sounds like you may have made the connection.
Ray I believe it WOULD honor it if the charset is removed…I haven’t tested of course…but if you were to move the reset above the charset, or place a dummy rule right after the charset (to take the resets place) I think it would work. I have seen this before. It’s quite strange.
[edit]
Hopefully that is the problem because this is not making any sense to have to reset all margins just for webkit. I was not aware of any such problems but it sounds like you may have made the connection.
Yes I think it is. This is spot on from the other one I fixed.[/edit]
[edit]The universal reset is the first rule after the charset. That’s why I mentioned the dummy rule above. I’m so sure about this I could eat a waffle…
Yes humor :nanaman:[/edit]
That’s it Ryan! I just tested it. 
I must say that is strange and I have never known that about webkit, I’ll remember it now.
Mike,
As Ryan said just remove that charset from your styles.css, it is not needed anyway since you have the meta tag in your html files.
[COLOR=Red]/*@charset "utf-8"; remove this completely*/[/COLOR]
/* CSS Document */
/* Styling all elements
==========================================================================================================*/
* { margin: 0; padding: 0; }
Holy Batman Rayzur I’m very glad I remembered my friends code :). I’m earning my badges’ worth:)
I must say that is strange and I have never known that about webkit, I’ll remember it now.
Mike,
As Ryan said just remove that charset from your styles.css, it is not needed anyway since you have the meta tag in your html files.
[COLOR=Red]/*@charset "utf-8"; remove this completely*/[/COLOR]
/* CSS Document */
/* Styling all elements
==========================================================================================================*/
* { margin: 0; padding: 0; }
I believe it only affects the first line of CSS not commented from my other test results months ago. It is indeed strange and that’s why I remembered it in this case. It’s quite rare but …
Thanks a lot Ray and Ryan, now the site layout is fine on IE, FireFox and Chrome
The only remaining problem is that under Internet Explorer font is still BOLD for example under giantmatrix.com/products/memory-washer/
benefits section
Second question I have now regarding removing the line
@charset “utf-8”;
As far as I remember this line was added as our site have multiple language (Spanish, French and English of course) so don’t you think that removing this line at least in Spanish and French version of the site can cause problems?
Thanks again for all your continuous help and support
I’m not sure where you mean. Regarding the font boldness, all browsers are displaying identical (under benefits)
Second question I have now regarding removing the line
@charset “utf-8”;
As far as I remember this line was added as our site have multiple language (Spanish, French and English of course) so don’t you think that removing this line at least in Spanish and French version of the site can cause problems?
Thanks again for all your continuous help and support
Why would it? I don’t think so :). It only sets the charset but you do that in the HTML :). If you still feel uneasy just add a dummy rule like
dummyline{}
Right before the universal reset in the CSS file. If my hunches are correct it will only invalidate the first rule in the file with the charset in there (in webkit)
Ryan, please try it on Safari and I am sure you will see the font problem.
Remember…from the beginning you couldn’t locate any of the problems I mentioned until Ray came and saw it all using his Safari browser, so kindly double check on a Safari browser and I am sure you will see it
Thanks in advance for your help