CSS instead of tables, some positioning problems [Archive]

JewelsInVa

08-18-2004, 01:59 PM

Ok, so this is my first attempt at using CSS instead of tables for designing a page, so please be kind :)

I am working on redoing the template for a site I'm currently working on, but I can't quite figure out how to get the some things positioned correctly. IN IE, there is space between the top logo picture and the menu buttons as well as space between the menu buttons and the content. Plus, the border around the whole section seems to disappear at the bottom.

The footer is at the bottom like it should be, but if I have a lot of content (if you click on accreditation, you'll definitley see the problem), it's overlapping. I want it separate from the rest of the site, because the links go to the city's site, not within the site I'm designing.

In Netscape 7.1, it's not too bad, but the older version I tested it on, 4.79 i believe, well it looked horrible.

I know I probably haven't done some things right, so I putting this out the old pros :) I hope you can help!

here's a link a sample page (created by a template) and the CSS. The code to the template I created in dreamweaver is at the end of this message. I took out some code for readability.

http://hpd.athamptonroads.com/test/about_us/index.html

http://hpd.athamptonroads.com/test/hampton.css

by the way, if you start browsing around the site, it's in progress, i've only completed about half the content so far. The site needs to be liquid, per the customer's request, and they don't want to stretch horizontally either. It has to be beautiful in 800x600. And it needs to look about the same in old and new browsers...so I'm really giving myself headaches trying to do all this!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>Hampton Police Department</title>

<link rel="STYLESHEET" type="text/css" href="../hampton.css">
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">

<body>
<div align="left" class="bordertable"> 

<div class="leftmenu">
<a href="http://hpd.athamptonroads.com/test/index.html">
<img src="../images/hpd_logo_left.gif" alt="Hampton Police Department Logo" width="148" border="0"></a>


<p class="menuitem1">MENU TITLE</p>
<a title="" href="" class="menuitem1">1st Menu</a><br>
<a title="" href="" class="menuitem2">1st Sub-Menu</a><br>
<a title="" href="" class="menuitem2">2nd Sub-Menu</a><br>
<a title="" href="" class="menuitem1">2nd Menu</a><br>
<a title="" href="" class="menuitem1">3rd Menu</a><br>
<a title="" href="" class="menuitem1">4th Menu</a>

</div> 

<div class="rightside">

<div class="righttop">
<img src="../images/hpd_logo_top.gif" alt="Hampton Police Department Logo" width="612" height="118">
</div> 

<div class="rightmiddle"a>

</div> 

<div class="rightbottom">

verbiage or whatever verbiage or whatever verbiage or whatever

</div> 

</div> 

</div> 

<div class="footerarea">
<a href="http://www.hampton.gov/" title="City of Hampton website" class="hampton">www.hampton.gov</a><br>
<a href="http://www.hampton.gov/citizen_information.html" title="Resident" class="hampton">Resident</a> |
<a href="http://www.hampton.gov/visitor_information.html" title="Visitor" class="hampton">Visitor</a> |
<a href="http://www.hampton.gov/business_information.html" title="Business" class="hampton">Business</a>
</div> 

</body>
</html>

PhillMc

08-18-2004, 02:28 PM

It looks fine to me in FireFox 0.9, but in IE there appears to be a margin or padding issue about the subsite nav which I think that you have named right middle.

Looking at your source and your CSS, I think adding a margin: 0px; to class 'rightmiddle' and 'righttop' should fix that issue.

Remember, CSS is a good way to 're-write' the rendering defaults of a browser; so it's a good 'rule of thumb' to always define values for margin, padding, lineheight, overflow, and fontsize for every id/class you code. :)

Hope that helps.

JewelsInVa

08-18-2004, 04:20 PM

I took your suggestions and applied them, but unfortunately in IE it still had the spaces.

But, i'll tell you what did work...
I mashed all my code together then hit enter after the </div> tags and it all worked out. Apparently I had a few stray spaces after the </div> tags that I guess IE rendered as intentional space? but it wasn't like I used a special character. Wierd. I just need to be more careful about hitting a spacebar after typing a tag.

I am still having problems with the footer. If I make the position relative, it's good in IE but not Netscape. If I make it absolute, it's gone totally because it's z-index is 1. I put it at 1 because right now if there is a lot of content, the right side grows and I don't want the footer on top of the text. So I'm wondering what to do here.

Also, need help on the overall looking bad in Netscape 4. Any more suggestions?

pawky

08-18-2004, 04:31 PM

Originally posted by JewelsInVa
I just need to be more careful about hitting a spacebar after typing a tag.

that shouldnt matter at all O_o the html ignores the extra spaces

PhillMc

08-18-2004, 04:36 PM

HTML ignores it, but IE does not. I didn't think about that. lol
Glad you found it. :)