使用CSS的边框问题 [英] Problems with Borders using CSS

查看:72
本文介绍了使用CSS的边框问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

您好,


我正在验证HTML 4.01 Transitional的网页。我有

问题,我无法删除页面上小图形上的边框。我b $ b已经研究了各种网站的正确CSS代码,但没有

似乎有效。


HTML代码:


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


CSS代码:


..YelArLL {

BACKGROUND- IMAGE:url(''Images / YellowArrowLowerLeftHeader.png'');

BORDER-COLLAPSE:collapse;

身高:14px;

宽度:16px;

保证金:0px;

填充0px;

颜色:#000000;

border-style :无;

}

查看网页,了解它的外观。 (http://
www.skydiving.co.uk/tandem2 .htm

左侧带有边框的小黄色箭头。注意

其他箭头在没有CSS的情况下完成。任何想法?


干杯,西蒙

解决方案



< si ************ @ googlemail.com写信息

新闻:11 ***************** *****@n59g2000hsh.googlegr oups.com ...


您好,


我正在验证我的网页对于HTML 4.01 Transitional。我有

问题,我无法删除页面上小图形上的边框。我已经研究了各种网站以获得正确的CSS代码但是没有

似乎有用。

CSS代码:


.YelArLL {

BACKGROUND-IMAGE:url(''Images / YellowArrowLowerLeftHeader.png'');

BORDER-COLLAPSE:collapse;



我会替换你的css -border中的上述行:none;


看看网页,看看它是什么样子。 (http://
www.skydiving.co.uk/tandem2 .htm

左侧带有边框的小黄色箭头。注意

其他箭头在没有CSS的情况下完成。任何想法?


干杯,西蒙



HTH

Vince Morgan




< si ************ @ googlemail.comwrote in message

news:11 **********************@n59g2000hsh.googlegr oups.com ...


.YelArLL {

BACKGROUND-IMAGE:url(''Images / YellowArrowLowerLeftHeader.png'');

BORDER-COLLAPSE:崩溃;



我会替换你的css -border中的上述行:none;



仔细观察在网站上的图像,它可能实际上是可见的

锚边界。

如果是这种情况那么你需要做同样的事情也是锚。

给它一个具有相同border属性的类。


看看网页,看看它是什么样子。 (http://
www.skydiving.co.uk/tandem2 .htm

左侧带有边框的小黄色箭头。注意

其他箭头在没有CSS的情况下完成。有任何想法吗?



Scripsit si ************ @ googlemail.com


我正在验证HTML 4.01的网页过渡。



这是一个开始,但你也应该使用正确的CSS(并且针对HTML 4.01

严格,如果可行的话)。你应该实际产生有效的标记,而不仅仅是

" validate"。


我有

我无法删除页面上小图形边框的问题。



嗯,在Firefox上,没有边框 - 但也没有图形。


我研究过各种网站的正确CSS代码,但没有

似乎工作。



您还没有使用过W3C CSS Validator。它会报告语法错误,

应该在更复杂的故障排除之前修复。

或者,使用Firefox并通过

工具菜单。


BORDER-COLLAPSE:collapse;



这是正式的,但没有效果,因为它只影响表格。


padding 0像素;



这是错误的(没有冒号)。


看看网页看看它看起来像什么。 (http://
www.skydiving.co.uk/tandem2 .htm



看起来很乱。所以?标记也很混乱,CSS代码也是如此。即使使用像CSS跳棋这样的工具,你也会因为不必要的复杂性而难以维护

页面。


例如,如果你想使用黄色箭头作为项目标记,为什么不是你b $ b只使用列表标记并设置list-style-image?


后续修剪为ciwas


-

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


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

解决方案


<si************@googlemail.comwrote in message
news:11**********************@n59g2000hsh.googlegr oups.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



<si************@googlemail.comwrote in message
news:11**********************@n59g2000hsh.googlegr oups.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?



Scripsit si************@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/


这篇关于使用CSS的边框问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆