Problems Aligning <div> Box And Other Properties

FirefoxRocks

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

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

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

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.

CODE

<!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)">
<!-- 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

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

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

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

Saint_Michael

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.

Recent Queries:-

center div in firefox - 104.47 hr back. (2)

Similar Topics

Keywords : problems aligning properties css

Span "display: _____" Problems - block vs inline (2)
[problem] Css Unordered List Display Problems Ie6 Bug - Making unordered list under unordered list couses some padding to appe (2)
I just started designing something that i thought is gonna be a really simple xHTML strict template.
Everything is right except that i thought of using unordered list, some other list under that list.
Well this is the code for the Menu that is cousing me problems CODE <div
id="lijevo">     <ul>         <li>List1</li>
        <li>List2</li>         <li>             <ul>
            <li>List 2 Sublist</li>                 <li>
                    <ul>               ...

Height % In Ff Problems With Css - (3)

Does anyone know how to make the height of a div in firefox equal to the percentage you input? For
example if I put blablabla the div container will only be as high as the text makes it, when in
internet explorer it does make it take up 100% of the page or whatever height in percentage I input
in it. by the way, html, body {} have 100% height in them, so does the container that has the div
element. Example: html,body {height:100%;} #container {height:100%;} #div {min-height:100%;} the
one called #div is the one I want with 100% height. Thanks for any help....

Embeded Div's And Css Problems - (10)

I am making a website dessign that makes heavy use of CSS and DIV's now When I view my site as
it is in IE it works almost perfect, but when I open it in Firefox the main background dissapears,
here is the site here is the site and here is the external CSS file: CODE BODY {
background-color:#ffffff; background-image: url(images/topimage.jpg);
background-repeat:repeat-x; } DIV.content { width:760px; position:absolute;
top:19px; left:19px; } DIV.head { width:758px; height:125px;
background-image: url...

css scripting problems need help - NEED HELP (5)

for some unknown reason the scroll bar info will not kick in it eithers makes the page doe wierd
things or nothing at all and i know i got it right so whats need help QUOTE BODY {
font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; margin:
0px; padding: 0px; background-color: #2d3851; } h1 { font-family: Times New Roman, serif;
font-size: 26px; font-weight: normal; color: #e9f2fc; } h2 { font-family: Verdana, Arial,
Helvetica, sans-serif; font-size: 12px; font-weight: bold; color: #333333; } p { font-family:...

Looking for Problems, Aligning, <div>, Box, And, Other, Properties

ADD REPLY / Got an Opinion!	Remove these ADs!	RAPID SEARCH!	Free Web Hosting	[X]
Express your Opinions, Thoughts or Contribute more info. to help others. Ask your Doubts & Queries to get answers, So that "Together We can help others!"	Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.		500MB Space No Ads, CPanel, FTP, PHP, MySQL, EMails - 100% FREE

Problems Aligning <div> Box And Other Properties - CSS help

Problems Aligning <div> Box And Other Properties - CSS help