CSS - Css Float Not Behaving Correct In Ie

My link hover style isn't happening consistently in either browser. It seems to work better in FF than in IE7. Does anyone have a clue as to what I could look at to see what is causing this?

All my navbar links behave just fine...

URL removed

Thanks!

I've used the 3 column layout from http://bluerobot.com/web/layouts/layout3.html to create this page

http://www.quiznightatthefrog.co.uk/teams.php

The rest of the site is OK in IE but on this page the middle column stretches over to the right when there is a lot of content in the middle column. When I remove the middle column content it works ok.

The problem does not appear in Opera6 or Netscape7 but they make the right column move down under the left column. sigh.

Any suggestions please??

oops, here's the code

body {
scrollbar-base-color : #339900;
scrollbar-track-color : #009900;
scrollbar-arrow-color : honeydew;
background: honeydew url(images/lily_pad.gif) no-repeat bottom right;
color:#333;
background-color:honeydew;
margin:20px;
padding:0px;
font:11px verdana, arial, helvetica, sans-serif;

}
h1 {
margin:0px 0px 15px 0px;
padding:0px;
font-size:15pt;
font-weight:900;
font-family: verdana;
color:#006600;
}
h2 {
font:bold 12px/14px arial, helvetica, sans-serif;
margin:0px 0px 0px 0px;
padding:0px;
}

.teams {
font:bold 12px arial, helvetica, sans-serif;
color: #003300;
line-height:20pt;
}
p {
font:11px/20px verdana, arial, helvetica, sans-serif;
margin:0px 0px 16px 0px;
padding:0px;
}
.Content>p {margin:30px;}
.Content>p+p {text-indent:30px;}

a {
color:#09c;
font-size:11px;
font-family:verdana, arial, helvetica, sans-serif;
font-weight:600;
text-decoration:none;
}
a:link {color:#006600;}
a:visited {color:#006600;}
a:hover {background-color:#c0c0c0;}


/* All the content boxes belong to the content class. */
.content {
position:relative; /* Position is declared "relative" to gain control of stacking order (z-index). */
width:auto;
min-width:130px;
margin:0px 190px 20px 190px;
border:3px solid #003300;
background-color:white;
padding:10px 10px 10px 10px;
z-index:1; /* This allows the content to overlap the right menu in narrow windows in good browsers. */
}

#navAlpha {
position:absolute;
width:150px;
height:500px;
top:20px;
left:20px;
border:2px solid #003300;
background-color:honeydew;
padding:10px;
z-index:2;

/* Here is the ugly brilliant hack that protects IE5/Win from its own stupidity.
Thanks to Tantek Celik for the hack and to Eric Costello for publicizing it.
IE5/Win incorrectly parses the "\"}"" value, prematurely closing the style
declaration. The incorrect IE5/Win value is above, while the correct value is
below. See http://glish.com/css/hacks.asp for details. */
voice-family: "\"}\"";
voice-family:inherit;
width:150px;
}
/* I've heard this called the "be nice to Opera 5" rule. Basically, it feeds correct
length values to user agents that exhibit the parsing error exploited above yet get
the CSS box model right and understand the CSS2 parent-child selector. ALWAYS include
a "be nice to Opera 5" rule every time you use the Tantek Celik hack (above). */
body>#navAlpha {width:150px;}

#navBeta {
position:absolute;
width:170px;
top:20px;
height:300px;
right:10px;
bottom:0px;
border:2px solid;
padding:30px 10px 10px 10px;
z-index:3;
/* Again, the ugly brilliant hack. */
voice-family: "\"}\"";
voice-family:inherit;
width:168px;
}
/* Again, "be nice to Opera 5". */
body>#navBeta {width:168px;}

Alright, so in the site I am designing, I have underline images (lines that are a bit longer then a typical underline). I am placing them directly under the text they are related to. All of the placement of text and the images is done using absolute positioning in CSS (this is done inside a div tag that is positioned relatively, so absolute positioning works properly). Anyways, this is the problem I am having, the underline image looks great in Firefox, and then in IE it is about 10px or so lower then it should be and it doesn't look near as good, so I was wondering if there is some problem in my code that I should correct. Anyways, here are some images to help describe the problem and the code that relates to this.

This is what I want:


This is what I get in IE


This is the HTML for the placement
Code:

<div id = "news">
        <div id = "title">
	        <span class = "title">Latest News</span>
	</div>
	<div id = "news_underline">
		<img src = "/testing/inertia/news_underline.JPG" alt = "Latest News" />
	</div>
</div>

This is the CSS for "news"
Code:

#news
{
	position: absolute;
	top: 5px;
	left: 415px;
	width: 185px;
	height: 275px;
	background-color: #519dbd;
	background-image: url(/testing/inertia/news_gradient.jpg);
	background-repeat: repeat-x;
	border-bottom: #0e1f29 medium solid;
	border-right: #0e1f29 medium solid;
}

And the code for "news_underline"
Code:

#news_underline
{
	position: absolute;
	top: 25px;
	left: 30px;
	width: 122px;
	height: 2px;
}

And the code of the div that these are both inside of
Code:

#main
{
	width: 608px;
	height: 500px;
	position: relative;
	background-image: url(/testing/inertia/blue_gradient.jpg);
	background-repeat: repeat-x;
	background-color: #14495b;
	margin-right: auto;
	margin-left: auto;
}

So, I've got the following CSS code that I use to give a cell a background that aligns to the bottom:

Code:

td.flag {background: url(images/flag_s.gif) no-repeat center bottom;}
td.main {background: url(images/march.gif) no-repeat center bottom;}

Unfortunately, only the td.main works as it should. The first entry td.flag doesn't show the image. I have verified that the gif image of flag_s.gif exists in /images/ and I cannot figure out why td.flag won't work when td.main does....

Any ideas? The CSS is syntactically correct.

In my html I call td class="flag".... doesn't work.

Any help would be appreciated!

I'm having a horrible time trying to figure out what is wrong with my dropdown menu. I cannot get it to work as it should in Internet Explorer, though it's fine in Firefox and Chrome.

In Firefox, it is perfectly aligned to the center of the navigation bar, but in Internet Explorer, it is not and is elevated towards the top. In FF, there are links that dropdown under a few of the links when you hover over the initial link. This does not happen in IE. However, in both IE and FF, the background of the initial link turns dark green when you hover over it (as it should).

Simply, I need the links in Internet Explorer look as they do in Firefox. I've gone through for days and tried to see what's wrong, but I can't think of anything.

Here's the menu's CSS:
Code:

.menu {
   border:none;
   border:0px;
   margin:0px;
   padding-top: 5px;
   padding-left: 3px;
   font-family: Tahoma;
   font-size: 20px;
}

.menu ul {
   margin: 0px;
   padding: 0px;
   list-style: none;
   height: 35px;
}

.menu li {
   float: left;
   padding: 0px;
}

.menu li a {
   color: #000;
   line-height: 35px;
   display: block;
   padding: 0px 25px;
   text-align: center;
   text-decoration: none;
   margin:0px;
}

.menu li a:hover, .menu ul li:hover a {
   background: #919d21;
   color: #000;
   text-decoration: none;
}

.menu li ul {
   background: #919d21;
   display: none;
   height: auto;
   position: absolute;
   width: 150px;
   padding: 0px;
   border: 0px;
   margin: 0px;
   z-index: 200;
   /*top:1em;
   /*left:0;*/
}

.menu li:hover ul {
   display: block;
}

.menu li li {
   width: 150px;
   margin:0px;
   padding:0px;
   display: block;
   float: none;
}

.menu li:hover li a {
   background: none;
}

.menu li ul a {
   display: block;
   height: 35px;
   font-size: 12px;
   font-style: normal;
   margin: 0px;
   padding: 0px 10px 0px 15px;
   text-align: left;
}

.menu li ul a:hover, .menu li ul li:hover a {
   background: #a7b235;
   border: 0px;
   color: #000;
   text-decoration: none;
}

.menu p {
   clear: left;
}

Here's the menu's HTML:
Code:

<ul>
<li><a href="home.html"><img src="/images/icons/house.png" border="0">Home</a>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="createacre.html">Acres</a></li>
<li><a href="facilities.html">Facilities</a></li>
<li><a href="inventory.html">Inventory</a></li>
<li><a href="brand.html">Brand</a></li>
<li><a href="shop.html">Shop</a></li>
<li><a href="logout.html">Logout</a></li>
</ul>
</li>

<li><a href="corral.html"><img src="/images/icons/world.png" border="0">Atlas</a>
<ul>
<li><a href="corral.html">Corral</a></li>
<li><a href="shows.html">Shows</a></li>
<li><a href="trade.html">Giving Center</a></li>
<li><a href="jobpage.html">Employment Agency</a></li>
<li><a href="store.html">General Store</a></li>
<li><a href="searchvets.html">Veterinarian</a></li>
<li><a href="traininglinks.html">Training</a></li>
<li><a href="bank.html">Bank</a></li>
</ul>
</li>

<li><a href="mbindex.html"><img src="/images/icons/comments.png" border="0">Interact</a>
<ul>
<li><a href="mbindex.html">Forum</a></li>
<li><a href="chat.html">Chatroom</a></li>
<li><a href="championshipboard.html">Championships</a></li>
<li><a href="onlineusers.html">Online Players</a></li>
<li><a href="http://www.paradigmprogrammingllc.com/community/">Community</a></li>
</ul>
</li>

<li><a href="referrals.html"><img src="/images/icons/magnifier.png" border="0">Other</a>
<ul>
<li><a href="referrals.html">Referrals</a></li>
<li><a href="search.html">Search AA</a></li>
<li><a href="item_submission.html">Submit Image</a></li>
<li><a href="goals.html">Goals</a></li>
<li><a href="http://www.rpg.sg/vote.php?id=62">Vote for AA</a></li>
</ul>
</li>

<li><a href="rules.html"><img src="/images/icons/shield.png" border="0">Help</a>
<ul>
<li><a href="rules.html">Rules</a></li>
<li><a href="htmlhelper.html">HTML Helper</a></li>
<li><a href="mods.html">Moderators</a></li>
<li><a href="privacy.html">Privacy Policy</a></li>
<li><a href="tos.html">Terms of Service</a></li>
</ul>
</li>

<li><a href="userarea.html"><img src="/images/icons/newspaper.png" border="0">News</a>
</li>

<li><a href="upgrade.html"><img src="/images/icons/arrow_up.png" border="0">Upgrade</a>
</li>
</ul>

www.clydesdaleframes.com/test/fortran.html

Does anyone know why my "next page" button's background is extending the full width of the text like that?

css is www.clydesdaleframes.com/test/styles.css

thanks in advance,
Chris

I have a new layout I'm currently working on. It's got a container with 2 columns, one floated left and one floated right.

Inside the left column (lcol) I have a series of content areas making up two columns.

Floated left and on the upper left is a flash video. Below that and also floated left is a table of contents list.

On the right side of lcol, my intent is to add a news list and an events list. I have the news list floated right with the left floats cleared.

My issue is that the news list is pushing way to the bottom of the screen even though my width is not larger than the available width for that column.

In IE6, the list is behaving as expected, but not in FF which I always do my primary testing in, so that's what led me to believe something is wrong.

Here is my code (remember the site is in its initial development) I've also attached a screenshot of the appearance in FF.

Code:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Orion Main</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
			var flashvars = {};
			var params = {};
			params.play = "true";
			params.loop = "false";
			params.menu = "true";
			params.quality = "high";
			params.scale = "showall";
			params.wmode = "window";
			params.devicefont = "false";
			params.allowfullscreen = "false";
			params.allowscriptaccess = "sameDomain";
			var attributes = {};
			swfobject.embedSWF("orion_intro_video.swf", "intro", "320", "310", "9.0.0", "expressInstall.swf", flashvars, params, attributes);
</script>
</head>
<body>
  <div id="logo"><img src="images/orion_logo.jpg" alt="Orion Logo" title="Orion Home" width="154" height="100"/></div>
  <div id="container">
  <div id="lcol">
    <div id="intro">
        Your browser cannot display FLASH, please follow the link below to install it.<br/>
        <a href="http://www.adobe.com/go/getflashplayer">
            <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
        </a>
    </div>
    <ul id="nav">
      <li><a href="#">Thought Leaders</a></li>
      <li><a href="#">Success Stories</a></li>
      <li><a href="#">Validation</a></li>
      <li><a href="#">Strategic Partners</a></li>
      <li><a href="#">Environmental Stewardship Award</a></li>
      <li><a href="#">Newsletter</a></li>
      <li><a href="#">Energy Solutions</a></li>
      <li>
        <a href="#">Media</a>
        <ul>
          <li><a href="#">News Releases</a></li>
          <li><a href="#">Media Kit</a></li>
          <li><a href="#">Contact Us</a></li>
        </ul>
      </li>
      <li><a href="#">Investor Relations</a></li>
      <li><a href="#">Partners for Profits™</a></li>
      <li><a href="#">Agricultural Division</a></li>
      <li><a href="#">Orion Asset Management</a></li>
    </ul>
    <ul id="latest_news">
      <li><a href="#">News Item #1</li>
      <li><a href="#">News Item #1</li>
      <li><a href="#">News Item #1</li>
      <li><a href="#">News Item #1</li>
      <li><a href="#">News Item #1</li>
    </ul>
    <ul id="events">
      <li><a href="#">Event #1</li>
      <li><a href="#">Event #1</li>
      <li><a href="#">Event #1</li>
      <li><a href="#">Event #1</li>
      <li><a href="#">Event #1</li>
    </ul>
    </div><!-- end lcol -->
    <div id="rcol">
    
    </div><!-- end rcol -->
  </div>
</body>
</html>

CSS

Code:

@charset "utf-8";
/* CSS Document */
body {
  font-family: Verdana, Geneva, sans-serif;
  margin: 15px auto 0;
  padding: 0;
  text-align: center;
  background: url('../images/body_back.jpg') repeat-x #373737;
}

#logo {
  width: 960px;
  height: 100px;
  margin: 0 auto;
  text-align: left;
  background: url('../images/header_back.gif') repeat-x #b4de5a;
}

#container {
  width: 940px;
  margin: 0 auto;
  height: auto;
  text-align: center;
  background-color: #FFFFFF;
  clear: left;
  padding: 0px 10px 10px 10px;
  overflow: auto;
}

#lcol {
  float: left;
  width: 626px;
  height: auto;
  overflow: auto;
  text-align: left;
}

#intro {
 text-align: left;	
 float: left;
 width: 320px;
 height: 310px;
 background-color: red;
}

#nav {
  clear: left;
  width: 320px;
  height: auto;
  list-style-type: none;
  text-align: left;
  padding: 0;
  margin: 0;
  float: left;
}

#latest_news {
  background-color: green;
  height: auto;
  width: 250px;
  list-style-type: none;
  padding: 0;
  margin: 0;
  text-align: left;
  float: right;
  clear: left;
}

#events {
  clear: right;
  float: right;
  width: 250px;
  height: auto;
  background-color: yellow;
  list-style-type: none;
  
}

#rcol {
  float: right;
  width: 303px;
  height: 500px;
}

This is my first try at css and i have been at it about a week on and off. I have tried to use examples from here and the o'reilly CSS cookbook. I want to create a two column row of pictures with a caption. I selected DIV as the tool (my css is below). The container DIV looks great. I want the div.float, however, to start a second row when a third picture is added and to continue thereafter with successive two column rows. Unfortunately, each of my rows contain only one picture.

here is my css style sheet. A demonstration of the problem can be seen at:

http://www.yourline-online.com/demo05/?How_to_create_pages
Code:

div.float {
    float: left;
    BORDER-RIGHT: #808080 2px solid;
    PADDING-RIGHT: 2px;
    BORDER-TOP: #808080 2px solid;
    PADDING-LEFT: 2px;
    FONT-WEIGHT: lighter;
    FONT-SIZE: medium;
    PADDING-BOTTOM: 20px;
    MARGIN: 16px 2%;
    BORDER-LEFT: #808080 2px solid;
    COLOR: #000000;
    PADDING-TOP: 2px;
    BORDER-BOTTOM: #808080 2px solid;
    HEIGHT: 200px;
    WIDTH: 150px;
    BACKGROUND-COLOR: #ffffff;
    TEXT-DECORATION: none
  }
  
div.float p {
   text-align: center;
   }
div.container {
  border: 2px dashed #333;
  background-color: #ffe;
  }
div.spacer {
  clear: both;
  }

MY HTML is like this:
Code:

H1>How to create pages</H1>
<P>The headings are used for splitting up the content file. An H1, H2 or H3 heading will dynamically split the document into new pages in the table of contents. An H4-heading is used as a heading within a page. See the following pages...<BR></P>
<P></P>
<DIV class=container>
<DIV class=spacer></DIV>
<DIV class=float><IMG height=100 alt="image 1" src="image1.gif" width=100> 
<P>caption 1</P></DIV>
<DIV class=spacer></DIV>
<DIV class=float><IMG height=100 alt="image 2" src="image2.gif" width=100>
<P>caption 2</P></DIV>
<DIV class=spacer>
<DIV class=float><IMG height=100 alt="image 3" src="http://www.yourline-online.com/demo05/image3.gif" width=100>
<P>caption 3</P></DIV>
<DIV class=spacer></DIV></DIV></DIV>

Hey Guys...

I have a piece of code that displays ok in Firefox (and I suppose IE) but not Safari. Here's the URL - http://www.pizza.bowlerhatmedia.com/spc/theusual.html

In safari everything squishes left. In firefox they spread out like they are supposed to across the bottom.

Here's the line of code in the html doc:

Code:

		<div class="contentbox2_2"> 
			  <span style="padding-right:10px"></span>Petite: <span class="red">$11</span> <span style="padding-right: 160px;"></span> Medium: <span class="red">$14</span> <span style="padding-right: 170px;"></span> Large: <span class="red">$16</span>
			</div>

and here's the supporting CSS

Code:

}
.contentbox2_2, .contentbox3_2 {
	font-size: 15px;
	font-weight: normal;
}
.red {
	color: #ac3a24;
}

What can I do to position these across the bottom in safari and make everything else ok in the other browsers?

thanks!

one line of text isn't in the position that i want it to be for ff and ie. Chrome is able to read the css code:
chrome:
Code:

p1 {
line-height: 1.3em;
font-size: 1.2em;
font-weight: bold;
display: block;
-webkit-margin-befo  5.4em;
-webkit-margin-after: 1em;
-webkit-margin-start: 220px;
-webkit-margin-end: 0px;
}

ff,ie:
p1{
line-height: 1.3em;
font-size: 1.2em;
font-weight: bold;
}
I want the " learning from questions" at the bottom right of the logo. Thanks for helping!
site link: http://www.nyitforums.com/

Hi, I'm having an interesting problem. I have a left floated containing div and then a right floated containing div to split multiple contents between the left and right side of a popup window. It works great in IE 7, Chrome, FF3, but for some reason not in FF2. In FF2, it forces the contents of the right floated containing div below the left floated div (instead of beside it) and makes it's width the entire width of the popup. Any idea why? (there is a reason I had to put all the css directly in the code - normally it's separated) Here's the code:

Code:

<div style='padding: 15px; text-align: left;'>
	<div style='float: left;'>
		<table style='margin-top:16px; font-size: 12px; font-family: Verdana,Arial,sans-serif;'>
			<tr>
				<td>Name:</td><td colspan='2'><input id='popupName' name='popupName' style='float:left' type='text'></td>
			</tr>
			<tr>
				<td style='padding:5px 0 17px 0;'>Type:</td><td style='padding:5px 0 17px 0;' colspan='2'><select id='popupType' name='popupType' style='float:left; width: 148px; height: 21px' ></select></td>
			</tr>
			<tr>
				<td style='padding-bottom: 14px;' colspan='3'><div style='width: 280px'>This is some text.</div></td>
			</tr>
			<tr>
				<td style='padding-bottom: 5px;'>Group Title:</td><td style='padding-bottom: 5px;'><input id='popupGroupTitle' name='popupGroupTitle' style='float:left' type='text'></td><td></td>
			</tr>
			<tr>
				<td>Titles:</td><td><input id='popupTitles' name='popupTitles' style='float:left' type='text'></td><td><input style='float:left; padding: 0;' type='button' value='Add >>' onclick=\"addToList()\"></td>
			</tr>
		</table>
	</div>
	<div style='float: right;'>
		<div style='margin-bottom:5px;'>Element Titles:</div>
			<select id='newOptionSelect' style='float:right; width: 247px;' size='12'></select>
			<input id='popupDeleteBtn' style=\"clear: right; background: rgb(190,190,190) url('/url') no-repeat center center; float:right; margin: 5px 2px;\" type='button' onclick='removeFromList(\"newOptionSelect\", newOptionArray)'/>
			<input id='popupMoveDownBtn' style=\"float:right; background: rgb(190,190,190) url('/url') no-repeat center center; margin: 5px 2px;\" type='button' onclick='moveDown(\"newOptionSelect\", newOptionArray)'/>
			<input id='popupMoveUpBtn' style=\"background: rgb(190,190,190) url('/url') no-repeat center center; float:right;	margin: 5px 2px;\" type='button' onclick='moveUp(\"newOptionSelect\", newOptionArray)'/>
		</div>
	</div>
</div>

Hi guys.

Straight to pictures:

Fig. 1: Differences in rendering between Standards compliant browsers and Internet Explorer.

Link for html page is www.sential.co.uk/releases.html (this is my example page, but it's the same problem with all pages.)

Now, apart from the fact they're different colors (which is a little strange), the positioning of the border images in IE is different than Safari/Firefox. I've tried playing with the code and positioning over and over with no luck. If I change one to look right, basically, the other ends up looking wrong.

I have 4 corner images and 4 repeating borders. They're all positioned using css in my style sheet, in the format of, basically:
Code:

.corner_topleft{
    position: absolute;
    top: 0px;
    left: 0px;
    ...
}

and so on in that respect for the 4 corners and:
Code:

.border_left{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    background-repeat: x;
    ...
}

etc. for the borders.
I have specified all the heights of the images.

Now the problems in the pictures a
#1: the left and right borders don't repeat down,
#2: the right edge border+corners seem to be out 17px (the width of the border). Although don't think you can simply specify the right border to be inwards 17px because if you do that, in Safari/Firefox, the background blue color overflows 17px outwards (because it's currently underneath that right border. Although, apparently not in IE.)

If any of you guys can offer any help, suggestions, or maybe even a fix, that would be awesome and very appreciated.

Regards,
-Luke (:

I have a very simple drop down menu that I'm playing around with and trying to make cross-browser.

The drop-down currently looks OK in Mozilla/Firefox.

Presently, it does not work in either IE 6 or IE 7.

You can see the drop down HERE

I have noticed that when you alter the URL in this line of code, inside the href attribute (for example):

Code:

<li><a href="">Computer Hardware (1)</a></li>

...sometimes the menu will work (or break) in ANY given browser (IE or Mozilla)...

Try substituting different values for the href attribute inside the link. Depending on the href value, sometimes the code works, and sometimes it doesn;t (in either IE or Mozilla).

Something screwy is going on with the href attribute, but I can;t tell what it is.

Any help is appreciated.

Hi

I have this small problem with one of my sites when viewed in IE *surprise surprise*

Let's say I have a div called "foo". I specify a width and set a padding of 10px.
Code:

<style>
.foo {
    width: 100px;
    padding: 10px;
}
</style>
<div class="foo">Bar</div>

Firefox, Opera and Mozilla interprets this as an element which's "text area" is 100px and there's an additional 10px on both sides. So the actual width of the div is 120px.
IE doesn't interpret it like that. If I set widht=100px, then the actual width is 100px regardless if I have paddings or not.

Now these different types of interprations are causing me a head ache. Is there any "trick" to make the div to be equally wide in all browsers? If not, I guess the only option is to use tables


- Kimppa

Hi all,

I have a bit of an odd situation (prob not odd if you seen it before but I have no clue why its doing it!).... I have my webpage:

http://www.houseofhawkins.com/index.html

which works great in IE. the part in question is the menu tabs at the top. Within IE they keep the width I have given them.. In firefox they only go to the width of the text.

They are links with the following CSS attached:

div#Header #MenuSection a.MenuTab {

PHP Code:
 filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#A8DBA8', startColorstr='#A4B7A4', gradientType='0');
    font-weight: bold;
    text-align: center;
    font-size: 1.3em;
    background-color: #BCD6BC;
    border-style: solid;
    border-width: 1px;
    border-color: #A5BEA5 #BCD6BC #BCD6BC #A5BEA5;
    margin: 0 5px 0 2px;
    height: 1.5em;
    width: 140px;    
    padding: 5px 1px 1px 1px;
}

div#Header #MenuSection {
    float:left;
    margin-top: 30px;
} 





here is the HTML code for that part of the page.

PHP Code:
<div ID="MenuSection">
                    <a Class="SelectedMenuTab" Title="You are currently viewing the Home page">Home</a>
                    <a Class="MenuTab" href="" title="Curriculum Vitae for Jonathan Hawkins, Author of House of Hawkins">CV</a>
                    <a Class="MenuTab" href="http://houseofhawkins.com/projects/index.html" title="Portfolio of Work created by Jon Hawkins">Portfolio</a>
                    <a Class="MenuTab" href="" title="Online Photo Gallery of Jon, friends and family">Photo Gallery</a>
                    <a Class="MenuTab" href="http://houseofhawkins.com/games.html" title="Games created by House of Hawkins">Games</a>
                </div>
            <div style="clear:left"> </div> 





I just dont get why firefox wont be nice and give me the width I ask for... the oddest bit is if I put float:left into the menutab part they do work!

I wish to understand why its like this... I have attached the CSS and the file if that helps anyone.

Thanks for the help and advice.