Hi guys I have a href on my page but it's waaay to wide and i've tried adding display:block's to it but it didn't help.
I have a lot of CSS so I think I shouldn't link my whole document, it's a mess.
I can give the link on which you might be able to test?
It's about the changing links under the slider on the frontpage.
Use:
.cycle-slideshow a {
display: inline-block;
}
EDIT: as pointed in the comments you have to override this behavior also in the pseudo-states (hover, focus and active). You can force that rule using display: inline-block !important; or with:
.cycle-slideshow a,
.cycle-slideshow a:focus,
.cycle-slideshow a:hover,
.cycle-slideshow a:active {
display: inline-block;
}
The display:block; is what causes the problem because it extends them to 100% width. Remove the display:block; from the link-style and also from the :hover-style.
I got the same problem but then I realized I just forgot to close with an </a>tag
Related
My Site - Product Grid
When you hover over either of the product images on this page, there is a 2px horizontal line that appears to the left. I tried setting my padding, margin, no-wrap, I just can't figure it out. Thanks for looking and any advice.
I know I can cheat it by adding:
.mz-productlisting-image img {
margin-left: -4px;
}
But I don't want to if I don't have to!
This is the text-decoration:underline; of the anchor tag.
Simply add to
.mz-productlist-tiled a:focus,
.mz-productlist-tiled a:hover{
text-decoration:none;
}
Hope it helps :)
As you can see on the screenshot below, in my sidebar the right border of "KULTUR" is cutting off. Its always at the last element of the row.
I have tried to change margins and paddings but it's not working unfortunately.
Here is the URL to my website: http://holmsbuopplevelser.dahlsdata-test.com
It's in the right sidebar if you scroll down a bit.
Thanks in advance!
Try this:
.widget_categories li{
display: inline-block; //rather display:inline
}
I had checked your code and it is the only way you can manage tags with dynamic width and fix it!
find class ".widget_categories li" in your css and change display from "inline" to "inline-block".
.widget_categories li{
display: inline-block;
}
some of your li and buttons have this problem , add display:block to the buttons , and add display:inline-block to li , this will fix your issue, i checked your site
span.vc_gitem-post-category-name {
display:block;
}
.widget_categories li{
display: inline-block;
}
I have implemented BOOTSTRAP 3, NAV TABS to display content. But it takes the height of longest tabs, and white space is seen in other tabs. Why is this happening? I tried everything, but it didn't work.
The Link is: http://n.lookten.com/merchants.html
Can anyone suggest me whats happening here?
Thank You.
Try this css-
section.slice.bg-6{
overflow:hidden;
}
yes there is a difference of 1px.
Modify this class as
//bootstrap.min.css line no. 7
.navbar-nav > li {
float: left;
margin-bottom: -1px;
}
I want to add pagination to one of my websites, but I have multiple problems with it, probably due to the fact that I don't have the best CSS skills in the world (they're mediocre at best).
You can see an SSCCE of my problem here: http://jsfiddle.net/rmurzea/qE7Ku/3/
1). To make the margin-bottom rule work, I had to add it to the pagination a class. If I add it directly to the pagination class, it doesn't work. Why ?
2). The content a:hover property has a text-decoration: underline rule. I can't seem to override it in pagination a:hover. How can I do it ?
3). I want that block of color and its text on the next line, but specifying a display: block rule doesn't seem to work.
Can anyone please help me with these problems ? Thank you in advance.
1) it works
.pagination {
margin-bottom: 20px;
}
2) Use !important in your css
.pagination a:hover {
text-decoration: none !important;
background-color: #5D4137;
color: #FFFFFF;
}
3) Replacing your p tag by div should work but it didn't, however I used a div with clear: both and it worked..
Here is your jsfiddle updated
Issue: When you click our logo a black bar appears underneath it in both firefox and chrome. If you hold the click on the logo it'll stay.
Below is some of the code I have tried to remove the black bar on focus:
a:active, a:focus {
outline: none;
}
a {
outline: none;
}
:focus {
outline:none;
}
::-moz-focus-inner {
border:0;
}
a img {outline : none;}
img {border : 0;}
Can someone tell me what is causing the black bar?
The reason this is happening is because, on line 45 of screen.css, you have the rule saying "background-color: #000 !important;" which is affecting a.coa-link (Your rule is set to affect a:focus, a:active, amongst others. This is why it only occurs when you click/click-hold on the link [focussing on the element.])
If you add to line 35 of style.css:
#header a.coa-link { clear: both; /* YOUR EXISTING CODE */
background-color: transparent !important; /* NEW LINE OF CODE */ }
Then your issue will not occur anymore.
HTH
Try setting the background-color for .coa-link class, to rgb(43,66,114) which is the background-color set to your body element.
Ok so it is a very weird issue, but a workaround is to add a div around the image:
<a class="coa-link" href="/" title="Home">
<div>
<img src="/files/2012/07/AC-banner-white-test7.png" alt="">
</div>
</a>
It worked for me in the chrome inspector.
This is happening because you have focus styles implemented for <a> tags. The reason it's shown as a black bar is because the <a> that surrounds the logo image does not have display: block; in the CSS. If it did have display: block, the entire header would have a black background.
Another problem is that there is an !important tag in there. Booo.
You need to add the following style to fix the black bar in your logo link:
#header .coa-link a {
display: block;
}
#header .coa-link a:focus,
#header .coa-link a:active, {
background: transparent!important;
}
I would never ever suggest using the !important declaration in CSS, but as someone has already added it in, you need to override it. Ideally remove the !important tag that's shown in the attached image, and then you won't need it in the fix.