473,414 Members | 1,684 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,414 software developers and data experts.

Background URL property in different browsers.

Gaz
Hi,

I have found an issue when comparing Firefox with IE6 (Windows) where
a page links to a css file that is in it's own directory. IE6 URL
property of the background css element uses the location of the css
file as the root when looking for the background image. Firefox uses
the location of the page that links the css as the root for the
background image.

This css will work for Firefox :
body
{
background:white url('Images/background test.gif') bottom right
no-repeat fixed; /*firefox works*/
}

And this css works for IE.

body
{
background:white url('../Images/background test.gif') bottom right
no-repeat fixed; /*IE6 works*/
}

Is this just one of those things? It would be nice to know which
browser is doing it right though.
thanks for any help..

ps : Here's the page :

<html>
<head>
<title> New Document </title>
<link href="css\test.css" type="text/css" rel="stylesheet">
</head>

<body>

This is a test to see if different browsers mess up the background url
in the css when the css and the backgroun image are in different
folders than the css file

</body>

</html>
Jul 20 '05 #1
5 16288
Gaz wrote:
I have found an issue when comparing Firefox with IE6 (Windows) where
a page links to a css file that is in it's own directory.
"Its", not "it's".

http://homepages.paradise.net.nz/mat...nglish_02.html

Er... sorry - I got distracted.

Yes, you're right, this is an issue. The CSS1 spec says: "Partial URLs
are interpreted relative to the source of the style sheet, not relative
to the document"

(http://www.w3.org/TR/REC-CSS1#url)

As you may have guessed, IE gets it wrong and Firefox gets it right.
<link href="css\test.css" type="text/css" rel="stylesheet">


Don't use backslashes in directory paths in HTML or CSS.

--
Mark.
http://tranchant.plus.com/
Jul 20 '05 #2
oo******@yahoo.co.uk (Gaz) wrote in message news:<76**************************@posting.google. com>...
This css will work for Firefox :
body
{
background:white url('Images/background test.gif') bottom right
no-repeat fixed; /*firefox works*/
}

And this css works for IE.

body
{
background:white url('../Images/background test.gif') bottom right
no-repeat fixed; /*IE6 works*/
}

Is this just one of those things? It would be nice to know which
browser is doing it right though.


I don't know if there's a way around it, but it looks like IE is the
one doing it right:

For CSS style sheets, the base URI is that of the style sheet, not
that of the source document.

Source: http://www.w3.org/TR/REC-CSS2/syndata.html#x48
Jul 20 '05 #3
Gaz
Thanks, there are two workarounds I can think of.

1) Put css files in the same directory as the source. Not good if you
want to centralize your css files.

2) Put background/list style/etc.. images in the css directory, which
feels semi-natural I suppose since they are directly linked to style.

Of course this is only the tip of the iceberg when it comes to cross
-browser differences in rendering css. Isn't it feasible to centralize
a browsing rendering engine and for all browsers to use it? Like Open
GL or other cross-system APIs. Rendering is only one element of a
browser so the bigger browsers would lose none of their other features
if they did this. This would solve all this stupidity with different
companies doing different things with something that should be the
same!!!

Let's start a petition. Perhaps in 2016 it might all be sorted out.
I don't know if there's a way around it, but it looks like IE is the
one doing it right:

For CSS style sheets, the base URI is that of the style sheet, not
that of the source document.

Jul 20 '05 #4
Gaz
Meant this :

2) Put background/list style/etc.. images in the css *and* the source directory...
Not this :
2) Put background/list style/etc.. images in the css directory, which

feels semi-natural I suppose since they are directly linked to style.
Jul 20 '05 #5
Mark Tranchant wrote:
As you may have guessed, IE gets it wrong and Firefox gets it right.


Oops - this was just my natural assumption. It's the other way around.

The workaround is to use absolute references from the root of the web space:

background-image: url(/images/bg.jpg);

--
Mark.
Jul 20 '05 #6

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
by: Billy | last post by:
Hello, I'm having a problem dynamically changing the color of a table background. I'm not sure exactly how to word this, but I'll give an example. I have a function called greentored(propname)...
7
by: miked | last post by:
Hi, On a webpage I'm authoring I'm having a problem with setting the text background colour. I'm using this: P {color ="FFFFFF"; background-color:"000000"; font-size:10pt; font-family:...
25
by: Neal | last post by:
According to the CSS lint at http://htmlhelp.org/tools/csscheck/, "The shorthand background property is more widely supported than background-color." Can anyone point me to, or provide, information...
11
by: Konrad Den Ende | last post by:
I have a function returning a string but the problem is that the color of it is blue which suits me well for some pages but not for others. Is it possible to "feel" what the color of the background...
5
by: proximus | last post by:
Hi, I am trying to change the background of table TD's. The problem is that I have no access to the HTML code. SO I am trying to alter this using Javascript/DOM in an external .js file. I...
13
by: Giggle Girl | last post by:
Hi there, I need to use a background image in a TR that does NOT restart everytime it hits a TD. Can it be done? Specifically, if you set a background image for an entier table, now mater how...
4
by: bissatch | last post by:
Hi, I have launched my new website and having viewing it on the Mac Internet Explorer, have found that it isnt displaying my background-image property. Is this a common bug / occurance? How are...
2
by: Mark | last post by:
IE creates an object of every ID'd HTML tag (so it appears), and each object sets a property for any parameter I set in the tag. For example, my HTML might be: <td id='cell1'...
19
by: david.karr | last post by:
If in my CSS I set the "background-color" property on the "body" element, it only covers the background of the elements defined in the body, up to the current width and height of the page. However,...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.