Problems with Borders using CSS

Hello,

I am validating my webpages for HTML 4.01 Transitional. I have the
problem that I cannot remove a border on a small graphic on my page. I
have researched various websites for the correct CSS code but none
seems to work.

The HTML code:

<img class="YelArLL" alt="">

The CSS code:

..YelArLL {
BACKGROUND-IMAGE: url('Images/YellowArrowLowerLeftHeader.png');
BORDER-COLLAPSE: collapse;
height: 14px;
width: 16px;
margin: 0px;
padding 0px;
color: #000000;
border-style: none;
}


Take a look at the webpage to see what it looks like. (http://
www.skydiving.co.uk/tandem2.htm)
Its the small yellow arrow on the left side with a border. Notice the
other arrows are fine when done without CSS. Any ideas?

Cheers, Simon

The BACKGROUND-IMAGE property sets the image as a background and is normally
used with the BODY tag. and BORDER-COLLAPSE: collapse; is for tables. For
the IMG tag you need the actual image path. Ex:

<img src="YellowArrowLowerLeftHeader.png" class="YelArLL" alt="">

Why do you want to use CSS just to get rid of the border when border=0 works
just fine? If you wanted to change the opacity or add some other effect to
the image then you would use CSS.


--
David Berry
FrontPage Support: http://www.frontpagemvps.com/



<simonbrentford@googlemail.com> wrote in message
news:1175078958.922169.325080@n59g2000hsh.googlegroups.com...
> Hello,
>
> I am validating my webpages for HTML 4.01 Transitional. I have the
> problem that I cannot remove a border on a small graphic on my page. I
> have researched various websites for the correct CSS code but none
> seems to work.
>
> The HTML code:
>
> <img class="YelArLL" alt="">
>
> The CSS code:
>
> .YelArLL {
> BACKGROUND-IMAGE: url('Images/YellowArrowLowerLeftHeader.png');
> BORDER-COLLAPSE: collapse;
> height: 14px;
> width: 16px;
> margin: 0px;
> padding 0px;
> color: #000000;
> border-style: none;
> }
>
>
> Take a look at the webpage to see what it looks like. (http://
> www.skydiving.co.uk/tandem2.htm)
> Its the small yellow arrow on the left side with a border. Notice the
> other arrows are fine when done without CSS. Any ideas?
>
> Cheers, Simon
>

<simonbrentford@googlemail.com> wrote in message
news:1175078958.922169.325080@n59g2000hsh.googlegroups.com...
> Hello,
>
> I am validating my webpages for HTML 4.01 Transitional. I have the
> problem that I cannot remove a border on a small graphic on my page. I
> have researched various websites for the correct CSS code but none
> seems to work.
> The CSS code:
>
> .YelArLL {
> BACKGROUND-IMAGE: url('Images/YellowArrowLowerLeftHeader.png');
> BORDER-COLLAPSE: collapse;

I would replace the above line in your css -> border:none;

> Take a look at the webpage to see what it looks like. (http://
> www.skydiving.co.uk/tandem2.htm)
> Its the small yellow arrow on the left side with a border. Notice the
> other arrows are fine when done without CSS. Any ideas?
>
> Cheers, Simon
>
HTH
Vince Morgan

<simonbrentford@googlemail.com> wrote in message
news:1175078958.922169.325080@n59g2000hsh.googlegroups.com...

> > .YelArLL {
> > BACKGROUND-IMAGE: url('Images/YellowArrowLowerLeftHeader.png');
> > BORDER-COLLAPSE: collapse;
>
> I would replace the above line in your css -> border:none;
>
Looking more closely at the image on the site, it could actualy be the
anchor border that is visible.
If that's the case then you will need to do the same for the anchor too.
Give it a class with the same border attribute.

> > Take a look at the webpage to see what it looks like. (http://
> > www.skydiving.co.uk/tandem2.htm)
> > Its the small yellow arrow on the left side with a border. Notice the
> > other arrows are fine when done without CSS. Any ideas?

Unfortunately that did not work. Hmm?

Scripsit simonbrentford@googlemail.com:

> I am validating my webpages for HTML 4.01 Transitional.

That's a start, but you should also use correct CSS (and to aim at HTML 4.01
Strict if feasible). And you should actually produce valid markup, not just
"validate".

> I have the
> problem that I cannot remove a border on a small graphic on my page.

Well, on Firefox, there is no border - but no graphic either.

> I have researched various websites for the correct CSS code but none
> seems to work.

You haven't used the W3C CSS Validator. It would report the syntax errors,
which should be fixed before more complicated troubleshooting.
Alternatively, use Firefox and view the console log (error log) via the
Tools menu.

> BORDER-COLLAPSE: collapse;

That's formally correct but has no effect, since it only affects tables.

> padding 0px;

That's malformed (no colon).

> Take a look at the webpage to see what it looks like. (http://
> www.skydiving.co.uk/tandem2.htm)

It looks messy. So? The markup is messy, too, and so is the CSS code. Even
with tools like CSS checkers, you will have difficulties in maintaining the
page, due to its unnecessary complexity.

For example, if you want to use yellow arrows as item markers, why don't you
just use list markup and set list-style-image?

Followups trimmed to c.i.w.a.s.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

> just use list markup and set list-style-image?

Unfortunately, that style is unpredictable. The better method is to add
left padding to the <li> element, and use a non-tiling background image.

--
Murray
--------------
MVP FrontPage


"Jukka K. Korpela" <jkorpela@cs.tut.fi> wrote in message
news:4HtOh.25945$ck3.4075@reader1.news.saunalahti.fi...
> Scripsit simonbrentford@googlemail.com:
>
>> I am validating my webpages for HTML 4.01 Transitional.
>
> That's a start, but you should also use correct CSS (and to aim at HTML
> 4.01 Strict if feasible). And you should actually produce valid markup,
> not just "validate".
>
>> I have the
>> problem that I cannot remove a border on a small graphic on my page.
>
> Well, on Firefox, there is no border - but no graphic either.
>
>> I have researched various websites for the correct CSS code but none
>> seems to work.
>
> You haven't used the W3C CSS Validator. It would report the syntax errors,
> which should be fixed before more complicated troubleshooting.
> Alternatively, use Firefox and view the console log (error log) via the
> Tools menu.
>
>> BORDER-COLLAPSE: collapse;
>
> That's formally correct but has no effect, since it only affects tables.
>
>> padding 0px;
>
> That's malformed (no colon).
>
>> Take a look at the webpage to see what it looks like. (http://
>> www.skydiving.co.uk/tandem2.htm)
>
> It looks messy. So? The markup is messy, too, and so is the CSS code. Even
> with tools like CSS checkers, you will have difficulties in maintaining
> the page, due to its unnecessary complexity.
>
> For example, if you want to use yellow arrows as item markers, why don't
> you just use list markup and set list-style-image?
>
> Followups trimmed to c.i.w.a.s.
>
> --
> Jukka K. Korpela ("Yucca")
> http://www.cs.tut.fi/~jkorpela/

<simonbrentford@googlemail.com> wrote in message
news:1175078958.922169.325080@n59g2000hsh.googlegroups.com...
> Hello,
>
> I am validating my webpages for HTML 4.01 Transitional. I have the
> problem that I cannot remove a border on a small graphic on my page. I
> have researched various websites for the correct CSS code but none
> seems to work.

As Jukka previously mentioned your markup and your css need a good clean up.

Something very curious.
"<img class="YelArLL" alt=""><br>"
The class in question is being applied to the above tag, but I don't see any
image there.
The image tag below that has no class, but it's the one with the yellow
arrow image.

HTH
Vince Morgan

Inside the CSS file you will find the image. I did another experiment
and created an almost blank page with just 2 examples with CSS and
without. The problem still exists.

This is the HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Language" content="en-gb">
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1252">
<title>New Page 1</title>
<link href="styleTS.css" rel="stylesheet" type="text/css">

</head>

<body>
<img class="YelArLL" alt=""><br>Cannot remove border - using CSS<p>
<img border="0" src="Images/YellowArrowLowerLeftHeader.png" width="16"
height="14"><br>
Border - without CSS but not W3C compliant</p>
</body>

</html>

This is the CSS:

..YelArLL {
BACKGROUND-IMAGE: url('Images/YellowArrowLowerLeftHeader.png');
height: 14px;
width: 16px;
border: none;
margin: 0;
padding: 0;
}

Its still not working....
Simon

BACKGROUND-IMAGE is for the BODY Tag. You can't use it for the IMG tag.
See my other reply to you.

--
David Berry
FrontPage Support: http://www.frontpagemvps.com/



<simonbrentford@googlemail.com> wrote in message
news:1175089009.784276.172070@l77g2000hsb.googlegroups.com...
> Inside the CSS file you will find the image. I did another experiment
> and created an almost blank page with just 2 examples with CSS and
> without. The problem still exists.
>
> This is the HTML:
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
> "http://www.w3.org/TR/html4/loose.dtd">
> <html>
> <head>
> <meta http-equiv="Content-Language" content="en-gb">
> <meta name="GENERATOR" content="Microsoft FrontPage 6.0">
> <meta name="ProgId" content="FrontPage.Editor.Document">
> <meta http-equiv="Content-Type" content="text/html;
> charset=windows-1252">
> <title>New Page 1</title>
> <link href="styleTS.css" rel="stylesheet" type="text/css">
>
> </head>
>
> <body>
> <img class="YelArLL" alt=""><br>Cannot remove border - using CSS<p>
> <img border="0" src="Images/YellowArrowLowerLeftHeader.png" width="16"
> height="14"><br>
> Border - without CSS but not W3C compliant</p>
> </body>
>
> </html>
>
> This is the CSS:
>
> .YelArLL {
> BACKGROUND-IMAGE: url('Images/YellowArrowLowerLeftHeader.png');
> height: 14px;
> width: 16px;
> border: none;
> margin: 0;
> padding: 0;
> }
>
> Its still not working....
> Simon
>