decoration: none; is not doing anything
I am attempting to have a link show up in white, without an underline. The text color shows up correctly as white, but the blue underline is stubbornly persisting. I tried text-decoration: none; and text-decoration: none !important; in the CSS to remove the link underline. Neither worked.
All the code:
<?php session_start(); ?>
<!DOCTYPE html>
<html>
<head>
<title>Forum</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<script type="text/javascript" src="js/bootstrap.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
</head>
<body class="body">
<div class="container">
<div class="row-fluid">
<div class="span4 box">
<div class="border5">Categories</div>
<div class="border_box category_cat">NETWORK ANNOUNCEMENTS</div>
<a href="http://localhost/forum/view_category.php?cid=3">
<li class="border3">↳ <span class="glyphicon glyphicon-folder-close"></span> Hide And Seek<span class="label label-info left">0</span></li></a>
<div class="border_box category_cat">GENERAL</div>
<div href="" class="border text">↳ <span class="glyphicon glyphicon-folder-close"></span> Questions<span class="label label-info left">0</span></div>
<div href="" class="border3 text">↳ <span class="glyphicon glyphicon-folder-close"></span> Bugs<span class="label label-info left">0</span></div>
<div class="border_box category_cat">HIDE AND SEEK</div>
<div href="" class="border3 text">↳ <span class="glyphicon glyphicon-folder-close"></span> General Discussions<span class="label label-info left">0</span></div>
<div href="" class="border1 text">↳ <span class="glyphicon glyphicon-folder-close"></span> Suggestions And Feedback<span class="label label-info left">0</span></div>
<div href="" class="border1 text">↳ <span class="glyphicon glyphicon-folder-close"></span> Bugs<span class="label label-info left">0</span></div>
<div class="border_box category_cat">OFF TOPIC</div>
<div href="" class="border3 text">↳ <span class="glyphicon glyphicon-folder-close"></span> Minecraft<span class="label label-info left">0</span></div>
<div href="" class="border1 text">↳ <span class="glyphicon glyphicon-folder-close"></span> Non-Gaming<span class="label label-info left">0</span></div>
<div href="" class="border1 text">↳ <span class="glyphicon glyphicon-folder-close"></span> Gaming<span class="label label-info left">0</span></div>
<div class="border_box category_cat">REPORTS AND APPEALS</div>
<div href="" class="border3 text">↳ <span class="glyphicon glyphicon-folder-close"></span> Player Reports<span class="label label-info left">0</span></div>
<div href="" class="border6 text">↳ <span class="glyphicon glyphicon-folder-close"></span> Appeals<span class="label label-info left">0</span></div>
</div>
<div class="span8">
<h3>My First Forum!</h3>
<hr />
<?php
if (!isset($_SESSION['uid'])) {
echo "<form action='login_parse.php' method='post'>
Username: <input type='text' name='username' />
Password: <input type='password' name='password' />
<input type='submit' name='submit' value='Log In' />
";
} else {
echo "<p>You are logged in as ".$_SESSION['username']." • <a href='logout_parse.php'>Logout</a>";
}
?>
<hr />
<div id="content">
<?php
include_once("connect.php");
$sql = "SELECT * FROM topics ORDER BY topic_date ASC";
$res = mysql_query($sql) or die(mysql_error());
$topics='';
if (mysql_num_rows($res) > 0) {
while ($row = mysql_fetch_assoc($res)) {
$id = $row['id'];
$title = $row['topic_title'];
$cid = $row['category_id'];
$topics .= "<a href='view_topic.php?cid=".$cid."&tid=".$id."' class='cat_links'>".$title."<font size='-1'></font></a>";
}
echo $topics;
} else {
echo "<p>There are no topics available yet.</p>";
}
?>
</div>
</div>
</body>
</html>
</div>
</div>
All the css code:
.cat_links {
display: block;
padding: 5px;
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid #000000;
margin-bottom: 5px;
background-color: #cccccc;
color: #000000;
}
.cat_links:hover {
background-color: #dddddd;
}
.border {
border-top: 1px solid #DDD;
float: none;
font-weight: 700;
padding: 6px 15px;
text-align: left;
width: 300px;
height: 33px;
background-color: #FFF;
color: #0088cc;
text-decoration: none;
}
.text {
color: #0088cc;
text-decoration: none;
}
.border1 {
border-bottom: 1px solid #DDD;
display: block;
float: none;
font-weight: 700;
padding: 6px 15px;
text-align: left;
width: 300px;
height: 33px;
color: #0088cc;
background-color: #FFF;
text-decoration: none;
}
.border2 {
display: block;
float: none;
font-weight: 700;
padding: 6px 15px;
text-align: left;
width: 300px;
height: 33px;
color: #0088cc;
text-decoration: none;
background-color: #FFF;
}
.category_cat {
margin: 10px 0;
font-family: inherit;
font-weight: bold;
line-height: 20px;
color: inherit;
text-rendering: optimizelegibility;
font-size: 17.5px;
color: #888;
margin-top: 0px;
margin-bottom: 0px;
background-color: #FFF;
}
.border3 {
display: block;
float: none;
font-weight: 700;
padding: 6px 15px;
text-align: left;
border-bottom: 1px solid #DDD;
border-top: 1px solid #DDD;
background-color: #FFF;
text-decoration: none;
}
.left {
float: right;
}
.label-info:hover {
background-color: #2d6987;
}
.label:hover {
color: #ffffff;
text-decoration: none;
}
.box_cat {
width: 300px;
height: 33px;
}
.border3:hover {
background-color: #F6F6F6;
text-decoration: none;
}
.border:hover {
background-color: #F6F6F6;
}
.border1:hover {
background-color: #F6F6F6;
}
.border2:hover {
background-color: #F6F6F6;
}
.border6:hover {
background-color: #F6F6F6;
}
.border_box {
display: block;
float: none;
font-weight: 700;
padding: 6px 15px;
text-align: left;
width: 300px;
height: 33px;
text-decoration: none;
color: #888;
background-color: #FFF;
}
.border5 {
border-bottom: 1px solid #DDD;
display: block;
float: none;
font-weight: 700;
padding: 6px 15px;
text-align: left;
width: 300px;
height: 33px;
color: #0088cc;
text-decoration: none;
color: #333;
background-color: whiteSmoke;
border-radius: 4px 4px 0 0;
}
.body {
background-color: #C12727;
}
.box {
background-color: #F9F9F9;
border-radius: 4px;
box-shadow: 0 0 0 transparent;
margin-bottom: 9px;
}
.border6 {
border-radius: 0 0 4px 4px;
border-bottom: 1px solid #DDD;
display: block;
float: none;
font-weight: 700;
padding: 6px 15px;
text-align: left;
width: 300px;
height: 33px;
color: #0088cc;
background-color: #FFF;
text-decoration: none;
}
.span4 {
margin-top: 10px;
}
.border3 a {
text-decoration: none;
}
Your HTML is invalid (you can't wrap an anchor around a list item) but this CSS will fix your issue:
a {
text-decoration: none;
}
jsFiddle example
Have you tried just styling links in general directly ?
a {
text-decoration: none;
}
Or
.border3 a {
text-decoration: none;
}
If you want only that property on those links in particular
只是使用
a{text-decoration: none !important;}
上一篇: 如何从文本超链接中删除下划线？
下一篇: 装饰：无; 没有做任何事情