Gradient not showing

[Fred the Ted]

Could Ron or any other kind person please take a look at
http://www.all-inclusive-hotels.co.uk/all-inclusive-holidays/crete.htm for me
and tell me what I've done wrong. The image is on the server
(images/gradient-3.jpg) so it must be something I've done wrong with the
coding yet I'm sure I copied it exactly as instructed on this list last month.

 

[Ronx]

The path to the gradient image is not correct - it will work if the page
is placed in the web's root folder.

<style type="text/css">
..grad {background: white url(/images/gradient-3.jpg) repeat-x top;}
</style>

should work.

Notice the "/" before images in the path - this makes the path root
relative, and will work wherever the page is located - though it will
not work on your PC.

Alternatively, for *this* page, use
<style type="text/css">
..grad {background: white url(../images/gradient-3.jpg) repeat-x top;}
</style>

which will also work on your PC, but you will have to correct the path
when you move the page to its proper place in the web.

 

[Fred the Ted]

Hi Ron,
I tried both but neither make any difference. The original code of
<style type="text/css">
...grad {background: white url('images/gradient-1.jpg') repeat-x top;}
</style>
works well on http://www.book-holidays-direct.com/ and I can't see what else
I've done wrong. I would appreciate it if you could find time to look again.
Kind regards.

 

[Ronx]

..grad {background: white url('images/gradient-1.jpg') repeat-x top;}
</style>
works well on http://www.book-holidays-direct.com/

Actually, it doesn't. In Firefox the gradient image is missing, and the
white text does not show very well on the white background.
In addition you need to specify a colour for the remaining text - this
appears as orange in my installation of FireFox.

Change ..grad to .grad and the image will appear.

The same change (..grad to .grad ) in
http://www.all-inclusive-hotels.co.uk/all-inclusive-holidays/crete.htm
will fix that image as well.
This page also needs the text colour defined.

I have FireFox set up to show a default grey background and orange text.
These colours appear only when the background and text colours are not
defined in the page.

See http://www.rxs-enterprises.org/tests/pages/crete.htm
Note that the images have been over-optimised to reduce file size, but
the second image shows the correct CSS to use, the gradient in place,
and the orange text.
--
Ron Symonds - Microsoft MVP (FrontPage)
Reply only to group - emails will be deleted unread.

http://www.rxs-enterprises.org/fp

 

[Fred the Ted]

Many thanks for your help Ir's much appreciated. I've made the changes (I
think) and my son has Firefox so I've taken a look at his screen and the
gradient looks ok. One thing that worried me was the round cornered boxes
were all over the shop. Is this a problem on your computer? If it is, do you
know of a way I could fix the priblem.

 

[Ronx]

Add this to the CSS

#AutoNumber10 p {margin: 0;}

This removes the top and bottom margins from the paragraph tags in the
table containing the rounded boxes.

So the CSS becomes:
<style type="text/css">
..grad {background: white url('/images/gradient-3.jpg') repeat-x top;}
#AutoNumber10 p {margin:0;}
</style>

Note there is only ONE dot before grad - I have noticed that an extra is
being added when I see my reply in your posts.
--
Ron Symonds - Microsoft MVP (FrontPage)
Reply only to group - emails will be deleted unread.

http://www.rxs-enterprises.org/fp

 

[Fred the Ted]

Hi Ron,

Before I forget the page URL has changed to
http://www.all-inclusive-hotels.co.uk/holidays/crete.htm

Thanks for your help and it looks ok on IE but when viewed in Firefox there
is a blue space between the banner and the start of the grad but not on IE.
I've tried pushng the tables to the top but it made no difference. Also the
first line of text also sits to the left on IE but is indented when viewed on
Firefox. Is there a way to fix these two small problems. Many thanks for your
help to date it's much appreciated.