Web Design Having Trouble w/Charity Template

Hi folks - hopefully someone out there can help me!

I'm using the Charity template (which I've modified a bit) and it's the perfect format for our agency - we're really happy with it!

I just have a couple of problems that are perplexing me - I'm a real newbie to CSS, and for some reason, the site looks exactly as I want it in IE, but not in Firefox. It had been "almost" perfect in both browsers, but I was having a problem with the main body "box" of the site not being centered - it was always skewed to the left of the browser screen, while the header was centered.

So I played with individual files, and I did something that worked for IE to make the body box line up vertically with the header (in the center of the screen), but it now doesn't look as good in Firefox (the background is all the back layer of green now instead of being in the grey-ish box).

What I'd done to make this happen is this:

<center>
<div id="content"></center>

If I take that away, the body box looks fine in both browsers but it's skewed to the left of the browser screen - I want it to line up centered under the header.

Any ideas on what I'm doing wrong? I'm not sure if it's the CSS file I should be playing with instead of the individual HTML files?

The second problem is, I can't figure out how to modify the CSS so that unordered lists display the way I'd like. Right now, bullets either don't display or go outside the paragraph, depending on the browser (I've had to manually put in dashes at the beginning of each point), and the "paragraph wrap" that usually happens in unordered lists isn't working (i.e. it doesn't automatically indent so the second line of text goes right under the first - it goes flush with the left margin, maybe because the bullet structure doesn't indent in the unordered list).

I'm not sure if I need to make these modifications in the CSS file (I'm guessing so) - but I'm kind of scared to touch it in case I screw something up!

Here's the URL if anyone wants to take a look:

http://www.nanaimoacl.com

Thanks in advance for any help/advice!

Cheers...NACL Webmistress

 

Hey

If you still need help with this template please feel free to email me the full question and I will be gladly to help you out.

Thanks

Ryan M
support@iftkcs.com

 

Hello nacl webmistress. I took a look at your code and css file. To fix the problem with FireFox you should do the following:

Move your </center> tag that you added to the very end of your document. Place it just above </body>.

That should clear up the alignment problem.

As for the bullets, I haven't looked into that just yet. If I figure it out, I'll let you know.

 

Ok, I think I've fixed the bullet problem.

First, you need to add the following code to your css file:

#content ul li
{
margin-left: 10px;
list-style: inside square;
text-align:left;
}


Second, to get it all to line up on your page, put the list in a table. Use the following table code:

<table id="table3" width="100%">
<tr>
<td align="left">
<ul>
<li>NACL's 2007 </li>
<li>Next Line</li>
<li>Line 3</li>
<li>Line 4</li>
</ul>
</td>
</tr>
</table>


Also, I noticed on your Fun Links page you'll need to rearrange a few things:

1. for line: <div id="content"></div></center> -- you must remove the </div> and </center>

2. put the </center> at the bottom just above </body> (just like my previous post says).

3. at the bottom, remove the <center> from just above <div id="footer"> and replace it with </div>

4. remove </div></center> from the <div id="footer"> tag

5. add two <div> tags just above </body>


Ok, so in other words, the bottom of your page's code should look as follows:

</div>
<div id="footerline"></div>

</div>
<div id="footer">Copyright © 2007 NACL. All rights reserved.
</div>

</div>

</center>
</body>
</html>


Finally, please make sure to make copies of your files BEFORE you edit them as I propose . . . just in case, you know.

I hope this works for you. Please let me know, I'm curious.
Best wishes,