Jump to content
xisto Community
Sign in to follow this  
FirefoxRocks

Problems Aligning <div> Box And Other Properties CSS help

Recommended Posts

Well, from what I see, the div#header should be white and the body should be some shade of green. So I'd say that part is working exactly correctly.As for the centering of the page, wrap all the html you have inside another 'container' div and center the container using the margin:auto.

Share this post


Link to post
Share on other sites

Try this for CSS tag

#body {	margin: 0 auto;	width: 800px;	padding: 0 0;	background-color: rgb(14,180,51);	text-align: left;}

And if you are going to use CSS, try using CSS for all your styles, i.e. for your Table as well.

Sample code:
body,td,th {	font-family: Arial, Helvetica, sans-serif;	font-size: 12px;	background-color: #000000;	color: #FFFFFF;}

Share this post


Link to post
Share on other sites

Although your coding is a bit messed up the quickest solution would be to add a <center> </center> in your code. Otherwise you would have to redesign this by scratch again. So you would put your centers tags in the following places.

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.1//EN' 'http://forums.xisto.com/no_longer_exists/; <html xmlns='http://forums.xisto.com/no_longer_exists/ rel="stylesheet" href="allpages.css" type="text/css" /></head><body style="text-align:center;background-color:rgb(14,180,51)"><!-- Primary Header --><center><div style="width:780px;text-align:left;background-color:#fff"><div id="header"><table style="width:100%;padding:0px;border:1px solid #00F"><thead><tr><td style="text-align:center;border-bottom:1px solid #00f;margin:0px" colspan="4">Today is: <span style="font-weight:bold;text-decoration:underline;color:#00F"><script type="text/javascript">var d=new Date()var weekday=new Array(7)weekday[0]="Sunday"weekday[1]="Monday"weekday[2]="Tuesday"weekday[3]="Wednesday"weekday[4]="Thursday"weekday[5]="Friday"weekday[6]="Saturday"var month=new Array(12)month[0]="January"month[1]="February"month[2]="March"month[3]="April"month[4]="May"month[5]="June"month[6]="July"month[7]="August"month[8]="September"month[9]="October"month[10]="November"month[11]="December"var year=d.getFullYear()document.write(weekday[d.getDay()] + ", " + month[d.getMonth()] + " " + d.getDate() + ", " + d.getFullYear())</script></span>.</td></tr></thead><tbody><tr><td style="padding:0px;margin:0px;width:120px"><img src="myweb.gif" alt="myWeb" style="width:120px;border-right:1px solid #00F;float:left;margin:0px;padding:0px" /></td><td><table cellspacing="0" cellpadding="0" style="border:1px solid blue;width:100%;font-size:10pt"><tbody><tr><td style="width:25%">Communications</td><td style="width:25%">Entertainment</td><td style="width:25%">Games</td><td style="width:25%">Images</td></tr><tr><td>Music</td><td>News</td><td>Other</td><td>Photos</td></tr><tr><td>WebTowns</td><td><a href="/icenter">rAnDoM sTuFf</a></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr></tbody></table></td></tr></tbody></table></div><!-- Left side --><div style="width:380px;margin:0px;padding:1px;border-width:3px;border-style:solid;border-color:#00F;float:left"><p>Achoo! is still in development process right now. You can help by:</p><ul><li>Contributing information to the Achoo! InfoDump</li><li>Testing the website on several browsers</li><li>Reporting bugs, errors and improvements to Achoo!</li><li>Sending in feedback, comments, suggestions and improvements. We love feedback!</li><li>Spread the word around! Advertise. From word-of-mouth to posters to radio, it all adds up.</li></ul></div><!-- Right side --><div class="myBox" style="width:380px;margin:0px;padding:1px;border-width:3px;border-style:solid;border-color:#00F;float:right">InfoBoard:<br />Achoo! InfoBoard is not developed yet. If you want to help, go to the <a href="/infodump">InfoDump</a>!</div></div></center></body></html>

by the looks of it you have to add in the white background in hte following spots as well

<div style="background-color: #FFFFFF; width:380px;margin:0px;padding:1px;border-width:3px;border-style:solid;border-color:#00F;float:left">

<div class="myBox" style="background-color: #FFFFFF; width:380px;margin:0px;padding:1px;border-width:3px;border-style:solid;border-color:#00F;float:right"

that should correct the problems in FF. I highly recommend checking this site out for css especially tables and layouts.

http://www.alvit.de/handbook/

Share this post


Link to post
Share on other sites

Okay, I will try what BuffaloHELP and jlhaslip has offered me for advice.I will definitely NOT use <center> tags because I am trying to make the entire site by hand and valid XHTML + CSS. I know it is the easiest way but I would rather go with the valid way. :lol:I will try these suggestions and post further if there is still help required.

Share this post


Link to post
Share on other sites

Somehow I fiddled around with CSS and my PHP files so I got the page displaying correctly in:Opera, Firefox, SeaMonkey, Netscape - IE, Avant, Maxthon displays it okay but is different (extends white part)Problem solved - topic should now be LOCKED.

Share this post


Link to post
Share on other sites

Although your looking for the valid way in coding, sometimes a handful of errors won't make your site any faster. The <center> tag maybe invalid but it is still usuable. However since you figured out your problem the topic is closed.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.