Make the page look the same on other browsers - Developers

I am pretty confused on why my webpage looks perfect in Opera but in any other browser the page is out of place and distorted. Can anyone explain how to make it look the same no matter the browser or resolution? [img]http://img169.imageshack.us/img169/5551/helpd.png[/img] Code: [code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Login</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css">  </style> </head> <body bgcolor="#737373"> <div id="login_box"> <form name="login_form" action="index.php?p=login" method="post"> <label for="username">Username:<br /> <img src="login/images/user.png" width="16" height="16" alt=""> <input type="text" name="username" style="width: 17em;" /></label><br> <label for="password">Password:<br /> <img src="login/images/shield.png" width="16" height="16" alt=""> <input type="password" name="password" style="width: 17em;" /></label><br> <br> <label for="password">Stay Logged In? <input type="checkbox" name="remember" value="true" /></label>                 <input type="submit" value="Submit" /> </form> </div> </body> </html> [/code]

I'm hoping you'll make the design look better, that looks kind of bland. And IE is a mess, no one uses it anymore. You should only worry about having it looks nice in popular browsers, such as Firefox and Chrome.

Downloaded both chrome and firefox and it still isn't placed right. How does one go about making them all even?

Try getting rid of the width and height attributes in the image tags.

Didn't seem to change things.

[QUOTE=The Inzuki;17399620]I'm hoping you'll make the design look better, that looks kind of bland. And IE is a mess, no one uses it anymore. You should only worry about having it looks nice in popular browsers, such as Firefox and Chrome.[/QUOTE] Of course people still use IE. Your average user doesn't know what an internet browser is. They just know if you click the "E" thing then you get internet.

[QUOTE=The Inzuki;17399620]And IE is a mess, no one uses it anymore. You should only worry about having it looks nice in popular browsers, such as Firefox and Chrome.[/QUOTE] My entire school district is on it.

You should only worry to respect the web standards, if the page does not look right on some browsers, it's not your fault. [url]http://validator.w3.org/[/url] [editline]02:27PM[/editline] By the way, your code has 16 errors, you should check them out.

YAY validator!!! Edit: To prove im not trolling, ill add in more than just .00001 cents. I love my validator <3 <(^^)>

[QUOTE=Stephen304;17435387]YAY validator!!! Edit: To prove im not trolling, ill add in more than just .00001 cents. I love my validator <3 <(^^)>[/QUOTE] Huh?

Use a CSS reset. What this does is reset the CSS on your page to a standard (usually 0 for most elements). Then from there you define only the elements you need defined. Some browsers will put a padding of 2px on paragraph tags, some put a padding of 5px. This is true for most elements, hence why your page looks different in each browser. [editline]03:57PM[/editline] [QUOTE=vachon644;17414612]You should only worry to respect the web standards, if the page does not look right on some browsers, it's not your fault. [url]http://validator.w3.org/[/url] [editline]02:27PM[/editline] By the way, your code has 16 errors, you should check them out.[/QUOTE] Worry about valid code last. Get your page rendering the way you want, then go back and clean it up. You will eventually get in the habit of creating standard compliant code without even trying. The good thing is, most errors are just syntax errors. [b]Most[/b] of the time it shouldn't effect how your page really renders. Most of the errors aren't big deals and can be fixed rather fast. At the end of the day, if your page is rendering fine in all browsers and it has a few errors, is there really anything wrong? I'm not saying don't follow standards, I'm just saying people on these forums will create an ugly design and go, "Oh look, at least my code is compliant." When at the end of the day the average user doesn't give a shit. If your page is rendering the way you want it to, the user will go, "Hey, cool site." Not, "Hey this site looks fucking awesome, but your code isn't complaint. So you suck."

[QUOTE=Funcoot;17436310]Use a CSS reset. What this does is reset the CSS on your page to a standard (usually 0 for most elements). Then from there you define only the elements you need defined. Some browsers will put a padding of 2px on paragraph tags, some put a padding of 5px. This is true for most elements, hence why your page looks different in each browser. [editline]03:57PM[/editline] Worry about valid code last. Get your page rendering the way you want, then go back and clean it up. You will eventually get in the habit of creating standard compliant code without even trying. The good thing is, most errors are just syntax errors. [b]Most[/b] of the time it shouldn't effect how your page really renders. Most of the errors aren't big deals and can be fixed rather fast. At the end of the day, if your page is rendering fine in all browsers and it has a few errors, is there really anything wrong? I'm not saying don't follow standards, I'm just saying people on these forums will create an ugly design and go, "Oh look, at least my code is compliant." When at the end of the day the average user doesn't give a shit. If your page is rendering the way you want it to, the user will go, "Hey, cool site." Not, "Hey this site looks fucking awesome, but your code is complaint. So you suck."[/QUOTE] That was a paragraph phull of epic win.

Google has like 40 errors on the validator.

Validation means pretty much fuck all. I can validate a page as strict XHTML 1.0, and itl still be screwed on half the mainstream browsers. @OP - this is a common problem with site design. Best way around it is to load browser specific CSS.