Preparing a website navbar, I thought of creating hover effects over tab like Android does it, i.e. a top border displays over a tab when you hover over the tab.
The problem is, these navbar tabs are nested in a container div, and for some reason, the navbar tabs have a slight margin, even though I haven't specified one explicitly. So, the top border which I want, is not perfectly aligned to the top of the window.
I tried the ususal workarounds: setting font-size:0 in the parent, using vertical-align:top and margin-top:-4px, but non of those seem to work perfect.
Here's the jsfiddle: http://jsfiddle.net/A3nEq/
Notice a thin black line between the absolute top and the white top border. I have to get rid of that!
You have to remove border: 2px solid transparent; from your #headContainer div.
Demo: http://jsfiddle.net/A3nEq/1/
Remove the border from #headContainer.
Related
I want to remove/change the styling of the border bottom of the header shown bellow:
But even when I set the border: none for the class bp3-drawer-header it is still there. It seems it's not even a border, since it doesn't appear here when I inspect:
Any idea?
Check for box-shadow. it's also could be.And also check for parents elements and child which contains all elements in your header section. You should find border or box-shadow.
I'm creating a navigation bar (in a div) that has a vertical list. When you click on an element in the navigation, it pops up a div that touches the nagigation list. This div has a border (getting rid of that border looks weird, so i'm not doing that). How do I remove a part of that border (the part that touches the selected navigation div)?
A little more explanation: The pop-up div touches the nav on the left side. I want to hide the border for only the section of the border touching the selected element in the nav bar
FOUND A SOLUTION:
I needed to put a right-border: -1px on the navigation in order to cover the border on the pop-up div.
if it touches the nav with its top ... use border-top: none
You can use Outline:0px; or Border:none; on that part. but cant say unless i see the code.
I have a div containing pictures that will be updated frequently on WordPress. I would like to avoid having to edit the border of each image. This is kind of a dome-shaped border around a group of 8 photos that I created by using the clipping mask on Photoshop.
Is there a CSS trick I can use to make the border.png file overlay the div with the pictures and become transparent and block out the areas that it covers on the picture div?
Using border: none will remove the border, but also will remove the artificial "padding" from the width of that border. If you want the spacing to stay the same, you can do border-color: transparent. Note, however, that IE6 and earlier do not support border-color's transparent property.
I would like a border around my drop down menu on hover. I want the right and left borders on the top menu to align with the border on the drop down. And I don't want to see the border underneath the text on the top menu. I'm not sure that I'm explaining things clearly so I'm including a picture of what I want.
Here is my attempt
That's a cool style. To implement it, the CSS will need to do the following:
The tabs (#nav ul li a) will need a white background and a black border on the top, left, and right.
The dropdown will need a white background and a black border on all sides.
The trick is to use z-index to place the tab above the dropdown, and to make the tab slightly taller on hover. The bottom of the tab should extend below the bottom of the tab row, in order to cover up part of the dropdown's top border. Does that make sense?
If you'd like help with writing the CSS, I recommend adding code to your question.
Hope this helps!
This isn't a major issue as it can easily be tweaked with a bit of css - just something I'm interested to know. Why does the border appear within the height of a button element instead of outside, as per box model? In the example below I have a button element and an anchor element. Both height 30px, with a 1px border. However the button element appears 2px shoter than anchor (which displays correctly at total height 32px).
http://jsfiddle.net/Y9Rv7/1/
Thanks
Adding this to the style should resolve your problem
box-sizing: content-box
This will cause the element to render as you want. I believe that by default buttons render with the border-box behaviour wich causes padding and borders to be added inside the box.