Good morning! I have two problems that I'm trying to solve, I'd appreciate any input. Website: http://www.webvitals.org (enter any domain in the search field to see what it does). Problem 1: The results page spaces looks fine in IE, however in Firefox it seems to add spacing between the header and the search results. Problem 2: I used <center> to center the header, but it doesn't seem to work in Mozilla. It centered the search form, but not the background image in the header div. Again, this only happens in Firefox. Thanks for your help
Yes, its happen to my blog as well. Until now there is not solution for this mystery problem. I have tried the <p align="center">bla bla bla </p> and <div... So just leave it there..appreciate if anyone can help this thing out
First of all, you have 5 validation errors (maybe more). The reason I say you might have more errors is because you are not declaring a doctype. Since this is a new page, you should use either of these two: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Code (markup): Or <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Code (markup): I recommend the XHTML simply because it forces me to use good coding practices. Either will work. Your CSS styles in your header don't have a 'type' declared. You type should be: type="text/css" Code (markup): If I remember correctly. Better yet, you should have your CSS in an external file and just link to it in your header. This will save you many headaches down the road. You would link to it like this: <link rel="stylesheet" href="css/default.css" /> Code (markup): After you declare a doctype, you NEED to run your code through an HTML validator and then clean up ALL of your errors. This will ensure better browser compatibility now (but doesn't guarantee it), and in the future. Try this: http://validator.w3.org/ You will also probably want to ad a universal reset to your CSS. This will save you with a lot of cross browser compatibility problems. * { padding:0px; margin: 0px; } Code (markup):
Yes try the universal reset and also correct other things as suggested by Chaos Foo. It may be something to do with <tbody> i have no idea what this is but my guess is this may be causing the problem.
Mozilla is likely ignoring <center> tags or align="center" as they're dinosaurian technology : ) Mozilla likely doesn't consider the background to be part of the thing you're centering. To center an inline element such as (but not limited to) text: text-align: center; If you see this centering block elements in IE6 or 7, it's because you didn't follow Foo's advice and give a proper doctype. IE6 and 7 while in Quirks mode don't know how to follow CSS (and I'd say 6 doesn't know all that well even in "substandards" mode). To center a block (and a table is a block): margin: 0 auto; first number is top-bottom margins, so you might want something other than 0 there. The important part is the "auto". Tables act weird though. If you take Foo's advice and use the "universal reset" to set all margins and padding to zero, that difference should go away (however, you will then have to add back in the amount of space you do want). Headings have their own default margins and paddings and those numbers are different in each browser, so we zero them first.