I have a problem with extra white lines showing up under my list items. It's not a border as I haven't set any borders, except the one under My Account, it's just to show that the white line is not a border. The one under it is -- a 4px border the same color as the background.
This problem occurred after I had resolved a conflict between my Nivo Slider and the Woocommerce plugin on my WP site. I got both of them to work together, but then this other issue with the list cropped up. Any ideas as to what caused this and how to fix it?
Here's my CSS if that helps:
#header #navigation ul.nav > li.current_page_item > a
{ color: #D4145A;}
#header #navigation ul.nav > li:hover a {
border-width: 0px 0px 4px;
border-style: none none solid;
border-color: -moz-use-text-color -moz-use-text-color rgb(212, 20, 90);
-moz-border-top-colors: none;
-moz-border-right-colors: none;
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
border-image: none;
background: none repeat scroll 0% 0% rgb(212, 20, 90);}
and the HTML for it too:
<nav id="navigation" class="col-full parent" role="navigation">
<ul id="main-nav" class="nav fl parent">
<li class="page_item"></li>
<li class="page_item page-item-11"></li>
<li class="page_item page-item-12"></li>
<li class="page_item page-item-13 parent"></li>
<li class="page_item page-item-15 current_page_item parent">
<ul class="children"></ul></li>
</ul>
</nav>
Help please! I'm at my wits' end! Thanks!
Just to add:
This is how it looked before I fixed the conflict between my Nivo Slider and Woocommerce plugins:
[url=http://postimage.org/image/lx50u5qxx/] [img]http://s10.postimage.org/lx50u5qxx/noextraline.jpg[/img][/url]
http://postimage.org/image/lx50u5qxx/
If I go back and remove the fix to the Nivo-Woocommerce js conflict, my nav goes back to its old pretty self as linked above without the white lines.
My fix to the Nivo-Woocommerce conflict was this one that I found on here:
jQuery conflict issues between jScrollPane and NivoSlider WP plugin
Many thanks for the answers so far. Hope somebody out there can help me out.
ADDED:
Just noticed that in the above "before" image, the down arrows are not showing, which they are supposed to, and only shows up when I do the Nivo "fix". I guess that has something to do with it too? The css for the arrows is this:
#header #navigation ul.nav > li.parent a::after {
font-family: 'WebSymbolsRegular';
display: inline-block;
font-size: .857em;
margin-left: .618em;
content: ";";
color: #dedede;
font-weight: normal;
}
If it is not a border, it is probably a margin. Try giving the <li>
margin:0;
Try setting
border : 0;
outline : 0;
padding : 0;
margin : 0;
That should do it...
Related
I'm having some issues bootstrap breadcrumb displayed in tabs. I want to both items side-by-side (similar to a tab in chrome). However, unable to do this properly. Any suggestions?
<ol class="breadcrumb">
<ul class="nav nav-tabs">
<li class="active">
Zika Virus
<i class="fa fa-close"></i>
</li>
</ul>
</ol>
EDIT:
To be more precise and clear, I want both items in the same tab. In my application, I will have tabs, each containing a topic and a close icon. I'm trying to create a UI similar to that of a internet browser tabs.
If this is not possible with this format, any suggestions in designing this UI would be greatly appreciated.
It took much longer than I expected, but it works. Check out this JSFiddle
How it works:
Bootstrap turns each child of <li class="active"> into tabs. The reason you were getting 2 tabs is because each <a> was turning into a tab, even though they were in the same <li>.
The CSS I wrote overwrites this to turn the <li class="active"> into the tab, rather than the children (by turning into a tab, I mean giving it borders, padding, etc.)
.nav-tabs li {
/* Give Bootstrap CSS normally applied to children
to the tab container */
color: #555 !important;
cursor: default !important;
background-color: #FFF !important;
border: 1px solid #DDD !important;
border-bottom-color: transparent !important;
margin-right: 2px !important;
line-height: 1.42857143 !important;
border-radius: 4px 4px 0 0 !important;
position: relative !important;
display: block !important;
padding: 10px 15px !important;
text-decoration: none !important;
list-style: none !important;
}
.nav-tabs li * {
/* Overwrite Bootstrap CSS */
border: none !important;
margin-right: 0 !important;
padding: 0 !important;
/* To display on the same line */
display: inline-block !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<ol class="breadcrumb">
<ul class="nav nav-tabs">
<li class="active">
Zika Virus
<a class="custom-inline" href="#"><i class="fa fa-close"> X</i></a>
</li>
</ul>
</ol>
built a simple no-dropdown horizontal nav for a new site design and its all working fine like normal except that between 2 buttons is a phantom white space that doesn't appear in dragonfly's metrics, or in the code, but is visible on the screen when the li's hover rule applies. and it does not appear between each li, just between 2 specific lis. i have attached images below showing what i mean:
no problem, everything looks as it should:
on the right side of the hovered li is a px of whitespace that shouldnt be there:
.navi {
display: inline-block;
height: 50px;
max-height: 50px;
overflow: hidden;
list-style: none;
float: right;
}
.navi li {
float: left;
}
.navi li a {
padding: 16px;
border-left: 1px solid #8bd854;
font-size: 16px;
text-decoration: none;
line-height: 50px;
color: #8c8c8c;
transition: all 0.5s ease;
}
.navi li a:hover {
background-color: rgba(13, 137, 0, 0.61);
text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.57);
color: #fff;
}
<ul class="navi">
<li>Home</li>
<li>About</li>
<li>Lawn Care</li>
<li>Tree & Shrub Removal</li>
<li>Contact</li>
</ul>
any idea where this may be coming from? It's not a huge deal if not Solvable but it is an annoyance.
Thanks in advance
An easy way to fix this is by using the font-size:
.navi {
font-size: 0;
}
.navi li {
font-size: 1rem;
}
This sets the font size of the list to zero and the font size of the list element to the size of the root element (you may use any other unit – except em – if you want to).
I'm not entirely sure what is causing this. Maybe it's webkit or some nuance of CSS, but at least in this one particular case, you can add display:block to .navi li a and change padding: 16px to padding: 0 16px on that same rule. Unfortunately I can't figure out why this works but my best guess is that whitespace is causing the issue.
I was able to reproduce the issue in Chrome by setting the zoom to 110%. Perhaps, you could set the zoom of all the navigation elements and their children to be zoom: 1.0;.
It is probably just whitespace. try
<ul class="navi"
><li>Home</li
><li>About</li
...
></ul>
I'm VERY new to programming and am probably using a totally old way to program my site, but so far it's been frustrating at times, but has worked for me.
Now I have 2 problems that I can't seem to fix
First: background images. I've been checking it using Chrome, but when I open the page in IE, my background is not showing up. I've checked the syntax (some sites seem to indicate that I needed to add spaces) and I don't see where I've got a problem. I also tried saving the image as a png instead of jpg and that didn't work.
Here's what my code looks like:
body {
background-image: url('images/backrings.jpg'), url('images/backrings2.jpg');
background-position: left top, right top;
background-repeat: no-repeat;
}
Second: I'm getting a blue border around my footer navigation bar - I don't know why and have tried everything that I can think of to get rid of it.
Here's what the code for that looks like:
#footermenu ul {
background-color: #fff;
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
text-align: right;
border: none 0px;
}
#footermenu ul li {
display: inline;
}
#footermenu ul li a {
font-family:verdana;
font-style:normal;
font-size:12px;
text-decoration:none;
margin: 0;
padding: 5px 20px 5px 20px;
color: #fff;
background-color:83AFC7;
}
<div id="footermenu">
<ul>
<li class="first">home</li>
<li>about</li>
<li>gallery</li>
<li>contact</li>
</ul>
</div>
Any help would be GREATLY appreciated - thanks!
I'm trying to make the underline from the active / hovered tab transparent. But I didn't get it working. Anyone knows how to do this?
Screenshot: http://i.imgur.com/m6ogRjB.png
I want the red marked white line removed.
Setting blue border bottom color isn't the correct solution because I need it transparent/removed.
JSFiddle: http://jsfiddle.net/mULUv/6/
border-color: #fff #fff transparent;
I guess I need something to do here.
But still don't get it working like I want.
Since you can only cover up borders in css, and since you do not want to set a blue color to overlap one of your borders, the only remaining (and quite tricky) way of achieving the effect you are looking for is to "build" the borders block by block.
The idea is to remove the bottom border from the ul container bar and add fillers between the tabs and after them that would have a bottom border. Then, the tabs which are not hovered nor active will have a bottom border displayed closing the gaps between fillers. Hovering or activating will cause the tab to lose the bottom border and to gain a right, left and top border. Using a custom css class such as your .tab-advanced this can be done safely without overwriting the built-in BootStrap classes.
Here is a working demo.
The html code to add the fillers changes the list to:
<ul class="nav nav-tabs tabs-advanced">
<li class="active">1</li>
<li class="in-between-filler"></li>
<li>2</li>
<li class="in-between-filler"></li>
<li>3</li>
<li class="filler"></li>
</ul>
and the corresponding additional css is:
.tabs-advanced {
display: table;
border: none;
}
.tabs-advanced > li{
display: table-cell;
float: none;
}
.tabs-advanced > li > a{
margin-right: 0;
border-bottom-style: none;
}
.tabs-advanced > li:not(.active):not(:hover) {
border-bottom: 1px solid #ddd;
}
.tabs-advanced > li.filler{
width: 100%;
border-bottom: 1px solid #ddd;
}
.tabs-advanced > li.in-between-filler{
min-width: 2px;
border-bottom: 1px solid #ddd;
}
You could either do...
border: none;
or
border: 1px solid transparent;
(if you want a 1px line there still)
I have created a navbar using an unordered list. Here is my problem:
I cannot change the color of the text of the list items and for some reason I cannot click my links anymore (I was able to click them a while ago in development, no idea when they stopped working).
Here is what the items look like now:
http://gyazo.com/c089ed3f21368d4d2a1d91a52e129222.png
HTML:
<div class="grid_16 alpha" id="header">
<ul id="nav" class="grid_4 prefix_1">
<li id="nav_home">Home</li>
<li id="nav_home">News</li>
</ul>
</div>
CSS:
#nav {
color:white;
margin-top: 54px;
}
#nav li {
color: white;
display: inline;
}
#nav a:link {
font-family: ColaborateThinRegular;
font-size: 18px;
text-decoration: none;
background-color: #353535;
padding: 5px 20px;
margin-right: 15px;
color: white;
box-shadow: 1px 1px 3px #000;
}
Found it:
look at this jsFiddle. the problem with the coloring occured because you didn't specify a:visited as well as a:link so the color was purple.
The non-clickable problem.. has something to do with href="#" or some other code on your site that prevents it.. I've linked one of the buttons in jsFiddle to google and it keeps working after first click. Try it out
After visiting the link your style stops working. Try implementing this:
#nav a:visited {color: white;}
Always remember ids are Unique.