CSS - Floats Not Behaving As I Expect Them To

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>

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;}

Ok ive got this small concept i need to work in order for me to implement it on the actual website.

this code works 100% correct to how i want it to in FireFox.

I have an image within a table TD tag , but i need the image to float outside the tables borders, i can do this with the margin-right: -20px;
In firefox i can still see the full image been displayed, but in IE the image falls behind the table limits and then does not display any more.

Please help me sort this one out.

Code:

<html>
<head>
	<title>Untitled</title>
    <style>
    .test {
        margin-right: -30px;
        float: right;
	    z-index: 2;
    }
    .table{
        z-index: 10;
    }
    </style>
</head>
<body>
<table align="center" width="300" border="1" class="table">
<tr>
	<td>&nbsp;</td>
	<td><img class="test" src="http://nexxon.galore.co.za/images/stories/animated_slidshow_02gif.gif" /></td>
</tr>
</table>
</body>
</html>

I am almost finished with a site, but the buttons in the main navigation are behaving badly; when you put the mouse over them (only in IE of course..) they only activate when you are about 10 pixels away from the top of the page.

Link-
http://www.hamlettinstruments.com/beta/

can someone help me figure out why this is?
Thanks, ad

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

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!

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>

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

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

Hey,

k, as per usual, all's well in FF with this site. The list to the right is forcing the paragraphs below in IE tho...I've tried a bunch of different 'clears' and what not, but can't seem to figure it out.

Here's the html;
Code:

      <div id="homelistbox"><b>Upcoming Tradeshows:</b> 
        <ul class="homelist">
          <li><a href="http://www.torontoinwaterboatshow.com">Toronto In-Water 
            Boat Show,</a> Sept 14-17 2006</li>
          <li><a href="http://www.torontoboatshow.com">Toronto International Boat 
            Show,</a> Jan. 12-21 2007</li>
          <li><a href="http://www.sportsmensshows.com/Ottawa/">Ottawa Boat, Sportsman 
            and Cottage Show,</a> Feb. 22-25 2007</li>
          <li>See the various models of Custom Weld Boats at all these shows. 
            <a href="contact.php">Contact us</a> for more information about locations 
            at the shows.</li>
        </ul>
      </div>
      <p> Freedom Boat Sales is committed to bringing Canadian recreational enthusiasts 
        exciting new and pre-owned products for the water, trail, and road.</p>
      <p>Flexibility, great pricing, and innovative products will keep you coming 
        back for all your recreational needs!</p>
      <p>Please be advised that we are currently working to improve your online 
        experience, so your patience is greatly appreciated!</p>
      <div class="clear"></div>

and the CSS;
Code:

.clear {
clear:both;
margin-top:-1px;
height:1px;
overflow:hidden;
}

p {
font-family: verdana, arial, helvetica, sans-serif;
font-size:8pt;
line-height:11pt;
color:#555;
text-decoration:none;
width:650px;
margin-top:5px;
padding:10px;
}

#homelistbox {
width:180px;
padding:5px;
margin:2px 10px;
border-top:1px dotted #CCC;
border-left:1px dotted #CCC;
min-height:120px;
float:right;
font-family: verdana, arial, helvetica, sans-serif;
font-size:8pt;
color:#255CB8;
}

.homelist li {
margin-top:5px;
padding-left:10px;
list-style:none;
}

.homelist a {
color:#FF0000;
text-decoration:underline;
}

.homelist a:hover {
color:#255CBE;
text-decoration:none;
}

i'm also having similar issues with simple image floats, as seen here.

It forces the paragraph underneath in IE...boourns.

Anyways, any guidance'd be greatly appreciated.

Cheers.

Hello everyone,
Newbie here
Can anyone show me how to CSS objects or text inline horizontally in the banner/header such as at the top of this forum?
My banner/header uses large text for a logo on the left, and I would like to put a search form or something on the right side of the header.
Do I have to declare the width of each?
See how much newbie I am?

Thanks for any help.

Ken

Hey,

yet again I am having issues with some floated elements in IE (6 + 7).

Have a look here.

The product details start under the bottom of the photo of the product, and I've tried a bunch of different things to get it lined up with no joy.

Here's the CSS:
Code:

#features {
position:relative;
float:right;
margin:0 20px 20px 20px;
width:350px;
border:1px solid #E1DCC6;
border-top:0;
}

* html #features {
margin:0 10px 0 10px;
}

#features p, #features p strong {
font-size:10px;
margin:4px;
padding:2px;
}

#picbox {
width:350px;
height:350px;
margin:0 20px 0 20px;
float:right;
border:1px solid #E1DCC6;
border-bottom:1px dashed #E1DCC6;
}

* html #picbox {
margin:0 10px 0 10px;
}

#detail-list {
margin:10px 60px;
}

#detail-list li {
list-style:square inside;
margin:2px;
}

#buynow {
margin:5px 10px 5px 30px;
}

#priceTable {
margin:10px 40px;
border:1px solid #E1DCC6;
}

#priceTable td {
padding:4px;
}

#priceTable td.priceRight {
background-color:#E1DCC6;
font-size:14px;
font-weight:bold;
color:red;
}
#priceTable td.priceLeft {
text-align:right;
color:white;
font-weight:bold;
background-color:#B8A488;
}

.liner {
text-decoration:line-through;
}

Any insight, as per usual, is greatly appreciated.