Yes i know ie7 and ie6 dont like to float things the way i want them, but im just wondering how i can fix this. i have this code <div id="content"> <form action="insert_article.php" method="post"> <div class="row"> <div style="float:left; width:64px; line-height:18px;">Title:</div> <div style="float:left; width:140px;"> <input name="title" type="text" class="txt_input"> </div> </div> <div class="row"> <div style="float:left; width:64px; line-height:18px;">Sub-Title:</div> <div style="float:left; width:140px;"> <input name="subtitle" type="text" class="txt_input"> </div> </div> <div class="row"> <div style="float:left; width:64px; line-height:18px;">Article:</div> <div style="float:left;"> <textarea rows="10" cols="50" name="article" class="txt_area"></textarea> </div> </div> <input name="submit" type="submit" id="submit" value="Create New Article" class="btn_submit" style="margin: 0px 0px 0px 200px;"> </form> </div> Code (markup): on my page and it floats below the left hand sidebar. This code is included in a file that also includes, top and bottom.php, i will post the whole code and css further down. On firefox, it displays perfectly like i want it to, but on ie (ie tab anyway) it does not. that is why the topic title is IE6/7, instead of just 6 or 7 this is my full code in top.php, editarticle.php, and bottom.php <?php session_start( ); ?> <html> <head> <title>Soldiers Of Fortune</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="/css.css" rel="stylesheet" type="text/css"> </head> <body> <div id="container"> <div id="header"><span class="copyright">Copyright Soldiers Of Fortune, $oF | .Ac30nfir3//</span> <div class="login_container"> <?php require('config.php'); //Include our config... if(($user->data['group_id'] != 5) || ($user->data['user_rank'] != 7)) { header( 'Location: /index.php' ) ; } session_register("username"); $username = $user->data['username']; if($user->data['user_id'] != ANONYMOUS) //If the user isnt a guest { $rank_id = $user->data['user_rank']; $result = mysql_query("SELECT * FROM phpbb_ranks WHERE rank_id='$rank_id'"); while($row = mysql_fetch_array($result)) { if(($row['rank_title']{0} == 'A') || ($row['rank_title']{0} == 'E') || ($row['rank_title']{0} == 'I') || ($row['rank_title']{0} == 'O') || ($row['rank_title']{0} == 'U')) { $an = "an"; } else { $an = "a"; } echo "Hello ".$user->data['username']."!<br> You are ".$an." ".$row['rank_title']."."; } } else //else they arent logged in ergo we show the login form. Juts basic HTML { ?> <form action="/forum/ucp.php?mode=login" method="post" enctype="multipart/form-data"> <div style="text-align:center;">Please <strong>login</strong> below, or <a href="/forum/ucp.php?mode=register" class="register"><font color="#FFFFFF">register</font></a>.</div> <div class="row"> <div style="float:left; width:64px; line-height:18px;">Username:</div> <div style="float:left; width:140px;"> <input name="username" type="text" id="user" class="txt_input"> </div> </div> <div class="row"> <div style="float:left; width:64px; line-height:18px;">Password:</div> <div style="float:left; width:140px;"> <input name="password" type="password" id="pass" class="txt_input"> </div> </div> <div class="row"> <input name="login" type="submit" id="submit" value="Login" class="btn_submit" style="margin:0px 0px 0px 84px;"> </div> <input type="hidden" name="redirect" value="/index.php"> </form> <?php } ?> </div> </div> <div id="nav"> <a href="/" class="top_nav_home"></a> <a href="/forum" class="top_nav_forums"></a> <a href="/members.php" class="top_nav_members"></a> <a href="/matches.php" class="top_nav_matches"></a> <a href="/tournaments.php" class="top_nav_tournaments"></a> </div> <div class="main_holder"> <div id="leftstuff"> <div class="left_box"> <p class="left">There have been no matches recently! Please check back later.</p> </div> <div id="members"></div> <p class="left">The newest forum member is...<br>GreenMachine</p> <p class="left">The newest clan member is...<br>$oF | .Ac30nfir3//</p> </div> <div id="content"> <form action="insert_article.php" method="post"> <div class="row"> <div style="float:left; width:64px; line-height:18px;">Title:</div> <div style="float:left; width:140px;"> <input name="title" type="text" class="txt_input"> </div> </div> <div class="row"> <div style="float:left; width:64px; line-height:18px;">Sub-Title:</div> <div style="float:left; width:140px;"> <input name="subtitle" type="text" class="txt_input"> </div> </div> <div class="row"> <div style="float:left; width:64px; line-height:18px;">Article:</div> <div style="float:left;"> <textarea rows="10" cols="50" name="article" class="txt_area"></textarea> </div> </div> <input name="submit" type="submit" id="submit" value="Create New Article" class="btn_submit" style="margin: 0px 0px 0px 200px;"> </form> </div> </div> <div id="footer"></div> </div> </body> </html> Code (markup):
Please post html, not php. View source and copy that. We also need to see all the css. We can't very well debug if we can't view the page. A link would do. cheers, gary
well i thought i might as well post my whole thing just in case it was something in there messing it up, and i just forgot to post the css and link, sorry if i offended you :l <html> <head> <title>Soldiers Of Fortune</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="/css.css" rel="stylesheet" type="text/css"> </head> <body> <div id="container"> <div id="header"><span class="copyright">Copyright Soldiers Of Fortune, $oF | .Ac30nfir3//</span> <div class="login_container"> Hello Ac30nfir3!<br> You are a Forum Admin. </div> </div> <div id="nav"> <a href="/" class="top_nav_home"></a> <a href="/forum" class="top_nav_forums"></a> <a href="/members.php" class="top_nav_members"></a> <a href="/matches.php" class="top_nav_matches"></a> <a href="/tournaments.php" class="top_nav_tournaments"></a> </div> <div class="main_holder"> <div id="leftstuff"> <div class="left_box"> <p class="left">There have been no matches recently! Please check back later.</p> </div> <div id="members"></div> <p class="left">The newest forum member is...<br>GreenMachine</p> <p class="left">The newest clan member is...<br>$oF | .Ac30nfir3//</p> </div><div id="content"><p class="content"> </p> <form action="update.php?article_id=$row[article_id]" method="post"> <div class="row"> <div style="float:left; width:64px; line-height:18px;">Title:</div> <div style="float:left; width:140px;"> <input name="title" type="text" class="txt_input" value="Welcome to Soldiers Of Fortune!"> </div> </div> <div class="row"> <div style="float:left; width:64px; line-height:18px;">Sub-Title:</div> <div style="float:left; width:140px;"> <input name="subtitle" type="text" class="txt_input" value="Wipe your feet, and make yourself at home!"> </div> </div> <div class="row"> <div style="float:left; width:64px; line-height:18px;">Article:</div> <div style="float:left;"> <textarea rows="10" cols="50" name="article" class="txt_area">Welcome to the homepage of the Soldiers Of Fortune ($oF) CS 1.6 Clan! If you want to join, register on the forums <a href="/forum/ucp.php?mode=register">here</a> and post! One of our leaders may just get you a tryout! Here at Soldiers Of Fortune, we will be holding mini tournaments organized by clan members. If you want to join, just post in the tournaments topic on the forums! Wrapping this up, if your looking for a server to play on just to have fun, join ours! Just click the link in the last article!</textarea> </div> </div> <input name="submit" type="submit" id="submit" value="Edit Article" class="btn_submit" style="margin: 0px 0px 0px 225px;"> </form> </div></div> <div id="footer"></div> </div> </body> </html> Code (markup): body { background: #212121; margin: 0px; padding: 0px; } #container { position: relative; left: 50%; margin-left: -400px; /* half the width of the div */ background: #212121; width: 800px; height: auto; } #leftstuff { float: left; background:url(images/left_box.gif) repeat-y; } #header { float:left; /*background-image:url("images/header.gif");*/ /*border:1px solid #009900;*/ background:url(images/header.gif) no-repeat; width: 796px; height: 326px; margin-left: 1px; } .row{ color: #FFFFFF; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; float:left; width:100%; margin:2px 0px 0px 20px; } /* login box starts here */ .login_container{ float:right; width:210px; height:80px; margin:180px 45px 0px 0px; color:#FFFFFF; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; } a{ color:#14C600; } a:hover{ text-decoration:none; } .txt_input{ color:#ffffff; width:140px; border:1px solid #14C600; background:#0F3E14; } .txt_area{ color:#ffffff; border:1px solid #14C600; background:#0F3E14; } .btn_submit{ border:1px solid #202020; background:#0B090A; height:20px; color:#FFFFFF; } /* login box ends here */ /* top navigation starts form here */ #nav { margin-top: -301px; margin-right: 12px; width: 388px;/*358*/ height: 41px; float: right; } .top_nav_home{ float:left; width:55px; height:41px; background:url(images/nav/home.gif) no-repeat; } .top_nav_home:hover{ background:url(images/nav/home_h.gif) no-repeat; } .top_nav_forums{ float:left; width:68px; height:41px; background:url(images/nav/forums.gif) no-repeat; } .top_nav_forums:hover{ background:url(images/nav/forums_h.gif) no-repeat; } .top_nav_members{ float:left; width:77px; height:41px; background:url(images/nav/members.gif) no-repeat; } .top_nav_members:hover{ background:url(images/nav/members_h.gif) no-repeat; } .top_nav_matches{ float:left; width:76px; height:41px; background:url(images/nav/matches.gif) no-repeat; } .top_nav_matches:hover{ background:url(images/nav/matches_h.gif) no-repeat; } .top_nav_tournaments{ float:left; width:110px; height:41px; background:url(images/nav/tournaments.gif) no-repeat; } .top_nav_tournaments:hover{ background:url(images/nav/tournaments_h.gif) no-repeat; } /* top navigation end here */ .left_box { width: 245px; } .main_holder{ float:left; background:url(images/bdy_bg.gif) repeat-y; height:auto; width:100%; } #members { background-image:url("images/members.gif"); width: 245px; height: 34px; } #content { width: 552px; float: left; } #footer { background-image:url("images/footer.gif"); margin-left: 3px; width: 796px; height: 50px; clear: both; } p.left { font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #FFFFFF; padding-left: 20px; padding-right: 20px; } p.content { font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #FFFFFF; padding-left: 20px; padding-right: 20px; } span.content { font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #FFFFFF; padding-left: 20px; padding-right: 20px; } span.connect { font-size: 15px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; color: #FFFFFF; padding-left: 20px; padding-right: 20px; } span.connect a { color: #FFFFFF; } span.connect a:hover { text-decoration: none; } span.copyright { font-size: 14px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #333333; margin-left: 225px; } Code (markup): http://soldiersoffortune.darkstargamers.com/editarticle.php Click an article name and then it brings up the form
Not tested. There appears to be a small, 1 or 2 px, overlap of the columns. It's probably due to an overflow I haven't spotted. Firefox would allow the overflow, while IE will expand the box, making it too wide for both columns. Instead of floating the right column, put a left margin sufficient to create some slop for IE. I think this will work: #content { /*css.css (line 141)*/ /*float: left; ⇦ delete this line*/ margin-left: 250px; /*this should give enough room*/ /*width:542px; ⇦ remove this line, too--the width property will cause evilness to happen in IE*/ } Code (markup): cheers, gary
this puts the form on the right side, but the content is still below that of the left box, example ___________________________ |LEFT CONTENT| | |LEFT CONTENT| | |LEFT CONTENT| | |LEFT CONTENT| | |LEFT CONTENT| | | |RIGHT CONTENT| | |RIGHT CONTENT| | |RIGHT CONTENT| | |RIGHT CONTENT| | |RIGHT CONTENT| | |RIGHT CONTENT| |____________|[u]RIGHT CONTENT[/u]| Code (markup): would this be due to some margin-top somewhere?
Gawd! If you'd have been paying for my services, it would have been $300 well spent. Not to mention, well earned. The issue is with .row {margin:2px 0px 0px 20px;}. Change that to .row {2px 0 0;}, and add {padding-left: 20px;} to #content. For whatever reason, IE seems to have collapsed a lateral(!) margin. In #leftstuff, add {width: 245px;}. It's not a good idea to leave float widths indeterminant in IE, it gets wonky. cheers, gary
well im not saying, "DO THIS NOW!" im just asking if you would be so kind as to help, and you are actually, that row bit was a hint from another coder,(i originally was using tables for the login box, pain) but it was meant for the login box but i thought it would work just as well there. Its still doing the same thing though, changing .row, #content, and #leftstuff didnt make it go up any, its still trying to clear the text over to the left, :S if i had my firebug working i could see exactly what is styling it, but i upgraded to ff3 and firebug isnt compatible EDIT Ive figured out what it was, .row{ color: #FFFFFF; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; float:left; [COLOR="Red"]width:100%;[/COLOR] margin:2px 0px 0px 20px; } Code (markup): the row was stretching across the whole page bumping into the text, making it go down farther, so i had to change this value to 69%, but that messed up my log in box, so i had to create a new class, so i am left with .loginrow and .formrow, which are used and work perfectly thanks for your help kk3st +rep'd
Gary was making a joke, not rippin on you : ) Nope. As Gary showed above, IE thinks there's not enough room for the two side by side-- that's when it drops stuff to down below. So Gary tried shuffling the padding around (moving it to the container so there'd be the same effect). Unless you've got a "clear" somewhere, it shouldn't be that the content is clearing the left side. In your form, I see what you're trying to do... I wouldn't do it that way, but eh... Usually, when you have floats in a container (in this case, you have two floated divs in the form), the first float goes to the side... and then so long as there's room for the second one, the second one will go to the side of the first one. The second one will only drop down if the container isn't wide enough for them to sit side by side. Now, sometimes when you have a float and a static container next to each other, sometimes there isn't really enough room... but browsers like FF will let that bit of extra content flow out from the container. IE6 does not. It will either try to make the container wider or, failing that, it drops the second content down beneath the first. By the way, here's how I'd do the form (cause I see you're floating one thing left, and it's like the label, and then you're floating the input left... but you don't have to do all that work cause an input's inline, meaning if there's room, it will sit next to a float anyway! So you don't need to float it at all!): <form action="update.php?article_id=$row[article_id]" method="post"> <div class="row">(I'm treating this like a fieldset, wrapping around the whole form) <div> <label for="title">Title:</label> <input name="title" id="title" type="text" class="txt_input" value="Welcome to Soldiers Of Fortune!"> </div> <div> <label for="subtitle">Sub-Title:</div> <input name="subtitle" id="subtitle" type="text" class="txt_input" value="Wipe your feet, and make yourself at home!"> </div> <textarea rows="10" cols="50" name="article" class="txt_area">Welcome to the homepage of the Soldiers Of Fortune ($oF) CS 1.6 Clan! If you want to join, register on the forums <a href="/forum/ucp.php?mode=register">here</a> and post! One of our leaders may just get you a tryout! Here at Soldiers Of Fortune, we will be holding mini tournaments organized by clan members. If you want to join, just post in the tournaments topic on the forums! Wrapping this up, if your looking for a server to play on just to have fun, join ours! Just click the link in the last article!</textarea> <div> <input name="submit" type="submit" id="submit" value="Edit Article" class="btn_submit" style="margin: 0px 0px 0px 225px;"> </div> </div> <!-- this is the end of "row"--> </form> Code (markup): Then in CSS you have the divs which wrap each label-input pair clear: left; which will clear your labels which you will set a width on and float left. form { set the width-- wide enough for everything to fit! } label { line-height: 18px; width: 64px; padding: 0 5px; text-align: left; float: left; } .row div { (this means every div inside the div with the class of "row") float: left; clear: left; } Code (markup): So, the divs wrapping the label-input pairs is floated, so that they can clear the floats above them without clearing any sidebars on the site, and the labels are floated left with a set width... you can add to the right padding of the labels to push the inputs further away. I didn't set a width of the inputs because it looks like the text doesn't fit the way it is (maybe you meant it that way), but you can. Because the inputs are inline, they'll wrap alongside the labels so long as the form is wide enough. I didn't put a div around the textarea cause I don't think it needs one, but I did wrap a div around the submit in case you need that for styling.
i dont need a div around the button, because all my buttons are the same color, black background, gray outline. Unless you mean to push it over, which i guess it could work. Whats the difference between <label> and <label for="title"> i know for="title" means that thats labelling the title, but really, i dont see why. the styling isnt using it, it is just for people to know whats it labelling? EDIT: i tried it and bam, the page is messed. see it here http://soldiersoffortune.darkstargamers/editarticle.php the title and subtitle bars are flush with each other, when i want them on seperate lines, there is no "Article:" label, and the footer is no longer centered. Did i do something wrong? or did it just not work? HTML <html> <head> <title>Soldiers Of Fortune</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="css.css" rel="stylesheet" type="text/css"> </head> <body> <div id="container"> <div id="header"><span class="copyright">Copyright Soldiers Of Fortune, $oF | .Ac30nfir3//</span> <div class="login_container"> Hello Ac30nfir3!<br> You are a Forum Admin. <br><br><br><a href="/admin" class="adminpanel">Go to admin panel.</a> </div> </div> <div id="nav"> <a href="/" class="top_nav_home"></a> <a href="/forum" class="top_nav_forums"></a> <a href="members.php" class="top_nav_members"></a> <a href="matches.php" class="top_nav_matches"></a> <a href="tournaments.php" class="top_nav_tournaments"></a> </div> <div class="main_holder"> <div id="leftstuff"> <div class="left_box"> <p class="left">There have been no matches recently! Please check back later.</p> </div> <div id="members"></div> <p class="left">The newest forum member is...<br>GreenMachine</p> <p class="left">The newest clan member is...<br>$oF | .Ac30nfir3//</p> </div><div id="content"><p class="content"> </p> <form action="update.php?article_id=$row[article_id]" method="post"> <div class="row"> <div> <label for="title">Title:</label> <input name="title" id="title" type="text" class="txt_input" value="Soldiers Of Fortune Server."><br> </div> <div> <label for="subtitle">Sub-Title:</div> <input name="subtitle" id="subtitle" type="text" class="txt_input" value="Roll the dice and more!"><br> </div> <textarea rows="10" cols="50" name="article" class="txt_area">While your here, you might as well check out our server too! Looking for a fun place to play without worrying about being criticized on your every move? Just <a href="steam://connect/216.6.235.137:27015">Click Here</a> to join now! Do you have a suggestion for the server? just register and post on the forums under the "Suggestions" forum! Make your voice heard!</textarea> <div> <input name="submit" type="submit" id="submit" value="Edit Article" class="btn_submit" style="margin: 0px 0px 0px 225px;"> </div> </div> <!-- this is the end of "row"--> </form> </div></div> <div id="footer"></div> </div> </body> </html> Code (markup): CSS body { background: #212121; margin: 0px; padding: 0px; } #container { position: relative; left: 50%; margin-left: -400px; /* half the width of the div */ background: #212121; width: 800px; height: auto; } #leftstuff { float: left; background:url(images/left_box.gif) repeat-y; width: 245px; } #header { float:left; /*background-image:url("images/header.gif");*/ /*border:1px solid #009900;*/ background:url(images/header.gif) no-repeat; width: 796px; height: 326px; margin-left: 1px; } form { width: 600px; } label { line-height: 18px width: 64px; padding: 0 5px; text-align: left; float: left; } .row{ color: #FFFFFF; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; float:left; width:100%; margin:2px 0 0; } .row div{ float:left; clear:left; } /* login box starts here */ .login_container{ float:right; width:210px; height:80px; margin:180px 45px 0px 0px; color:#FFFFFF; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; } a{ color:#14C600; } a:hover{ text-decoration:none; } .txt_input{ color:#ffffff; width:140px; border:1px solid #14C600; background:#0F3E14; } .txt_area{ color:#ffffff; border:1px solid #14C600; background:#0F3E14; } .btn_submit{ border:1px solid #202020; background:#0B090A; height:20px; color:#FFFFFF; } /* login box ends here */ /* top navigation starts form here */ #nav { margin-top: -301px; margin-right: 12px; width: 388px;/*358*/ height: 41px; float: right; } .top_nav_home{ float:left; width:55px; height:41px; background:url(images/nav/home.gif) no-repeat; } .top_nav_home:hover{ background:url(images/nav/home_h.gif) no-repeat; } .top_nav_forums{ float:left; width:68px; height:41px; background:url(images/nav/forums.gif) no-repeat; } .top_nav_forums:hover{ background:url(images/nav/forums_h.gif) no-repeat; } .top_nav_members{ float:left; width:77px; height:41px; background:url(images/nav/members.gif) no-repeat; } .top_nav_members:hover{ background:url(images/nav/members_h.gif) no-repeat; } .top_nav_matches{ float:left; width:76px; height:41px; background:url(images/nav/matches.gif) no-repeat; } .top_nav_matches:hover{ background:url(images/nav/matches_h.gif) no-repeat; } .top_nav_tournaments{ float:left; width:110px; height:41px; background:url(images/nav/tournaments.gif) no-repeat; } .top_nav_tournaments:hover{ background:url(images/nav/tournaments_h.gif) no-repeat; } /* top navigation end here */ .left_box { width: 245px; } .main_holder{ float:left; background:url(images/bdy_bg.gif) repeat-y; height:auto; width:100%; } #members { background-image:url("images/members.gif"); width: 245px; height: 34px; } #content { margin-left: 250px; padding-left: 20px; } #footer { background-image:url("images/footer.gif"); margin-left: 3px; width: 796px; height: 50px; clear: both; } p.left { font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #FFFFFF; padding-left: 20px; padding-right: 20px; } p.content { font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #FFFFFF; padding-right: 20px; } span.content { font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #FFFFFF; padding-right: 20px; } span.copyright { font-size: 14px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #333333; margin-left: 225px; } Code (markup):
If the old set-up worked, leave it be. pushing it around is usually the reason I have it... also sometimes I found IE would treat its positioning differently and a div wrapped around it worked. It's an accessibility thing, usually for screen readers where the label is being linked to the input by sharing its "for" with the input's "id". Visual users never see the difference. I doubt you'll have many blind visitors on a gaming site, but you never know. I've only got one, "row" which is taking the place of what would otherwise be a fieldset. The other divs, which have no names, are wrapping label-input pairs together. I do that for styling reasons. I found that if I only float and clear the labels with the labels themselves, that if I did major text-enlargements then the inputs could ride up to alongside the wrong label. It's this: <div> <label...../label> <input.... > </div> That makes the label-input pair a sort of unit. You can then kinda do whatever you want with them. This includes adding space between your lines too. If each of those wrapping divs had a bottom margin of like 5px, you'd get this label... input (5px space) label... input (5px space) textarea submit (5px space) Or whatever you'd want. Your link is out, but I assume that's what you mean with that each "line" is too close to each other? Nevermind, the older link works. I hadn't seen the article label, sorry : ) It would be added the same as the others, except that I think you had it on top? I can't remember. The divs don't seem to be clearing, otherwise the inputs wouldn't be able to stack on each other like that. A second solution could be to set the widths of those wrapping divs to a short enough width that two inputs can't fit-- but we shouldn't need to do that. If what you had earlier worked then go ahead and go for it. I just don't write my forms that way. Do keep the for and id's to match though.
lol okay will do xD thanks for explaining that, yeah i noticed after i posted about the two divs hugging everything, its just that they werent in line with other, so it looked like the </div> was to another div when really, it ended the first one My link, i forgot the .com xD the stupidest thing ive ever done. +rep'd