ansaurus

Question

Answer 1

+1 A:

You're not using a Doctype, so browsers fall back to quirks mode:

In the Quirks mode the browsers violate contemporary Web format specifications in order to avoid “breaking” pages authored according to practices that were prevalent in the late 1990s. Different browsers implement different quirks. In Internet Explorer 6, 7 and 8, the Quirks mode is effectively frozen IE 5.5. In other browsers, the Quirks mode is a handful of deviations from the Almost Standards mode.

Marcel Korpel 2010-05-30 20:56:46

Answer 2

A:

After adding your correct DOCTYPE: also implement the YUI(R)eset CSS File witch will standardised the major css difference browser tend to have different.

http://developer.yahoo.com/yui/reset/

This will give you what we call a "clean slate", After you have imported the YUI(R) You should define your defualt css values such as padding,margin,a,img etc your self and then continue to build your design.

RobertPitt 2010-05-30 21:06:56

Answer 3

A:

Thanks for your infos, but I have the same problems :(

I have also simplified this a little bit:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.1/build/reset/reset-min.css"&gt;
<style type="text/css">

#input {
    background: none repeat scroll 0 0 white;
    border: 1px solid #DCDCDC;
}

#submit {
    background: none repeat scroll 0 0 white;
    border: 1px solid #DCDCDC;
}

</style>
</head>
<body>
<input id="input" type="text" value="" /><input id="submit" type="button" value="Add" />
</body>
</html>

Patrick 2010-05-31 06:00:32

That is not a valid doctype, try something like <!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">

Kerry 2010-05-31 19:12:51

Answer 4

+1 A:

What are you trying to do with the background of the box? It looks really complicated for just having a white background if that's what it is, in which case, your page could be simplified to this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.1/build/reset/reset-min.css"&gt;
<style type="text/css">
#input, #submit {
    background-color: #fff;
    border: 1px solid #DCDCDC;
}
</style>
</head>
<body>
<input id="input" type="text" value="" /><input id="submit" type="button" value="Add" />
</body>
</html>

Kerry 2010-05-31 19:14:57

thanks for your info. but the problem is also here: firefox dont align the input items:On Webkit (Safari/Chrome) http://img534.imageshack.us/img534/7320/safariw.pngOn Firefox http://img706.imageshack.us/img706/1109/firefoxo.png

patrick 2010-06-01 21:00:42

Have you tried setting their height to be identical?

Kerry 2010-06-01 21:52:14

Answer 5

A:

I have now a working version! thanks for your help!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
    <html xmlns="http://www.w3.org/1999/xhtml"&gt;
    <head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <style type="text/css">
     input {
      background-color: #fff;
      border: 1px solid #dcdcdc;
      font: 13px "Lucida Grande", Arial, sans-serif;
      margin: 0;
      outline: none;
     }

     input#input {
      border-right-width: 0;
      padding: 5px 5px 5px 15px;
      width: 220px;
     }

     input#submit {
      padding: 4px 10px;
     }
     </style>
    </head>
    <body>
     <input id="input" type="text" value="" /><input id="submit" type="button" value="Add" />
    </body>
    </html>

Patrick 2010-06-01 21:13:49

Answer 6

A:

I've found setting a height and width properties value for the input tag fixes the difference between the browsers.

Arian 2010-10-16 22:29:49

ansaurus

tags:

views:

answers:

CSS Style Firefox/Safari/Chrome

related questions