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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
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
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

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
LZ1Commented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.