SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict Manna's Avatar
    Join Date
    Apr 2006
    Location
    Vancouver, WA
    Posts
    340
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE7 shows margins differently

    In my "center" div the left margin does not exist. In FF the center div has a 3emleft margin. Why would they be different?

    temp link
    http://www.premiumwebsites.net/samples/shi/index.html

    Thanks for your help
    Dotty

  2. #2
    SitePoint Addict Manna's Avatar
    Join Date
    Apr 2006
    Location
    Vancouver, WA
    Posts
    340
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    2nd posting - first time did not post. (incase it "appears" later)
    I fixed the problem in IE7 with overflow:hidden - however this did not fix the issue in IE6.
    Any suggestions?

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You need to force "haslayout" on #inside and also apply position:relative to the #wrapper to stop the telephone number from being placed relative to the viewport and not its current container.

    Code:
    #wrapper{position:relative}
    * html #inside{height:1%}

  4. #4
    SitePoint Addict Manna's Avatar
    Join Date
    Apr 2006
    Location
    Vancouver, WA
    Posts
    340
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul
    That did work - but there seems to be other issues now on IE6. Is there a really great explanation I can read about this? Now the registration form is out of place and for some reason the photos on the right side are cropped strange, It is like the whole photo does not show, and there is too much padding on the right col. This is not a problem with FF or IE7.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The problem is that you are sticking those rightcol images inside a container that is too small and then trying to drag then back into position with a negative margin.

    Put the images in a container of their own (outside of their current context) that doesn't have padding and is full width and they will sit there nicely as expected..

    Something like this:

    Code:
    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Superior Home Inspections: Home Inspector for Vancouver WA</title>
    <meta name="keywords" content="For sale by owner, inspection, Inspector Vancouver, Home Inspection, Vancouver Home Inspector, Home Inspector Vancouver, Radon Testing, WA Home Inspector, Clark County Home Inspector, Cowlitz County Home Inspector, Inspector Battle Ground, Inspector Brush Prairie, Inspector Camas, Inspector La Center, Inspector Ridgefield, Inspector Washougal, Inspector Woodland, Inspector Yacolt, Superior Help, Superior Inspectors, Superior Availability, Superior Service, Superior Peace of Mind, " />
    <meta name="description" content="Superior Home Inspection:  Provides inspection services for residential properties.   Provides inspection services for commercial properties.   Our residential services include: Home Inspections for home buyers,  Home inspections for sellers (pre-sale Inspection),  One Year Warranty New Construction Inspection,  Customer consultation and additional services include environmental testing for Lead, Radon Gas, and Mold. Superior Home Inspection Founded In 2004 by Troy and Cathy Walton.  Our mission is and will be to perform a value perceived inspection for our clients.  Our customers will receive the service that they would expect and nothing less.   We strive to offer our clients solutions and answers to provide peace of mine during a real estate transaction.  We do this by helping our clients understand the issues and take the time to educate an inform them of the issues that are found during the inspection. " />
    <meta name="rating" content="General" />
    <meta name="language" content="english" />
    <meta name="distribution" content="Global" />
    <meta name="robots" content="index,follow" />
    <meta name="copyright" content="&copy; 2008 SuperiorHome Inspections, Troy Walton"/>
    <link rel="stylesheet" href="styles/shi.css" title="Site Specific Stylesheet" />
    <style>
    * {
    margin:0;
    padding:0;
    }
    body{
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    background-color:#614B38;
    width:100&#37;;
    }
    #wrapper{
    position:relative;
    min-width: 775px;
        max-width: 1150px;
        margin: auto;
        width:expression(document.body.clientWidth < 777? "775px" : document.body.clientWidth > 1152? "1150px" : "auto");
    overflow:hidden;
    
    }
    * html #inside{height:1%}
    #wrapper #inside {
            margin: 0 3em 0 3em;
        }
    #header{
    background-color:#C8C1AF;
    border-bottom:#000 solid 5px;
    height:128px;
    }
    #header p{
    position:absolute;
    left:3em;
    top:1.5em;
    font-weight:bold;
    font-size:1.5em;
    }
    .phone{
    position:absolute;
    left:3em;
    top:3em;
    font-size:2em;
    font-weight:bold;
    }
    #nav { 
    width:100%;
    height: 30px;
    line-height:30px;
    background-image:url(http://www.premiumwebsites.net/samples/shi/images/bgnav.jpg);
    background-repeat:repeat-x;
    background-color:#832D30;
    border-bottom:#000 solid 5px;
     }
     #nav ul{
     text-align:center;
     }
    #nav ul li{
    display: inline;
    }
    #nav a{
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    font-weight:bold;
    padding-left:.5em;
    color:#fff;
    text-align:center;
    text-decoration:none;
    }
    #nav a:hover{
    color:#E2BC51;
    }
    #customer{
    clear:both;
    float:left;
    height:150px;
    width:60%;
    background-image:url(http://www.premiumwebsites.net/samples/shi/images/bgcustomerservice.jpg);
    background-repeat:no-repeat;
    background-color:#FFFFFF;
    }
    #center #customer p{
    text-align:left;
    margin-left:40%;
    padding-top:.4em;
    }
    #center #customer h1{
    font-size:1em;
    font-weight:bold;
    color:#832D30;
    text-align:center;
    padding-right:1em;
    padding-top:.3em;
    margin-left:40%;
    }
    #rightcol{
    float:right;
    width:298px;
    height:auto;
    background-color:#cccccc;
    }
    #rightcol h2{
    font-size:1em;
    font-weight:bold;
    color:#832D30;
    text-align:center;
    padding-right:1em;
    padding-top:.3em;
    }
    #rightcol p{
    padding-left:1em;
    }
    #rightcol img{
    }
    #center { 
    background-color:#FFFFFF;
    overflow:hidden;
    width:100%;
    }
    #center h1{
    color:#832D30;
    text-align:center;
    font-size:1.8em;
    }
    h3{
    color:#832D30;
    text-align:center;
    font-size:1.8em;
    }
    
    #center ul{
    margin-left:4em;
    }
    .lineheight{
    margin-left:2em;
    padding:.5em;
    line-height:1.3em;
    }
    #footer { 
    clear:both;
    background-color:#D7DDE3;
    width:100%;
    border-top:#000 solid 5px;
    padding-bottom:20px;
     }
     #footer ul{
     margin:auto;
     padding-left:25px;
     text-align:center;
     }
    #footer ul li{
    display:inline;
    text-align:center;
    }
    #footer a{
    font-family:Arial, Helvetica, sans-serif;
    font-weight:bold;
    color:#000000;
    text-align:center;
    }
    #footer p{
    font-size:.8em;
    padding-left:25px;
    }
    .right{
    float:right;
    text-align:center;
    margin-top:-12px;
    }
    .left{
    float:left;
    padding:10px;
    border:none;
    }
    .center{
    text-align:center;
    margin:auto;
    border:none;
    
    }
    .spacer{
    height:20px;
    }
    .form{
    width:70%;
    margin:auto;
    background-color:#CCCCCC;
    margin-top:1.3em;
    }
    .fieldset {
    display:block;
    border:1px solid #000;
    padding: .5em 0 0.5em 0.5em;
    position: relative;
    margin:auto;
    }
    fieldset {
    border:none;
    margin:auto;
    }
    label {
    display:block;
    }
    .submit {
    text-align:center;
    }
    
    #rightcol ul.images{
        margin:0;
        padding:0;
        list-style:none;
    }
    
    
    </style>
    </head>
    <body>
    <div id="wrapper">
        <div id="inside">
            <div id="header">
                <p>Call us any day, anytime<br />
                    to schedule an Inspection!</p>
                <h3 class="phone">(360) 571-4142</h3>
                <img src="http://www.premiumwebsites.net/samples/shi/images/header.jpg" alt="Home Inspector Vancouver WA" title="Home Inspector Vancouver WA" width="720px" height="128px" /> </div>
            <div id="nav">
                <ul>
                    <li><a href="http://www.a-shi.com" title="Superior Home Inspection Home Page">SHI Home</a></li>
                    <li><a href="inspect.shtml" title="What Superior Home Inspections Inspects">What We Inspect</a></li>
                    <li><a href="options.shtml" title="Options for Home Inspections">Inspection Options</a></li>
                    <li><a href="cred.shtml" title="Superior Home Inspections Credentials">Credentials</a></li>
                    <li><a href="resource.shtml" title="Resources for Home Owners">Resource Center</a></li>
                    <li><a href="test.shtml" title="Superior Home Inspection Testimonials">Testimonials</a></li>
                    <li><a href="referal.shtml" title="Trusted Businesses by Superior Home Inspections">Referal Resources</a></li>
                    <li><a href="about.shtml" title="Superior Home Inspections About Page">About</a></li>
                    <li><a href="contact.shtml" title="Contact Superior Home Inspections">Contact</a></li>
                </ul>
            </div>
            <div id="center">
                <div id="customer">
                    <h1>Customer Service is what sets <br />
                        <em>Superior Home Inspection</em> apart</h1>
                    <p>We take our time to ensure a complete and accurate home inspection and report. We believe you deserve to be in the best position possible when making a home purchase. We desire your satisfaction, this is our commitment to you. We guarantee it. Superior Home Inspection is not just our name it's our promise. Give us a try.</p>
                </div>
                <div id="rightcol">
                    <h2>Good to be Home E-Magazine</h2>
                    <p>Register for Superior Home Inspection's E-Magazine to stay up-to-date with the latest home inspection news, changes and updates that affect you and your home.</p>
                    <div class="form">
                        <form method="post" action="http://www.a-shi.com/newsletter.php" >
                            <input type="hidden" name="env_report" value="REMOTE_HOST,REMOTE_ADDR,HTTP_USER_AGENT,AUTH_TYPE,REMOTE_USER"/>
                            <input type="hidden" name="recipients" value="inspectortroyZN9B3comcast.net" />
                            <input type="hidden" name="required" value="email:Your email address" />
                            <input type="hidden" name="subject" value="Register for Newsletter" />
                            <input type="hidden" name="good_url"    value="http://www.a-shi.com/thanks.shtml" />
                            <input type="hidden" name="bad_url"    value="http://www.a-shi.com/tryagain.shtml" />
                            <div class="fieldset">
                                <fieldset>
                                <label>Name</label>
                                <input  class="text" type="text" name="name"/>
                                <label>Email Address:**</label>
                                <input  class="text" type="text" name="email"/>
                                </fieldset>
                            </div>
                            <div class="fieldset">
                                <fieldset class="submit">
                                <input class="submit" type="submit"
    value="Register" />
                                </fieldset>
                            </div>
                        </form>
                    </div>
                    <ul class="images">
                        <li><img src="http://www.premiumwebsites.net/samples/shi/images/cmi.jpg" alt="Certified Master Inspector: Inspector Troy" title="Certified Master Inspector: Inspector Troy" width="298px" height="190px" /></li>
                        <li><img src="http://www.premiumwebsites.net/samples/shi/images/tour.jpg" alt="What's in a Superior Home Inspection" title="What's in a Superior Home Inspection" width="298px" height="190px"/></li>
                        <li><img src="http://www.premiumwebsites.net/samples/shi/images/reports.jpg" alt="Home Inspection Reports" title="Home Inspection Reports" width="298px" height="79px" /></li>
                    </ul>
                </div>
                <h1>Vancouver's Superior Home Inspection</h1>
                <p class="lineheight">Superior Home Inspection's exceed national standards.  Complete home inspections include:</p>
                <ul class="lineheight">
                    <li>Computer Generated Reports with Photos</li>
                    <li>Free First Re-Inspection</li>
                    <li>Fast, Friendly Service</li>
                    <li>Buyer Inspection</li>
                    <li>Pre-Sale Inspection and Consultation</li>
                    <li>Consultation</li>
                    <li>One Point Inspection</li>
                </ul>
                <h3 class="homepage"><em>Our Personal Touch</em></h3>
                <p class="lineheight">We personally handle every step of the <strong>inspection process</strong> and our clients are our number one concern. You are encouraged to attend the inspection and ask any relevant questions or air any concerns regarding the home while we inspect it for you. We will help you, by stopping and carefully explaining your options for improvement or repair. We believe that an inspection is always in the details. We provide you with as little or as much detail as you need for <strong>peace of mind during your inspection</strong>. You will also recieve a fully <a href="report.pdf" title="Computer Generated Report with photos by Superior Home Inspection" target="_blank">detailed report</a> with photos via the internet within 24 hours of the inspection. As an added bonus we also remain available by telephone to help you in any way or with any questions that may arise after the inspection as well as in the future. We also provide you a <strong>FREE repair work evaluation</strong> prior to closing. Until you have tried our services you have not had a <strong>Superior Home Inspection</strong>.</p>
                <p class="lineheight">To find out more about what is in a Superior Home Inspection,<a href="whats.shtml" title="What's in a Superior Home Inspection"> click here for our interactive demo</a>.</p>
                <div id="footer">
                    <ul>
                        <li><a href="http://www.a-shi.com" title="Superior Home Inspector Home Page">SHI Home</a></li>
                        <li><a href="inspect.shtml" title="What Superior Home Inspector Inspects">What We Inspect</a></li>
                        <li><a href="options.shtml" title="Options for Home Inspections">Inspection Options</a></li>
                        <li><a href="cred.shtml" title="Superior Home Inspections Credentials">Credentials</a></li>
                        <li><a href="resource.shtml" title="Resources for Home Owners">Resource Center</a></li>
                        <li><a href="test.shtml" title="Superior Home Inspection Testimonials">Testimonials</a></li>
                        <li><a href="referal.shtml" title="Trusted Businesses by Superior Home Inspections">Referal Resources</a></li>
                        <li><a href="about.shtml" title="Superior Home Inspections About Page">About</a></li>
                        <li><a href="contact.shtml" title="Contact Superior Home Inspections">Contact</a></li>
                    </ul>
                    <p><a href="http://www.premiumwebsites.net" title="Vancouver Website Design and Maintenance" target="_blank">Website design and maintenance by Premium Websites</a>. &copy;2008 Superior Home Inspection <img src="http://www.premiumwebsites.net/samples/shi/images/mcvisa.gif" alt="Superior Home Inspection accepts Mastercard and Visa" title="Superior Home Inspection accepts Mastercard and Visa" width="80px" height="32px" class="right" /> <a href="links.shtml" title="Links of other businesses">Links</a></p>
                </div>
            </div>
        </div>
    </div>
    </body>
    </html>

    Also read the FAQ on "haslayout" and the entry in the reference here as it relates to your first problem and possibly problems that will arise later where you have used divs as wrappers for complicated content and have not specified a dimension or haslayout trigger (such as #center)

  6. #6
    SitePoint Addict Manna's Avatar
    Join Date
    Apr 2006
    Location
    Vancouver, WA
    Posts
    340
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul - Class is in session again!


Bookmarks

Posting Permissions

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