IE7 issues with floats

HTML & CSS
1

I’ve been looking on the internet and in the forum and will continue to dig for a solution. I have a site that is giving me IE issues. I believe its because of the floats. I have tried to give layout, clear, think i have heights and widths on the needed pieces and tried min / max heights and widths. I can’t seem to see what is pushing my photo out of the header and forcing the menu down in IE7. IE 6 is even worse. Getting 7 figured out would make me sleep.
My guidance is asleep for the night and I would like to figure out the IE problems and then finally install Joomla on the server and deploy the site. Could someone guide me on getting the IE issue to have layout or clear so the photo and menu will place appropriately? I presently think my issue is the haslayout problem not being applied correctly to my issue.

Thanks in advance.

HTML for the page

<div id="container">



	<div id="headerWrapper">
    	<div id="headertop">
        </div><!-- end of headertop -->
        
        <div id="headermid">
            	<div id="headerLogo">
                </div><!-- end of headerLogo -->
                
<div id="slideContainer">
	<div id="content">
		<div id="slider">
			<ul>				
				<li><img src="images/chiroRoomfix.jpg" alt="Chiropractic visit room" /></li>
				
			</ul>
		</div><!-- end of slider -->
	</div><!-- end of content -->
</div><!-- end of slideContainer -->
                
                	
                    <div id="headerMenuWrapper2">
                    
						<jdoc:include type="modules" name="top" />
    				</div><!-- end headerMenuWrapper2"  -->
         </div><!--end of headermid-->
        
        
        
        
        <div id="headerbot">
        </div><!-- end of headerbot-->
        
     </div><!-- end of headerWrapper-->



		
        
        	<div id="contentmid">
            	<div id="contentLeft">
                
                <!--<jdoc:include type="component" />-->
                
                <jdoc:include type="modules" name="left" />
                
            	</div><!-- end contentLeft -->
            
            
            
            <div id="verticalDivider">
                
            </div><!-- end of verticaldivider -->
            
            
            <div id="locationHoursMap">
            
            	<jdoc:include type="modules" name="right" />
            
            </div><!-- locationHoursMap -->
			

            
            <div id="contentRightMap">
<!--<iframe width="200" height="320" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" background-color="216534"src="http://maps.google.com/maps/ms?ie=UTF8&amp;hl=en&amp;msa=0&amp;msid=117812898556740259674.000481cee5100f25b00cc&amp;ll=39.195362,-94.585247&amp;spn=0.002661,0.002146&amp;z=17&amp;output=embed"></iframe><br /><small>View <a href="http://maps.google.com/maps/ms?ie=UTF8&amp;hl=en&amp;msa=0&amp;msid=117812898556740259674.000481cee5100f25b00cc&amp;ll=39.195362,-94.585247&amp;spn=0.002661,0.002146&amp;z=17&amp;source=embed" style="color:#0000FF;text-align:left">ChiroLifeCenter</a> in a larger map</small> -->
<iframe width="200" height="341" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps/ms?ie=UTF8&amp;hl=en&amp;msa=0&amp;msid=117812898556740259674.000481cee5100f25b00cc&amp;ll=39.198471,-94.585247&amp;spn=0.045364,0.034161&amp;z=13&amp;output=embed"></iframe><br /><small>View <a href="http://maps.google.com/maps/ms?ie=UTF8&amp;hl=en&amp;msa=0&amp;msid=117812898556740259674.000481cee5100f25b00cc&amp;ll=39.198471,-94.585247&amp;spn=0.045364,0.034161&amp;z=13&amp;source=embed" style="color:#0000FF;text-align:left" target="_blank">ChiroLifeCenter</a> in a larger map</small>

			</div><!-- end contentRightMap -->

            

                    <div id="horizontalDivider">
                    
                    </div><!-- end of horizontaldivider -->
                    
                    
            
            
                	<div id="patientTestButton">
                           
            			<jdoc:include type="modules" name="rightbottom" />
                		
          
                        
               		</div><!-- end of patientTestButton -->
                
                </div><!-- end of contentmid -->
            			<div class="path"></div>
          <div id="contentBot">
    
          </div><!-- end contentBot -->
</div><!-- end of container  -->

page css

body {
	background-image: url(../images/background.jpg);
	background-repeat: repeat-x;
	margin:0;
	padding:0;
	/*font-family: Veranda, Helvetica, sans-serif;*/
	font-family: Century Gothic;
	font-size: 12px;
	background-color: #04355D;
}

div#container {
    width: 987px;
    margin: 0 auto;
    /*border: 1px solid #000;*/
}

div#headerWrapper {
	margin: 50px 0 0 0;
	width: 987px;
	/*height: 330px;/*trying to add height to fix IE7 float issue*/
	/*height: 400px;*/
    /*margin: 0 auto;*/
	/*float:left; /************collapses the header below the content mid*************/
	/*/*border: 1px solid #000;*/
	/*zoom: 1.0;*/
}

div#headerLogo {
    height: 374px;
	width: 322px;
	float: left;
	margin:-65px 0px 0px 0px;
    /*border-bottom: 1px solid #000;*/
	background-image: url(../images/logo.png);
    background-repeat: no-repeat;
    background-position: 0 0;
	/*border: 2px solid #000;*/
}

/*div#slideshow {
	height: 250px;
	width: 500px;
	float: left;
	margin: -200px 0px 0px 520px;
    /*border-bottom: 1px solid #000;
	background-image: url(../images/slideshow.jpg);
    background-repeat: no-repeat;
    /*background-position: 0 0;*/
/*}*/

div#headertop {
	width: 987px;
    height: 19px;
	margin-top: 10px;
    /*border-bottom: 1px solid #000;*/
	background-image: url(../images/header_top.png);
    background-repeat: repeat-x;
    background-position: 0 0;
}

div#headermid {
	width: 987px;
    height: 270px;
    /*border-bottom: 1px solid #000;*/
	background-image: url(../images/header_repeat.png);
    background-repeat: repeat-y;
    background-position: 0 0;
	clear:both;
}

div#headerbot {
	width: 987px;
    height: 41px;
	background-image: url(../images/header_bottom.png);
    background-repeat: repeat-x;
    background-position: 0 0;
}

div#medicfusionLogo {
	width: 30px;
	height: 30px;
	float:left;
	background-image: url(../images/medicfusion4trans5.png);
	background-repeat:no-repeat;
	border:1px solid #000;
}

div#contentmid {
    width: 987px;
	/*height: 700px;*/
	background-image: url(../images/content_repeat.png);
	background-repeat:repeat-y;
	margin-right: -1px;
	background-position: 0 0;
	/*border: 1px solid #000;*/
}
div#contentWelcome {
	width: 987px;
	height: 700px;
	background-image: url(../images/content_repeat.png);
	background-repeat:repeat-y;
	/*border: 1px solid #000;*/
	background-position: 0 0;
	
}

div#contentLeft {
	width: 350px;
	/*margin: 100px 20px 20px 20px;*/
	margin: 0px auto;
	float: left;
	margin-left: 30px;
	padding: 0px 42px 25px 32px;
	/*border: 1px solid #000;*/
}

div#contentRight {
	width: 410px;
	/*margin: 100px 20px 20px 20px;*/
	margin: 0px auto;
	margin-right: 30px;  
	padding: 0px 25px 25px 25px;
	/*border: 1px solid #000;*/
}

div#locationHoursMap {
	width: 156px;
	float:left;
	margin: 0px auto;
	margin-right: 30px;  
	padding: 0px 25px 25px 25px;
	/*border: 1px solid #000;*/
}

div#patientTestButton {
	width: 400px;
	/*float:left;*/
	margin: 0px auto;
	margin-right: 30px;
	padding: 0px 25px 25px 25px;
	/*border: 1px solid #000;*/
}

/**********************NOT USED MAYBE DELETE*************************/
div#contentRightText {
	width: 180px;
	/*margin: 100px 20px 20px 20px;*/
	margin: 0px auto;
	float: left;
	/*margin-right: 30px;*/  
	/*border: 1px solid #000;*/
}

div#contentRightMap {
	width: 200px;
	height: 341px;
	background-color: #216534;
	/*margin: 100px 20px 20px 20px;*/
	margin: 0px 46px 0 auto;
	padding: 20px 20px 20px 20px;
	/*margin-right: 10px;*/  
	/*border: 1px solid #000;*/
	/****************************************************/
}

div#contentBot {
	width: 987px;
    height: 41px;
	background-image: url(../images/content_bottom.png);
    background-repeat: repeat-x;
    background-position: 0 0;
	/*border: 1px solid #000;*/
}

div#verticalDivider {
	width: 24px;
	height: 527px;
	float: left;
	margin: 100px 0px 0px 5px;
	background-image: url(../images/vertical_divider.png);
	background-repeat:no-repeat;
	/*border: 1px solid #000;*/
}

div#horizontalDivider {
	width: 376px;
	height: 25px;
	float: left;
	margin-left: 55px;
	background-image: url(../images/horizontal_divider.png);
	/*border: 1px solid #000;*/
}

.push {
	clear:both;
}

slider Photo*** css removed the slider for the meantime

/* image replacement */
        .graphic, #prevBtn, #nextBtn{
            margin:0;
            padding:0;
            display:block;
            overflow:hidden;
            text-indent:-8000px;
			/*border: 1px solid #000;*/
            }
    /* // image replacement */
			

	#slideContainer{	
		margin:0 80px 0 470px;
		/*margin:0 auto;*/
		position:relative;
		text-align:left;
		height:230px;
		min-width:447px;
		background:#fff;		
		margin-bottom:2em;
		/*border: 1px solid #000;*/
		}	
			
	/*#content{
		position:relative;
		}			*/

/* Easy Slider */

	#slider{}	
	#slider ul, #slider li{
		margin:0;
		padding:0;
		list-style:none;
		/*border: 1px solid #000;*/
		}
	#slider li{ 
		/* 
			define width and height of list item (slide)
			entire slider area will adjust according to the parameters provided here
		*/ 
		width:447px;
		height:230px;
		overflow:hidden; 
		}	
	#prevBtn, #nextBtn{ 
		display:block;
		width:47px;
		height:76px;
		position:absolute;
		left:-50px;
		top:71px;
		/*border: 1px solid #000;*/
		}	
	#nextBtn{ 
		left:449px;
		}														
	#prevBtn a, #nextBtn a{  
		display:block;
		width:47px;
		height:76px;
		background:url(images/btn_sliderleft.png) no-repeat 0 0;	
		/*border: 1px solid #000;*/
		}	
	#nextBtn a{ 
		background:url(images/btn_sliderright.png) no-repeat 0 0;	
		/*border: 1px solid #000;*/
		}

Attached screenshot:
Untitled-3.jpg
I pieced this screenshot together so it looks more off than it is. Everything lines up correct the photo and menu have just been forced down below the green header overlapping the site content. The green head actually lines up in IE7 and in all other browsers. This is just a sad piece of screenshot…

2

I really can’t tell what you’re doing. You have a list with a single item in it?


<ul>				
<li><img src="images/chiroRoomfix.jpg" alt="Chiropractic visit room" /></li>
</ul>

And you’re pulling it up with some negative top margin… but you want it lower?

I can’t make heads or tails of this, but some info in general:

If you’re floating anything, then that thing already has Layout, so you’re cool there. Float triggers Haslayout.

Floats without widths will wrap more in IE than in other browsers, but you seem to only have an image, so no wrapping differences are possible.

I can’t seem to see what is pushing my photo out of the header and forcing the menu down in IE7.

When I deal with floats, I start giving everyone crazy-ugly background colours, because this really helps me “see” where all the boxes are. Someone might be too big.

Only other thing I can say is, if this were a menu, normally instead of floating the li’s, I float the anchors themselves. So translated to your situation, that would be the image… but I dunno what your scripts are doing here. Is this CSS from a script setup?

Other thing you can do is remove items until you have the basic boxes, to find out which element has the styles that are screwing things up. That’ll help narrow it down.

3

Thanks for the replies. Sorry the late response. I dug into the css more and did notice some heights i had missed on some things, floats setup a little awkwardly and added my borders back in to help placement and movement while fixing. I slimmed down some of my widths slightly that also helped. Once i located a computer with IE7 i embedded firebug and fixed this issues things are good now. Thank you for the suggestions!!!

My code seemed hard to read because there was some jquery used for a slider in the header. I had commented out the jquery and slimmed it down to one image not using the slider effect.

I was working in joomla and was having issues with the installer. I had used a redirect to the test server. Since the issues i got the site correctly transferred by copy all files over to the server and importing the DB and altering the configuration.ini. Now my issue is the search engines have caught the redirect and placed the test address in searches results. I’m working on that now. Once that is done will post a link to the site.

4

Hi,

The slidecontainer is under your header logo because elements with haslayout in IE7 and under don’t slide their margins under the floats and therefore must clear the headerlogo element first resulting in the slide container being moved down the page.

Float the slide container and remove the left margin and then make sure following content is cleared.


    #slideContainer {
   [B] margin:0 80px 0 0;[/B]
    /*margin:0 auto;*/
        position:relative;
    text-align:left;
    height:230px;
    min-width:447px;
    background:red;
    margin-bottom:2em;/*border: 1px solid #000;*/
[B]float:right;[/B]
}
5

You can turn your old redirect to a permanent one (301), which should tell search engines that the new server is now permanently the new home of the site.

One they are they, they should begin indexing the rest of your site’s links.

6

Do you have an online version to play with ?