PDA

View Full Version : Having trouble with Mozilla/Netscape

Szara
02-21-2004, 10:23 AM
Hello all,
I've been working on my site for a few weeks now, and I'm quite happy with how it's turning out. I'm having two problems, though, both in Mozilla (Firefox 0.8 and Netscape 7.1):
The text of my pages will not wrap; the viewers have to scroll off to the right to see what' s being said.
My specialty "bullets" for lists do not display - only the standard list bullets.
I know I've got the coding right because it works fine both in preview with 1st Page and in MS IE 6. I don't know if I'm missing something to do with browser-specific information?

PLEASE tell me if you want specifics, and what, rather than ratting on me for not providing them. All I can offer you at this point is my homepage: http://www.members.shaw.ca/twocatsandalady/index.html (substitute "main" for "index" to view without frames).

The site is built with CSS; let me know if you need to see any of that code.

Thanks in advance for any help :D
azlatin2000
02-21-2004, 10:33 AM
It s a browser specific thing it only works in ie because it is not standards compliant cause the people at M$ are supposed to put a "-" before propietary css but they are idiots and don't understand english so they didn't. It might work in Mozilla 1.6 though.
Szara
02-21-2004, 10:45 AM
So does that mean my HTML is incorrect? If so, how do I fix it?

My goal (although far-fetched) is to have it display as uniformly over the most browsers it possibly can. Please help me with this.
azlatin2000
02-21-2004, 12:06 PM
Having it display correctly on all browsers it not at all farfetched as long as you use the html doctype and follow standards which can be found at w3c.org. I don't know what is considered correct html.

I also recommend using css that is approved by the w3c because i was making a site which didn't look the same using tags and attributes but it looked exactly the same when i used css.

another tip: never go to the msdn website for making stuff that is crossbrowser compatible.
pascal
02-21-2004, 12:08 PM
msdn?
azlatin2000
02-21-2004, 12:13 PM
microsoft developers network i think.
barkingpenguin
02-21-2004, 12:17 PM
Check this out:

Visual Effects (http://www.w3.org/TR/REC-CSS2/visufx.html#overflow-clipping)
Szara
02-21-2004, 12:38 PM
Excellent, barkingpenguin, I think that'll help. Thanks!
barkingpenguin
02-21-2004, 12:41 PM
You're welcome!

You can check out the entire specification here:

CSS (http://www.w3.org/TR/REC-CSS2/cover.html)
Szara
02-21-2004, 12:47 PM
Ooohh, my brain hurts. I'll work on it tomorrow. ;) :D
Szara
03-05-2004, 01:40 AM
I've been over it and over it, and it's making no sense to me at all. I've tried a couple of things to no avail, I can't get it to wrap.

Does anyone have a more specific suggestion? I can post my style sheet too, if necessary.
DCElliott
03-05-2004, 05:50 AM
I don't know why you have a white-space: pre in you body selector and your p selector. That will guarantee that you page will not be fluid since pre means preformatted text, Trust me - you do NOT want that there.. Just remove the whitespace:pre or change pre to normal and your text will wrap. Internet Explorer does not support the whitespace property so it didn't affect your IE pages. As a general rule of thumb - write for the most CSS compliant browser available - usually the latest Mozialla or Firefox and then make the adjustments necessary for older "busted" browsers.

You have a lot of redundant and totally unecessary CSS in your stylesheet. You are using CSS2 in your stylesheet but your document is HTML transitional. You really should take the time to work your HTML up to XHTML 1.0 strict standard There are online validators or the new HTMLTidy [ http://tidy.sourceforge.net/ ] to help identify problems with your code.

For Example:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>*** UNDER CONSTRUCTION *** Feline Ilk</title>
<style type="text/css">
/*<![CDATA[*/
@import url("feline_ilk.css");
/*]]>*/
</style>
</head>

<body>
<br />


<center>
<a href="http://home.ripway.com/2004-2/69113/diary/diary.html">
<img src="graphics/navandapp/construct.gif"
border="0"
alt="Under Construction" /></a>
</center><br />
<br />


<table border="0"
width="90%">
<tr>
<td width="20%"
align="center">
<!-- start BoingDragon counter code -->
<a href="http://www.boingdragon.com/counters.html"
target="_blank"><img src="http://207.44.140.153/count/felineilk/1.gif"
width="49"
height="87"
alt="My nifty cat counter"
border="0" /></a>
<!-- end BoingDragon counter code -->
</td>

<td width="60%"
align="center">
<img src="graphics/titles/maintitle.gif"
alt="don't click here"
border="0" /></td>

<td width="40%"
align="center">
<!-- Start Bravenet.com Service Code -->
<a href="http://pub21.bravenet.com/guestbook/1721118211/"
target="_top"><img src="http://images.bravenet.com/cp/guestbook.gif"
border="0"
alt="Sign my Guestbook" /></a>
<!-- End Bravenet.com Service Code -->
</td>
</tr>
</table><br />
<br />


<h3>It's March 3, 2004. There's good news and there's
bad news....</h3>

<h4>Which do you want first?</h4>

<p>The bad news is that
<strong>www.members.shaw.ca/twocatsandalady</strong> is
NOT going to be updated tonight...or ever again (as far
as Feline Ilk is concerned, anyway).</p>

<p>The okay news is that the whole site is packing up
shop and moving again.</p>

<p>The <strong>EXCELLENT</strong> news is that it's got
its very own domain name:
<strong>www.felineilk.com</strong>. Email
addresses...plenty of room to grow.... It'll be
good.</p>

<p>It's not ready, but you're welcome to come take a
look now - I just beg of you, please don't be put off
by the broken links, missing menus, and any other mess
ups you may encounter. They're in the process of being
configured. I'd hate for you not to come back just
because I'm improving it!</p>

<p>Or, if you're bored and waiting for me to get my
butt moving already, check out the
<a href="links.html">Links</a> page and follow them to
some funner stuff.</p>
<!-- begin footer for Morning After 1-4, How...well, any component with more than one sequential page -->
<hr />

<div class="botmenu">
<center>
<br />
<font size="-2"><a href="main.html"
target="_top">HOME</a> |
<a href="photos.html"
target="_top">PHOTOS</a> |
<a href="quotes.html"
target="_top">QUOTES</a> |
<a href="stories.html"
target="_top">STORIES</a> |
<a href="facts.html"
target="_top">FACTS</a> |
<a href="links.html"
target="_top">LINKS</a> |
<a href="otherilk.html"
target="_top">OTHER ILK</a> |
<a href="contribut.html"
target="_top">CONTRIBUTE!</a> |
<a href="sitenews.html"
target="_top">SITE NEWS</a> |
<a href="sources.html"
target="_top">SOURCES AND CREDITS</a> |
<a href="how.html"
target="_top">HOW</a> | <a href="why.html"
target="_top">WHY</a> |
<a href="sitemap.html"
target="_top">SITE MAP</a> |
<a href="index2.html"
target="_top">SITE HISTORY</a></font>
</center><br />
<br />


<table width="100%"
border="0">
<tr>
<td><em class="small">URL:
<a href="http://www.members.shaw.ca/twocatsandalady/index.html"
target="_blank"
title="Just in case you get lost, here's the homepage URL">
http://www.members.shaw.ca/twocatsandalady/index.html</a><br />

<strong>Feline Ilk.</strong> All original
material Copyright &copy; A. terMaat,
2003-2004</em><br /></td>

<td></td>

<td align="center">
<img src="graphics/linkbuts/css.gif"
align="left"
alt="Made with Cascading Style Sheets" /></td>

<td align="right">
<!-- don't forget to update the revision date, doofus! -->
<strong class="small">Revised: February 25,
2004</strong><br />
<em class="small">Check for updates on
Wednesdays, early evening PST</em></td>
</tr>
</table>
</div><br />
<!-- end footer -->
</body>
</html>
This is code that I ran through TidyUI [ http://users.rcn.com/creitzel/tidy.html#tidyui ] with the XHTML option turned on. Other than lacking the Table summary attribute, this is wholly compliant XHTML 1.0 transitional. It would take some extra work to make it Strict, like dropping deprecated tags like <center> and attributes like border width target etc., but its a start!

DE
Szara
03-05-2004, 11:49 AM
Thank you so much! The white-space thing was just something I was fiddling with and forgot to take out...didn't realize it would have such an effect. The "target" things are mostly from when I still had frames, now mainly for opening a new window - how do I do that without the attribute?

Didn't realize I was using CSS2 :eek: how'd that get in there? Which parts? And also out of curiosity, how'd you get your hands on my style sheet? I haven't been able to figure that out.

Also, which parts are redundant?

Someone on another board pointed out to me that there was no unit of measurement specified in the margin tags, and that might be exacerbating the problem.
Szara
03-05-2004, 12:12 PM
Me again. I've uploaded the page exactly as you posted up above, and here's the result: http://www.members.shaw.ca/twocatsandalady/indextest.html
Well, it wraps all right, a little too much. And where's my background colour? :( Sometimes I wonder if it's really worth the effort....
azlatin2000
03-05-2004, 12:55 PM
Getting someones style sheet isn't that hard. You move the mouse to the view mwnu, move down, click view source, find the url of the style sheet. Copy. Close the source viewer. Type the stylesheet url into the address bar, Click go, and then you see the stylesheet.
DCElliott
03-05-2004, 03:24 PM
There are two places where you had whitespace:pre (as I pointed out previously) in your body selector and in your general paragraph selector (look for: p { text-indent: 2em; white-space: pre}) As to why the text wrapped that much - remember the preformatted style puts text on the screen exactly the way it is written. When I ran the text through TidyUI - I set it with a width of 60. This is because I was going to paste it into a post here. When you wrap a section of a post in [ code ] tags it makes it display as preformatted text (look at this page's source to see) Without limiting the line length beforehand, this page would have ended up super wide because there were no wraps in your paragraphs. When you pasted my version of your code into your page, it kept the short lines.

Azlatin is absolutely right about how I got your stylesheet - almost. I run a browser called Firefox (http://www.mozilla.org/products/firefox/) that has an extension called EditCSS (http://texturizer.net/firefox/extensions/#editcss) which allows me to view and do realtime editing of any page that I am viewing. If you want to play around with your page's CSS and instantly see the results, these are the tools for you!

DE
Szara
03-05-2004, 08:54 PM
*smacks forehead* of course, if I was really thinking properly I would have figured all these things out. That'll teach me to work on it at 3 in the morning....

DCElliott, I also use Firefox, but hadn't gone exploring the extensions yet. I will now!
Szara
03-05-2004, 10:06 PM
That did it!! Wrapping in Netscape/Mozilla is back on! I curse the day I ever laid eyes on that stinky little whitespace tag :p
And you've been wonderfully patient with me DCElliott, I really appreciate that.

I still don't understand the bullets thing though....
DCElliott
03-06-2004, 06:11 AM
For the custom pawprint http://www.members.shaw.ca/twocatsandalady/graphics/bullets/paw1.gif do something like ul.paw { list-style-image: url(graphics/bullets/paw1.gif); } and in your html have <ul class="paw"> - you don't have to put the class on the <li> elements.

DE
azlatin2000
03-06-2004, 06:55 AM
DC, I have mozilla and when i right click and choose edit css nothing happens. Am i doing someting wrong or does it not work in mozilla?
Szara
03-06-2004, 10:00 AM
DC, I will try it and see if it makes a difference. The only problem is, there are 8 different colours of pawprint, and I want to rotate throught them, pink, blue, green, red, or whatever, instead of just having the same colour for each. I'm sure there's some way to get it to work.

azlatin, which version of mozilla do you have? As i understand it you need Firebird or Firefox; and regardless of which one you're running, you have to go HERE (http://texturizer.net/firefox/extensions/#editcss) and install the plugin first. Take a look around that page, too, there's some very fun and handy stuff there.
azlatin2000
03-06-2004, 10:13 AM
I am using Mozilla 1.7 Alpha, and they are called extentions, not plugins. Since it doesn't work in Mozilla does anyone know how to uninstall it so i don't have the edit css context menu?
Szara
03-06-2004, 10:20 PM
From the Firefox Help: Extensions (http://texturizer.net/firefox/extensions/#editcss) website:
Extensions are small programs (or plug-ins)
*shrug* I guess it's a matter of preference.

Perhaps you should start a new thread addressing the issue?

Haven't yet implemented the bullet change, too many other things going. I'll let you know how it works though.
azlatin2000
03-07-2004, 05:36 AM
To uninstall it i just made a new profile which was a bad idea cuz ihad a bunch of saved stuff in it but the good side to it was that i killed Mozilla while playing around with the files in the profile directory but now it works.
Szara
03-08-2004, 07:10 PM
DCElliott - your suggestion about the pawprints does, indeed, work very well, aside from having the same colour on each one. I guess I can live with that, though...it's better than it was!

Also the editcss has come in very handy. That kind of thing is apparently going to be a feature of the next 1st Page, isn't it?
Daybreak_0
03-10-2004, 02:03 PM
Have different classes for each colour similar to DCE's post

li.WhateverColourPaw{ list-style-image: url(graphics/bullets/WhateverColourPaw1.gif); } and in your html have <li class="WhateverColourPaw">

You could also do something like this

list-style: none
background-image: url(graphics/bullets/paw1.gif);
background-position: left center;
margin: 0px;
padding: 0px 0px 0px 20px;

Do a class for each colour like


.blue, .yellow, .pink
{list-style: none
background-position: left center;
margin: 0px;
padding: 0px 0px 0px 20px;
}

.blue {background-image: url(graphics/bullets/bluepaw1.gif);}

.yellow {background-image: url(graphics/bullets/yellowpaw1.gif);}

.pink {background-image: url(graphics/bullets/pinkpaw1.gif);}


and then give each list item a different class.

I did similar to this with some links although I did not use a list.

Someone said once "hey a menu is just a list of links, and therefore we should use a list" Although I agree with the theory behind using lists I also know that they were never originally intended to be used for menus. As you get so many little problems with lists used as menus and the various browsers have different default attributes and different renditions, I avoid them when the menu is complicated.

Regards
Day
DCElliott
03-10-2004, 03:15 PM
Day

That is a good method and avoids some of the different list rendering. I haven't run the code to check, do you not need a background-repeat:no-repeat; ?

You could also have:
li.blue {list-style-image: url(graphics/bullets/bluepaw1.gif);}

li.yellow {list-style-image: url(graphics/bullets/yellowpaw1.gif);}

li.pink {list-style-image: url(graphics/bullets/pinkpaw1.gif);}

if you wanted to use a list.

As for styling menus as lists, semantically they are lists. For styling a vertical menu, lists also have value because they are block level elements and take styles fairly well. One could have a series of <a...>Link 1</a><br /> <a...>Link 2</a><br /> list items but they are not as elegant. Besides, what is a list of links but, well, a list - you are actually semantically correct to code them this way.

DE
Szara
03-11-2004, 03:26 AM
Those are also good ideas, I will try them.

It also occurred to me that it could well be that Mozilla et al are not recognizing my list classes as simple numbers; if this is the problem, renaming them as colours could do the trick.

I'm not using the lists as menus, per se...more as a quick guide through only the pages that have many parts. (You could easily argue, of course, that those are just another type of menu...and I would concede the argument. I just consider there to be a little bit of difference...) Although I agree with DCElliott, that when it really comes down to it, a vertical menu is nothing but a list...and coded lists are more elegant, aren't they?
Daybreak_0
03-13-2004, 03:02 AM
Originally posted by DCElliott
Day

That is a good method and avoids some of the different list rendering. I haven't run the code to check, do you not need a background-repeat:no-repeat; ?


ooops Yes sorry would require it.

I'm starting to use this method a lot more now. Why -

1) less problems with rendering

2) less code and css , and therefore easier to copy paste and amend, which avoids the rendering problems when reusing and amending list menus.

-----------------

To tell the truth I am also starting to use tables a bit more than I was, for similar reasons to above.

Normally only for simple things where content is highly unlikely to change.

It did not make sense to me to be using double or even triple the CSS code, with all the hacks required to do something really simple, and could be done with a table in a heartbeat.

All I can say is -
1) Avoid tables at all costs for continually changing data, as so much harder to edit

2) Take a reality pill -
a) Tables will be supported for a long time yet
b) Clients don't give a damn about pure CSS. As long as it works, and it is built as cheap as they can get. They may care that it works in all browsers, but hey as tables do....
c) pure css hacks will be required for a hell of a long time as well.

3) Everyone to their own - Use what ever you think gets the job done

Regards
Day

PS: Don't even think your client will understand, they won't!
MikeParent
03-13-2004, 06:17 AM
Here here...finally the voice of reason... you hit the nail on the head... CSS is not the panacea that people think it is.

I am actually afraid to post critique requests here because I often wonder if the first thing people are gonna do is "view->source" and pick apart my coding (which unless I specify, is totally not what I am looking for feedback on) and browbeat me for not usinng enough CSS. Also I use Visual Studio.Net which generates some very odd-looking (but workable) html code.
DCElliott
03-13-2004, 07:30 AM
I was recently helping someone with a CSS based forum site. We ran into issues with overlapping divs and other stuff and finally the light went on. These posts are coming from a MYSQL database and so - we can call them "data", right? So the posts are displayed in table rows and every layout problem went away. The table is still CSS based. On top of this, I consider the table use in that context to be appropriate because it wasn't being used for macro layout, it was being used within a specific div for displaying rows of information.

(The real realization came when I realized that the multiplely nested divs <div><div><div></div><div></div></div></div>necessary to control the display were really recreating a <table><tr><td></td><td></td></tr></table> structure without being able to enforce non-overlapping the way table layout rendering works.)

So I am not anti-tables when tables are most appropriate. I still hold that one can produce standards compliant unhacked CSS for most layouts through careful planning.

So my dictum is - CSS for macro layout, tables where tables are semantically appropriate.

DE