Problems Aligning <div> Box And Other Properties

Tags

This content has not been tagged yet

Options

FirefoxRocks

Super Member

Group: Members
Posts: 273
Joined: 14-April 06
From: Ontario, Canada, North America, Planet Earth
Member No.: 21,845

Post #1

Dec 27 2006, 11:37 PM

Okay, I have a big problem with these embedded <div> boxes with Firefox and Internet Explorer.

Please view this page in Mozilla Firefox 2. The page is supposed to be center-aligned and it should have 780px or 800px white background color, not just hte header box/table.

However, when I open up the page in Internet Explorer 7, it looks exactly the way I want it to! And I was trying to make my page cross-browser compatible by following Web Standards!!

I was trying to start using some PHP in my pages, and this is the first JavaScript thing that I actually wrote and understood with the help of W3Schools. The header, footer and doctype declaration are separate PHP files INCLUDED by the index.php file.

I have tried to use CSS and putting "text-align:center" or "margin:auto" into different <div> sections or the <body> element, but it doesn't seem to work.

Firefox is supposed to recognize the <div style="text-align:center"> tag to cover the area down to the bottom of the 2 boxes. It does not appear that way if you put a border on the <div> but if you use the Web Developer Toolbar and use the CTRL+SHIFT+F tool, you will see that if you point to the area right of the left box and below the right box, you see that the entire page area with boxes is outlined and it shows the dimensions, etc. How can this be?

Anyways, any solution is appreciated and could you please steer clear of using too much stuff that I don't understand?

(please explain your code). Thanks.

I got this page layout idea from many sites that are 800px wide to fit monitors, but the site that inspired me the most was MSN.

jlhaslip View Member Profile A computer once beat me at chess, but it was no match for me at kick boxing. Group: [MODERATOR] Posts: 4,336 Joined: 24-July 05 From: Linix, DOS and Windows…the good, the bad and the ugly Member No.: 9,787 myCENT:96.20	Post #2 Dec 28 2006, 12:30 AM 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.

BuffaloHELP

More than meets the eye Group Icon

Group: Admin
Posts: 3,646
Joined: 23-April 05
From: Trap17 storage box
Member No.: 6,042
myCENT:90.30

Post #3 post

Dec 28 2006, 12:37 AM

Try this for CSS tag

CODE

#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:

CODE

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

Saint_Michael

$p4m 0n j00 $h4m3 m3 0nc3 $p4m 0n m3 $h4m3 m3 7\/\/1c3

Group: [HOSTED]
Posts: 6,817
Joined: 21-September 04
From: 9r33|\| 399$ 4|\|D 5P4/\/\
Member No.: 1,218
T17 GFX Crew

myCENT:18.00

Post #4 post

Dec 28 2006, 02:01 AM

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.

[codebox]
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.1//EN' 'http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd'> <html xmlns='http://www.w3.org/1999/xhtml'><head>
<title>Achoo!</title>
<link rel="stylesheet" href="allpages.css" type="text/css" />
</head>
<body style="text-align:center;background-color:rgb(14,180,51)">

<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>
<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>

<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>
[/codebox]

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

CODE

CODE

<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/

FirefoxRocks View Member Profile Super Member Group: Members Posts: 273 Joined: 14-April 06 From: Ontario, Canada, North America, Planet Earth Member No.: 21,845	Post #5 Dec 28 2006, 04:04 AM 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. I will try these suggestions and post further if there is still help required.

FirefoxRocks View Member Profile Super Member Group: Members Posts: 273 Joined: 14-April 06 From: Ontario, Canada, North America, Planet Earth Member No.: 21,845	Post #6 Dec 31 2006, 07:41 PM 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 [highlight=yellow]LOCKED[/highlight].

Saint_Michael View Member Profile View Member Albums $p4m 0n j00 $h4m3 m3 0nc3 $p4m 0n m3 $h4m3 m3 7\/\/1c3 Group: [HOSTED] Posts: 6,817 Joined: 21-September 04 From: 9r33\|\\| 399$ 4\|\\|D 5P4/\/\ Member No.: 1,218 myCENT:18.00	Post #7 Dec 31 2006, 07:53 PM 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.

« Next Oldest · CSS (Cascading Style Sheets) · Next Newest »

Topic Title	Replies	Topic Starter	Views	Last Action
Questions & Queries Server Problems?	0	OpaQue	434	9th September 2004 - 08:40 AM Last post by: OpaQue
Hosted Members Area Problems with PHPBB & my Access to files :S	3	zip_mc	367	3rd August 2004 - 04:48 AM Last post by: X3r0X
Operating Systems Okay dowload problems.	4	stevey	437	16th August 2004 - 07:17 PM Last post by: pr3dr49
Operating Systems Programs May Have Problems On Xp Sp2!	6	winflowers	328	11th September 2004 - 09:14 PM Last post by: MSTR
Website Discussion Anyone Else Having Problems With Photobucket?	1	spawn_syxx9	497	3rd September 2004 - 10:03 PM Last post by: BoSZ
Hosted Members Area Sign In Problems	0	spawn_syxx9	290	14th September 2004 - 05:03 PM Last post by: spawn_syxx9
The Game I have problems! 12	19	Moneymaker	1,679	9th November 2004 - 06:01 PM Last post by: spawn_syxx9
Web Design CSS Problems	0	kelp	445	2nd October 2004 - 01:50 AM Last post by: kelp
Software Having Problems Installing Apache2 On Linux	2	elrohir	610	12th September 2006 - 07:48 PM Last post by: elrohir
CSS (Cascading Style Sheets) css scripting problems need help	5	Saint_Michael	491	19th November 2004 - 09:01 AM Last post by: karlo
Hosted Members Area Login problems :(	6	darkwarrior	340	12th October 2004 - 12:23 AM Last post by: odomike
Computers Having Problems Connecting To The Internet Etc. On Another Laptop	2	TCracker	156	23rd October 2008 - 11:34 AM Last post by: shadowx
Hosted Members Area Cpanel Login Problems	5	darkwarrior	258	23rd October 2004 - 10:47 AM Last post by: X3r0X
Other Funny Stuff (No Post Count) Layoff Problems	0	Trystim	298	26th October 2004 - 12:42 PM Last post by: Trystim
C/C++ Programming C/c++ Simple Machine Problems 12	10	abusado	1,428	13th November 2004 - 10:44 PM Last post by: tihu