Looks good in FF, but not in IE...?

Hi to everyone,

I just finished my new design and it's 100% XHTML/CSS validated.

Everything looks good in Firefox, but in Explorer I got some problems with the input.

Can anyone please help me out with this one.

Website: http://www.mustproxy.com
CSS: http://www.mustproxy.com/style.css

Thanks in advance.

 

What's problem with the input?

It looks everything is OK.

 

When looking at the input in Explorer, you will notice that it start 30 pixels from the left. The input doesn't cover the whole box.

 

#input {
   background: #1d1c1c;
   margin: 15px 3px 3px 0px;
   color: #FFF;
   font-size: 24px;
   font-weight: bold;
   border: 0px;
   padding:0 10px;
}

Code (markup):

make padding:0 10px; or padding:0 5px; as it suites you.
hope it helps.

 

Still the same...

 

* {
   margin: 0px;
   padding: 0px;
}

body {
   background: #1d1c1c url(images/bg.png);
   font: 10px Verdana, Arial, Helvetica, sans-serif;
   color: #e7e4e2;
   line-height: 18px;
}

a {
   color: #e7e4e2;
   text-decoration: none;
}

a:hover {
   color: #9c5900;
   text-decoration: none;
}

img {
   border: 0px;
}

h1 {
   font-size: 12px;
   margin: 20px 0px 10px 0px;
}

#container {
   background: #1d1c1c;
   width: 960px;
   height: 100%;
   margin: 0px auto;
   border-left: 1px #9c5900 solid;
   border-right: 1px #9c5900 solid;
}

/*---------- BEGIN OF HEADER & NAVIGATION ----------*/

#header {
   background: url(images/header.png) no-repeat;
   width: 960px;
   height: 139px;
}

#navigation {
   background: url(images/navigation.png) no-repeat;
   width: 960px;
   height: 54px;
   color: #FFF;
   font: bold 14px Verdana, Arial, Helvetica, sans-serif;
}

#navigation ul {
   float: right;
   list-style: none;
   padding-top: 20px;
}

#navigation ul li {
   display: inline;
   padding: 10px;
}

#navigation ul li a:hover {
   color: #1d1c1c;
   text-decoration: none;
}

/*---------- END OF HEADER & NAVIGATION ----------*/
/*---------- BEGIN OF LEFT MENU ----------*/

#left {
   float: left;
   width: 240px;
}

#affiliates {
   float: left;
   background: url(images/affiliates.png) no-repeat;
   width: 212px;
   height: 29px;
   margin: 20px 0px 10px 20px;
}

#affs {
   float: left;
   list-style: none;
   margin-left: 30px;
}

#affs li {
   float: left;
   width: 10em;
}

#affiliates2 {
   float: left;
   background: url(images/affiliates2.png) no-repeat;
   width: 212px;
   height: 29px;
   margin: 20px 0px 10px 20px;
}

#affs2 {
   list-style: none;
   margin-left: 30px;
}

#affs2 li {
   margin: 5px;
}

/*---------- END OF LEFT MENU ----------*/
/*---------- BEGIN OF ADVERTISEMENTS ----------*/

#right {
   float: right;
   width: 230px;
}

#advertisements {
   background: url(images/advertisements.png) no-repeat;
   width: 212px;
   height: 29px;
   margin-top: 20px;
}

#rightads {
   margin: 10px 0px 10px 25px;
}

/*---------- END OF RIGHT ADVERTISEMENTS ----------*/
/*---------- BEGIN OF CONTENT ----------*/

#center {
   float: left;
   width: 470px;
}

#introduction {
   background: url(images/introduction.png) no-repeat;
   width: 356px;
   height: 157px;
   margin: 20px auto;
}

#introduction p {
   padding: 10px;
}

#introduction2 {
   background: url(images/introduction2.png) no-repeat;
   width: 356px;
   height: 55px;
   margin: 20px auto;
}

#introduction2 p {
   padding: 10px;
}

#url {
   background: url(images/url.png) no-repeat 60px;
   width: 332px;
   height: 52px;
}

#input {
   background: transparent;
   margin: 15px 3px 3px 10px;
   color: #FFF;
   font-size: 24px;
   font-weight: bold;
   border: 0px;
}

#submit {
   float: right;
   background: url(images/surf.png) no-repeat;
   width: 82px;
   height: 52px;
   margin: -52px 10px 0px 0px;
   border: 0px;
}


#container #center #url{padding:0 0 0 60px;}

#advanced {
   color: #9c5900;
   margin-left: 100px;
}

#options {
   list-style: none;
   padding: 5px 0px 0px 75px;
}

.checks {
   margin: 5px;
   padding: 3px;
}

#yahoo {
   margin-top: 20px;
   text-align: center;
}

h2 {
   margin-bottom: 5px;
   font-size: 12px;
   font-weight: bold;
}

/*---------- END OF CONTENT ----------*/
/*---------- BEGIN OF CONTACT FORM ----------*/

label {
   float: left;
   display: block;

}

p input,textarea {
   display: block;
   margin: 20px 0px 0px 50px;
   background: #1d1c1c;
   border: 1px #9c5900 solid;
   color: #FFF;
   font: 12px Verdana, Arial, Helvetica, sans-serif;
}

#button {
   margin: 10px 0px 0px 100px;
}

#send,#reset {
   background: #1d1c1c;
   padding: 10px;
   color: #9c5900;
   font-weight: bold;
   border: 1px #9c5900 solid;
}

/*---------- END OF CONTACT FORM ----------*/
/*---------- BEGIN OF FOOTER ----------*/

#footer {
   clear: both;
   background: url(images/footer.png) no-repeat;
   width: 960px;
   height: 26px;
}

#footer p {
   padding-top: 3px;
   text-align: center;
}

/*---------- END OF FOOTER ----------*/

Code (markup):

Try this it should fix out your concerns.

 

Thanks a lot ! That fixed the problem !

Can you please explain what the problem was?

 

I adjusted the left bottom affiliates list, but I came across a problem which occurs only in IE6, in FF, IE7, IE8 everything is fine.

I want a two column list, but somehow IE6 doesn't show this.

 

Well this is a hard one... fixing is easy (and less time consuming) then explaining.

.affs2 {
   float: left;
   width: 80px;
   padding-left: 30px;
   font-size: 12px;
}

Code (markup):

Try this for the left section. It will fix that thing in IE.