Browsers: IE vs Netscape

started by Kaostream on Aug 31, 2004 — RSS Feed

Kaostream Kaostream
Posts: 7

Hi Everone,

I am in a desprate mode to get this working so I can send out my job search letters. I have parred this down from an all CSS attempt.

This portfolio site is built with javascript and CSS1. It looks good on IE browsers but not Netscape.
http://vanward.bccc.com/~jlai48/workmatters/

Can someone point out my mistakes in coding or quirks in the code for Netscape?

Your help is much appreciated.

johnL

Joe Gillespie Joe Gillespie
Posts: 528

Hi John,

Lots of HTML and CSS errors there. Run your page and CSS through the W3C HTML and CSS validators and fix anything reported

http://validator.w3.org/

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

The September Editorial (out tomorrow) has an article about debugging pages with some useful tools and techniques.

Kaostream Kaostream
Posts: 7

Thanks Forum Admin,

I cleaned up my xhtml coding (pile up from experimenting with CSS) as well as the CSS specs. They both validate OK so I have added the validation passed labels on my site.

This brings me to another couple of questions if you will indulge me:
Why does Dreamweaver MX allow me to spec a background image to use with a table when it will not validate as kosher?

Since I have to give up the background textural image (which ties up the design nicely) to qualify the site for valid xhtml ----- is there a way round it so I can introduce the texture into the design?

Thanks

Joe Gillespie Joe Gillespie
Posts: 528

This brings me to another couple of questions if you will indulge me:
Why does Dreamweaver MX allow me to spec a background image to use with a table when it will not validate as kosher?


I think that you should ask Macromedia that question. I would be very interested to hear their response!

Since I have to give up the background textural image (which ties up the design nicely) to qualify the site for valid xhtml ----- is there a way round it so I can introduce the texture into the design?


Yes, a div can have a background image, so, make a div that encloses the table. Better still, don't use tables at all - except for tabular data.

Baxter Baxter
Posts: 157

But you CAN have a background image on a table and have it validate. I just did it. Matter of fact, my 3-column, 1-row table uses one image as a background, a second image in one cell, and a third image in the remaining two cells. Validates fine.

Would've preferred to do the whole thing without the table, but in this particular case it just wasn't feasible.

Joe Gillespie Joe Gillespie
Posts: 528

I don't know what you are using to validate with but the W3C validator will not accept 'background' as a table attribute nor will any program syntax checker I have here. Besides, as you can't set the height of a table now either, you could only use a repeating image!

Baxter Baxter
Posts: 157

You're right, you can't do <table background="whatever">
but you CAN apply a background image in the stylesheet, either to the table, or to individual cells, either using td or putting an ID on them.

You're also right about clipping could be a problem depending on table height/width, but you can (at least in theory) set those through the stylesheet to. I wouldn't do it, but it's theoretically feasible. I would (and did) just use images that  can clip gracefully, if I didn't want to tile.

And I always validate my xhtml through the w3c validator, as well as my css. While I'm at it, I run it through bobby or cynthia,  hit it with the link validator,  check how it'll appear as text-only and test it in handhelds .

Joe Gillespie Joe Gillespie
Posts: 528

In 'theory' you could have a knock at your door from the W3C Fundamentalist Hit Squad and your artistic license given six penalty points

Baxter Baxter
Posts: 157

Why? It works, it validates, and the css background property was designed to do just this: put a background on an html element. A table is an html element. So there you go.

Would I recommend doing using tableless design? Yup?
Am I stickler about doing it things the right way? You know it.

My point is only that what kaostream is trying to do is actually quite possible, and not even a real problem, once you take the right approach.

Joe Gillespie Joe Gillespie
Posts: 528

Yes, it is possible but it disregards the fundamental principles of separating content and presentation and that doesn't go down too well in some circles. In the same vein, I've just tried...

<table style="width: 100%; height: 96%">
           <tr>
               <td align="center" valign="middle">
                   <div id="box">
                       &nbsp;
                       <p>
                       this is centred</p>
                   </div>
               </td>
           </tr>
</table>

to horizontally and vertically centre a div on the screen. It works beautifully and validates too - but it is not the 'best' way to do it.

Baxter Baxter
Posts: 157

No, it doesn't invalidate diddly-squat. It's perfect separation of content and presentation.
Forgive me if this doesn't validate, and I'm not taking advantage of all the things I could be doing, but this is all I'm saying:


in the head:
<style type="text/css">
#thething {background: url(whatever.jpg) no-repeat right bottom}
#thething #left {background: url(anotherwhatever.jpg) repeat-x}
</style>

And then in the body

<table id="thething">
<tr>
<td id="left">&nbsp;</td>
<td id="right">&nbsp;</td>
</tr>
</table>

That's all I'm saying. There's absolutely no reason why css shouldn't be used to control the presentation of table elements, just as you would use it to control the presentation of anything else. It's a sure sight better than littering the code with <td background= junk.

And you're example isn't even remotely in the same vein. I'm talking about using css precisely for what it's designed for. Control of visual elements, keeping them out of the code.

This IS the best way to do it, and so far it's the only way anyone's shown that both worrks, validates, and follows both the letter and principle of good css and (x)html.

Kaostream Kaostream
Posts: 7

Hi Admin and Baxter,

While you both are arguing the finner points of execution, I feel silly to ask the following:

I tried enveloping the whole table with a <div id="ss_bkgnd"> and also <table id="ss_bkgnd">.
Both methods work locally on my HD. Calling the page from the server, does not display the background texture that I am hoping to include.

What am I not doing right?

http://vanward.bccc.com/~jlai48/workmatters/

Thanks,
johnL

Joe Gillespie Joe Gillespie
Posts: 528

I think it's the @import and CSS linking that are conflicting but I can't test it from here. You have an @import and a link to the same CSS file - folio_core2.css.

Kaostream Kaostream
Posts: 7

Hi Admin,

I checked the site via another sever, specifically through our public library system. The background showed up even with the @import.

It is not necessary, so I have removed it.

However checking the site
http://vanward.bccc.com/~jlai48/workmatters/
on Netscape 7, the bachground defaults to white. Do I need a hack for NN7?

Baxter Baxter
Posts: 157

this is your body in stnd.css:
     body {
           margin:25px 0px 0px 0px;
           background-repeat: repeat-x;
           }

So you've declared a background attribute on a background that doesn't exist, and you have declared no background color at all. So yeah, it's going to default to whatever it wants.

Couldn't find folio_core2.css on the server.

Kaostream Kaostream
Posts: 7

Note to Baxter:
The folio_core2.css is in the root directory.

Open to all who can shed some light on this:

http://vanward.bccc.com/~jlai48/workmatters/

IE displays every design choice correctly but not NN7.
What can I do different to get NN7 to display correctly?

When I tried to arrive at a compromise by specifying the background color in the table holding textured background (slidebkgnd2.gif), both IE and NN shows the color I specified but I loose the background image in the table in IE.

The more I learn, the more I don't know!

Baxter Baxter
Posts: 157

First, give your title an ID.  Lets say you call it "stuff"

Now your table tag looks like this:
<table width="750" border="0" align="center" cellpadding="0" cellspacing="0" id="stuff">

Better yet, it looks like this:
<table align="center" cellspacing="0" id="stuff">

I left align and cellspacing because they're relatively complicated in css (OK, not really, but beyond the scope of what we're doing here.  Email me if you want details on replacing those).

Now, in your stylesheet:
#stuff {
width:750px;
border:0;
padding:0;
/*and most important */
background: #fffff /*or whatever*/ url (path/to/whatever.jpg);
}

Kaostream Kaostream
Posts: 7

Hi All,

I just want to add some new data on the browser problem I have.
Nothing has been changed in CSS, I find that in NN4.6 (the library's) everthing works as planned.

Do I need a browser hack for NN7?

Thanks.

You must login to reply