My site works and looks fine using Chrome, Safari, and Firefox but in the Microsoft Edge browser, my navbar breaks. Whenever I visit a page, the background color of the nav link becomes white when its supposed to stay dark blue (#293241). Here is my code:
.nav a:link, .nav a:visited {
display: block;
width: 100px;
background-color: #293241;
color: #FFF;
padding: 7px;
text-decoration: none;
font-family: Francois One, sans-serif;
text-align: center;
text-transform: uppercase;
}
<div class="nav">
test
</div>
Any work around?
Edited a:link and a:visited into two css sections fixed the issue. Like so:
.nav a:link {
display:block;
width:100px;
background-color:#293241;
color: #FFF;
padding: 7px;
text-decoration:none;
font-family: Francois One, sans-serif;
text-align: center;
text-transform: uppercase;
}
.nav a:visited {
display:block;
width:100px;
background-color:#293241;
color: #FFF;
padding: 7px;
text-decoration:none;
font-family: Francois One, sans-serif;
text-align: center;
text-transform: uppercase;
}
<div class="nav">
test
</div>
Related
Text for link is staying the same color(purple) even though I've never made it that color and want it to be white.
I've tried adding nav:link, nav:active and such but it just changes back to the default with no CSS
nav{
font-family: sans-serif;
font-weight: bold;
font-size: 30px;
text-align: center;
word-spacing: 300px;
color: #edf5e1;
background-color: #05386b;
text-decoration: none;
}
<nav>
Home
Projects
About
Contact
</nav>
For the text to be all white with no underlines
a tags have their own explicit styling, so you need to override them directly. Just setting the color on the parent nav tag won't change them, you need to style the a tags themselves.
nav a{
font-family: sans-serif;
font-weight: bold;
font-size: 30px;
text-align: center;
word-spacing: 300px;
color: #edf5e1;
background-color: #05386b;
text-decoration: none;
}
<nav>
Home
Projects
About
Contact
</nav>
You need to apply styling for nav a instead of nav. a have certain styling by default used by the browser.
nav {
font-family: sans-serif;
font-weight: bold;
font-size: 30px;
text-align: center;
word-spacing: 300px;
color: yellow;
background-color: #05386b;
}
nav a {
color: #fff;
text-decoration: none;
}
<nav>
Home
Projects
About
Contact
</nav>
Yes, you'll need to target the links directly, like this:
nav a,
nav a:link,
nav a:visited,
nav a:hover,
nav a:active {
color: #FFFFFF;
text-decoration: none;
}
You may not need all of the states as shown here, but this will make the link always appear white with no underline.
The actual browser default link color is blue.
For it to appear just replace your CSS selector nav with nav a to set all the properties on the anchor tag instead of the nav element.
nav a {
font-family: sans-serif;
font-weight: bold;
font-size: 30px;
text-align: center;
word-spacing: 300px;
color: #edf5e1;
background-color: #05386b;
text-decoration: none;
}
h1{
text-align:center;
font-family: 'Nosifer', cursive;
font-size:35px;
}
nav {
border-top: 5px solid black;
padding:5px 5px;
text-align:center;
}
nav a:link,a:visited {
border-radius: 0 0 15px 15px;
padding:0px 15px;
}
nav a {
float: left;
font-weight: bold;
color: #000;
margin: 0 5px;
background-color: #131313;
font-family: 'Nosifer', cursive;
text-decoration: none;
font-size: 20px;
color:red;
}
nav a:hover {
background-color: #D10000;
color: black;
padding-top: 12px;
padding-bottom: 10px;
}
.active{
background-color: #D10000;
color: black;
padding-top: 12px;
padding-bottom: 10px;
}
body{
background-color: #ffe6e6;
}
<nav>
HOME
COMPUTER PARTS
BUILD A COMPUTER
MEDIA
GO TO MAIN
</nav>
Can anyone please help me. I tried to use align="center", text-align:center;
and I tried many other things but for some reason, it's not centering my nav bar in the center of my web page. Also when I tried to display an image at the bottom of the nav bar and center it, it does not center.
Without seeing your markup, it's hard to say. But probably because of float: left on nav a. Remove that from nav a, and add display: inline-block;.
You're not even positioning anything...
Use the properties top: value, left: value, right: value, and bottom: value to position your navigation bar. You can use these properties in combination with transform: translate(X, Y).
text-align will only align text within an element, if there is indeed text. If there isn't any text, it won't do anything.
You need remove 'float: left' from 'nav a' selector and re-write code following way:
nav a {
display: inline-block;
font-weight: bold;
color: #000;
margin: 0 5px;
background-color: #131313;
font-family: 'Nosifer', cursive;
text-decoration: none;
font-size: 20px;
color:red;
}
I'm helping my brother to set up a site for his business, and I've hit a snag. A hyperlink becomes white, and thusly invisible, in some browsers. What's even more puzzeling, it's white in Firefox, but not while browsing in porn mode, se this screenshot. (1) (This made me think the problem was gone, but due to faulty flushing of cache.) The link works, and if you know it's there you can click it (or tap it if on a tablet or phone), but you can't see it.
HTML for index.html (2)
<html>
<head>
<link rel="stylesheet" type="text/css" href="stil.css">
<title>Albins glass och delikatesser</title>
</head>
<body>
<img alt="Albins glass och delikatesser" src="bilder/albinsglass.gif" style="width: 320px; height: 175px; display: block; margin: 0 auto;"/>
<div class="meny">
<ul class="meny">
<li>Hem</li><li>Sortiment</li><li>Turlista</li><li>Kontakt</li>
</ul>
</div>
<p>Välkommen till <i>Albins glass och delikatesser</i>, din lokala glassbil med god svensk kvalitetsglass från <i>Engelholms Glass</i> och smakrik lokalproducerad ostkaka!</p>
<p>Glassen tillverkas i Ängelholm av det svenska familjeföretaget Engelholms Glass. De satsar på högsta kvalitet och tillverkar gräddglass med de bästa råvarorna. Läs mer om Engelholms Glass här.</p>
<p>Ostkakan kommer från <i>Stellas Ostkaka</i> i Pilås! Läs mer här.</p>
</body>
</html>
CSS for the site (3)
body {
max-width: 960px;
margin: 0 auto;
float: none;
font-family: "Arial", Arial, sans-serif;
}
a:link, a:visited {
text-decoration: none;
}
a:hover, a:active {
color: #FF9595;
}
.meny a:link, a:visited {
display: block;
width: 120px;
font-weight: bold;
color: #FFFFFF;
background-color: #00AEEF;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
font-family: "Times New Roman", Times, serif;
}
.meny a:hover, a:active {
background-color: #0066CC;
}
b {
font-weight: bold;
}
c {
text-align: center;
}
i {
font-style: italic;
}
p {
margin: 10px;
overflow: visible;
}
div.meny {
margin: 10px auto 25px;
width: 536px;
}
ul.meny {
list-style-type: none;
margin: 0 auto;
padding: 0;
overflow: hidden;
}
.meny li {
display: inline;
float: left;
}
The site in question (4) (in swedish)
http://www.albinsglass.se
Note, due to limitation on new accounts, I can apparently not include more than two links. Here's a link to a pastebin with the four links i mentioned.
LLAP!
Once you've visited the link you are hitting this CSS selector .meny a:link, a:visited { which states the color should be white.
You can alter the CSS for this to whatever color you want, or provide a separate CSS rule.
I would change this:
.meny a:link, a:visited {
display: block;
width: 120px;
font-weight: bold;
color: #FFFFFF;
background-color: #00AEEF;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
font-family: "Times New Roman", Times, serif;
}
to:
a:visited{
color:#990099;/* Change this to whatever color you want your plain links to be */
}
.meny a:link, .meny a:visited {
/* ^^^^^--This specifies that only links *within* your menu are styled here */
display: block;
width: 120px;
font-weight: bold;
color: #FFFFFF;
background-color: #00AEEF;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
font-family: "Times New Roman", Times, serif;
}
My aim is to have the text links to be central inline with the search text, however i want the border around each of the links to stay how they are. basically how to i centre the text without moving the border.
I have tried adding this to the links .home .reviews .store .contact, however this just moves the border.
padding-top:20px;
margin-top:20px;
Here is my HTML:
<div id="navigation">
<nav class="navbar">
<div class="navbarcontainer">
<ul class="nav navbar-nav">
<li class="home">Home</li>
<li class="reviews">Reviews</li>
<li class="store">Store</li>
<li class="contact">Contact</li>
</ul>
</div>
</nav>
Here is my CSS:
/* NAVIGATION */
li {
display:inline-block;
float:left;
border:1px black solid;
padding-left:12px;
padding-right:12px;
height:60px;
}
a:link, a:visited {
text-decoration: none;
color:#fff;
font-family: 'Open Sans', sans-serif;
font-size: 15px;
}
This is what it currently looks like : http://imgur.com/0GVums0
Thankyou for any help
You can use line-height property on links to vertically center:
a:link, a:visited {
text-decoration: none;
color:#fff;
font-family: 'Open Sans', sans-serif;
font-size: 15px;
line-height: 60px;
}
Or, you can also use vertical-align: middle, but keep in mind that this approach is not fully compatible with all browsers (IE8+).
li {
display:table;
float:left;
border:1px black solid;
padding-left:12px;
padding-right:12px;
height:60px;
}
a:link, a:visited {
text-decoration: none;
color:#fff;
font-family: 'Open Sans', sans-serif;
font-size: 15px;
display: table-cell;
vertical-align: middle;
}
One way to do it:
li {
display: block;
float: left;
border: 1px black solid;
}
a {
padding: 19px 12px;
display: block;
}
a:link, a:visited {
text-decoration: none;
color: #000;
font-family: 'Open Sans', sans-serif;
font-size: 15px;
}
Codepen example
Site jgimprinters.com loads and works fine in Chrome, but not in IE or Firefox.
I have verified that IE downloads the style sheet, however it does not apply a lot of the styles.
For instance, in IE, the menu button that is supposed to be hidden in full size is showing and all blown out (too big), none of the menu styling is working, background colors of several things is not working. Although the stylesheet is being seen by IE, it is not applying the styles.
Any help would be appreciated.
Thanks
EDIT: snippets that arent working - for starters there is the entire nav - and the header is missing from under the nav
#nav-wrapper{
max-width:900px;
margin:0 auto;
}
#nav{
list-style:none;
}
#nav li{
float:left;
}
#nav li a{
webkit-border-radius: 6px 6px 0 0;
-moz-border-radius: 6px 6px 0 0;
border-radius: 6px 6px 0 0;
padding: 0 17px;
margin: 0 auto;
position: relative;
display: block;
height: 30px;
cursor: pointer;
text-decoration: none;
color: #FFFFFF;
line-height: 30px;
text-align: center;
font-size:12px;
font-weight:bold;
}
#nav li a.active, #nav li a.better-active{
background: #EDEDED;
color: #5D5F5D;
}
#nav li a:hover{
background:#5D5F5D;
color:#ffffff;
}
#menu-button{
display:none;
width:36px;
cursor:pointer;
}
#menu-button img{
margin:0px;
}
#head-wrapper{
height:150px;
background:url('/wp-content/uploads/2015/02/header.png') no-repeat;
background-position:center;
width:100%;
display:block;
}
#head-inner{
width:100%;
max-width:900px;
margin:0 auto;
}
#logo{
margin-left:30px;
float:left;
}
#head-right{
float:right;
width:270px;
margin-top:30px;
margin-right:15px;
}
#callout{
font-size: 14px;
font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif;
font-weight: bold;
font-style: normal;
text-decoration: none;
text-transform: none;
font-variant: normal;
text-align: left;
color: #ED1D2E !important;
width:280px;
}
#phone{
font-size: 30px;
font-family: 'Trebuchet MS', Arial, Helvetica, Sans-Serif;
font-weight: bold;
font-style: normal;
text-align: left;
vertical-align: middle;
color: #000000 !important;
text-decoration:none;
}
All of that is pretty much being ignored by IE and Firefox.
Looks like:
Should look like:
There’s a syntax error in your styles.css file on line 385, which Chrome seems to fix for you while other browsers don’t.
… url(/wp-content/uploads/2015/02/nav.png') …
There’s a closing apostrophe which has not been opened. All CSS after that isn’t parsed.
How did I find out?
I opened the stylesheet in my favorite editor and noticed that after line 385 everything was yellow—which is the color for strings.
However, validating the CSS would also have helped as it also found the error (among others):
386 #main-nav Value Error : background top is not a color value ) no-repeat, …