0

Can anyone give me a pointer on a site I've inherited. I'm more of an SEO guy than raw code and I'm not making any headway on this.

Have a look at http://www.edwardjackson.co.uk and you'll see whitespace around the last item in the left hand navigation list "Home Condition reports".

Can anyone give me a steer as to what's causing this & what to do about it?

What I think is the relevant part of css is:

.nav li ul li a {
    display: block;
    list-style-type: none;
    height: 18px;
    text-transform: uppercase;
    color: #504c40;
    margin-left: -80px;
    padding-left: 10px;
    text-decoration: none;
    background-image: none;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-bottom: 10px;
    font-size: 11px;
}
.nav li ul li a:hover {
    display: block;
    list-style-type: none;
    height: 18px;
    text-transform: uppercase;
    color: #504c40;
    margin-left: -80px;
    padding-left: 10px;
    background-image: none;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-bottom: 10px;
    text-decoration: underline;

Many Thanks - Dunc.

4

4 回答 4

1

您正在height为锚元素定义一个固定值。
尝试使用：

.nav li ul li a { height:auto; }
于 2013-08-27T13:49:11.133 回答
1

您所看到的实际上是正确数量的空白。问题是另一个 a 元素有两行文本，因此内容“溢出”。

原因是.nav li ul li a元素上面有 18px 的高度，仅比单行文本略大。如果将该样式更改为height: auto;，则整个列表将保持一致。（注意：该样式位于 style.css 样式表的第 699 行）。

于 2013-08-27T13:49:54.247 回答
0

在您的类 nav li ul li a 中，您使用 18px 的 height 属性；如果你改变它，它看起来应该是这样。

这应该是代码的样子：

.nav li ul li a {
    display: block;
    list-style-type: none;
    height: auto;
    text-transform: uppercase;
    color: #504c40;
    margin-left: -80px;
    padding-left: 10px;
    text-decoration: none;
    background-image: none;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-bottom: 10px;
    font-size: 11px;
}
.nav li ul li a:hover {
    display: block;
    list-style-type: none;
    height: 18px;
    text-transform: uppercase;
    color: #504c40;
    margin-left: -80px;
    padding-left: 10px;
    background-image: none;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-bottom: 10px;
    text-decoration: underline;

旁注：您可以从 .nav li ul li a:hover 中删除很多属性，这样您的 css 看起来就更干净了。这是因为 hover 的所有属性都将继承自 .nav li ul li a

您所要做的就是更改不同的属性因此您的代码可能如下所示：

.nav li ul li a {
    display: block;
    list-style-type: none;
    height: 18px;
    text-transform: uppercase;
    color: #504c40;
    margin-left: -80px;
    padding-left: 10px;
    text-decoration: none;
    background-image: none;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-bottom: 10px;
    font-size: 11px;
}
.nav li ul li a:hover {
    text-decoration: underline;
}

当然，这不是必须的，但可以使您的 css 代码更清晰，加载速度更快。

于 2013-08-27T14:21:00.987 回答
0

您需要从两个类中删除“高度”属性：

  1. .nav li ul li a
  2. .nav li a
于 2013-08-27T13:52:25.303 回答