1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Hmm, cant figure this out, someone help please

Discussion in 'Web Design' started by mandude, Aug 10, 2011.

  1. mandude

    mandude Jr. VIP Jr. VIP Premium Member

    Joined:
    Feb 18, 2008
    Messages:
    803
    Likes Received:
    306
    Location:
    Tampa FL
    I cant figure out a company's website why it doesnt render right in Chrome. go to their website:
    http://tampa-seo.org/index3.html

    and notice how the form is below instead of to the right. only in chrome. Works fine in FF.
    anyone have any ideas?

    thank you
     
  2. Baybo.it

    Baybo.it Registered Member

    Joined:
    Aug 9, 2011
    Messages:
    72
    Likes Received:
    39
    Occupation:
    Founder of Baybo.it
    Location:
    San Francisco
    Home Page:
    Inspecting the element in firebug leads me to believe the width of the form is too great, causing it to overflow to out of the block styling. The solution would be to apply a class to the first td in each row to decrease the width. This should fix the problem.

    The code would look something like this:
    Code:
     <!--
     Add the class fixtable to your table
     -->
     <table class="fixtable"> 
     
     </table>
     
     table.fixtable tr td:first-child {
         width: 25px; // or whatever the right width is
     }
     
    The alternative is you could just make the width of the table smaller to fit in the allotted space. Another option is to set a max-width via css

    Cheers
     
  3. mrdexter

    mrdexter Junior Member

    Joined:
    May 20, 2011
    Messages:
    184
    Likes Received:
    63
    Container Div width 970px, Middle Div width 945px + 15px left margin +15px right margin = 975px breaking the container.
     
  4. mandude

    mandude Jr. VIP Jr. VIP Premium Member

    Joined:
    Feb 18, 2008
    Messages:
    803
    Likes Received:
    306
    Location:
    Tampa FL
    There was no sizes declared in the code for the Divs, not sure if i should add a div and size it or what.

    baybo, i dont understand your code at all heh im a noob. Do I put that at the beginning of each line? "first name, last name etc"

    I sized all of the text fields individually but that didnt seem to solve the problem so I guess it is the whole form size that is messed up.
     
  5. saxgod

    saxgod Regular Member

    Joined:
    Sep 19, 2010
    Messages:
    351
    Likes Received:
    340
    Put the last 3 lines between <style> tags inside you head tags.
    Then add the class="fixtable" at every table tag as shown above.
    Gl
     
  6. mrdexter

    mrdexter Junior Member

    Joined:
    May 20, 2011
    Messages:
    184
    Likes Received:
    63
    main.css line 94
    #middle {
    background: url("../img/middle.png") repeat-y scroll 0 0 transparent;
    font-size: 12px;
    padding: 5px 15px 2px;
    text-align: left;
    width: 945px;

    main.css line 29
    #container {
    height: 100%;
    margin: auto;
    text-align: center;
    width: 970px;


    }
     
  7. mandude

    mandude Jr. VIP Jr. VIP Premium Member

    Joined:
    Feb 18, 2008
    Messages:
    803
    Likes Received:
    306
    Location:
    Tampa FL
    Thanks. I tried both things and it still doesnt seem to work.
    Dexter, I found what you were talking about, thanks, but which should I change? i tried changing the 970 to 975 as you said it added up to. Then I just tried changing all 745's to 975s.

    I also just tried the fix table thing, couldnt get that to work either. Thanks for the continual help
     
  8. mandude

    mandude Jr. VIP Jr. VIP Premium Member

    Joined:
    Feb 18, 2008
    Messages:
    803
    Likes Received:
    306
    Location:
    Tampa FL
    This is why I hate coding lol. After trying all of the elaborate tactics, I changed some text and noticed the form move. So int he end, all I had to do was hit the ENTER key below each colomn (about us, services) and it aligned correctly. Just the enter key!