CSS - Another Float Problem, Not Rendering In Ie, Net, Fire

hi all,

having a problem with browser compatibility here... 3 lousy pixels makes the difference between one of my divs being knocked to another row in safari, vs. a perfect lineup in IE.

have a look: http://www.offsitedbs.com

the column at the bottom entitled "security" is a big div that gets knocked to another row in safari if i try to have it line up perfectly in IE (pc)... BUT, if i knock the width back a few pixels to line it up in safari, it's not flush in IE.

code for the divs:

<div class='bottomDiv'>
<div class='bottomTitle'><img src="IMAGES/arrow.gif">Remote Services</div>
<p class='bottomDesc'>Offsite Database Administration and Offsite Server Management.</p>
<p class='bottomText'>At Offsite DBA Services we focus ... any potential problem.</p>
</div>
<div class="bottomDiv">
<div class='bottomTitle'><img src="IMAGES/arrow.gif">Onsite Services</div>
<p class='bottomDesc'>OffSite offers a free comprehensive report on the state of your database at no extra cost to your company.</p>
<p class='bottomText'>We take ... its optimal level.<br></p>
</div>
<div class="bottomDiv">
<div class='bottomTitle'><img src="IMAGES/arrow.gif">Security</div>
<p class='bottomDesc'>Offsite DBA Services uses the latest SSL technologies to manage your database through secure connections and proven technologies.</p>
<p class='bottomText'>Network technologies ... from snoops.<br></p>
</div>

and the css for the 'bottomdiv's:

.bottomDiv {
background-color: #F0F0F0;
height: 262px;
width: 193px;
float: left;
border-left: solid 1px #FFF;
border-bottom: solid 1px #FFF;
background-image:url(../IMAGES/bottomBG.gif);
background-repeat:repeat-x;
background-position:bottom;
border-top: solid 1px #FFF;
padding: 0px;
vertical-align: top;
}

any & all help is very appreciated!

thanks,

nunzio

Hi guys,

Maybe some of you could shed some light on this little problem. I'm currently working on a site redesign, the page in question can be found HERE. When hovering over the ZOOM button in Opera the mouseover image is partially hidden, and in one particular case (2nd ZOOM button down) after rolling off the image the mouseover image partially remains.

Works fine in Firefox and Safari (been unable to test in IE yet) I'm guessing the problem comes down to z-index but my understanding of it is pretty poor.

Any insight would be much appreciated (yes the coding's messy... it's a work in progress )

Thanks!

subject isn't too good

anyhow.. i have 4 cells

__ __
|1 | |2 |
--- ---
__ __
|3| |4 |
--- ---

2 and 4 are said to float right, such that 1 and 3 define the height of the page..

but.. when the contents of 2 go LONGER than the contents of 1, number 4 doesn't float right properly.. instead this happens

__ __
|1 | |2 |
--- | |
--- | |
|4| ---
---
__
|3|
---


do you see that? 4 tries to float right, but since it's called underneath 1, and 2 is extended, floating right relative to the page doesn't make it ACTUALLY float right

any thoughts that will render this properly? (namely that cells 1 and 3 will inherit the height of 2 and 4 somehow?)

When you look at http://www.mvcc.edu/cltrl/movies/thecorporation.cfm in IE and FF, you'll immediately notice the difference. In IE, the paragraphs are next to the image. In Firefox, the text is below the image? What's the deal with this? Is it something to do with the float or margin ?

Hey,

Im using floats to position a few forms/form-elements horizontally.
But the last form (the signout button), gets shifted on the next line. Can someone explain me why this happens? This is the code i use:
php Code:
Original - php Code echo '<div style="float: left;... blabla">'; echo '<form action="'.getRoot().'search_contact.php" name="search" id="search" method="post">'; echo '<div style="float: left; width: 35%; margin: 0%; padding: 0%;">'; echo '<input type="text" style="width: 50%" name="contact_name" value="'.$search_string.'" id="contact_name">&nbsp;'; echo '<input type="submit" name="search_now" value="Search" id="search_now">'; echo '</div>'; echo '</form>'; echo '<form name="new_contact" id="new_contact" method="post" action="'.getRoot().'new_contact.php">'; echo '<div style="float: left; width: 22%; margin: 0%; padding: 0%; text-align: right;">'; echo '<input type="submit" name="add_contact_now" value="New Contact" id="add_contact_now">&nbsp;'; echo '</div>'; echo '</form>'; echo '<form name="contact_list" id="contact_list" method="post" action="'.getRoot().'contact_list.php">'; echo '<div style="float: left; width: 22%; margin: 0%; padding: 0%;">'; echo '&nbsp;<input type="submit" name="view_contact_list" value="Contact List" id="view_contact_list">'; echo '</div>'; echo '</div>'; echo '</form>'; echo '<form name="logout" id="logout" method="post" action="'.getRoot().'logout.php">'; echo '<div style="float: left; width: 21%; margin: 0%; padding: 0%; text-align: right;">'; echo '<input type="submit" name="logout_now" id="logout_now" value="Sign out">&nbsp;&nbsp;'; echo '</div>'; echo '</form>'; echo '</div>';

  

 echo '<div style="float: left;... blabla">';


         echo '<form action="'.getRoot().'search_contact.php" name="search" id="search" method="post">';


         echo    '<div style="float: left; width: 35%; margin: 0%; padding: 0%;">';


         echo    '<input type="text" style="width: 50%" name="contact_name" value="'.$search_string.'" id="contact_name">&nbsp;';


         echo    '<input type="submit" name="search_now" value="Search" id="search_now">';


         echo    '</div>';


         echo '</form>';


         echo '<form name="new_contact" id="new_contact" method="post" action="'.getRoot().'new_contact.php">';


         echo    '<div style="float: left; width: 22%; margin: 0%; padding: 0%; text-align: right;">';


         echo    '<input type="submit" name="add_contact_now" value="New Contact" id="add_contact_now">&nbsp;';


         echo    '</div>';


         echo '</form>'; 


         echo '<form name="contact_list" id="contact_list" method="post" action="'.getRoot().'contact_list.php">';


         echo    '<div style="float: left; width: 22%; margin: 0%; padding: 0%;">';


         echo    '&nbsp;<input type="submit" name="view_contact_list" value="Contact List" id="view_contact_list">';


         echo    '</div>';


         echo    '</div>';


         echo '</form>';


         echo '<form name="logout" id="logout" method="post" action="'.getRoot().'logout.php">';


         echo    '<div style="float: left; width: 21%; margin: 0%; padding: 0%; text-align: right;">';


         echo    '<input type="submit" name="logout_now" id="logout_now" value="Sign out">&nbsp;&nbsp;';


         echo    '</div>';


         echo '</form>';


 echo '</div>'; 

I usually never have problems with CSS layouts but whatever reason I'm struggling with this one...

I have a container div and inside it I have 4 divs (2 on the left stacked on each other and two on the right stacked on each other).

Code:

#container {
height: 604px;
width: 920px;
}

#container_left {
height: 604px;
width: 597px;
float: left;
}

#container_right {
height: 604px;
width: 323px;
float: right;
}

#left_top {
background-image:url(images/001.jpg);
background-repeat:no-repeat;
height: 501px;
width: 597px;
}

#left_bot {
width: 597px;
height: 103px;
}

#right_top {
width: 323px;
height: 308px;
background-image:url(images/002.jpg);
background-repeat:no-repeat;
}

#right_bot {
background-image:url(images/003.jpg);
background-repeat:no-repeat;
width: 323px;
height: 296px;
}

all the divs are empty at the moment (just a bg image) except for #left_bot....HTML below...

Code:

  <div id="container">
    	<div id="conrainter_left">
        	<div id="left_top"></div>
            <div id="left_bot"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Get Started','','images/start_rollover.jpg',1)"><img src="images/start.jpg" alt="Click here to Get Started" name="Get Started" width="597" height="103" border="0" id="Get Started" /></a>
            </div>
        </div>
        <div id="conrainter_right">
            <div id="right_top"></div>
			<div id="right_bot"></div>
        </div>   
    </div>  <!--end container-->

The results I'm getting...The container left div looks good. The container right div is not to the right of the page, but instead to the left of the page below the left div. Instead of floating it right its pushing down to the next line.

Any help would be appreciated. Thanks.

I am trying to re-write a forum post box that is fully CSS and XHTML compliant.

I have got this working successfully in Safari, Firefox and Opera on the Mac, but it fails on IE6 on the PC.

I cannot work out what the problem is.

Can anyone help?

(URL fixed)
http://centerstageproject.com/test/index2.html

As you can see that box that contains the post flows to the same height whatever the content. Screen shot from Safari attached.

In IE6 though the left content (ie member details) does not begin until the post content is finished on the right side of the box.

Page: http://dev.donmyersministries.com/test.html

Ok, time is money, I decided to change my design a little bit because the way I was headed wasn't working. Now this isn't, I'm fixin to just go back to tables, this is retarded.

Anyway, my problem. In FireFox/Opera my right hand column is fine (2 column layout), in IE however, it is pushed down below the left hand column. The left hand side is floated left.

An image if it helps at all:


Please help, before I abandon CSS layouts, again.

later

I started a new post on this one because it is something I have just noticed in FireFox, but not in IE6.

I have created a new html page with a top, middle and bottom div sections. The middle section contains two other div's, left and right. All these div's I wraped inside another div called container.

What I did (with CSS) is set the container with a width of 400px, and a solid red border. I then set the top and bottom with a height of 40px each. I did not set the height of the middle section since that would grow according to its content. The right div I set it as float:right and the left div I set it as float:left.

This worked fine but then I decided to set the bottom div as float:left ... and it broke in FireFox In FireFox, the container wraped only around the top div, and the other middle and bttom div remained outside that white container. Here is the code I used: Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<style>

			body {
				margin: 0;
				text-align: center;
				padding: 10px;
				background: #00ff00;
			}

			.container{
				width: 400px;
				margin: 0 auto 10px auto;
				padding: 0;
				text-align: left;
				background: #ffffff;
				border: 1px solid #d1c7ac;
			}

			.top {
				height: 40px;
			}

			.middle{

				/*
					can not put height here,
					since the middle section
					data changes from page
					to page.
				*/
			}

			.left {
				float: left;
				width: 200px;
			}

			.right {
				float: right;
				width: 200px;
			}

			.bottom {
				height: 40px;
				float: right;
			}

		</style>
	</head>
	<body>

		<div class="container">

			<div class="top">
				Top Section
			</div>

			<div class="middle">

				<div class="left">
					Left Section.
				</div>

				<div class="right">
					Right Section.
				</div>

			</div>

			<div class="bottom">
				Bottom Section.
			</div>
			<!--&nbsp; placed here -->
		</div>

	</body>
</html>

As I said this problem only apears in FireFox, and in IE6 it does not show. I know I am doing something wrong, mostly because I still do not know all about what a float do. I know it is because of the float thing. because what I did is add an &nbsp; (space) before the end of the container div wraped around the middle, bottom and float as well.

I am sorry for posting yet another question on floats. Thanks for any advise and sugestions.

regards,
sim085

Hi,

Have this web page with a lot of divs in it.

I have specified that all divs should be float:left in my css-file so that they will be rendered next to each other. I have noticed that when my browser is smaller than the actual web page some of the divs are rendered below and not to the right. How can I force the browser to still render them to the right. I would like to scroll to the right rather than down.

Can anyone help me with this problem?

/H

Hey there, I have a problem

I have 3 divs that are going to the top of my heading, and the right one just doesnt float into place.

http://hookem.no-ip.org/Upload

As you can probably see, the top of each box and to the right.

This is my code in the CSS.

PHP Code:
.hr{
background-image: url(right.gif);
width: 3px;
height: 23px;
background-repeat: no-repeat;
} 





And the HTML part...
PHP Code:
<div class="hl"></div><div class="hm">Hello again</div><div class="hr"></div> 





I really really would like help please.

Thanks for looking and helping!
Hookem!

Hello, I have developed some very simple code. This code is working well on FireFox (and also netscape) and Operan but not well on IE6.

The code is very simple. I have a div tag that containes two other div's. One div contains text to be aligned to the left (using float: left) and another div contains a list (ul) to be aligned to the right (using float: right). The following is the code I have so far: Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
	<head>
		<style>
			.leftText {
				float: left;
			}

			.rightText {
				float: right;
			}

			.top ul {
				width: 100%;
				text-align:center;
				margin: 0;
				padding-left: 0;
				border: 0;
				list-style-type:none;
			}

			.top ul li {
				display: inline;
				text-align: center;
				float:left;
				border-right:none;
				background-image: none;
				padding-left: 5px;
			}

		</style>
	</head>
	<body>
		<div class="top">
			<div class="leftText">
				This is the text on the left.
			</div>
			<div class="rightText">
				<ul>
					<li>one</li>
					<li>two</li>
					<li>three</li>
				</ul>
			</div>
		</div>
	</body>
</html>

Now I did some testing before posting here. First of all I tried to hack it. What I did is add *float: right; inside the .top ul li {...} element. This naturally was not cought by FireFox and Opera, and thus the website still looked fine on these browsers. However when I tried it on IE6 I had a surprose. The list was alligned to the right, but instead of writing "one two three", it wrote "three two one".

I do not know how best to solve it, and be greatfull for any advise.

thanks and regards,
sim085

I've been working on this project for over a month and for some reason cant get my tic-tac-toe container to float in the middle of the page in IE6.

The container that is causing the problem is called "<div id="tic-tac-toe">".

It centers perfectly in Firefox and IE7 but stays far off to the right in IE6 no matter what I do.

Please help if you can help me figure this out your a genius!!

Here is a link to to the site: http://dev.blackstonemedia.net/dfh/products.html

I understand IE has many problems with 'float' in css. I've got a new layout I'm working on for a site, and everything is working great on it except one element on IE6. Part of the page, seen below, looks great on FF, Safari, & IE7:



However, IE6 shows up as:



Here's the CSS that governs this part of the layout:

Code:

div.search_and_cart div.account_box{
	border: 1px solid #808080;
}
div.search_and_cart div.account_box p{
	padding: 8px;
}
div.search_and_cart div.account_box div.checkout_button{
	float: right;
	width: 80px;
	line-height: 30px;
	text-align: center;
	background-color: #F68428;
	border: 0;
	margin: 0;
	border-top: 1px solid #808080;
}
div.search_and_cart div.account_box div.checkout_button a{
	color: #FFF;
	text-decoration: none;
	font-weight: bold;
}
div.search_and_cart div.account_box div.cart_contents{
	width: 153px;
	line-height: 30px;
	padding-left: 5px;
	color: #FFF;
	background-color: #808080;
	border-top: 1px solid #808080;
}

Then here's the HTML:

Code:

		<div class="account_box">
			<p><span style="color: #000;">ACCOUNT</span><br />
			See order status</p>
			<div class="checkout_button"><a href="#">CHECKOUT</a></div>
			<div class="cart_contents">2 items in my cart</div>
		</div>

Any help would be greatly appreciated. Thanks!

Hi all

i have a problem with a website i am building. It is very annoying. I have a masterpage with a float left menu, a contentplaceholder and a float right element. It used to work correctly but now it floats right OK but when I zoom in the left menu and content zoom correctly but the right float overlaps the content as though it is stuck. I have tried all sorts of things but nothing I can find works. Here is the css :
body
{
height:100%;
}
#div.row span.left {
float: left;
text-align: left;
font-weight: bold;
color: #fff;
width: 49%;
}

#div.row span.right {
float: right;
text-align: right;
font-weight: bold;
color: #fff;
width: 49%;
}




#container
{

width: 100%;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 100%;
}

#top
{
padding: .5em;
background-color: #FFFFFF;
border-bottom: 0px solid gray;
height: 46px;
font-family: Arial, Helvetica, sans-serif;
font-size: 2.5em;
color: #006000;
text-align: center;
}

#top h1
{
padding: 0;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background-color: #FFFF66;
}
#leftnav
{
float: left;
width: 167px;
height: 483px;
margin: 0;
padding: 0;
height: 409px;
list-style: none;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;

}
#link
{
}

ul#navigation
{
width: 9.2em;
float: left;
margin: 0 0px 0 0;
padding: 1em;
height: 497px;
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
color: #0207f6;
}
ul#navigation li
{
list-style:none;
background-color:#ECEEFA;
border-top: solid 1px #ECEEFA;
text-align: left;
margin: 0;
}
ul#navigation li a
{
display:block;
text-decoration: none;
padding: .25em;
border-bottom: solid 1px #39f;
border-right: solid 1px #39f;
height: 21px;
width: 141px;
}


#rightnav
{

float: right;
width: 160px;
margin: 0;
padding: 1em;
height: 399px;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
right:0;

}

#content
{

margin-left: 203px;
border-left: 0px solid gray;
margin-right: 0px;
border-right: 0px solid gray;
padding: 1em;
width: 100%;
height: 20px;
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
text-align: center;
margin-top: 0px;
width: 619px;
}
#h2
{
color:#ff0000;
font-weight: bold;
text-align:center }

any ideas anyone?

Andy