On my site www.gamersinsaninty.com in the admin panel (protected so you cant see it) i have forms to enter new news articles etcetera. The white "news" div has a min-height of 40px. In any page with text, it wraps over the text, but if there are forms in the div, it does not wrap them. The forms must be breaking out of the divs somehow. This has worked previously, but after making adjustments to my css, i must have change something that made it break. I dont know when, or what i did. because i dont go to my admin panel every day. Here is a demo of what i am talking about. (dummy page and does not send data. www.gamersinsaninty.com/formbreak.php
» Oops! File not found! There seems to be a problem! The page that you requested was not found on the web server. If you followed a link, please contact an administrator here.
They FLOAT, floats are not wrapped in standards compliant browsers unless the wrapper itself is floating, or has it's overflow property set to :hidden or :auto... Of course, that's STANDARDS compliant browsers. IE always wraps floats if it's in quirks mode, and will wrap floats in standards mode only if haslayout has been tripped. NOT that you should be using floats there, or inlining all that CSS or using so much presentational markup and the ungodly number of DIV's... or using DIV's on what should be labels, or wasting time wrapping a div around the input you could just style directly. But then you also seem to be throwing classes at anchors that should be in a linked list and have a perfectly good wrapping div, throwing wrapping divs around elements that shouldn't need them like it was going out of style, and in general throwing two to three times as much markup as is needed for such a simple layout. 3.8k of markup for 436 bytes of content without even having a full header should be an indication of something being wrong. Oh, and what's with the unusably small 10px fonts? What is this, a CGA card?
Well, i didnt make this form, someone helped me by supplying forms for a login box on another site, it worked well so I used them there. How would i do this, i still want my left text to be all in line and neat, i dont want the form boxes to be there right after the text, i want them all to be in a line, thats why i figured divs would work well. Never really understodd what haslayout means. :S Throwing classes at my anchors? you mean my navigation? i know it should be a list, because its navigation so. also, where am i using unneeded wrapping divs? i don't see anything not needed. i use that font size because like 12 px looks to big and nooby i find. i like this small, neat and compact.
I don't see a single div that has a place in your forms. I also don't see a single fieldset or label tag. See On Having Layout by Ingo Chao. There are roughly only six div elements needed for the whole page. None are appropriate for navigation. The smallest font-size that can be fully rendered on a monitor is 9px. You are 1/96th inch larger. That's ridiculous. There is a reason for browsers defaulting to 16px font size, or roughly 12pt. Newspapers and books are often at 9 or 10pt. The reading distance for these is about 12 inches. The common reading distance for the monitor is 18in. or more, making the relative sizes equivalent. Try 12 or 13px, 9 or 10pt. Your use of an ultra small type face invites the user to increase it, breaking your site. Horribly. cheers, gary
i did not make my forms! also, the divs are there to make sure that there is the same space between the left of the box and the form width:100px; or whatever it is. makes the same space no matter how big the length of the text is. thats why they're there. if i dont ned them and i can do it another way, i would like to know how to do it. i am putting my navigation in a div so i can position it over my header, i didnt use a list because i was just making it quick, i know it should be in a list and not a div -.- i JUST SAID THAT If i have it 12 px, it looks ugly. maybe could you attempt to aid fix in the errors that you pointed out? I dont see anything thats not needed, all my divs are pretty much content divs, not wrappers, there are 3 wrapping divs, one for the whole site, one for my content, and one for the three left boxes. then my content divs. the haslayout link was useful, thanks for that.
Well, for an example of what's 'not needed' - this is how I'd rewrite that whole form area - there is no reason to be using more markup than this: <form action="" method="post" class="registerContact"> <div> <h2>» Register a new contact.</h2> test<br /> test<br /> test<br /> test<br /> <label for="name"> Contact Name: <input name="name" type="text" /> </label> <label for="email"> Contact Email: <input name="email" type="text" /> </label> <label for="type"> Contact Type: <input name="type" type="text"> </label> <input type="submit" class="submit" value="Register new Contact" /> </div> </form> Code (markup): The CSS for that being (retaining your unusably small fonts) .registerContact div { padding:2px; background:#FFF; } .registerContact h2 { font:bold 10px/12px sans-serif; padding:4px 0; background:#CCC; } .registerContact label { display:block; padding-top:2px; position:relative; color:#000; font:normal 10px/20px sans-serif; } .registerContact label input { display:block; /* force to new line */ margin:-22px 0 0 80px; /* move up and over */ } .registerContact .submit { display:block; margin:0 auto; } Code (markup): No floats, appears reasonably consistant cross-browser, and one HELL of a lot less markup. Your entire document is plagued with problems of this nature. You've got probably 800 bytes or so of 'cruft'... Lemme give you a headstart - there is likely little reason for the markup on that page to be more than: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" ><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link type="text/css" rel="stylesheet" href="screen.css" media="screen, projection" /> <title> Gamers Insanity </title> </head><body> <div id="container"> <h1>Gamers Insanity. Theres no end to gaming!<span></span></h1> <ul id="mainMenu"> <li><a href="/index.php">Home</a></li> <li><a href="/roster.php">Roster</a></li> <li><a href="/matches.php">Matches</a></li> <li><a href="#"> Weeklys</a></li> <li><a href="#">Media</a></li> <li><a href="http://forum.gamersinsaninty.com">Forums</a></li> <li><a href="/servers.php">Servers</a></li> <li><a href="/contact.php">Contact</a></li> </ul> <div class="content"> <form action="" method="post" class="registerContact"> <div> <h2>» Register a new contact.</h2> test<br /> test<br /> test<br /> test<br /> <label for="name"> Contact Name: <input name="name" type="text" /> </label> <label for="email"> Contact Email: <input name="email" type="text" /> </label> <label for="type"> Contact Type: <input name="type" type="text"> </label> <input type="submit" class="submit" value="Register new Contact" /> </div> </form> <!-- #content --></div> <div id="sideBar"> <div class="sideBox"> <h2>Donate</h2> Please donate by clicking <a href="http://www.gameservers.com/clanpay/?clanid=c70d9c930cedbc9902bb4503d164f320">here.</a> <div class="boxBottom"></div> </div> <div class="sideBox"> <h2>Community</h2> <form action="/phpBB3/ucp.php?mode=login" method="post" enctype="multipart/form-data" > <div> <h3> Please <strong>login</strong> below, or <a href="/forum/ucp.php?mode=register">register</a>. </h3> <label for="username"> Username: <input name="username" type="text" /> </label> <label for="password"> Password: <input name="password" type="password" /> </label> <input type="submit" class="submit" /> <input type="hidden" name="login" value="Login" /> <input type="hidden" name="redirect" value="/index.php" /> </div> </form> <div class="boxBottom"></div> </div> <div class="sideBox"> <h2>Members</h2> <ul> <li>GI | Xx NinjaBurn xX</li> <li>GI | Magnum</li> <li>GI | Dr.Hobo</li> <li>GI | Ac3onfir3</li> <li>GI | Jackin the box</li> <li>GI | Gold3nboy</li> <li>GI | Zero Punctuation</li> </ul> <div class="boxBottom"></div> </div> <!-- #sideBar --></div> <div id="footer"> <!-- #footer --></div> <!-- #container --></div> </body></html> Code (markup): Which shaves over 800 bytes off it (20% give or take). It's actually even less code if you strip my use of formatting and comments. Mind you, this would abandon using images for the text in the sidebar, but seriously given how piss-poor that text is rendered and blurred - you'd want to anyhow. (besides, the only thing worse than px font sizes below 12px from an accessability standpoint is images as text without a image-replacement technique) - you want to keep the images, slap a class on those h2 and a dummy span - just like the header h1. EVERYTHING else can easily be done from the CSS. Oh, and if you insist on using fonts that illegibly small, do it in PT so it obeys the system metric on large font machines, or use %/em to obey the system metric AND so people can resize without the headaches in every browser... out of curiousity, are you like running 640x480 on a 19" display or something?
i need to set a new class for each form on my site then eh? because the width of the text would be different, unless i wanted it to be the same.. as for less markup, there is almost twice the css or does css contribute to load time? The images on the side, i know they're not accessible, but its for gamers, so i dont think very many people without vision would visit this site. your example, thats pretty what i have now, except different names for the divs. why is content a class? i would only use one content div in each page, also, the only thing that is different is that the left boxes have the text over them, also php is basically making the code for my site depending what is being called in each div. thanks for the help though, so its floats thats popping the forms out?
the new code works, no more forms popping out, except i need new classes for each div so theres almost a whole other css file just for each page (almost 10 pages that have forms on them = 10 classes) also i fixed my font size, i think that looks realy bad and unprofessional in my opinion, but i guess thats okay, will get on the left sidebar images with text over them, i would use image replacement, but i use h3 for my news titles, and dont want to go through every file and change them to h6 and use h3,h4.h5 for the three side images.
by the way, i dont understand what you did with my side boxes, only 2 divs, that would mean a top and bottom, the top would stretch with the content, making it a very blurry image, since it would be resized, i want it to have thae background image it has now, which would have to be three divs (one for top, one for content background, and one for the bottom. another thing i noticed, no "main" div, meaning that the content and leftstuff div would have to have their own background, what would hold it? i dont understand also, the rest looks rather similar to my page.