Site not good in Nescape! That old chestnut! 1

[LEICJDN1]

Hi all,

Have uploaded my first stab at a website. You can find it at

http://www.forpaws.me.uk

I use Explorer 6, and the layout is as planned with bordered top title bar including 'inlayed' pictures, plain grey background throughout except title bar and menu bar on left.

Great (I thought! - please feel free to comment on / criticise site design) but when I went to do a quick check in Netscape 7.0 it does not look so good! Top border is too small, and background colours do not work as in IE. Also the paragraph seperation is different and all the text clumps up.

Could anyone shed any light on why? Have tried to fiddle with the obvious settings but no joy. All pages, inlcuding CSS, validate at W3c.

Have inlcuded the CSS file at the end of this thread so you can try and spot my errors.

All help / comments greatly appreciated.

The relevant CSS code:

body {margin:0px;padding:0px;font-family:verdana, arial, helvetica,
sans-serif;color:#ffffff;background-color:#eee;}

h1 {margin:0px 0px 0px 0px;padding-bottom:0px;font-size:36px;line-height:36px;
font-weight:600;color:#000000;background-color:#eee;font-family:Verdana,arial,sans-serif;letter-spacing:1pt;position:relative;left:5px;}

h2 {margin:0px 0px 10px 0px;padding:0px;font-size:22px;line-height:22px;
font-weight:600;color:#000000;background-color:#eee;text-align:center;}

h2.plain {margin:0px 0px 10px 0px;padding:0px;font-size:22px;line-height:22px;
font-weight:600;color:#000000;background-color:#eee;text-align:left;}

h2.left {margin:0px 0px 10px 0px;padding:0px;font-size:22px;line-height:22px;
font-weight:900;color:#d2691e;background-color:#eee;text-align:left;}

h2.brown {margin:0px 0px 10px 0px;padding:0px;font-size:22px;font-family:cursive,verdana,arial,sans-serif;line-height:22px;
font-weight:900;color:#d2691e;background-color:#eee;text-align:center;}

h3 {margin:0px 0px 10px 0px;padding:0px;font-size:12px;line-height:12px;
font-weight:900;color:#000000;background-color:#eee;}

h3.brown {margin:0px 0px 10px 0px;padding:0px;font-size:12px;line-height:12px;
font-weight:900;color:#d2691e;background-color:#eee;}

p.small{font:10px Verdana,Sans-serif;}
b.brown{color:#d2691e;background-color:#eee;}

#Content>p {margin:0px;}
#Content>p+p {text-indent:30px;}

a.mail {color:#000000;background-color:#eee;font-size:18px;text-decoration:underline;font-weight:600;
font-family:verdana, arial, helvetica, sans-serif;}
a.mail:link {color:#000000;background-color:#eee;}
a.mail:visited {color:#000000;background-color:#eee;}
a.mail:hover {color:#000000;background-color:#eee;}

a.large {color:#000000;background-color:#ffffff;font-size:32px;text-decoration:none;font-weight:600;
font-family:verdana, arial, helvetica, sans-serif;}
a.large:link {color:#000000;background-color:#ffffff;}
a.large:visited {color:#000000;background-color:#ffffff;}
a.large:hover {color:#000000;background-color:#ffffff;}

a.small {color:#000000;background-color:#eee;text-decoration:none;font-weight:600;
font-family:verdana, arial, helvetica, sans-serif;}
a.small:link {color:#000000;background-color:#eee;}
a.small:visited {color:#000000;background-color:#ee;}
a.small:hover {color:#000000;background-color:#ffffff;}

a.plain {color:#d2691e;background-color:#eee;font-size:22px;text-decoration:none;font-weight:900;
font-family:cursive, arial, helvetica, sans-serif;}
a.plain:link {color:#d2691e;background-color:#eee;}
a.plain:visited {color:#d2691e;background-color:#eee;}
a.plain:hover {color:#d2691e;background-color:#ffffff;}

#Header {
margin:20px 20px 10px 20px;
padding:0px 0px 0px 10px;
/* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
height:38px; /* 32px + 0px + 6px = 38px */
border-style:double;
border-color:#c0c0c0;
border-width:3px 0px; /* top and bottom borders: 1px; left and right borders: 0px */
line-height:11px;
background-color:#ffffff;color:#000000;
voice-family: "\"}\"";
voice-family:inherit;
height:22px; /* the correct height */
}
body>#Header {height:14px;}

#Content {position: absolute; top: 110Px; left: 255px; width:60%; height:80%;overflow:visible;
color: #000000;
background-color:#eee;
font: 12px Verdana, sans-serif;padding-left:10px;padding-bottom:5px;
font-weight:900;}

#Menu {position:absolute;top:110px;left:20px;width:172px;padding:15px;
background-color:#ffffff;color:#000000;line-height:27px;
text-align:center;font-weight:900;
voice-family: "\"}\"";
voice-family:inherit;
width:172px;
font:10px Verdana,sans-serif;
font-weight:900;
}
body>#Menu {width:172px;}

#Menu a {color:#d2691e;background-color:#ffffff;font-size:14px;text-decoration:none;font-weight:600;
font-family:verdana, arial, helvetica, sans-serif;}
#Menu a:link {color:#d2691e;background-color:#ffffff;}
#Menu a:visited {color:#d2691e;background-color:#ffffff;}
#Menu a:hover {color:#d2691e;background-color:#eee;}

#Menu a span {display: none;}

#Menu a:hover span {display: block;
position: absolute; top: 480px; left: 8px; width: 172px;
padding-left:5px;padding-right:5px;; margin: 0px; z-index: 100;
color: #000000; background-color:#ffffff;
font: 10px Verdana, sans-serif; text-align: center;}

img.left {position:relative; left:0px; border:0px}
img.right3 {position:relative;left:66%;top:3px;}
img.right2 {position:relative;left:54%;top:3px;}
img.right1 {position:relative;left:42%;top:3px;}

(END of CSS)

PS I know the above is not laid out as 'recommended' but I find it much easier to manage that way than

{
stuff

}

 

[EdwardMartinIII]

Can Netscape see lowercase font names? Try changing one of the verdanas to Verdana and see if that helps.

Try using 6-character color codes.

Cheers,


Edward

"Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!" -- inventor of the cat door

 

[MrBelfry]

Your site seems to have disappeared so I can't look at it but here is some information that might be useful.

In theory if you define pixel sizes for all your page elements then your page should render correctly across all browsers. In practice this doesn't happen.

Every element on a page is rectangular and is rendered according to the box model. Unfortunately the browsers implement the box model slightly differently -> some browsers include the margin and padding others don't. This can be very frustrating!

Suprisingly microsoft have been helpful and included two CSS rendering engines in IE6 -> the 'classic' engine and the 'standards-compliant' engine. If you design your pages using the 'standards-compliant' engine then it should render similar to Netscape/Mozilla and Opera.

You force IE6 to use the 'standards-comliant' engine by declaring the doctype as:

<!DOCTYPE html PUBLIC &quot;-//W3C//DTD HTML 4.0 Transitional//EN&quot; &quot;

http://www.w3.org/TR/html4/loose.dtd&quot;>

If you do this the nasty surprises we get should be minimised.

For more info about the dual css engines in IE6 go to

http://www.netmechanic.com/news/vol4/html_no22.htm

and for more info re: the box model go to

http://www.brainjar.com/css/positioning/

Hope this helps

MrBelfry

 

[LEICJDN1]

Thanks for that.

Link should currenlty be

http://www.forpaws.me.uk/default.html

as my server is currenlty not recognising that as the default home page.

Will try both of the above and let you know.

Cheers.

 

[EdwardMartinIII]

And you know, downloading and installing a copy of Mozilla and keeping it open while you develop won't hurt you in the slightest.

Surprises should rarely happen if you simply code while you have both browsers open. It's not as if your machine is the Catholic Church and you're only allowed to marry and keep house with one browser at a time...

Cheers,


Edward

&quot;Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!&quot; -- inventor of the cat door

 

[LEICJDN1]

Yeah, now wishing I had not left it until now to check! Still you live and learn.

http://www.forpaws.me.uk

However, I am keen to correct the problems in Netscape - and to try and understand them.

Have implemented the above suggestions but am still left with an incorrect header and bizzare paragraph spacing in Netscape.

Here is the revised CSS code:

body {margin:0px;padding:0px;font-family:verdana, arial, helvetica,
sans-serif;color:#ffffff;background-color:#eee;}

h1 {margin:0px 0px 0px 0px;padding-bottom:0px;font-size:36px;line-height:36px;
font-weight:600;color:#000000;background-color:#eee;font-family:Verdana,arial,sans-serif;letter-spacing:1pt;position:relative;left:5px;}

h2 {margin:0px 0px 10px 0px;padding:0px;font-size:22px;line-height:22px;
font-weight:600;color:#000000;background-color:#eee;text-align:center;}

h2.plain {margin:0px 0px 10px 0px;padding:0px;font-size:22px;line-height:22px;
font-weight:600;color:#000000;background-color:#eee;text-align:left;}

h2.left {margin:0px 0px 10px 0px;padding:0px;font-size:22px;line-height:22px;
font-weight:900;color:#d2691e;background-color:#eee;text-align:left;}

h2.brown {margin:0px 0px 10px 0px;padding:0px;font-size:22px;font-family:cursive,verdana,arial,sans-serif;line-height:22px;
font-weight:900;color:#d2691e;background-color:#eee;text-align:center;}

h3 {margin:0px 0px 10px 0px;padding:0px;font-size:12px;line-height:12px;
font-weight:900;color:#000000;background-color:#eee;}

h3.brown {margin:0px 0px 10px 0px;padding:0px;font-size:12px;line-height:12px;
font-weight:900;color:#d2691e;background-color:#eee;}

p.small{font:10px Verdana,Sans-serif;}
b.brown{color:#d2691e;background-color:#eee;}

#Content>p {margin:0px;}
#Content>p+p {text-indent:30px;}

a.mail {color:#000000;background-color:#eee;font-size:18px;text-decoration:underline;font-weight:600;
font-family:verdana, arial, helvetica, sans-serif;}
a.mail:link {color:#000000;background-color:#eee;}
a.mail:visited {color:#000000;background-color:#eee;}
a.mail:hover {color:#000000;background-color:#eee;}

a.large {color:#000000;background-color:#ffffff;font-size:32px;text-decoration:none;font-weight:600;
font-family:verdana, arial, helvetica, sans-serif;}
a.large:link {color:#000000;background-color:#ffffff;}
a.large:visited {color:#000000;background-color:#ffffff;}
a.large:hover {color:#000000;background-color:#ffffff;}

a.small {color:#000000;background-color:#eee;text-decoration:none;font-weight:600;
font-family:verdana, arial, helvetica, sans-serif;}
a.small:link {color:#000000;background-color:#eee;}
a.small:visited {color:#000000;background-color:#ee;}
a.small:hover {color:#000000;background-color:#ffffff;}

a.plain {color:#d2691e;background-color:#eee;font-size:22px;text-decoration:none;font-weight:900;
font-family:cursive, arial, helvetica, sans-serif;}
a.plain:link {color:#d2691e;background-color:#eee;}
a.plain:visited {color:#d2691e;background-color:#eee;}
a.plain:hover {color:#d2691e;background-color:#

I would be grateful for any other suggestions.

 

[MrBelfry]

This part of your css:

#Content>p {margin:0px;}
#Content>p+p {text-indent:30px;}

is causing the paragraph confusion. IE6 doesn't understand this 'advanced' syntax. Netscape is rendering your stylesheet correctly. Get rid of it and the paragraphs will look the same as IE

MrBelfry

 

[MrBelfry]

Your problem with the banner maight be caused by the closing img tag-><img class=&quot;right3&quot; alt=&quot;pets&quot; src=&quot;toppic.jpg&quot; width=&quot;173&quot; height=&quot;50&quot;></img>

You don't need it just close it the same way as your br tags ie -> <img class=&quot;right3&quot; alt=&quot;pets&quot; src=&quot;toppic.jpg&quot; width=&quot;173&quot; height=&quot;50&quot; />.

I'd be surprised if this made any difference but it's worth a try. I cannot see any style info posted above for your header class. It might be that you just need to specify a height value in that class to make the picture fit in the container.

You also might want to consider changing you <b> tags for <strong> tags -> which has the same effect but is meant to be a bit nicer to screen readers.

MrBelfry

 

[LEICJDN1]

Thanks to MrBelfry (and Edward) all of the above tips combined to form the exact solution! There was another line in the header code upsetting Netscape and changing the closing IMG tags also helped.

Result achieved!

Still not sure I entirely understand why it did what it did though - need more practice.

Now, where is that copy of Mozilla....

 

[MrBelfry]

For your information I checked the site in Mozilla and Opera and everything appears to be ok.

This is a great site considering it is your first attempt. My first website simply said 'Hello World'!

MrBelfry

 

[LEICJDN1]

Thanks for checking in Mozilla and Opera - will probably still get hold of those anyway.

One more quick question,

What is the best environment to develop a site in? I use notepad only. What I mean is do most issues occur when proofing in IE then reviewing in NS? Should I develop and proof say only in Mozilla or Opera (or another?) which then means that all is likely to be fine in IE and NS. Or is that a foolish dream on my behalf!?

Thanks.

PS. This is my first website in the sense that it is the first I have uploaded, but it has evolved from very humble beginnings - including 'Hello World!' over the last few weeks as ihave got to grips with HTML then CSS. Thanks though.

 

[MrBelfry]

I assume you use notepad because it doesn't cost you anything! I personally could not envisage working in Notepad simply because it creates huge indents when you hit tab!

I use HTML-Kit because I need nicely coloured tags to help me. It is free and easily available but as I'm not sure what the guidlines are for 'advertising' on tek-tips I would recommend going to your favourite search engine to find it.

I use top-style to play with my styles. You can also get this for free (see above!)

I normally code with IE, Netscape/Mozilla and Opera open which means I have to hit refresh alot. This way I tend to spot problems as I'm coding and can deal with them as they happen rather then re-edit my code.

With experience you will soon discover where problems are going to occur and I tend to do a lot more refreshing when my spider-sense tingles!

MrBelfry