Reputation: 33
I'm coding a webpage from scratch and I'm having a problem. I know I am using iframes, but that is not the point so please leave that out.
The links that are not in the sidebar, the ones within the content of the page, are styled correctly to my knowledge of CSS/CSS3. However, for some reason when you click on the link the width of it changes, which is unwanted. However, the li
, a:link
, and a:hover
all have a set width so I don't know how this could be happening. This is also in effect when you hold down the mouse button.
<head>
<title>BlackOwlStables</title>
<style>
body {
background: rgba(112, 111, 111, 1);
background: -moz-radial-gradient(center, ellipse cover, rgba(112, 111, 111, 1) 0%, rgba(5, 5, 5, 1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(112, 111, 111, 1)), color-stop(100%, rgba(5, 5, 5, 1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(112, 111, 111, 1) 0%, rgba(5, 5, 5, 1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(112, 111, 111, 1) 0%, rgba(5, 5, 5, 1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(112, 111, 111, 1) 0%, rgba(5, 5, 5, 1) 100%);
background: radial-gradient(ellipse at center, rgba(112, 111, 111, 1) 0%, rgba(5, 5, 5, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#706f6f', endColorstr='#050505', GradientType=1);
}
p {
font-family:times, serif;
color:#1a1a1a;
padding:10px;
margin:0;
font-size:12px;
letter-spacing:1px;
text-align:justify;
}
h1, h2, h3 {
font-family:times;
letter-spacing:2px;
font-size:30px;
color:#1a1a1a;
margin:0;
padding:0;
}
iframe {
width:650px;
height:700px;
border:1px solid #777777;
}
#content {
width:860px;
background:#888888;
border:1px solid black;
padding:20px;
position:relative;
margin:20px auto 0;
}
#body {
margin-left:210px;
}
#side {
width:200px;
float:left;
border-right:1px solid #666;
position:absolute;
top:10px;
bottom:10px;
}
ul#navbar {
list-style-type:none;
margin:0;
margin-left:-20px;
margin-top:30px;
padding:0;
}
#navbar li {
text-align:center;
}
#navbar a:link, a:visited, a:active {
transition: all 1s;
display:inline-block;
text-align:center;
text-decoration:none;
color:white;
text-transform:uppercase;
line-height:20px;
font-size:10px;
letter-spacing:3px;
max-width:50px;
}
#navbar a:hover {
transition:all 1s;
background:#0a0a0a;
max-width:180px;
}
#links {
list-style-type:none;
display:block;
width:390px;
margin:0 auto;
padding:0;
}
#links li {
text-align:center;
display:inline-block;
width:120px;
overflow:hidden;
margin:0;
}
#links a,a:link, a:active, a:visited, a:focus {
transition: all 1s;
display:inline-block;
text-align:center;
text-decoration:none;
color:white;
text-transform:uppercase;
line-height:20px;
font-size:10px;
letter-spacing:1px;
padding:0 2px;
width:120px;
}
#links a:hover {
transition:all 1s;
background:#0a0a0a;
width:120px;
}
</style>
</head>
<body>
<div id="content">
<div id="side">
<ul id="navbar">
<li><a href="#">Text</a>
</li>
<li><a href="#">Text</a>
</li>
<li><a href="#">Text</a>
</li>
<li><a href="#">Text</a>
</li>
</ul>
</div>
<div id="body">
<h2>title hurr</h2>
<p>Text</p>
<ul id="links">
<li><a href="/mog.html" target="box">M. Oceangaze</a></li
><li><a href="/lbh.html" target="box">L. Bloodhorn</a></li
><li><a href="/apv.html" target="box">A. Poisonvine</a></li
><li><a href="/vft.html" target="box">V. Flickertail</a></li
><li><a href="" target="box">-air-</a></li
><li><a href="" target="box">-water-</a></li
>
</ul>
<iframe name="box">Your browser does not support iframes.</iframe>
<p>2014 © Brittny Baldwin</p>
</div>
</div>
</body>
I would just like to know what's causing the unwanted width change and how I can fix it.
EDIT: NOT THE NAVBAR. THE INTERNAL #links
UL.
Upvotes: 3
Views: 210
Reputation: 29198
The problem is with the following overlapping definitions:
Below, you are setting the visited and active states of all links:
#navbar a:link, a:visited, a:active { ... }
Below, you are setting the link, active, visited, and focus states of all links:
#links a, a:link, a:active, a:visited, a:focus { ... }
You'll need to specify the parent for each state in order to prevent overlap between the two definitions. For example:
#navbar a:link,
#navbar a:visited,
#navbar a:active {
....
}
#links a,
#links a:link,
#links a:active,
#links a:visited,
#links a:focus {
....
}
Upvotes: 0
Reputation: 4370
#navbar a:link, #navbar a:visited, #navbar a:active {
....
}
#links a, #links a:link, #links a:active, #links a:visited, #links a:focus {
transition: all 1s;
display:inline-block;
text-align:center;
word-wrap: normal;
overflow-wrap: normal;
white-space: nowrap;
text-decoration:none;
color:white;
text-transform:uppercase;
line-height:20px;
font-size:10px;
letter-spacing:1px;
padding:0 2px;
width:120px;
margin-right:1px;
}
Upvotes: 1
Reputation: 12931
it's the max-width:50px;
you have set in #navbar a:link, a:visited, a:active
. change that or remove it and it will work
#navbar a:link, a:visited, a:active {
transition: all 1s;
display:inline-block;
text-align:center;
text-decoration:none;
color:white;
text-transform:uppercase;
line-height:20px;
font-size:10px;
letter-spacing:3px;
max-width:50px; //<--THIS
}
UPDATE
as showdev pointed out the reason the max-width is bleeding over is because you are specifying a
in general, be sure to scope them under their parent:
#navbar a, #navbar a:link, #navbar a:active, #navbar a:visited, #navbar a:focus {
Upvotes: 0