Question

Hi I have jsut finished a website for a client and tested it on all the latest browser including IE8 and it looks fine in them.I also tested it for diferent resolutions and that looked fine two.

This is the website:

frontpage

What you should look at is the big text and the form witch both should be aligned in the center.My client sent me a photo that shows me that somehow the form extends outside the container.He says it’s from chrome but for me chrome looks good.

This is the markup that I used:

  <section>
          <h1>Build your professional page and connect with people you need to <span> achieve your goals </span></h1>
          <form>
              <label for="name"><span>PAGE NAME</span><input type="text" value="What do you seek?" name="name" id="name"/></label>
              <img src="img/frontpage/and.png" alt="and"/>
              <label for="password"><span>PASSWORD</span><input type="text" value="What do you seek?" name="password" id="password"/></label>
              <input type="submit" value="Create Page" id="press"/>
          </form>
      </section>

And this is the css:

div#frontpage section{
    width:700px;
    margin:0 auto;
    margin-top: 50px;
    margin-bottom: 80px;
}
div#frontpage section h1{
    font-size:48px;
    text-align: center;
    color:#060000;
}

div#frontpage section form{
    margin-top: 65px;
    position:relative;
}
div#frontpage section form label{
    display:inline-block;   
}
div#frontpage section form label span{
    display: block;
    color:#75aed2;
    font-size:11px;
    font-weight: bold;
    margin-bottom: 5px;
}

div#frontpage section form input{
    width:190px;
    padding:8px 5px;
    color:#d5d5d5;
    font-weight: bold;
    border:1px solid #bbbbbb;
    font-size: 13px;
    background-color: white;
}
div#frontpage section form label:first-child{
   margin-right:57px;
}
div#frontpage section form img{
    position:absolute;
    top:20px;
    left:226px;
}
div#frontpage section form input#press{
   margin-left: 40px;
   background-color: #1f70b3;
   border:none;
   color:white;
   cursor: pointer;
   padding: 12px 5px;
}
div#frontpage section form input#press:hover{
    background-color: #2380ce;
}

If there is a problem in my css that extends the form beyond it’s container I can’t find it.But this is what hapens in the version of chrome that my client is using.How can this be fixed?The text and the form box should pe perfectly aligned

EDIT: new image link imagelink

Answer 1

As people here commented, I can’t see the image you submitted since it throws a “Error: Hacker attempted to illegally download bid attachment”.

However, if your customer experiences his issue in IE8 (or an old browser), it might be caused by your use of the <section> tag. If memory serves, IE8 does not support HTML5. Try changing it to a <div> and see if it works.