|
CSS - Css Floating And Table-less Forms
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" /> <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 Similar TutorialsI have a web page in which I have a table and within that table I have a sub table with two columns. I am using css and allow visitors to move the first column from right to left (they both are different sizes). I now have a need the text in column one be wrapped under column two (as you can do with pictures in say MS word). I can't write the text ahead of time at the bottom of column two as that column floats from left to right -- meaning that the text that should go underneath would be different each time. I assume it is not possible with tables to do such a thing, but thought to ask the experts to see if it is possible or there is another logical way of accomplishing it. I could simply call two different files based on the right-float and left-float and right text accordingly in both files, but to me that does not sound such a great idea. 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%;
}
ok...This is driving me slightly bonkers. I'm trying to do forms without tables. The issue is, I need a description sometimes, and I'd like to have multiple descriptions line up properly, as if they were in a table. Here's the stylesheet: Code:
/*
CSS Style sheet for BES OOP Forms
*/
.Form fieldset
{
background-color: #FFFFFF;
border: 0px;
margin: 0;
padding: .5em;
}
.Form > fieldset
{
border: 1px solid #009;
}
.Form legend
{
background: #BBB;
border: #009 solid 1px;
padding: 2px 10px;
font-weight: bolder;
margin:0;
}
.Form .Form_Row
{
border-bottom: 1px dotted #009;
margin: 0;
padding: .25em;
clear: left;
}
.Form .Form_Footer
{
text-align: center;
border: 1px solid #009;
margin: -1px 0 0;
background-color: #EEE;
clear: left;
}
.Form label
{
width: 13em;
display: block;
float: left;
}
.Form .Form_Input
{
display: block;
float: left;
width: 20em;
}
.Form .Form_Desc
{
display: block;
float: left;
}
The issue is one of flexibility: as you can see in the attached images, it works fine as long as the .Form_Input is narrower than the 20em allotted. However, when the .Form_Input is wider than that, the description is placed over the end of the input itself, which stinks. IE does it "right", sorta, and just bumps the description over further than it really should. Any ideas? display:table, etc are out, because that doesn't work at all in IE. min-width solves the problem for Mozilla and company, but is ignored completely by IE. I really want to do this without tables...but damn. MPEDrummer hi, i am a total newbie with css and trying to create a floating divider. an example can be seen at www.payjunction.com. does anyone know a tutorial on how to create one? thanks for the help in advance I have 3 tables in a div. I have two of the tables one on top of the other. I wanted to place the third table to the left of the bottom table. So I placed the second table relative and left -50px. I placed the third with position absolute, top -70px and float right to achieve this layout. Is there a better way of doing this out of curiousity? 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 I currently have the following layout Code:
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
how do i go about making the same layout but using CSS. Each <td> is 50% wide 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, 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;
}
Hi, I'm trying to display text in a floating div in the middle of the page. The style is as follows: Code:
.mainContentAreaBackground {
position:absolute;
z-index:11;
top: 190px;
left: 230px;
width:70%;
height:72%;
}
#mainContentArea{
z-index:12;
position:absolute;
overflow:auto;
overflow-x:hidden;
width: 67%;
height: 68%;
top:205px;
left:246px;
text-align:left;
font-family:Tahoma;
font-size:10.0pt;
visibility:visible;
}
There are two anomalies which I think might be bugs in IE's implementation of CSS, and I was hoping someone might be able to give me some advice as to how to get around them. The first problem is that, when going to highlight text in the main content area, all objects on the page are selected, rather than just the intended text. The second anomaly is that, when using the mouse wheel to scroll down in the mainContentArea div when there's overflow, the cursor needs to be hovering over text. If it's hovering over any place with a "hole" in it, such as the space between paragraphs, then it will not scroll. Everything works fine in Firefox. You can see what I'm talking about he http://www.cs.mcgill.ca/~jbeard4/lepdev If anyone has any advice, please let me know. Thanks! -Jake I'm trying to float my navigation to the right side of the screen, but not messing up the order of the links. (left to right as in 1.2.3.4.5). The problem I'm having is the links go right, but so does the order of the links (they show right to left 5.4.3.2.1). Here's the CSS: Code:
ul#nav {
width: 890px;
font-size: 0.70em;
list-style: none;
padding: 0;
margin-top: 3em;
float: left;
clear: both;
}
ul#nav li {
background-color: #0776a0;
text-align: left;
float: right;
text-transform: uppercase;
border-right: 2px solid #279bd5;
display: block;
}
ul#nav li a, ul#nav li a:visited {
display: block;
padding: 0.4em 4em 0.4em 0.4em;
color: #FFF;
text-decoration: none;
}
ul#nav li a:hover {
color: #FFF;
background-color: #279bd5;
text-decoration: none;
}
ul#nav li a.current, ul#nav li a.current:visited, ul#nav li a.current:hover {
color: #FFF;
text-decoration: none;
}
And here's the html Code: <ul id="nav"> <li><a href="Home" title="Home">Home</a></li> <li><a href="Example" title="Example">Example</a></li> </ul> Will also post website with the example if asked. I have recently created a design in which the main content and sidebar are both floated right, but I've been having a problem. For whatever reason, the main content has been floating slightly below my sidebar. Could anyone please look at the code and tell me how to fix it? Thanks a ton, go here to view my problematic design. I've had to write the address differently because "new user accounts are not permitted to create posts containing URLs." wendyhenrichs (dot) com (slash) pin. If you had trouble understanding my above message, here's the address with spaces in them (just remove the spaces in your address bar): http:// www . wendyhenrichs . com / pin Please just take a quick look. Thanks! The image below is how I want my website to look (div-wise, that is). It looks like this on all platforms and on all browsers except IE 5.0 and 6.0: IE 5.0 and 6.0 render the following: I have included my html + css code below. I have tried to make #sidenav float:left instead of float:right. This makes no difference for browsers but IE 5.0 and 6.0, which then again render the page wrong. Also decreasing the width of #sidenav (i.e. to 20px) doesn't help; the result is the same. Could somebody please help me fixing this There must be at least one css guru out there today All help is greatly appreciated! Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
#main {
background-color: red;
text-align: center;
}
#wrapper {
text-align: left;
margin: 0 auto;
width: 300px;
}
#content {
background: yellow;
width: 200px;
float: left;
margin-left:50px;
}
#logo {
background-color: lime;
}
#mainnav {
background-color: pink;
}
#subnav {
background-color: navy;
}
#text {
background-color: orange;
}
#sidenav {
background-color: blue;
width: 50px;
float: right;
padding-top: 50px;
}
#footery {
clear:both;
background-color: #fff;
}
#footer {
background-color: pink;
margin: 0 auto;
width: 200px;
}
#logo, #mainnav, #subnav, #footer {
min-height: 30px;
}
</style>
</head>
<body>
<div id="main">
<div id="wrapper">
<div id="content">
<div id="logo"><br><br></div>
<div id="mainnav"><br><br></div>
<div id="subnav"><br><br></div>
<div id="text"><br><br><br></div>
</div>
<div id="sidenav">text</div>
</div>
<div id="footery">
<div id="footer"><br><br></div>
</div>
</div>
</body>
</html>
hey I am trying to get this sub menu floating on the rollover of a list item. Here's my HTML: Code: <body> <div id="banner"> </div> <div id="leftmenu"> <ul> <li>List 1</li> <li><a href="">List 2</a></li> <li><a href="">List 3</a> <ul> <li><a href="">List 3.1</a></li> <li><a href="">List 3.2</a></li> <li><a href="">List 3.3</a></li> <li><a href="">List 3.4</a></li> </ul> </li> <li><a href="">List 4</a></li> <li><a href="">List 5</a></li> <li><a href="">List 6</a></li> <li><a href="">List 7</a></li> <li><a href="">List 8</a></li> <li><a href="">List 9</a></li> </ul> </div> <div id="maincontent"> CONTENT </div> </body> and this CSS: Code:
#leftmenu {
position: absolute;
margin: 0px;
top: 120px;
left: 0px;
width: 147px;
height: 800px;
background-color: #cccc66;
font-size: 10px;
font-weight: bold;
}
ul {
padding: 0;
margin: 0;
list-style: none;
}
ul li {
color: #FFFFFF;
display: block;
background-color: #FF0000;
margin-bottom: 1px;
text-align: right;
font-weight: bold;
}
ul li a {
text-decoration: none;
color: #FFFFFF;
}
ul li a:hover {
color: #000000;
}
ul li ul {
display: none;
position: absolute;
top: 200px;
left: 100px;
}
#maincontent {
position: absolute;
z-index: 0;
left: 147px;
top: 120px;
height: 381px;
width: 100%;
padding-top: 10px;
padding-left: 10px;
margin-top: 0px;
margin-left: 0px;
background-color: #FFFFFF;
font-family: Arial;
font-size: 13px;
}
so yeah, I am struggling at this point, I have looked at a reference that someone gave me last time I brought up the issue, but can't get it working, if you can spot why, help would be appreciated, not having much luck, thinking maybe a syntax thing(?), not sure...HELP!! kr. Please look at this page in FF http://www.roadhousecamper.com/camper.asp?rv=17 Notice div with the red background and the thumbnails? It should float to the right of the large image but is does not. It does though in IE7? Thanks for any help. T Hello. I spoke with some css developers yesterday on IRC but they failed to fix the problem. They suggested me to ask here for help so I will. I am currently making a new homepage and this is my page; mg-s.org/newly/ I had to edit most of the .css because the page was "floating". Like, some people couldn't see everything and if we zoomed in or out then the page got messed up.. So here is the current progress: mg-s.org/newly/ which is messed up. It's supposed to look like this: pokit.org/get/?00e5090c7ab5a0972f325bb16608f6fb.jpg But as you can see it's not. Here is the style.css : pastebin.com/BPrfZuBd Here is the index.php : pastebin.com/BDQKcxCE I am not that familiar with css so I need help. I've already editing on the size in the .css like on "top" to fix the #panel so it goes futher up but it's not working. Same with the #rightmenu I need to center a div which contains two columns. Its important that the div encapsulates the content within. This is what I've done so far: CSS: Code: * {
margin: 0;
padding: 0;
}
#container {
float: left;
width: 960px;
border: 1px solid #000000;
}
.left {
float: left;
width: 650px;
}
.right {
float: left;
width: 250px;
}
HTML: Code: <div id="container"> <div class="left"> left content goes here </div> <div class="right"> right content goes here </div> </div> Question: Is it possible to center #container to the middle of the page? Using margin: 0 auto; doesnt work with floating divs. Its very important that #container has a border around .left and .right. Any help will be appreciated Hi im experiencing big problems with creating this layout. I spent whole day with positiooning this divs but i cant do this final layout. Everytime i want to float divs to left DIV 1 and DIV 2 are ok but DIV 3 jump to new line under DIV 2 and dont fit the gap between DIV 3 and div 1 . Can someone please help me ? Thanks ... link to image : xipic.eu/ufiles/njf25uy8_divs.png Hi All I seem to have an issue with floating an element in IE6&7. All other browsers (including IE8) are fine. When using a right float element, IE7 seems to push the elements to the left of it below the right-floated element, instead of to the left where they are suppose to be. Is there a work-a-round and/or hack for this? Cheers! Russ Hi Guys, Am farely new to CSS and was workin on a wordpress site. when I started getting this error ... Now what I want is three DIVs to be placed side by side on the same background image ... so I instill a wrap ... I want them to look something like this ... http://img244.imageshack.us/img244/8750/wantga3.jpg Here is the code am using .... Code: /* bottom page
================================================= */
#bottom {
width: 1000px;
background: #95A566 url("images/bottom.gif") repeat-x top left;
}
#wrap {
padding-top: 3%;
padding-left: 0;
width: 1000px;
}
#wrap
a:hover {color: #000;}
#wrap ul {
margin-left: 0px;
list-style-type: none;
}
#wrap ul li {
background: url("images/li_bottom.gif") no-repeat;
padding-left: 25px;
background-position: 0 0.4em;
}
.tools {
padding-left: 25px;
background: url("images/leaf2.gif") no-repeat top left;
margin-top: 1.5em;
}
.left {
width: 25%;
float: left;
margin-left: 10%;
}
#bottomnav li a span {
display: none;
}
#bottomnav li a:hover span {
display: inline;
}
.center {
width: 25%;
float: left;
margin-left: 2.5%;
}
#bottomnav li a span {
display: none;
}
#bottomnav li a:hover span {
display: inline;
}
.right {
width: 25%;
float: left;
margin-left: 2.5%;
}
And the Implementation .... Code: <div id="bottom">
<div id="wrap">
<div class="left">
<h3 class="tools">Recent Posts</h3>
<ul>
<?php get_archives('postbypost', 10); ?>
</ul>
<h3 class="tools">Toolshed</h3>
<?php include (TEMPLATEPATH . "/bottomnav_menu.php"); ?>
<?php include (TEMPLATEPATH . "/searchform.php"); ?>
</div><!-- end left -->
<div class="center">
<h3 class="tools">Recent Posts</h3>
<ul>
<?php get_archives('postbypost', 10); ?>
</ul>
<h3 class="tools">Toolshed</h3>
<?php include (TEMPLATEPATH . "/bottomnav_menu.php"); ?>
<?php include (TEMPLATEPATH . "/searchform.php"); ?>
</div><!-- end center -->
<div class="right">
<h3 class="tools">Recent Comments</h3>
<p><?php mdv_recent_comments(8, 13, '', ' [...]<br />', true, 0); ?></p>
</div><!-- end right -->
Now ... this gives me a perfect view in FireFox .... http://img148.imageshack.us/img148/9121/firefoxej7.jpg But Internet Exploder messes up .... and pushes everything to the right ... http://img148.imageshack.us/img148/5365/ievs9.jpg Can you guys suggest approprate solutions for this Any help would be much appreciated.... Thanks, Abhi |
|||||||