/    Sign up×
Community /Pin to ProfileBookmark

Difficulty getting desired behaviour from older browsers!

Copy linkTweet thisAlerts:
Apr 08.2004

Hi Everyone,

Sorry about the subject heading being undescriptive. I am trying to get a box effect on screen (e.g.: using a background image for the entire page and then using an image inside the pages table). This isn’t the easiest thing to describe, basically I have a background image for the entire page and inside that image I wan’t to put another image for the background of the tables that I am using for page layout. Effectively it is like having two pieces of coloured paper, the first piece is the full page and the second is a slightly smaller piece, giving the effect of only showing about one centimeter of the first piece. I hope that this isn’t impossible to understand, why is it so difficult to describe something so simple!

I have used cascading style sheets to achieve this by doing the following.

<style type=”text/css”>
.box
{
margin-bottom: 5px;
margin-left: 5px;
margin-right: 5px;
margin-top: 5px;
}
</style>

Then applying this to my “master” (top level) table as follows:

<body background=”../pictures/backgrounds/background_three.jpg”>
<table background=”../pictures/backgrounds/background_two.jpg” class=”box” width=”98%”>

This approach works in the new browsers (which have good css support) however when I try viewing this code in Netscape 4.7 or earlier I get some really ugly (disjointed) results.

Is there any way of achieving what I am trying to achieve using JavaScript or something similar (something that will work better in the older browsers?)?

Thanks for your time.

Regards

David

to post a comment
HTML

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@DaveSWApr 08.2004 — You might be better using @import to hide your css and then ignoring Netscape 4 - or at least hiding those styles that it cannot understand...
Copy linkTweet thisAlerts:
@shimonApr 11.2004 — yeah, don't feel bad if netscape 4* makes a mess of your page - it predates the concept of web standards by at least a couple of years. It's not really a web browser any longer, more like a virus which needs to be eliminated from the world's computers. So don't waste your time with it - test with a standards-compliant browser like [URL=http://www.opera.com/]Opera[/URL] and also a text browser like Lynx...problem solved ?
Copy linkTweet thisAlerts:
@crh3675Apr 11.2004 — If you really want NS4 to work with the code, enclose your table in a DIV and set the paddding:

<i>
</i>&lt;body background="../pictures/backgrounds/background_three.jpg"&gt;
&lt;div style="padding:5px;"&gt;
&lt;table background="../pictures/backgrounds/background_two.jpg" width="98%"&gt;
&lt;/table&gt;
&lt;/div&gt;
Copy linkTweet thisAlerts:
@Ben_RogersApr 11.2004 — Just a quick q: Why use tables at all if you know CSS?
Copy linkTweet thisAlerts:
@spufiApr 12.2004 — [i]Originally posted by omega [/i]

[B]Just a quick q: Why use tables at all if you know CSS? [/B][/QUOTE]

If you HAVE to code a site for NS4 and other browsers who handle CSS so poorly that you can pretty much only have to use tables, then you could. Not saying it's the best because it isn't, but sometimes you have to do the dirty deed. Granted the need to code for NS4 and other early browsers is becoming nil. I would only do it if somebody told me I had to do it.
Copy linkTweet thisAlerts:
@Ben_RogersApr 12.2004 — I can see your point, but here's how I handle backwards compatibility: I turn off styles. Is it still sensical, maybe even more so? Yes? Then I'm done with backwards compatibility. Otherwise I just check for Internet Explorer and Firefox.
×

Success!

Help @3D_Dog_Man spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.5,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...