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&hl=en&msa=0&msid=117812898556740259674.000481cee5100f25b00cc&ll=39.195362,-94.585247&spn=0.002661,0.002146&z=17&output=embed"></iframe><br /><small>View <a href="http://maps.google.com/maps/ms?ie=UTF8&hl=en&msa=0&msid=117812898556740259674.000481cee5100f25b00cc&ll=39.195362,-94.585247&spn=0.002661,0.002146&z=17&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&hl=en&msa=0&msid=117812898556740259674.000481cee5100f25b00cc&ll=39.198471,-94.585247&spn=0.045364,0.034161&z=13&output=embed"></iframe><br /><small>View <a href="http://maps.google.com/maps/ms?ie=UTF8&hl=en&msa=0&msid=117812898556740259674.000481cee5100f25b00cc&ll=39.198471,-94.585247&spn=0.045364,0.034161&z=13&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…