CSS - Floating Table

not really sure what the problem is here so sorry if the title of the thread doesnt reflect the problem to well.

So ive been trying to fix this for 3 days now and ive read tut after tut on tableless forms using labels and inputs floated left and i cant get it working.

As always its IE thats causing the problem, ive printed the display of the 4 main browsers and usually if i have a css problem in IE its also in Opera, but this time its only IE.

http://img682.imageshack.us/img682/4570/browserviews.jpg

As you can see the two problems here a

1. the gender select is completely screwy
2. the second fieldset doesnt display below the first

the 2nd im not overly concerned about, if i can fix it great, if not then i'll deal with it, it drops down to below the first fieldset if i shrink my browser window or increase the fieldset width

so heres the code:

HTML

Code:

<span>Fields marked with <span class="red">*</span> are not optional, all others are</span>
<form method="post" action="register.php">
 <fieldset>
  <legend>Login Credentials</legend>
  <label>Username<span class="red">*</span>:</label><input type="text" maxlength="30" name="username" style="width: 200px;" /><img src="images/t.gif" alt="unameinfo" id="unametip" class="info" title="Must be at least 3 characters long." />
  <label>Password<span class="red">*</span>:</label><input type="password" name="pass" style="width: 150px;" /><img src="images/t.gif" alt="passwordinfo" id="pwtip" class="info" title="<p class='head b'>Must be at least 8 characters long.</p>While we do not enforce any password policies we recommend you always use a random password containing both upper and lowercase letters, at least 1 number and 1 special character." />
  <label>Password Again<span class="red">*</span>:</label><input type="password" name="passagain" style="width: 150px;" />
 </fieldset>
 <fieldset>
  <legend>Personal Details</legend>
  <label>Email<span class="red">*</span>:</label><input type="text" name="email" style="width: 200px;" /><img src="images/t.gif" alt="emaildisclaimer" id="emailtip" class="info" title="We send any confirmation requests as required to your email. Article subscriptions also require a valid email address." />
  <label>First Name:</label><input type="text" name="fname" style="width: 150px;" />
  <label>Surname:</label><input type="text" name="sname" style="width: 150px;" />
  <label>Gender:</label><img src="images/t.gif" alt="male" class="genderm" /><input type="radio" name="gender" value="m" /> &nbsp; <img src="images/t.gif" alt="female" class="genderf" /><input type="radio" name="gender" value="f" />
 </fieldset>
</form>

CSS
Code:

/*** ClearFix ***/
clearfix:after			{ clear: both; content: "."; display: block; height: 0; line-height: 0; visibility: hidden; }
.clearfix				{ display: inline-block; zoom: 1; }
.clear {clear:both;}
 /*.*/
 
/*** Tableless Forms ***/
form fieldset {
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 border: 1px #dddddd solid;
 padding: 10px;
 width: 550px;
 margin-top: 10px;
 
 }

form fieldset legend {
 border: 1px #1a6f93 solid;
 color: black; 
 font-size: 13px;
 padding-right: 5px;
 padding-left: 5px;
 padding-top: 2px;
 padding-bottom: 2px;
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
 }

form label {
 width: 140px;
 padding-left: 20px;
 margin: 5px;
 float: left;
 text-align: right;
 clear: left;
 display: block;
 }

form img { float: left; margin: 5px 0 0 5px;}

input, textarea {
 margin: 5px;
 padding: 0px;
 float: left;
}

/*** css colors **/
.red { color: #FF0000; }

/*** css classes for html styling tags ***/
.b { font-weight: bold; }

/*** tooltip ***/
div.ttwrap { 
 background-color: #FFFFFF; 
 border: 2px solid #009999;
 z-index: 10;
 position: absolute;
 width: 300px;
 height: auto;
 padding: 5px;
 /*** not css standard but it will do until css3 is supported by all major browsers ***/
 -moz-border-radius-bottomright: 10px;
 -webkit-border-bottom-right-radius: 10px;
 }
div.ttwrap > p.head {
 margin: 0 0 5px 0;
 }


/*** CSS icons ***/
img.genderm, img.genderf, img.info { background-image: url("images/icons.png"); background-repeat: no-repeat; }
img.genderm { background-position: 0 0; width: 16px; height: 16px; float: left; }
img.genderf { background-position: 0 -16px; width: 16px; height: 16px; float: left; }
img.info { background-position: 0 -33px; width: 16px; height: 16px; float: left;}

the code does validate to xhtml strict and css using the w3validator (apart from the gecko and webkit border radious declarations ofcourse but i doubt that would cause an issue)

any help appreciated

my goodness what a popular site this seems to be. im just a n00b in css and xhtml right now, but hopefully not for long.

im trying to use a table to arrange the images in my website introduction page. im trying to make the page look exactly the same no matter the browser window size. im trying to float the two images that have the names programmingimg.gif and programmingtext.gif, but they are not floating to the right, they are just staying adjacent to the other image in the same cell.

one other problem that i am having is, that the only way for me to stretch the background gif across the window size it to fake a background. its just the first image in the file with a z index of -1. this works in FIREFOX but not in IE. in IE, nothing can be seen except the background image.

does anyone have a solution to either of these 2 problems?


css:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Patrick Allard's Very Graphic Website</title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>

<img src="backgroundfire2.gif" alt="background image" id="bg" />

<table border="1" class="introlayout">
<tr>
<td class="introtitle">

<img src="titlemaxfontgreyredfire.gif" alt="background image" id="titleimg" />

</td>
</tr>
<tr>
<td class="skillpics">

<img src="analogskillspic.jpg" alt="background image" id="analogskillsimg" />
<img src="programmingpic.jpg" alt="background image" id="programmingimg" />

</td>
</tr>
<td class="skilltext">

<img src="analogskillsmaxfontblackbluefire.gif" alt="background image" id="analogskillstext" />
<img src="programmingmaxfontblackbluefire.gif" alt="background image" id="programmingtext" />

</td>
</tr>
<td class="menu">

<img src="mainmenumaxfontblackbluefire.gif" alt="background image" id="mainmenuimg" />

</td>
</tr>
</table> 
</body>
</html>

html:

Code:

html, body 
{
height: 100%;
margin: 0;
padding: 0;
}

img#bg 
{
position:fixed;
width:100%;
height:100%;
z-index:-1;
}

img#titleimg 
{
width:100%;
}

img#mainmenuimg 
{
text-align:center;
width:30%;
}

img#analogskillsimg 
{
width:40%;
height:60%;
}

img#programmingimg 
{
float:right
vertical-align:bottom;
width:40%;
height:60%;
}

img#analogskillstext 
{
vertical-align:bottom;
width:40%;
}

img#programmingtext
{
float:right
width:40%;
}

table.introlayout
{
width:100%;
height:100%;
}

td.introtitle
{
width:100%;
height:10%;
}

td.skillpics
{
vertical-align:bottom;
width:100%;
height:70%;
}

td.skilltext
{
vertical-align:top;
width:100%;
height:10%;
}

td.menu
{
text-align:center;
width:100%;
height:10%;
}

Hi,

Can someone help me with why the following header bar doesn't work in Firefox? It just shows the very top of the bar with the two other divs inside of it.

Code:

<div class="cmsHeader">
	<div style="float: left;">Page Name</div>
	<div style="float: right;"><a href="" title='Add Page'><img src='images/icons/file_(add)_16x16.gif' border='0' alt='Add Page'></a></div>
</div>


.cmsHeader{
	background: #809096;
	padding: 5px;
	width: 98%;
	color: #FFFFFF;
}

.cmsHeader a{
	color: #FFFFFF;
	text-decoration: none;
}
.cmsHeader a:hover{
	text-decoration: underline;
}

Learning CSS and trying to emulate the following table:
Code:

|--------------------------------------|
| Text 1           |----------------|  |
| Text 2           |  Inner box text|  |
| Text 3           |----------------|  |
|--------------------------------------|

I can get a nested div to work vertically but not horizontally. I'm trying:

Code:

        div#container { float: left }
        div#title { float: right }
	<div id="container">
	        hello<br>hello
		<div id="title">
			Text 1<br />
                        Text 2
		</div>
	</div>

Which is producing:
Code:

|--------------------------------------|
| Hello                                |
| Hello                                |
|                  |----------------|  |
|                  |  Text 1        |  |
|                  |  Text 2        |  |
|                  |----------------|  |
|--------------------------------------|

Perhaps a positioning thing which I don't understand yet? It's not homework so you don't have to do it for me, but rather you could just point to knowledge sources.... Tx!

Hi Everyone,

I've been doing modest CSS for a while now and feel like I have a good grasp of it, and generally find a way of doing what I want. But, this has always bugged me and I need to understand what is going on...

I think it's a question of Floating.

This is in reference to http://www.arabellamusic.co.uk

I want the blog posts to be on the left, and some other content on the right. How is the best way to go about doing this? You can check my source, but this was my thinking:

Code:

HTML

<div class='inner'>
     <div class='left'>
     BLOG PHP HERE
     </div>

     <div class='right'>
     SOME OTHER STUFF HERE
     </div>
</div>

And the CSS:

.inner { width:788px; }
.left { float:left; width:50%; }
.right { float:left; width:50%; }

If you grab my stylesheet and my source, you will see that I have a couple more things in there, but I don't think they could be affecting the rest (text-align etc...)

So, am I doing this wrong? I have floated columns in other websites this way and it sometimes works, sometimes doesn't. Incidentally, once it would only work when I set 49% to each, I was assuming this was something to do with the box model I read about, but wasn't too sure.
I will try not to play around with the site too much until I get a reply or two, but a few things may jump around as I try stuff!

Thanks in advance...
James