Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Internet Explorer Images being cut off in IE7

    Ok, so I've been struggling with this problem for some time now, and have read countless forums but I haven't yet found a solution that worked for me. For some reason, images towards the top of the page are being cut off, such as the cloud(1.). Secondly, the input field(2.) and submit button(3.) don't show a background? I've attached an image of what it should look like on top, and the bottom is what appears in IE7.

    The website url is www[dot]letterphotography[dot]net



    Here is the HTML for the cloud image and text, input field, and submit button.
    Code:
    <div class="cloudtext">
    <div class="ctext">
    <center>
    Choose from over 350 timeless
    letter &amp; heart pictures. Utilize our different
    designing options to create a truly unique, 
    and personal namesake.
    </center>
    </div><!--ctext-->
    </div><!--cloudtext-->
    
    <div class="inputbox">
    <form action="create.php" method="post"><input class="name" type="text" name="word" maxlength="11" value="anything at all" onfocus="value=''" /><input class="spellit" type="submit" value="Spell it!" title="spell It!" alt="spell It!" /></form>
    </div><!--inputbox-->
    </div><!--createsection-->
    Here is the CSS of the cloud image, input box, and submit button.
    Code:
    div.cloudtext {
    width:334px;
    height:136px;
    background:url(clouds.png);
    background-repeat: no-repeat;
    display: block;
    float:left;
    margin:-70px 0 0 0;
    }
    
    div.ctext {
    text-align:center;
    width:290px;
    color:#4C331E;
    font-family:droid sans;
    font-size:12px;
    line-height:18px;
    font-weight:700;
    z-index:2;
    margin:41px 0 0 35px
    }
    
    div.inputbox {
    margin: 40px 0 0 0;
    width: 350px;
    height: 70px;
    float:right;
    position: relative;
    left: -160px; top: -24px;
    }
    
    input.name {
    height:30px;
    width:170px;
    background-color: #fff;
    font-size:18px;
    font-weight:700;
    color:#4C331E;
    font-family:Trebuchet MS;
    letter-spacing:1px;
    -webkit-border-bottom-left-radius:7px;
    -webkit-border-top-left-radius:7px;
    -moz-border-radius-bottomleft:7px;
    -moz-border-radius-topleft:7px;
    z-index:2;
    margin:0;
    }
    
    input.spellit {
    vertical-align:middle;
    background:#D4F576;
    border:0px solid #000;
    height:70px;
    width:150px;
    font-family:trebuchet ms;
    font-size:18px;
    color:#4C331E;
    -webkit-border-bottom-right-radius:9px;
    -webkit-border-top-right-radius:9px;
    -moz-border-radius-bottomright:9px;
    -moz-border-radius-topright:9px;
    margin:0 0 0 10px;
    }
    
    input.spellit:hover {
    vertical-align:middle;
    background:#E6F7B6;
    border:0px solid #000;
    height:70px;
    width:150px;
    font-family:trebuchet ms;
    font-size:18px;
    color:#4C331E;
    text-decoration:underline;
    -webkit-border-bottom-right-radius:9px;
    -webkit-border-top-right-radius:9px;
    -moz-border-radius-bottomright:9px;
    -moz-border-radius-topright:9px;
    margin:0 0 0 10px;
    }
    Also, so no one wastes their breath, I do have the html and body set to zero margin and padding.

    Thanks everyone for looking, hopefully I can figure this out sooner than later.

    -Tyler

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    http://brenelz.com/blog/squish-the-i...r-z-index-bug/

    I've actually found this to work

    ---

    you should also try to set a z-index to your header, because it seems as though it is cutting off the content
    Last edited by Sammy12; 07-27-2011 at 09:19 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •