Forums

Adman

Hey all! I'm pretty new to HTML programming and working with a volunteer company to gain some experience. They wanted their side bar to have the fieldset type look so the only thing I could think of doing is make a fieldset. I didn't want to use an image because that would take longer to load. My problem I'm having is I have 5 fieldset's that group text, however in IE the fieldset's do not align properly and some of the text falls out and is put in the center of the page. Can someone look at my code and see what's wrong here? The side bar looks perfect in Safari, Chrome and Firefox.

I have no problem of using div and using a border but the legend/header needs to be on the line. I have tried to format the header on the line but it won't.

Thank you for your help!!

Link to see it in action. Web site

HTML


<div id="sidebar_beta">
	<fieldset class="sidefield">
     <legend class="sideheader">
        About Us:
     </legend>
      <div class="sidetext">	
      <a href="about.php">Company History</a>
      </div>
	  <div class="sidetext">	
      <a href="products.php">Company Products</a>
      </div>
      <div class="sidetext">
      <a href="ethics.php">Code of Ethics</a>
      </div
      <div class="sidetext">
      <a href="newsletter.php">Company Newsletter</a>
      </div>
      <div class="sidetext">
      <a href="employment.php">Employment Opportunities</a>
      </div>
      <div class="sidetext">
      <a href="fundraising.php">Fundraising Opportunities</a>
      </div>
      <div class="sidetext">      
      <a href="faq.php">FAQ</a>
      </div>	
      </fieldset>
	 
      
      <fieldset class="sidefield">
       <legend class="sideheader">
        Products:
      </legend>
      <div class="sidetext">	 
      <a href="soap_index.php">Organic Soap</a>
      </div>
	  <div class="sidetext">	
      <a href="essential_oils.php">Essential Oils</a>
      </div>
	  <div class="sidetext">	
      <a href="incense.php">Aromatherapy Incense</a>      
      </div>
	  <div class="sidetext">	
      <a href="incenseholders.php">Incense Holders</a>
      </div>
	  <div class="sidetext">	
      <a href="lotions.php">Organic Lotions</a>
      </div>
	  <div class="sidetext">	
      <a href="supplies.php">Spa Supplies</a>
      </div>
	  <div class="sidetext">	
      <a href="home_accents.php">Home Accents</a>
      </div>
      </fieldset>
      
      <fieldset class="sidefield">
      <legend class="sideheader">      
	   Services:
      </legend>
      <div class="sidetext">
      <a href="how_its_made.php">How It's Made</a>
      </div>
      <div class="sidetext">
      <a href="private_labels.php">Private Labels</a>
      </div>
      <div class="sidetext">
      <a href="custom_soaps.php">Custom Soap</a>
      </div>
	  <div class="sidetext">
      <a href="personal_gifts.php">Personal Gifts</a>
      </div>
	  <div class="sidetext">
      <a href="ready_to_ship.php">Ready to Ship Soap</a>
      </div>
	  <div class="sidetext">
      <a href="drop_ship.php">Drop Shipping</a>
      </div>
	  <div class="sidetext">
      <a href="order.php">Manual Order Form</a>
      </div>
	  </fieldset>
	   
      <fieldset class="sidefield">
      <legend class="sideheader"> 
      Organic Business:     
      </legend>
      <div class="sidetext">
      <a href="welcome_letter.php">Welcome Letter</a>
      </div>
	  <div class="sidetext">
      <a href="product_introduction.php">Distrbution Introduction</a>
      </div>
	  <div class="sidetext">
      <a href="distribution_agreement.php">Distribution Agreement</a>
      </div>
	  <div class="sidetext">
      <a href="distribution_tools.php">Distribution Tools</a>
      </div>
	  <div class="sidetext">
      <a href="distribution_network.php">Distribution Network</a>
      </div>
      </fieldset>
      
      <fieldset class="sidefield">      
      <legend class="sideheader">
        Join Us:
      </legend>
      <div class="sidetext1">
      <a href="http://www.alibaba.com/member/uk110518897.html&quot; target="_blank"><img src="images/alibaba.jpg" alt="Alibaba" width="16" height="16">&nbsp;&nbsp;Alibaba</a>
      </div>
	  <div class="sidetext1">
      <a href="http://www.facebook.com/group.php?gid=97153957926&amp;ref=ts&quot; target="_blank"><img src="images/Facebook Tiny.gif" alt="Facebook" width="16" height="16">&nbsp;&nbsp;Facebook</a>
      </div>
	  <div class="sidetext1">
      <a href="http://www.myspace.com/majesticaromasltd&quot; target="_blank"><img src="images/myspace.jpg" alt="MySpace" width="16" height="16">&nbsp;&nbsp;Myspace</a>
      </div>
	  <div class="sidetext1">
      <a href="http://twitter.com/MajesticAromas&quot; target="_blank"><img src="images/Twitter tiny.gif" alt="Twitter" width="16" height="16">&nbsp;&nbsp;Twitter</a>
      </div>
	  <div class="sidetext1">
      <a href="http://mindbodyspirit.ning.com/&quot; target="_blank"><img src="images/ning.jpg" alt="Ning" width="16" height="16">&nbsp;&nbsp;Ning</a>
      </div>
	  <div class="sidetext1">
      <a href="http://www.meetup.com/members/12153128/"><img src="images/meetup.jpg" alt="Meetup" width="16" height="16">&nbsp;&nbsp;Meetup</a>
      </div>
     </fieldset>
</div>

CSS


#sidebar_beta
{
	float: left;
	padding-right: 0;
	padding-left: 0;
	padding-bottom: 1em;
	padding-top: 3em;
	margin-left: 2em;
	
}

.sideheader {
	font-size: 15px; 
	color: #006600; 
	font-weight: bold; 
	text-align: center;
}

.sidetext {
	text-align: center;
}

.sidetext1 {
	padding-left: 2em;
}


.sidetext a {
	line-height: 2em;
	font-weight: normal;
}

.sidetext1 a {
	line-height: 2em;
	font-weight: normal;
}

.sidetext a:hover {
	background: #589c0d;
	color: white;
	padding: 5px 5px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}


.sidefield {
	background-color: #f5f5f5; 
	border: 1px solid #ccc; 
	-webkit-border-radius: 8px; 
	-moz-border-radius: 8px; 
	margin-bottom: 2em;
	padding: 1em 0 1em 0;
	 -moz-box-shadow: 5px 5px 5px #ccc;
  	-webkit-box-shadow: 5px 5px 5px #ccc;
  	box-shadow: 5px 5px 5px #ccc;
  	width: 14em;
  	clear: both;
}

IE CSS


.sidefield {
	background-color: #f5f5f5; 
	border: 1px solid #ccc; 
  	width: 100%;
  	position: relative;
  	clear: both;
}

.sideheader {
	font-size: 15px; 
	color: #006600;
	top: -.5em; 
	font-weight: bold; 
	text-align: center;
	position: absolute;
}

Adman

Found out what I was doing wrong, I for whatever reason put a div between each link. So I got rid of all but 5 of them around the links and everything worked out.

seeingsound

Whats the curse of Opera? :/

Adman

me being a newb at programming haha.

treehouse : what would you like to learn today?

Forums

[Solved] Fieldset, Legends and the curse of Opera and IE