CSS - Input Sizes Not The Same

http://m-i-x.net/beta

basicly i want the 2 sides heights to be the same as the height of the content...how can i do it?

Hi, I'm new to CSS and am trying to deign a navigation bar for a website. The problem that i face is trying to size the headings a little larger than the sub catagories.
The code is as follows for the style sheet i have tried this:
body{
font-family: Arial,sans-serif;
color: #FFFFFF;
line-height: 1.1;
margin: 0px;
padding: 0px;
}

a{
color: #FFFFFF;
text-decoration: none;
}

a:link{
color: #FFFFFF;
text-decoration: none;
}

a:visited{
color: #FFFFFF;
text-decoration: none;
}

a:hover{
color: #FFFFFF;
text-decoration: underline;
}
b{
color: #FFFFFF;
text-decoration: none;
}
b:link{
color: #FFFFFF;
text-decoration: none;
}

b:visited{
color: #FFFFFF;
text-decoration: none;
}

b:hover{
color: #FFFFFF;
text-decoration: underline;
}
#navBar ul b:link, #navBar ul b:visited {display: block;}
#navBar ul a:link, #navBar ul a:visited {display: block;}

#navBar ul {list-style: none; margin: 0; padding: 0;}

/* hack to fix IE/Win's broken rendering of block-level anchors in lists */
#navBar li {border-bottom: 1px solid #EEE;}

/* fix for browsers that don't need the hack */
html>body #navBar li {border-bottom: none;}




/*********** #sectionLinks styles ***********/

#sectionLinks{
position: relative;
margin: 0px;
padding: 0px;
border-bottom: 1px solid #0033CC;
font-size: 70%;
background-color: #112059;
}

#sectionLinks h3{
padding: 10px 0px 2px 10px;
}

#sectionLinks a {
display: block;
border-top: 1px solid #cccccc;
padding: 2px 0px 2px 10px;

}

#sectionLinks a:hover{
background-color: #0033CC;
}

#sectionLinks2{
position: relative;
margin: 0px;
padding: 0px;
border-bottom: 1px solid #0033CC;
font-size: 130%;
background-color: #112059;
}


#sectionLinks b {
display: block;
border-top: 1px solid #cccccc;
padding: 2px 0px 2px 10px;
/*font-size: 130%;*/
}

#sectionLinks b:hover{
background-color: #0033CC;

}

and i have the following code in the htm page:


<STYLE>
BODY {
scrollbar-arrow-color:094588;
scrollbar-shadow-color:f0f0f0;
scrollbar-face-color:f0f0f0;
scrollbar-highlight-color:094588;
scrollbar-darkshadow-color:094588;
.style1 {font-size: 16px; background-color: #112059;
background-color: #FFFFFF;
}
a:hover {
color: #FFFFFF;
}
.style1 {color: #FFFFFF}
b:hover {
color: #FFFFFF;
}.style1 {color: #FFFFFF}
</STYLE>

<div id="navBar">
<div id="sectionLinks">
<div id="sectionLinks2">

<h3 class="style1">Menu</h3>
<ul>
<li><b href="index.htm">Home</b></li>
<li><b href="product.htm">Products</b></li>
<li><a href="index.htm">Computer Systems</a></li>
<li><a href="products.htm">Components/Peripherals</a></li>
<li><a href="#">Laptops</a></li>
<li><a href="#">Refurbished</a></li>
<li><b href="services.htm">Services</b></li>
<li><a href="#">PC Repairs</a></li>
<li><a href="#">Upgrades</a></li>
<li><a href="#">Home Networking</a></li>
<li><a href="#">In-home training</a></li>
</ul>
</div>
</div>
</div>

However this only allows hyper links to work that are defined under a href not the larger b href as I so want,
I know this is complicated and long winded but can anyone lend some usefull solution to my problem?
Yours greatfully.

I'm trying to write a website at the moment and I want to use <h1>/<h2> etc for the headings. Problem is though, the heading is going in to a blue bar and the font needs to be the right size. And naturally, IE and FF display the font in different sizes

How would I fix this problem so that the font renders the same size?

Could I make a hacked CSS class that only IE can see that I can apply to the <h1> tag to change the font-size to make it the same size as FF displays it as?

This is an old subject, and sore spot with everyone, I know. But I like to do a "check-up" from time to time, to see if there are better ways to do this ....

When implementing a tight design, where I cannot afford much deviation in font size from the original design, I find the differences in browsers/versions/OS to be... well... rediculous.

Some time ago I went about normalizing this by specifying font sizes in CSS with the em specification. i.e. font-family: serif; font-size: 0.6em;

I then have a piece of javascript included in every page that detects the OS, OS version, browser and browser version.... and writes the CSS <LINK REL=stylesheet statement to use a particular CSS file.

I started out with three CSS files: Mac, Windows MSIE7 and Windows MSIE6. Now, expecially with Vista, I'm up to 7 different CSS files in all.

This controls fonts very well. And it's not really that much trouble, since you just create the first CSS as you design, then copy that to the other 6 files, and just make font size adjustments.

HOWEVER - is this sane? Is there a better way? (keep in mind that our designs require tight control.)

Any thoughts much appreciated.

I've recoded my previous version which fixes a span problem, but end up with the rows not being able to use different widths & the image spanning the column width from the first row...

div.bg_tp_lt = row 1 @ 105px
div.bg_ct_lt = row 2 @ 53px
div.bg_bt_lt = row 3 @ 68px

So if you can either see what I'm doing wrong or provide a more reliable method it would be greatly appreciated.

Thanks in advance.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
 	<head>
  		<title>$var</title>
  		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  		<link rel="stylesheet" type="text/css"  href="styles/styles2.css" media="screen" />
 	</head>
 	<body scroll="no">
<div class="table">
  <div class="tbody">
    <div class="tr">
      <div class="td bg_tp_lt"></div>
      <div class="td bg_tp_ct"></div>
      <div class="td bg_tp_rt"></div>
    </div>
    <div class="tr">
      <div class="td bg_ct_lt"></div>
      <div class="td bg_ct_ct"><div class="content">$content</div></div>
      <div class="td bg_ct_rt"></div>
    </div>
    <div class="tr">
      <div class="td bg_bt_lt"></div>
      <div class="td bg_bt_ct"></div>
      <div class="td bg_bt_rt"></div>
    </div>
  </div>
</div>
 	</body>
</html>

Code:

div.table {
  display: table;
  border: 1px solid #DDDDDD;
  padding: 0px;
  width: 404px;
}
div.thead {
  display: table-header-group;
}
div.tbody {
  display: table-row-group;
}
div.tr {
  display: table-row;
}
div.td {
  display: table-cell;
  border: 0px solid #DDDDDD;
  padding: 0px;
}

div.bg_tp_lt {
  width: 105px;
  height: 60px;
  background-image:url(images/stl.jpg); no-repeat;
  background-color: #000000;
}
div.bg_tp_ct {
  width: auto;
  height: 60px;
  background-image: url(images/st.jpg); repeat-x;
  background-color: #000000;
}

div.bg_tp_rt {
  width: 105px;
  height: 60px;
  background-image: url(images/str.jpg); no-repeat;
  background-color: #000000;
}

div.bg_ct_lt {
  width: 53px;
  height: 150px;
  background-image: url(images/sl.jpg); repeat-y;
  background-color: #000000;
}
div.bg_ct_ct {
  width: auto;
  height: auto;
  background-color: #000000;
}

div.bg_ct_rt {
  width: 53px;
  height: 150px;
  background-image: url(images/sr.jpg); repeat-y;
  background-color: #000000;
}

div.bg_bt_lt {
  width: 68px;
  height: 64px;
  background-image:url(images/sbl.jpg); no-repeat;
  background-color: #000000;
}
div.bg_bt_ct {
  width: auto;
  height: 64px;
  background-image: url(images/sb.jpg); repeat-x;
  background-color: #000000;
}

div.bg_bt_rt {
  width: 68px;
  height: 64px;
  background-image: url(images/sbr.jpg); no-repeat;
  background-color: #000000;
}

/* Little hack for IE */
* html div.td { display: inline; }