Is this me or Netscape? [Archive]

View Full Version : Is this me or Netscape?

TGecho

01-23-2003, 08:27 AM

I was working on this page layout for a while when I remembered to try it in Netscape. I have version 6 and yet it seems to partially ignore css properties like margin and border.

In IE there are nice dividing lines and everything is pushed way down to leave room for the header. Netscape pushes the main column to the top of the page, gets rid of all my lines, and changes my font sizes.

Here's a (very) stripped down copy of my template. Is this a Netscape bug? Did I make a mistake? Am I being a control freak? (I tend to do that)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title></title>

<style>

body { margin-left: 0; margin-top: 0; }

#menu { margin-top: 92; margin-left: 4; width: 170; float: left; padding: 0; font-family: arial,
sanserif; font: 10pt; }
#menu a { font-weight: bold; text-decoration: none; color: darkblue; padding-left: 7; }
#menu a:hover { color: blue; }
#menu div { margin-bottom: 3; padding-bottom: 4; border-bottom: solid 1px aaa; }
#linkdescription { height: 69; color: darkblue; }

#contents { margin-top: 96; margin-left: 186; margin-right: 191; padding: 10; width: auto;
border-left: solid 1px aaa; border-right: solid 1px aaa; }
#contents h1, h2 { font-family: arial, sanserif; }
#contents h1 { text-align: center; font-size: bigger; color: bbb; }
#contents h2 { font-size: big; color: #556; line-height: 0; }
#contents p { margin-left: 25; }

</style>
</head>
<body>

<div id="menu">
<div id="linkdescription">Dynamicly changing text that describes links when cursor hovers over
them filler text filler text filler text</div>
<div>
<a href="index.htm">Home</a><br>
</div>
<div>
<a href="pathname">Link</a><br>
<a href="pathname">Link</a><br>
<a href="pathname">Link</a><br>
</div>
<div>
<a href="pathname">Link</a><br>
<a href="pathname">Link</a><br>
<a href="pathname">Link</a><br>
</div>
</div>

<div id="contents">

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>Body text body text body text body text body text body text body text</p>

</div>

</body>
</html>

HZR

01-23-2003, 09:06 AM

With a quick look through the CSS I noticed the following. Could be more mistakes too:

Hex colors should start with '#' (no quotes). That's why they doesn't show up in NS (which is stricter).

Values over 0 must have a unit like px, em, % like 10px.

sanserif > sans-serif

Specify fonts with keywords look different through some browsers.

TGecho

01-23-2003, 10:19 AM

Thanks HZR. I always get a bit sloppy when I'm experimenting with things like colors. (meant to check on that sans-serif thing...guess I forgot).

So, the borders are fixed, but my main coloumn is still up at the top and the fonts are still messed up.

I added "px" to all of my numbers (where I wanted pixels), but it didn't seem to make a differance. I can work around the font thing, but the main column needs to be down more.

DCElliott

01-23-2003, 11:42 AM

Some of your properties are not right. Are you using Topstyle 2.5 lite to work on your stylesheet? If nbot, you should, because it will keep you from making some of these mistakes and help you remember property names. It will also help you learn the CSS shorthand for stuff like the font: property which can let you specify several font-properties at once.

Also review the CSS box model and discrepancies between IE and NN/Mozilla implementations. There is way to much info to be detailed in a forum post so I really think you need, at the very least, to d/l Topstyle.