hey, I'm having a bit of trouble with a page, and its layout. I'm pretty sure I have a ton of errors in my CSS. I'm pretty new to all of it, and know there's stuff I don't understand, lol. Hoping that someone can help me sort it out. CSS is going to be linked dynamically so this CSS file is Firefox specific... index.html <?php include('/system/scripts/php/systemclass.php'); $system = new system; session_start(); $_SESSION['sessionStarted'] = "yes"; $_SESSION['registrationError'] = ""; ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>Famous4</title> <!-- the following code is to display different css files based on browser !--> <?php $system->cssDisplay(); ?> </head> <body> <div id="logobox"> <img alt="Famous4 Logo" height="147" longdesc="Logo for the Famous4 website" src="admin/images/logo/famous4Logo.png" width="409" /> </div> <div id="page"> <div id="formBox"> <form action="process/registration.php" method="post"> <fieldset><legend>User Info</legend><br /> <label>Username: <input type="text" name="userName" maxlength="15" id="regInput"/></label><br /> <label>Password: <input type="password" name="password" maxlength="15" id="regInput"/></label><br /> <label>Re-type Password: <input type="password" name="password2" maxlength="15" id="regInput"/></label><br /> <label>Email: <input type="text" name="email" maxlength="25" id="regInput"/></label><br/> </fieldset> <fieldset><legend>Security Question</legend><br/> <label>Question:</label><br/> <select name="securityQuestion" id="secQuestionSelect"> <option>pet's name?</option> <option>mother's maiden name?</option> <option>favorite year?</option> </select><br/><br/> <label>Answer:</label><br/> <input type="text" name="securityAnswer" maxlength="15" id="regInput"/> </fieldset> <fieldset><legend>Agreement</legend><br /> <label><a href="admin/policies/useragreement.html">User Agreement</a>: <input type="checkbox" name="userAgreement" id="userAgreementInput"/></label><br /> <label><acronym title="Acceptable Use Policy" id="accro" style="text-decoration:none;"><a href="admin/policies/aup.html">AU Policy</a>:</acronym> <input type="checkbox" name="AUP" id="AUPInput" /></label><br /><br /> <input type="submit" name="submit" value="Register" id="subBTN"/> </fieldset> </form> <form> <fieldset id="logIn"><legend>Already a member?</legend><br /> <label>Username:<br /> <input type="text" name="userNameLogIn" maxlength="15" id="regInput"/></label><br /> <label>Password: <br /><input type="password" name="passwordLogIn" maxlength="15" id="regInput"/></label><br /> <input type="submit" name="logIn" value="logIn" id="btnLogIn"/> </fieldset> </form> <div id="errorHandle"> <?php echo "<p><font color=\"red\">". $_SESSION['registrationError'] . "</font></p>" ?> </div> </div> </div> </body> </html> HTML: ffhomestyle.css body{ background:#A8FFFF; } #page{ max-width:940px; min-width:940px; height:700px; background-color:black; margin:0px auto 0px auto; padding:20px; } #logobox{ margin-left:220px; } #formBox{ background-color: #AEEFFB; border:2px solid red; margin-top:175px; height:350px; } #secQuestionSelect{ width:500px; padding:5px 0px 5px 0px; } #errorHandle{ } #regInput{ padding:5px 0px 5px 0px; display:block; } fieldset{ float:left; margin-top:10px; margin-left:9px; border:1px solid red; } #accro{ text-decoration:none; } #subBTN{ margin-left:50px; background-color:yellow; border-bottom:2px solid black; } #logIn{ margin-left:150px; } #btnLogIn{ margin-left:136px; background-color:yellow; border-bottom:2px solid black; } #AUPInput{ margin-left:42px; } a{ text-decoration:none; color:blue; } Code (markup): Thanks to anyone that looks I'm quite excited when I get farther into dev, lol
Yeah, that's a bit vague as you didn't say what the problem actually is... just what it's in. That said... Some indentation in your markup so you're sure everything that should be closed is would help, as would swinging an axe at the tags like FONT that have no business on any website written after 1997. You've got a perfectly good ID, set the color on that -- much less since that's the only content why is it a "paragraph" (grammatically I doubt that) and if it IS actually a paragraph, use the P instead adding an extra DIV for nothing. You are also quite correct in your CSS being problematic -- if you are setting min-width and max-width the same, JUST USE WIDTH; there's no reason to ever do that, and to be frank, a crappy 940px fixed width is an inaccessible wreck. WORSE is the fixed height, something there is NO reason to EVER do and that more than likely will bite you in the ass long-term. You REALLY want that set that as a min-height so it can at least grow to fit should the content be too long. Of course you also seem to be dicking around server side to browser sniff to send specific CSS to each browser; that's a REALLY BAD way of doing things and usually indicates flawed thinking and/or methodology for building your page. It's just as stupid as the IE conditional nonsense that serves no legitimate purpose apart from covering up an inability to make gracefully degrading CSS or properly leverage semantic markup. Though to say what's really wrong with it I'd have to see the full output markup and it's full CSS -- snippets are like trying to do brain surgery through a keyhole over a time-phone to 1887. ... but for everything I just said, it's REALLY refreshing to see someone trying to use FIELDSET and LEGEND properly. Just beware LEGEND are hard to style across browsers so you may have to put a SPAN inside them to compensate for that.