Am I missing something? (html/mozilla question)

[Rat]

So I'm trying to set up a web page. It's been a long time since I've done it from scratch, and after 10 pints, it's making little sense to me.

I look at the rudimentary framework, at http://81.6.232.254/testing/ and the left frame doesn't appear at all in IE. In Mozilla, the images all appear with the link border around them, though I've tried not to make them appear.

Save my sanity. What basic thing am I missing?

Cheers,
Rat.

[tygirwulf]

I don't have my handy-dandy html textbook with me, but I think you can try having border=0 in either the link or the image tag.

[Rat]

No indeed, all my handy html textbooks are at work. I'm trying to put all the style into stylesheets, because I'm a terrible html snob. Is this not possible in Mozilla?

Cheers,
Rat.

[xouper]

ratcomp1974: What basic thing am I missing?You have your STYLE tag nested inside a SCRIPT tag. Un-nest them and it should work.

Also (and I cannot emphasize this too strongly), when you use an IMG tag, also specify the WIDTH and HEIGHT attributes. And if you want your page to pass validation, also specify the ALT attribute, even if it's just an empty string.

One more thing. In my professional opinion, I strongly recommend against using frames, especially the way you are using them. Use CSS instead. It goes against my better judgment to continue offering any professional assistance at all to anyone who persists in abusing frames the way you are abusing them. :)

[xouper]

One more thing, change

STYLE type=text.css

to

STYLE type=text/css

[Rat]

My god. I feel such a fool. The incorrect nesting and the stop rather than slash are both due to my drunkenness.

I cannot agree more about frames. I will never use tables for layout, and when I get things sorted, I will not use frames either.

This is, of course, a preliminary thing, for my own use, and that of knowledgable jref members, only. All alt tags will be used, all images will be properly dimensioned, and so on, when I'm done.

I just hit this first hurdle and was too drunk to see it. Apologies to all concerned.

Cheers,
Rat.

[shanek]

Originally posted by ratcomp1974
No indeed, all my handy html textbooks are at work.

The only HTML textbook you need:

http://www.w3.org/TR/html4/

I'm trying to put all the style into stylesheets, because I'm a terrible html snob. Is this not possible in Mozilla?

It's absolutely possible. In fact, this is the preferred way to do it, and Moz handles it a lot better than IE.

[shanek]

Originally posted by ratcomp1974
I cannot agree more about frames. I will never use tables for layout, and when I get things sorted, I will not use frames either.

Agreed with frames, but tables are just way too useful and reliable not to use for layout, IMO.

Oh, BTW, you might want to make sure your HTML validates:

http://validator.w3.org/

And your style sheets as well:

http://jigsaw.w3.org/css-validator/

If it validates, then I've found it should look the same in most any browser.

[Rat]

I do have a print out (courtesy of my workplace) of the w3c recommendations for html, css, svg, and various others.

I'm snobby enough to believe that if it can't be done in CSS (i.e. without tables) then it's my talent that's lacking, rather than specifications. This has caused me much pains in the past. It will cause me much more when I move this site to css from frames. And yes, I do have (albeit shaky) reasons for sketching it out in frames first.

I will submit (as I always do) my site to the w3c validation when finished.

Cheers,
Rat.

[shanek]

A few more things after quickly perusing your code:

You're using XHTML instead of HTML, so all elements must be closed. For example:

<pre>&lt;img src="g/2PhotosW.png" height="16px" width="224px"></pre>

Should be:

<pre>&lt;img src="g/2PhotosW.png" height="16px" width="224px" /></pre>

If you don't want to do that, make it regular HTML nstead of XHTML, which is probably the way to go anyway as you don't appear to be doing anything that requires XML.

Also, with the images, you don't specify "px" for the width and height; just the numbers. So it really should be:

<pre>&lt;img src="g/2PhotosW.png" height="16" width="224" /></pre>

And as Xouper said, you really do need an alt attribute of some kind, even if it's empty:

<pre>&lt;img src="g/2PhotosW.png" height="16" width="224" alt="Photos" /></pre>

Your mouseover on Line 24 isn't working because it should go with the &lt;a> element and not the &lt;img> element. Also, inside your onMouseOver value use single quotes instead of double; the doubles are terminating the string. You also need a semicolon at the end of every JavaScript command. This is how it should be:

<pre>onMouseOver="mouseOn('pic2','1HomeC.png');"</pre>

[Rat]

Yup, I intend to use xhtml, and I will tidy up those bits that don't fit when I'm finished. I really do know about closing elements, and specifying units. Honest.

Man, did I step into a can of worms here....

Cheers,
Rat.

[shanek]

Originally posted by ratcomp1974
Yup, I intend to use xhtml, and I will tidy up those bits that don't fit when I'm finished. I really do know about closing elements, and specifying units. Honest.

Man, did I step into a can of worms here....

Hey, you asked. Just trying to help ya out, man.

[Rat]

And I do appreciate the help, really. Thank you. All.

All working now, and UK viewers of a certain age will recognize the navigation system.

Cheers,
Rat.

[Mendor]

Originally posted by ratcomp1974
All working now, and UK viewers of a certain age will recognize the navigation system. :D

Ah, the memories...

[Rat]

The images still don't appear for me in sodding IE, though.

Grrrr.

Cheers,
Rat.

[xouper]

ratcomp1974: The images still don't appear for me in sodding IE, though.That's because mozilla uses a different DOM (document object model) than Microsoft. What many javascript programmers do is encapsulate the differences and keep them out of the main code. Providing such cross-browser support is described on many online javascript tutorials.

Microsoft bashers blame Microsoft and Netscape bashers blame Netscape for the DOM incompatibility. Blame is irrelevant, however, so I advise just grin and bear it like the rest of the web developers around the world.


Edited to add this reference:
http://www.webreference.com/programming/professional/chap6/1/

[xouper]

xouper: That's because mozilla uses a different DOM (document object model) than Microsoft.I may have spoke too soon without looking closely enough at your code. If one of the other gurus on this forum doesn't beat me to it, I'll take a closer look as soon as I can get to it.

[Rat]

Yes, I've tried taking out all of the link tags, so it's just a list of images. Nothing strange in the image tags. Still they don't appear in IE.

The images are pngs, of course, but they've been supported since IE4 at least, and they open in any other application.

The frame that holds them is wide enough, and they don't appear even if I open that frame separately.

I can only imagine that I've forgotten to close a tag somewhere or something equally brainless.

Cheers,
Rat.

[Rat]

So it's not the images. It's not actually getting the page at all, as evidenced by its not printing the random plain text I inserted.

This is driving me up the wall now.

Cheers,
Rat.

[xouper]

ratcomp1974: This is driving me up the wall now.When I download the specnav.html to my hard drive, the image rollevers work fine in IE, but not when I use IE to access the page on your server. Hmmm.

Also, I noticed that in the javascript, you have "new Image(224,26)" whereas the images are actually only 16 px high. This is not the source of the IE rollover problem, however.

[xouper]

If it helps, here's a screenshot of what I'm seeing in IE from your server:

http://www.xoup.net/img/ratcomp.jpg

[shanek]

Originally posted by ratcomp1974
The images are pngs, of course, but they've been supported since IE4 at least, and they open in any other application.

IE is really funky about pngs. It doesn't handle transparent pngs well at all. I'd love to use pngs all the time, everywhere, but until Microsoft gets their act together it's just not worth the hassle and the headaches.

[Lord Emsworth]

I don't have much knowlegde about webpage design, but methinks you forgot "/script" in the head of the html of the left frame.

Substitute all the square brackets with poity ones and try this:


Left navigation page

img {
border: 0px;
}





At least it works now for me in my primary browser iCab and in MSIE 5.2 mac, although IE blathers something about script errors and objects that are expected. FWIW

[Wudang]

If you don't mind me butting in, since you guys seem to now web design. I'm trying to get to grips more with CSS where I'm way behind the times and am struggling with getting the "box model" to do what I want. In particular, I've been using Brainjars tabs demo (http://www.brainjar.com/css/tabs/demo.html) as a model. The one thing I can't seem to do is remove what I believe to be the margin between the tabs. E.g in his tabs I want to remove the white space betwen the tabs.

I scanned the proofs of the wedding photos to put on the web so family can decide which ones they'd like copies of and then I thought "this could be a little better" and 5 hours later here I am.

It looks great* in mozilla but in IE the lack of support for border-radius makes it look a bit clunky.
* for suitable values of "great" ;)

[shanek]

Originally posted by Wudang
If you don't mind me butting in, since you guys seem to now web design. I'm trying to get to grips more with CSS where I'm way behind the times and am struggling with getting the "box model" to do what I want. In particular, I've been using Brainjars tabs demo (http://www.brainjar.com/css/tabs/demo.html) as a model. The one thing I can't seem to do is remove what I believe to be the margin between the tabs. E.g in his tabs I want to remove the white space betwen the tabs.

First off, drill this into your head: margin, border, padding, from outside to in. Margin, border, padding. Margin, border, padding. Margin, border, padding. Margin, border, padding. Margin, border, padding.

Now that that's over with, let's go over how to make two items appear directly together. First and foremost: NO WHITESPACE. At all. Not a space, not a newline, nothing, or else it will be interpreted by the browser as a whitespace and you'll get the space no matter what you do. A good way to do this and maintain readable formatting (I've found) is, instead of:

&lt;div class="tabs">
&lt;span class="tabStyle">Tab 1&lt;/span>
&lt;span class="tabStyle">Tab 2&lt;/span>
&lt;span class="tabStyle">Tab 3&lt;/span>
&lt;/div>
Do it like this:

&lt;div class="tabs">
&lt;span class="tabStyle">Tab 1&lt;/span
>&lt;span class="tabStyle">Tab 2&lt;/span
>&lt;span class="tabStyle">Tab 3&lt;/span>
&lt;/div>

The browser now ignores the whitespace since it's inside the &lt;/span> element.

Of course, make sure you have nothing else causing spaces. For example, if it's a table, make sure cellpadding and cellspacing are both set to 0.

If you've done that, then CSS should be the only thing determining the amount of space between the tabs. So just set the margin to 0 if you're using a CSS border to surround your tabs:

.tabStyle {
margin: 0;
border: solid 1px #AA00FF;
}

If you're not using the CSS border and you're using, say, an image or something else that's inside the element itself, then you also need to set padding to 0. Remember: Margin, border, padding.

.tabStyle {
margin: 0;
padding: 0;
}

It looks great* in mozilla but in IE the lack of support for border-radius makes it look a bit clunky.
* for suitable values of "great" ;)

That's IE for you. They just refuse to implement CSS correctly. It's great to use Mozilla for testing, since Mozilla, having followed the standards, will let you know if you've done anything wrong. But you will want to make sure it displays well in IE, of course, since that's what most people use. And there you run into all sorts of stupid little quirks and nonstandard bull$#!7 that IE does that isn't documented anywhere. I probably spend an extra 25-50% of the design time just making it look good in IE. Fortunately, every successive version gets closer and closer to the standards, so it gets easier as more people upgrade.

[Wudang]

Thanks, I'll have a play.

[Wudang]

Shanek, I owe you a beer. All I did was delete the whitespace between the </a> and <a> tags and it worked.
My next task is to drain a swimming pool, fill it with caterpillars to the brim then throw the IE developers in and watch them drown in bugs - it seems so *~%$ing appropriate.

[Wudang]

And looks like the last bit is bullet-proof rounded corners (http://www.albin.net/CSS/RoundedCorners/)