CODEWITHSUNDEEP
htmlcss
cirre
cirre

Reputation: 33

Css links width change on-click

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 &copy; 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

Answers (3)

showdev
showdev

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 {
    ....
}

WORKING EXAMPLE

Upvotes: 0

alessandrio
alessandrio

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

jmore009
jmore009

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

Related Questions