Center Box not expanding vertically when content added, header overhang issue in IE6

Hello,

Thank you in advance for any help/advice you can give. I’m a bit of a noob with CSS and I’m having a couple of issues.

  1. The middle content div (between the header and footer) won’t expand with the content that is in it. I’m thinking there might be an issue with the fact that I’m using iFrames to display the content in the middle.

  2. The header and the shadow (that is z-index right below the menu) both shift to the right by 30 pixels or so in IE6. It’s fine in just about every other browser that I’ve checked.

Here’s the test site: http://www.sarsip.com/clients/dg/

I would sincerely appreciate any help you can send my way.

Thanks,
Aaron

Hi,

You can’t really have a fluid height iframe unless you resort to some of complicated scripting. Why are you using iframes anyway for something like that?

Also, the logos that I have z-index positioned on the “Home” page are in the wrong spot when you look at the page on Safari on an iPhone. Any suggestions with that one?

Thanks,
Aaron

The college computers don’t have IE on here so take my educated guesses.

#shadow doesn’t have a left offset set so as a result the browser guesses where to place it. Give it left:0

.slideshow doesn’t have a top offset set, so if vertical placement is an issue for you then set that property. Also, it might need haslayout, no idea since I can’t test. Try giving it zoom:1; for now. Play with these ideas and if nothing works then I’ll try again at home. around 6 hours from now.

Paul,

Thanks for the reply. I want to keep the top bar and navigation from reloading every time you click a link, so what would you suggest?

Thanks,
Aaron

Ryan,

I appreciate the insight. I’ll see how this works for me. I won’t be able to test it either till later this evening.

Thanks again,
Aaron

Hi,

Do what everyone else does and load a new page :slight_smile:

The wait will be negligible once the css and images are cached. You still have to wait for the iframe to re-load and iframes can be slower to load than normal content anyway.

No one makes sites that way because you end up with a one page site that is inaccessible for many reasons - least of all that iframes are deprecated in xhtml strict doctypes.

It’s the same reasons why framesets should be avoided as an iframe is just an inline frame. Your site can’t be crawled properly by search engines and users can’t book mark specific pages etc and you often end up with scrolbars on the window and scrollbars on the iframe.

There may be a case for using them for the odd element but not for your main site content.

Just look around the web - do you see anyone else doing this?

If you wanted to just swap some content panels on a single page then you would be better off with some degradable js or ajax. However for a full site you should construct separate pages like 99% of sites.

Of course you could build the page using includes if that was your worry and you wanted content modular.

Paul,

Thanks for the quick reply. The only reason I don’t want to pull in a new page every time is because the header graphic is a slideshow and I don’t want it to reload back to the first image every time you visit a new page. Any suggestions regarding that issue?

Thanks again,
Aaron

Here are your other issues sorted for IE but your iframe is also corrupt and needs a good revision so I’ve linked to another page to show its working width a fixed height.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
<head>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>| D&amp;G Roof Systems | Fort Worth, TX | Dallas, TX | DFW | Oklahoma City, OK | OKC | Tulsa, OK |</title>
<script src="http://www.sarsip.com/clients/dg/scripts/IE9.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="scripts/dng.css">
<style>
html,body {
    margin:0;
    padding:0;
    height:100%;
    border: 0;
}
body {
    margin: 0;
    padding: 0;
    background: #333333;
}
#container {
    width: 1024px;
    margin-left: auto;
    margin-right: auto;
    position:relative;
}
#framecontentTop {
    margin-left: auto;
    margin-right: auto;
    width: 1024px;
    height: 246px; /*Height of top frame div*/
    overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
    background: black;
    color: white;
}
#framecontentBottom {
    width: 1024px;
    height: 80px; /*Height of bottom frame div*/
    overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
    background: black;
    color: white;
}
#maincontent {
    margin-left: auto;
    margin-right: auto;
    width: 1024px;
    position:relative;
}
#maincontent iframe{overflow-x:hidden;overflow-y:scroll;position:relative}

#shadow {
    position: absolute;
    display:block;
    top: 245px; /*Set top value to HeightOfTopFrameDiv*/
    width:1024px;
    height:17px;
    background:transparent;
    z-index:20;
    left:0;
    overflow:hidden;
}
#bottombar {
    position: absolute;
    width: 100%;
    font: 14px Arial;
    margin-left: 20px;
    padding: 7px 0px;
    color: #FFFF00;
}
.floatright {
    position: absolute;
    display:block;
    bottom: -11px;
    left: 787px;
    background:transparent;
    z-index:10;
}
.mattblacktabs {
    margin-top: 207px;
    width: 100%;
    overflow: hidden;
    border-top: 6px solid #FFFF00; /*bottom horizontal line that runs beneath tabs*/
}
.mattblacktabs ul {
    margin: 0px;
    padding: 0px;
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    font: 16px Arial;
    list-style-type: none;
}
.mattblacktabs li {
    display: inline;
    margin: 0px;
}
.mattblacktabs li a {
    float: left;
    display: inherit;
    text-decoration: none;
    margin: 0px;
    padding: 8px 15px; /*padding inside each tab*/
    color: #FFFF00;
    background: #000000; /*background of tabs (default state)*/
}
.mattblacktabs li a:hover, .mattblacktabs li.selected a {
    background: #FFFF00; /*background of tabs for hover state, plus tab with "selected" class assigned to its LI */
    color: black;
}
.slideshow {
    position: relative;
    margin:0;
    padding:0;
    list-style:none;
}
.slideshow li {
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    width: 1024px;
    height: 207px;
    display: none;
    list-style: none;
}
.slideshow li:first-child {
    display: block;
    left: 0px;
}
</style>
</head>
<body>
<div id="container">
    <div id="framecontentTop">
        <div id="shadow"><img src="http://www.sarsip.com/clients/dg/images/shadow.png" alt="" title=""></div>
        <ul class="slideshow">
            <li><img src="http://www.sarsip.com/clients/dg/images/header.jpg" alt=""></li>
            <li><img src="http://www.sarsip.com/clients/dg/images/header2.jpg" alt=""></li>
            <li><img src="http://www.sarsip.com/clients/dg/images/header3.jpg" alt=""></li>
            <li><img src="http://www.sarsip.com/clients/dg/images/header4.jpg" alt=""></li>
            <li><img src="http://www.sarsip.com/clients/dg/images/header5.jpg" alt=""></li>
            <li><img src="http://www.sarsip.com/clients/dg/images/header6.jpg" alt=""></li>
            <li><img src="http://www.sarsip.com/clients/dg/images/header7.jpg" alt=""></li>
            <li><img src="http://www.sarsip.com/clients/dg/images/header8.jpg" alt=""></li>
            <li><img src="http://www.sarsip.com/clients/dg/images/header9.jpg" alt=""></li>
            <li><img src="http://www.sarsip.com/clients/dg/images/header10.jpg" alt=""></li>
            <li><img src="http://www.sarsip.com/clients/dg/images/header11.jpg" alt=""></li>
            <li><img src="http://www.sarsip.com/clients/dg/images/header12.jpg" alt=""></li>
        </ul>
        <div class="mattblacktabs">
            <ul>
                <li><a href="home.html" target="copyiframe">Home</a></li>
                <li><a href="residential.html" target="copyiframe">Residential</a></li>
                <li><a href="commercial.html" target="copyiframe">Commercial</a></li>
                <li><a href="insurance.html" target="copyiframe">Insurance Claims</a></li>
                <li><a href="gogreen.html" target="copyiframe">Go Green</a></li>
                <li><a href="faqs.html" target="copyiframe">FAQs</a></li>
                <li><a href="contact.html" target="copyiframe">Contact Us</a></li>
                <li><a href="#">Blog</a></li>
            </ul>
        </div>
    </div>
    <div id="maincontent">
        <iframe src="http://www.sitepoint.com/forums/showthread.php?p=4806284&posted=1#post4806284" name="copyiframe" id="copyiframe" width="1024"  frameborder="0" height="500px" scrolling="auto"></iframe>
    </div>
    <div id="framecontentBottom">
        <div id="bottombar"><a target="_BLANK" title="D&amp;G ROOF SYSTEMS LLC BBB Business Review" href="http://www.bbb.org/fort-worth/business-reviews/roofing-contractors/d-g-roof-systems-llc-in-fort-worth-tx-191558166/#bbbonlineclick"><img src="http://ourbbbonline2.bbb.org/fort-worth/BBBOnlineSeal/191558166/H2/1/seal.png" alt=" D & G ROOF SYSTEMS LLC BBB Business Review" border="0" class="floatright"></a><br>
            D&amp;G Roof Systems - 8901 West Freeway, Suite 105, Fort Worth, TX  76116  -  817.696.8800<br>
            ©2011, D&amp;G Roof Systems. All rights reserved.</div>
    </div>
</div>
<script src="http://www.sarsip.com/clients/dg/scripts/jquery.min.js" type="text/javascript"></script>
<script src="http://www.sarsip.com/clients/dg/scripts/jquery.slideshow.js" type="text/javascript"></script>
<script type="text/javascript">
   $(function() {
    $('.slideshow').slideshow({ timeout: 6000, speed: 300 });
   });
  </script>
</body>
</html>

However, I suggest you abandon this approach and use a normal layout and avoid all the issues that you are currently experiencing. The code in the iframe also needs some loving care as it is full of non semantic code like this.


      <p class="centered"><strong>We are members of the following Organizations:</strong><br>
            Roofing Contractors Association of Texas<br>
            North Texas Roofing Contractors Association<br>
            Better Business Bureau - Accredited Business<br>
            <br>


.....
.....      
</div>
<div align="center"><img src="http://www.sarsip.com/clients/dg/images/front_page_filler.png"><br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    this is the bottom of the page </div>


I guess you only put it there for testing but all the same it needs attention.:slight_smile:

You’d need some javascript to create a cookie containing the last image viewed and then insert that into the slideshow.

Some slideshows may already have that function built in but I couldn’t spot any straight away although this link seems to do what you want.

Wouldn’t you be better off showing the images in random order anyway and then it doesn’t matter when you change the page as they will be random (or are the images specifically sequential) .