Non-IE Float Issue

I was bug fixing some stylesheet issues with IE6, and I resolved the issue in IE6, but now I have an issue in Firefox, Chrome, Safari, & Opera (go figure!).  The page works properly in IE6-8.

Here is the issue (I'll attach a txt document with my HTML and the styles inline as well) - I have a navigation bar with linked divs within it.  Three of the divs (.CommunityTabNew, .MembersTabNew, .ProvidersTabNew) should appear in the bottom right of the container div topNav, however in non-IE one shows in the correct place, but the other 2 show just to the right and underneath it.  I have removed my images and color coded these -  they should show up in this order on the bottom right with a small amout of unequal space between them: Community (yellow), Members (orange), and Providers (red).  

Oh for a day when we no longer have to do cross browser testing!  Thanks for your assistance, appreciate it!

<style>
.topnav { /*purple bar area with tabs*/
      background-color:#63C;
      height:78px;
      width:800px;
      clear: both;
      z-index:20;      
      overflow:hidden;
}
.purpleBarNav { /*top left of purple bar nav above search */
      width:387px;
      position:relative;
      float:left;
      background-color:#63C;
      }
            .purpleBarNavText {
                  margin: 9px 0px 0px 10px;
                  color:#FFF;      
            }
            .purpleBarNavText a{
                  color:#FFF;
            }
            .purpleBarNavText a:hover{
                  color:#FFF;      text-decoration:underline;
            }
            .purpleBarNavText a:visited{ color: #FFFFFF;  }
          .purpleBarNavText a:active{text-decoration:underline;
                  color: #FFFFFF; }
                  
.FindaHealthcare {
            position: relative;
            float:left;
            left:70px;
            height: 25px;
            width: 144px;
            overflow:hidden;      
            background-color:#CCC;
      }
      .FindaPharmacy {
            position: relative;
            float:left;
            left:88px;
            height: 25px;
            width: 84px;
            overflow:hidden;      
               background-color:#CCC;
      }
      .FindaDrug {
            position: relative;
            float:left;
            left:107px;
            height: 25px;
            width: 57px;
            overflow:hidden;      
            background-color:#CCC;
      }      

      .CommunityTabNew {
            position: relative;
            top:50px;
            float:right;
            right:311px;
            height: 25px;
            width: 99px;
            overflow:hidden;
            background-color:#FF0;
      }
      .MembersTabNew {
            position: relative;
            top:50px;
            float:right;
            right:170px;
            clear:left;
            height: 25px;
            width: 85px;
            overflow:hidden;      
            background-color:#F90;
      }
      .ProvidersTabNew {
            position: relative;
            top:50px;
            float:right;
            clear:left;
            right:68px;
            height: 25px;
            width: 173px;
            overflow:hidden;
            background-color:#F00;
      }
.divLink {
      /*makes entire div a link -  
      put a link tag with href and title
        but no text in the div & the entire
        div is a link */
    position:absolute;
      width:800px;
      height:100%;
      left:-4px;
      top:-5px;
}
.hiddenText {
      /*hide the text off screen*/
   margin:9999px;      
   overflow:hidden;
}
</style>
<div class="topnav topnavGeneric" id="topnav">
    <div class="purpleBarNav" id="purpleBarNav">
      <p class="purpleBarNavText"><a href="../Apps/DocSearch/Default.aspx">Document Search</a></p>
    </div>
    <!-- End purpleBarNav-->
 
 
      <div class="FindaHealthcare" id="FindaHealthcare"><a href="" class="divLink"></a><p class="hiddenText"><a href="">Find a Health Care Provider</a></p>
  </div><!-- End findAHealthCare-->
   
      <div class="FindaPharmacy" id="FindaPharmacy"><a href="" class="divLink"></a><p class="hiddenText"><a href="">Find a Pharmacy</a></p>
  </div><!-- End findAPharmacy-->
   
      <div class="FindaDrug" id="FindaDrug"><a href="" class="divLink"></a><p class="hiddenText"><a href="">Find a Drug</a></p>
  </div><!-- End findADrug-->
     
    <div class="CommunityTabNew" id="CommunityTabNew"><a href="" class="divLink">Community</a><p class="hiddenText"><a href="">Community</a></p>
  </div>  <!--  End CommunityTab-->
   <div class="MembersTabNew" id="MembersTabNew"><a href="" class="divLink">Members</a><p class="hiddenText"><a href="">Members</a></p>
  </div>  <!--  End MembersTab-->

    <div class="ProvidersTabNew" id="ProvidersTabNew"><a href="" class="divLink">Providers</a>
      <p class="hiddenText"><a href="">Providers</a></p>  
  </div> <!-- End ProvidersTab-->
     
</div>
<!-- End topnav -->
jamiemz14Asked:
Who is Participating?
 
LZ1Connect With a Mentor Commented:
How about this?  I hope I understood everything right.
<!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=utf-8" />
<style>
.topnav { /*purple bar area with tabs*/
	background-color:#63C;
	height:78px;
	width:800px;
	clear: both;
	z-index:20;	
	overflow:hidden;
}
.purpleBarNav { /*top left of purple bar nav above search */
	width:387px;
	position:relative;
	float:left;
	background-color:#63C;
	}
		.purpleBarNavText {
			margin: 9px 0px 0px 10px;
			color:#FFF;	
		}
		.purpleBarNavText a{
			color:#FFF;
		}
		.purpleBarNavText a:hover{
			color:#FFF;	text-decoration:underline;
		}
		.purpleBarNavText a:visited{ color: #FFFFFF;  }
	    .purpleBarNavText a:active{text-decoration:underline;
			color: #FFFFFF; }
			
.FindaHealthcare {
		position: relative;
		float:left;
		left:70px;
		height: 25px;
		width: 144px;
		overflow:hidden;	
		background-color:#CCC;
	}
	.FindaPharmacy {
		position: relative;
		float:left;
		left:88px;
		height: 25px;
		width: 84px;
		overflow:hidden;	
   		background-color:#CCC;
	}
	.FindaDrug {
		position: relative;
		float:left;
		left:107px;
		height: 25px;
		width: 57px;
		overflow:hidden;	
		background-color:#CCC;
	}	

	.CommunityTabNew {
	position: relative;
	float:right;
	height: 25px;
	width: 99px;
	overflow:hidden;
	background-color:#FF0;
	clear: left;
	}
#container {
	clear: both;
	float: right;
	width: 100%;
	margin-top: 20px;
}
	.MembersTabNew {
	position: relative;
	float:right;
	clear:left;
	height: 25px;
	width: 85px;
	overflow:hidden;
	background-color:#F90;
	}
	.ProvidersTabNew {
	position: relative;
	float:right;
	clear:left;
	height: 25px;
	width: 173px;
	overflow:hidden;
	background-color:#F00;
	}
.divLink {
	/*makes entire div a link -  
      put a link tag with href and title
	  but no text in the div & the entire 
	  div is a link */
    position:absolute;
	width:800px;
	height:100%;
	left:-4px;
	top:-5px;
}
.hiddenText {
	/*hide the text off screen*/
   margin:9999px;	
   overflow:hidden;
}
</style>
<!--[if lt IE 8]>
<style>
#container {
	clear: both;
	float: left;
    height:75px;
}

	 .CommunityTabNew {
            position: relative;
            float:right;
            height: 25px;
            width: 99px;
            overflow:hidden;
            background-color:#FF0;
      }
      .MembersTabNew {
            position: relative;
            float:right;
            clear:left;
            height: 25px;
            width: 85px;
            overflow:hidden;      
            background-color:#F90;
      }
      .ProvidersTabNew {
            position: relative;
            float:right;
            clear:left;
            height: 25px;
            width: 173px;
            overflow:hidden;
            background-color:#F00;
      }
</style>
<![endif]-->
</head>

<body>
<div class="topnav topnavGeneric" id="topnav">
    <div class="purpleBarNav" id="purpleBarNav">
      <p class="purpleBarNavText"><a href="../Apps/DocSearch/Default.aspx">Document Search</a></p>
    </div>
    <!-- End purpleBarNav-->
 
 
	<div class="FindaHealthcare" id="FindaHealthcare"><a href="" class="divLink"></a><p class="hiddenText"><a href="">Find a Health Care Provider</a></p>
  </div><!-- End findAHealthCare-->
    
	<div class="FindaPharmacy" id="FindaPharmacy"><a href="" class="divLink"></a><p class="hiddenText"><a href="">Find a Pharmacy</a></p>
  </div><!-- End findAPharmacy-->
    
	<div class="FindaDrug" id="FindaDrug"><a href="" class="divLink"></a><p class="hiddenText"><a href="">Find a Drug</a></p>
  </div><!-- End findADrug-->
     <div id="container"> 
    <div class="CommunityTabNew" id="CommunityTabNew"><a href="" class="divLink">Community</a><p class="hiddenText"><a href="">Community</a></p>
  </div>  <!--  End CommunityTab-->
   <div class="MembersTabNew" id="MembersTabNew"><a href="" class="divLink">Members</a><p class="hiddenText"><a href="">Members</a></p>
  </div>  <!--  End MembersTab-->

    <div class="ProvidersTabNew" id="ProvidersTabNew"><a href="" class="divLink">Providers</a>
      <p class="hiddenText"><a href="">Providers</a></p>  
  </div> <!-- End ProvidersTab-->
  </div><!--end container-->
</div> 
<!-- End topnav --> 
</body>
</html>

Open in new window

0
 
jamiemz14Author Commented:
Here is the sample webpage to test - just resave as a .html
FloatIssueTest.txt
0
 
s8webCommented:
It looks the same in Firefox to me.
screenshot.jpg
0
Cloud Class® Course: Microsoft Exchange Server

The MCTS: Microsoft Exchange Server 2010 certification validates your skills in supporting the maintenance and administration of the Exchange servers in an enterprise environment. Learn everything you need to know with this course.

 
jamiemz14Author Commented:
My bad, I had the compatibility button checked in IE8, not a good thing (it's Monday, so I'll cut myself some slack).  This does not work in IE8 either, here is how it views in IE7 & IE8.  Let me know if anyone has any thoughts - I have tried removing the Clear:left & right but that does not seem to help.  Thanks, again!
IE7.gif
0
 
jamiemz14Author Commented:
Sorry for the typo, the above screen shot is for IE7 and IE6.
0
 
remorinaCommented:
Are you using a correct Doctype ?
without a doctype IE8 will default to Quirks mode which will result in what you're seeing, but if you declare a Doctype it will render correctly as it should

Try adding the Doctype as below, the below code worked perfectly in IE8
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<style>
.topnav { /*purple bar area with tabs*/
      background-color:#63C;
      height:78px;
      width:800px;
      clear: both;
      z-index:20;      
      overflow:hidden;
}
.purpleBarNav { /*top left of purple bar nav above search */
      width:387px;
      position:relative;
      float:left;
      background-color:#63C;
      }
            .purpleBarNavText {
                  margin: 9px 0px 0px 10px;
                  color:#FFF;      
            }
            .purpleBarNavText a{
                  color:#FFF;
            }
            .purpleBarNavText a:hover{
                  color:#FFF;      text-decoration:underline;
            }
            .purpleBarNavText a:visited{ color: #FFFFFF;  }
          .purpleBarNavText a:active{text-decoration:underline;
                  color: #FFFFFF; }
                  
.FindaHealthcare {
            position: relative;
            float:left;
            left:70px;
            height: 25px;
            width: 144px;
            overflow:hidden;      
            background-color:#CCC;
      }
      .FindaPharmacy {
            position: relative;
            float:left;
            left:88px;
            height: 25px;
            width: 84px;
            overflow:hidden;      
               background-color:#CCC;
      }
      .FindaDrug {
            position: relative;
            float:left;
            left:107px;
            height: 25px;
            width: 57px;
            overflow:hidden;      
            background-color:#CCC;
      }      

      .CommunityTabNew {
            position: relative;
            top:50px;
            float:right;
            right:311px;
            height: 25px;
            width: 99px;
            overflow:hidden;
            background-color:#FF0;
      }
      .MembersTabNew {
            position: relative;
            top:50px;
            float:right;
            right:170px;
            clear:left;
            height: 25px;
            width: 85px;
            overflow:hidden;      
            background-color:#F90;
      }
      .ProvidersTabNew {
            position: relative;
            top:50px;
            float:right;
            clear:left;
            right:68px;
            height: 25px;
            width: 173px;
            overflow:hidden;
            background-color:#F00;
      }
.divLink {
      /*makes entire div a link -  
      put a link tag with href and title
        but no text in the div & the entire
        div is a link */
    position:absolute;
      width:800px;
      height:100%;
      left:-4px;
      top:-5px;
}
.hiddenText {
      /*hide the text off screen*/
   margin:9999px;      
   overflow:hidden;
}
</style>
</head>
<body>
<div class="topnav topnavGeneric" id="topnav">
    <div class="purpleBarNav" id="purpleBarNav">
      <p class="purpleBarNavText"><a href="../Apps/DocSearch/Default.aspx">Document Search</a></p>
    </div>
    <!-- End purpleBarNav-->
 
 
      <div class="FindaHealthcare" id="FindaHealthcare"><a href="" class="divLink"></a><p class="hiddenText"><a href="">Find a Health Care Provider</a></p>
  </div><!-- End findAHealthCare-->
   
      <div class="FindaPharmacy" id="FindaPharmacy"><a href="" class="divLink"></a><p class="hiddenText"><a href="">Find a Pharmacy</a></p>
  </div><!-- End findAPharmacy-->
   
      <div class="FindaDrug" id="FindaDrug"><a href="" class="divLink"></a><p class="hiddenText"><a href="">Find a Drug</a></p>
  </div><!-- End findADrug-->
     
    <div class="CommunityTabNew" id="CommunityTabNew"><a href="" class="divLink">Community</a><p class="hiddenText"><a href="">Community</a></p>
  </div>  <!--  End CommunityTab-->
   <div class="MembersTabNew" id="MembersTabNew"><a href="" class="divLink">Members</a><p class="hiddenText"><a href="">Members</a></p>
  </div>  <!--  End MembersTab-->

    <div class="ProvidersTabNew" id="ProvidersTabNew"><a href="" class="divLink">Providers</a>
      <p class="hiddenText"><a href="">Providers</a></p>  
  </div> <!-- End ProvidersTab-->
     
</div>
<!-- End topnav --> 
</body>
</html>

Open in new window

0
 
jamiemz14Author Commented:
I am using a doctype - in the txt file I'm using:
<!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">
But I saw you used the strict doctype, so I copied your code - it does not display properly in IE8 (with compatibility mode off) or any of the other browsers (chrome, firefox, safari, or opera).   Thanks for the suggestion, though!
0
 
jamiemz14Author Commented:
WoW- You are amazing - nicely done!  Thank you so much, this works perfectly. Adding the extra #container div and removing the TOP and RIGHT from the tabs, is a great thought.  I also see the IE8 only code that I'll add in.  Perfect timing too, I was just about to scrap my CSS and start again.  Thank you so much - these points are well deserved!
0
 
LZ1Commented:
Glad to be of service
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.