Netscape, Mozilla, Firefox Website check request (large graphic)

[bain_sidhe]

Hi users of non-IE browsers! I would like to ask you to check out my website if you use one of the above browsers. I know it looks ok in IE and Opera, but I don't have those on my computer. Someone told me that it was "broken" in Netscape - I've done some work since then, but I don't know if I "fixed" whatever was broken.

Your help would be much appreciated.

the Url is
http://www.webfaerie.com/faerie_bytes/

and it's supposed to look like this (sorry about the large graphic, I compressed it as much as I could and still give a reasonable idea of what it's supposed to look like)

[CatholicEdHead]

1. Top green bar messed up

The green graphic is just the text taking the space of the entire page. It is 2 to 3 times the size.

Below the green graphic at top it looks just fine.

[bain_sidhe]

2. which browser?

[CatholicEdHead]

5. Firefox 1.0

[lpbk2713]

3. I use Mozilla 1.7

The "faerie bytes" box takes up the whole screen when I first get to the site but I can scroll down to the rest of it. Left and right everything is OK. Looks good.

[no name no slogan]

4. You need to fix the Style Sheet (CSS)

Your "#header" style font-size is WAAAAAAY too large. Try setting it to either a fixed size (like "36px") or setting its relative size smaller (to "x-large"). That should fix the problem.

ON EDIT: I just checked out your main style sheet, and here's your problem:

#masthead {
  background: #004000;
  font: italic normal 800% 'Comic Sans MS', sans-serif;
  letter-spacing: 0.1em;
  margin-top: 2px;
  margin-right: 5px;
  margin-bottom: 5px;
  margin-left: 2px;
  padding: 0 2px 0 10px;
  border-top: 1px solid #004000;
  border-bottom: 10px solid #FFFFE8;
}

You set the font size for the #masthead id to 800%-- which is probably why it's blowing up in Mozilla. Try rolling it back to 100%, or specifying an absolute font size.

Also, FWIW, you may want to change the font family from "Comic Sans MS", as that font is only available with Windows PCs-- which means people with Macs or Linux/Unix boxen will not see the font properly (they'll see their default sans-serif font instead).

[bain_sidhe]

6. I've been rasslin' the stylesheet

for a week now, so at least I know my way around it! Thanks for the tip. Will do. I suspect the problem is that your browser is substituting a different font... I tried to pick one most computers would have, but apparently I didn't. Since my computer has the font I used, it looks fine on any browser I use (because it pulls the font from *my* computer's font list).

[no name no slogan]

9. I have a love/hate relationship with CSS

The only way I really got good at is was a 'trial by fire' experience. I taught web design/development at a community college for a few months in 1999-2000, right before the dot-com bust. We spent a chapter on CSS design and use, and I got very good with it in a short period of time, because I had to teach it to the students.

CSS syntax can be a real pain, especially if you're used to HTML. It's syntactically similar to the C programming language, but it's not a programming language per se. Add the fact that the major browsers still don't render things as they should (altho they're better now than, say, five years ago) and you've got a big mess on your hands.

Other than the header, the rest of the site looks good! And PM me if you need any additional help with CSS stuff! I've been doing web stuff since 1997 and I have a pretty good idea of what's going on, for the most part! :hi:

[bain_sidhe]

13. You are my new best friend!

And PM me if you need any additional help with CSS stuff! I've been doing web stuff since 1997 and I have a pretty good idea of what's going on, for the most part! :hi:

Hi back atcha! It's been a real trip learning CSS - and like you, it's been trial by fire. I've broken the style sheet more often than I care to admit, just putting up this blog. But other than not being able to get it to do three columns on anything other than Opera, I've managed to finagle the problems I've encountered so far. Of course, I haven't tried anything *really* hard yet...

[no name no slogan]

14. Glad to help out!

It's very difficult to keep up with all the new stuff, since there's a new revision out every few months, or so it seems. And since stable jobs in tech stuff are so hard to land these days, you have no choice but to stay current, or go do something else...

:D

[bain_sidhe]

11. set it to 200, switched font to Lucida Console

what are you seeing now? Is that a more common font? All I've GOT is a windows PC, so I really don't know what Linux/Unix substitutes for that.

[qnr]

7. the title is huge, everything else is fine.

Click on the thumbnail to see.

[bain_sidhe]

8. Holy moly!!!!!! Title graphic change...

Ok, switched to Lucida console, and reduced size...

How's it look now?
http://www.webfaerie.com/faerie_bytes/

[qnr]

10. Much better n/t

[no name no slogan]

12. Looks GREAT!

...and if you ever want to go for the table-less layout via CSS, let me know. I've done a couple sites that way, and they seem to work out fairly well.

Here's the site for an ex-employer, where everything below the banner is CSS: www.sopheon.com

Here's the site for the MN progressive caucus, where the entire site is CSS driven, with one master stylesheet (no browser-based stylesheets): www.progressivecaucus.net

good luck! :thumbsup:

[bain_sidhe]

15. Yours are gorgeous too!

I really like the CSS concept - as a desktop publisher (using PageMaker) from way back, I love being able to change the styles throughout the whole publication just by redefining the style... but CSS uses a whole different "language" I'm not familiar with. But, hey, I taught myself php and mysql, so (famous last words) how much harder can it be??

Yes, I'd like to try to the three column layout with CSS - and I had it working FINE in Opera. But I.E. (and, I'm told, Netscape) didn't display it right. D'ya want to start a CSS discussion in the "computer help" group? I would be SO there for that!

[no name no slogan]

16. That sounds like a good idea!

I also got my start in desktop publishing, back in the late 80s, with "Aldus Pagemaker" as it was back then, on some of the first iMacs. Most of the stuff I do now is building/admin-ing Content Management Systems, which rely heavily on CSS for styling and layout.

And if you can teach yourself PHP, you can definately do CSS! I've been doing Perl/CGI, JavaScript and M$'s Active Server Pages (ASP) for many, many years, and I'm still not completely comfortable with PHP. If I could only create more time in the day. :D

[bain_sidhe]

17. I looked at both perl and php, and

I think php is WAY easier. Might just be the way my mind works though. And having learned php, I think I'd have an easier time with perl now. It's getting the *idea* of what it's supposed to do, I think. Once you know "there's a way to... (make something print, make something pull items from a database, whatever)" it's just a matter of finding out how that particular language "says" that.

The thing that defeated me with CSS was the three-column thing. I could get it to display three columns by floating the content division (which controls displaying the posts) left, and putting the menu division *inside* it, also floating left, and shoving the post items classes to the right by 195 px. What I could *not* do was make the comments bug appear anywhere other than at the point where the first column ended. With a long post, it was no problem, with a short post, there was a screen full of white space between the end of the post and the comments bug.

:argh:

But then too, with the "nav" division floating right, if somebody was using a screen wider than 800 pix, there was an unattractive space between the posts and the nav, so even if I had fixed the comment bug problem, I would still have had that to deal with. :sigh:

[no name no slogan]

21. Three columns in CSS is not called "the holy grail" for nothing!

The best way I've done it is to use relative widths for the columns: i.e., 25% for the left, 50% for the center, and 25% for the right. You may need to fudge the %s by a point or two if you use any margins or padding on your columns, since that will throw the display off.

Also, set the position properties on these to "relative", and the "float" properties to "left". That way, they all "stack up" on the page next to each other and you don't have so many "floaters" out in la-la land to deal with.

Also, check out www.glish.com/css for some other great examples, as well as www.alistapart.com. A List Apart is a GREAT resource for CSS/XHTML usage-- I've stolen a lot of good ideas from there.

Well, back to work on the MN Progressive Caucus site. I'm still automating it, and need to get my events manager application running properly. What fun...!

[bain_sidhe]

23. It is???????? I did not know that!

I'll probably stick with tables till my next "Geek Day" - so far, it's been Saturdays, but it's actually a ... um... floating day. Maybe I'll try it later, though, while everything is still fresh in my mind.

Now I've got to make a fast dinner for us to eat while we watch Enterprise, so, I'll take a look at the A List Apart site after that.

Thanks for all your help and advice!

[Commie Pinko Dirtbag]

18. Mozilla 1.7.3 under Fedora Core 3

Keep in mind I have the Microsoft Web Fonts installed. Most Linux installations don't.

[bain_sidhe]

19. Hmm, that header font is still rather large

isn't it? Maybe I should take it down another notch...

[Commie Pinko Dirtbag]

22. Looks like a different font. Fedora seems to have fallen back to Verdana.

What's the original font? Edit: OK, it's Lucida Console, I don't have it. It did fall back.

[Maestro]

20. Looks good

Firefox 1.0