Need Some CSS Help Bad! [Archive] - Insiderhosting.com Community Forums

View Full Version : Need Some CSS Help Bad!

steviedifranco

04-21-2003, 08:44 AM

Alright here's my problem...

I use external CSS files for all my websites. They look absolutely fine in Internet Explorer. However, when I view them in Netscape, it seems that much of the style sheet is not being incorporated. For instance, the font never looks right. Can someone please tell me whats wrong? Here's a couple sites:

www.ohioconnect.net - Font size & family is way off
www.rayoungconstruction.com/new - I think its pretty obvious, just a template though.

Thanks a lot in advance.

Steve

pete3005

04-21-2003, 09:18 AM

I checked in NN6, NN7 and Mozilla, looks the same as IE :)

So I assume you are referring to Netscape 4x versions. You need to ask yourself do my sites get enough NN4 users to warrant the work for NN4x's poor CSS support.

Assuming the answer is yes then I suggest you do the following:

1) Create a very basic style sheet, as you develop keep testing in NN4, make sure nothing breaks. Link that as you have done.

2) For the extra CSS support for modern browsers like IE5+, NN6+, Opera 7+ create a CSS with those styles in and then use the import method of external linking because NN4 doesn't recognise the import() method.

<style type="text/css">

</style>

Also in NN4 you get a JS error:

JavaScript Error: http://www.ohioconnect.net/menu_com.js,
line 153:

TLoc has no properties.

Unfortunately NN4 is a real poor browser and we are now on NN7. The percentage of NN4 users is going down each month as people upgrade. Many web developers no longer bother with NN4.

Try the following sites to learn more about what CSS NN4 can handle:

http://www.mako4css.com/
http://www.meyerweb.com/eric/css/

There is no easy fix, just a little testing, trial and error for NN4.

HTH

Pete

steviedifranco

04-21-2003, 09:22 AM

Actually I was using NN7, and it looked like pure crap. Must be something on my computer if you say it looks fine on your computer.

Honestly, I'm not all THAT worried about Netscape users, because I don't know anyone who uses it. NN4 isn't an issue at all with me. I'm not going to go through all the hassle to conform to the .1% of people who still use that browser.

Thanks for your help.

pete3005

04-21-2003, 09:23 AM

Also: On the one site you have two lots of head content, I would imagine that your editor has done something it shouldn't or you have an include problem.

<html>
<head>
<title>Ohio Connect - Cleveland's Small Business Directory</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="Ohio Connect is a small business directory for the Cleveland, Ohio area. If you are ever in need of a service, this is the first place to go! Here you will find restaurants, carpenters, electricians, financial planners, doctors, landscaping, construction, accountants, medical billing, waste management services, asphalt services, painters, and many many more businesses! Also we provide affordable web design, hosting, & maintenance to businesses all over the country..">
<meta name="keywords" content="ohio connect, cleveland, business directory, small business directory, restaurants, carpenters, electricians, financial planners, doctors, landscaping, construction, accountants, medical billing, waste management services, asphalt services, painters, web design, web hosting, site maintenance, affordable, professional service">
<link href="css.css" rel="stylesheet" type="text/css">
</head>
<body onLoad="goforit()">
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr height="10">
<td height="10" background="images/topbg.gif" style="background-position: center"></td></tr></table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" background="images/bg.gif" style="background-position: center">
<tr><td><center>
<table width="750" border="0" cellpadding="0" cellspacing="0" bgcolor="#006600" style="border-collapse: collapse" bordercolor="#111111">

<tr>
<td style="border-left-style: solid; border-left-width: 1; border-right-style: solid; border-right-width: 1; border-top-style:solid; border-top-width:1"><img src="images/top.gif" border="0" width="750" height="75"></td>
</tr>
<tr valign="top">
<td height="22" style="border-style:solid; border-width:1; padding-top: 0 ; padding-bottom: 0; " bgcolor="#336699"><span id="nav"><script type='text/javascript' src='nwrmenu_var.js'></script><script type='text/javascript' src='menu_com.js'></script></span></td></tr>
<tr>
<td valign="top">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" bgcolor="#cccccc">
<tr>
<td bgcolor="#FFFFFF" valign="top" style="padding:10; border-left-style:solid; border-left-width:1; border-right-width:1; border-top-width:1; border-bottom-width:1">

<html>

<head>
<title>Ohio Connect - Cleveland's Small Business Directory</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="Ohio Connect is a small business directory for the Cleveland Ohio area. From restaurants to carpenters, they're all listed on our directory. Offering affordable websites to small businesses and more.">
<meta name="keywords" content="business directory, small business directory, american business directory, international business directory, online business directory, affordable web design, affordable web site design, affordable web page design, professional affordable web design, web hosting, web site hosting, cheap web hosting, business web hosting, web hosting service, ohio business, business listing new ohio, ohio small business, ohio business directory, cleveland ohio business, small business, starting a small business, small business plan, small business start how, small business marketing, cleveland business, cleveland ohio business, cleveland business directory, banking business cleveland in, business cleveland in ohio">
<link href="css.css" rel="stylesheet" type="text/css">
<script language="JavaScript" type="text/JavaScript">

</script>
<script language="JavaScript">
<!-- Hide from old browsers

var imagenumber = 10 ;

pete3005

04-21-2003, 09:26 AM

Ah, I see the font difference now :)

You are using pt for font sizes. Try pixels instead, that *should* fix it.

Pete :)

steviedifranco

04-21-2003, 09:27 AM

I was just updating that site...I didn't wipe out the head tag yet. Thanks for noticing though, I appreciate any comments you have.

steviedifranco

04-21-2003, 09:47 AM

I tried using pixels and that didn't solve it either. But then again it might be my Netscape. Do you notice a difference?

pete3005

04-21-2003, 10:28 AM

I'm finishing a site off right now but I will run some tests on your style sheets later on tonight and post back here.

Sardtok

04-21-2003, 10:36 AM

Hmm,
Pete for me it's always been the other way around,
pt sizes work in Netscape and pixel doesn't...

Sometimes it seems as if Netscape interprets pixel sizes as points...
(Yes I do use px not pt, and works fine in Opera and IE,
I think it even works in Konquerer)...

Anyway,
that second problem was pretty nasty,
but I think that actually is a font size problem as well...

I only have 3.5% Netscape users total, so I don't really care that much...

Try not having a space between the number and the unit:
13px not 13 px

Try using span elements I see designoutpost uses this for all elements with text that requires classes...

Just some suggestions...
That first one I am pretty sure about though... ;)

pete3005

04-21-2003, 12:55 PM

Originally posted by Sardtok
Hmm,
Pete for me it's always been the other way around,
pt sizes work in Netscape and pixel doesn't...

.. ;)

Actually that isn't correct, assuming we are talking NN4 and above (NN3 has no CSS support) you can use pixels (px), points (pt), ems and percentage %, cm e.t.c.

Quote from book, CSS - Separating Content from Presentation>>

"font-size accepts a value in one of the units that CSS understands, which we covered in Chapter 5. It's worth noting that as far as the physical units (px, pt, cm e.t.c.) are concerned onply px are at all safe across browsers and platforms since other units are physical and are affected by browsers thinking they're running at different resolutions."

Its just that 11px on IE will look bigger than 11px on NN4, but in NN6 plus that doesn't happen.

Anyway my bet is that NN6 doesn't like the space between the numerical value and the unit , so change 13 px to 13px. (Good catch Sigmund :))

I thought it may have been a style in your JS menu so I turned JS off in NN7 but that had no affect, everything else looks OK to it could be the space as already mentioned.

(FYI I am looking at the CSS on http://www.ohioconnect.net).

Also I ran your code through the W3C validator and you need a DOC TYPE. Although W3C compliance might not be something you care about (lets face it 99% of sites don't validate) I sure have found using the validator a great way to check for any extra or missing tags, especially on large and PHP generated pages :)

Hope the space problem fixes your issue with NN6+, I think it will. Can't see anything else that may be the problem.

HTH

Pete

steviedifranco

04-21-2003, 09:28 PM

Getting rid of the space did the trick. So for everyone out there who was like me: don't use a space between the size & the unit when dealing with fonts. Stupid stuff like that really frustrates me sometimes.

Sardtok

04-22-2003, 08:05 AM

Oh yeah,
pixel sizes works for me,
lol,
it's netscape's css inheritance parsing that is faulty which causes my main font to look too big,
I should fix that, it's a pretty easy fix... ;)

Also,
the thing about the spaces,
I've had the same problem,
but I didn't do it for font sizes I did it for table sizes so that didn't look very nice in Netscape and Opera... ;)

EDIT:
There,
fixed,
single line of code so... ;)
(Just added: BODY * {font-size: 12px; font-family: Verdana, sans-serif} Which I think I removed during a discussion with Palmer, where he couldn't see the Verdana font, but saw the old serif font. The problem was not the CSS though, but his ISP's DNS propagation hehe :) )

pete3005

04-22-2003, 08:27 AM

A few months ago I spent 4 hours trying to figure out a CSS issue. I had a trailing comma at the end of my font-family: and NN7 was choking on it.

..but I guess we should be happy that NN4 is dying a certain death, I actually like NN6+ and even Opera 7 is almost there!

I don't currently have a Mac but I know we now have Safari from Apple Mac among the other half-assed browsers like IE5/IE5.2.

Too many browsers, too many browser bugs!..lol :)

Pete

ghost

04-22-2003, 09:05 AM

Everything looks normal my side with IE5 IE6.1 NN7 NN6. Have you fixed the problem ?

Sardtok

04-22-2003, 11:57 AM

Yeah he fixed it...
Pete,
yep,
I tend to just stick with the latest version of IE,
although I have Opera 7 and NN7...

And Opera is actually pretty good,
there are some things that actually work better in Opera than in IE,
but IE is the best,
simply because there's better support for it,
because of stupid people who make websites that only support it... ;)
And it's the best because a minor markup fault won't crash it,
not that NN does that any more ;)