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;
}
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;
}
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
There's a ton of blank space at the bottom of my page - http://shop.promaholics.com/? (It loads slow on the dev server, sorry).
I've been through the CSS lots looking for min-height type attributes but can't find any that would be causing this. Perhaps I've gone blind.
Any ideas what I can do to reduce that blank space at the bottom?
Thanks!
its the UL with class level0
right... you have a dropdown menu in "favours" in the menu that is causing the problem... its got too many elements (see if you mouseover "favours" it will be the length of your page).
Its because the script isn't hiding the element - its just moving it 10000 px to the right... :/ can you change this by using display:none;?
Change to this...
/* 2nd Level */
#nav ul { position:absolute; width:15em; display:none; border:1px solid #452915; }
/* Show menu */
#nav li ul.shown-sub,
#nav li div.shown-sub { display:block; top:39px; z-index:999; }
I tried it with disabling javascript and it removes the blank space at the bottom. I'm not sure in which script it's affecting it yet.
If you remove the class from the main-container col1-layout div then the blank space is greatly reduced - try looking for stray CSS in that class.
Edit: Wait, that's just because the images are no longer displaying inline. Whoops.
My link is here:
Example Page
I'm using list-style-image: to give my horizontal lists ( very top and bottom ) seperators. I have a class of .first to remove the image from the first li in each list.
Lo and behold in IE6, it doesn't work. What happens is that the bullet images are not being displayed, and also the bottom few pixels of the text appears to be cropped.
Screenshot
I've fixed a few 'haslayout' bugs with this page, but I have a feeling its something to do with my rule hierarchy, although no amount of hacking about seems to work for me.
Can someone shed some light on this perhaps? Thanks.
Also, my colour change works on hover, but not the underline, in the same selector?
EDIT OK, I have used the background image technique that yoavf suggests, which seems to do the trick, but the cropping issue still remains. Looks like a separate issue then...
heres my revised CSS
#site-navigation li {
background-image:url(../img/site-nav-seperator.gif);
background-position:0 4px;
background-repeat:no-repeat;
float:left;
padding-left:15px;
}
#site-navigation li.first {
background-image:none;
}
further edit:
Managed to fix the cropping too, by giving the a tag some line-height.
#site-navigation a {
color:#666666;
display: block;
text-decoration:none;
margin-right: 1em;
line-height: 1.1em;
}
this bit feels like a bodge though :)
I know this isn't really a solution, but I would recommend using background-image instead of list-style image.
You'll achive the same effect, and it will work in all browsers.
Looks like a problem with margins and paddings of your objects inside site-navigation.
If you showed your CSS for those elements, we could check it faster :)