I am trying to make a menu with slanted ends and buttons with triangular ends in my project. But I am ending up with some white spaces in firefox and ie.
I have taken code which you can see on this page:
SOURCE
I.e.
But in chrome there is no such space and just looks fine.
My work can be seen at this website:
thejobupdates.com/pt/devos
Please help me out to remove the unwanted white spacings.
I also have a FIDDLE here for you guys to edit.
CSS:
#heroTab li > a {
text-decoration: none;
display: block;
position: relative;
line-height: 52px;
padding: 0 8px;
color:#fff;
text-transform:uppercase;
font-family:'open_sansregular', sans-serif;
font-size:15px;
margin-top: 10px;
background: #243276;
}
#heroTab li > a:after {
content: '';
position: absolute;
border: 26px solid #243276;
border-right-color: transparent;
border-top-color: transparent;
left: 100%;
top: 0;
}
#heroTab li > a:before {
content: '';
position: absolute;
border: 26px solid #243276;
border-left-color: transparent;
border-bottom-color: transparent;
right: 100%;
top: 0;
}
Thanks for the help.
You can just change the margin left/right on the tabs to -1px, e.g.
#heroTab li > a {
...
margin:10px -1px;
...
}
This will cover up the apparent gap. I think this is a rendering issue with angles, so you have to overlap them by 1px to get rid of it. See here.
Use this style to fix issue in firefox & Ie
#heroTab li {
cursor: pointer;
float: left;
margin-right: 51px;
}
Related
This question is based on a thread here on SO Here This works all fine, unless the 2nd level item is not on top. In the example given, the item with the 2nd level menu is the first item. if you move the item down one or two spots, the 2nd level opens at the top.
The CSS, looks good, I also thought maybe it had to do with the Bootstrap version in the one demo link in the thread
.sidebar-nav {
padding: 9px 0;
}
.dropdown-menu .sub-menu {
left: 100%;
position: absolute;
top: 0;
visibility: hidden;
margin-top: -1px;
}
.dropdown-menu li:hover .sub-menu {
visibility: visible;
}
.dropdown:hover .dropdown-menu {
display: block;
}
.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
margin-top: 0;
}
.navbar .sub-menu:before {
border-bottom: 7px solid transparent;
border-left: none;
border-right: 7px solid rgba(0, 0, 0, 0.2);
border-top: 7px solid transparent;
left: -7px;
top: 10px;
}
.navbar .sub-menu:after {
border-top: 6px solid transparent;
border-left: none;
border-right: 6px solid #fff;
border-bottom: 6px solid transparent;
left: 10px;
top: 11px;
left: -6px;
}
(Fiddle).
So to eliminate that issue, I moved it around in the sandbox, from Fiddle, and got the same issue, so it seems it is not with my code, or Bootstrap version. I am not attached to doing it this way, I am fully open to using something different, as long as I can have 2nd level menu, and open on hover on full size screens.
Thanks,
Dave
UPDATED
I just added
.dropdown-menu .sub-menu{
top: auto !important;
margin-top:-30px !important;
}
and it seems to work fine, please check if this is what you want.
Here is fiddle
I have a subnav that has a border-bottom under each of the sub menu items, when I was checking to see if it was ok in all the browsers I noticed that the border-bottom stopped where the text ended in IE7.
Here is my css
.subnav_wrapper_ul {
background: none repeat scroll 0 0 #00AEEF;
font-size: 13px !important;
position: absolute;
top: 34px;
z-index: 1000;
}
.header-wrapper .main-nav li {
float: left;
list-style: none outside none;
position: relative;
white-space: nowrap;
z-index: 1000;
}
.subnav_wrapper_ul li {
border-bottom: 1px dotted #FFFFFF;
float: none !important;
padding: 0;
width: 100%;
}
if there is anything else that you need from me please let me know
Give the border-bottom css property to the ul element , instead of the individual li items.
.subnav_wrapper_ul {
background: none repeat scroll 0 0 #00AEEF;
font-size: 13px !important;
position: absolute;
top: 34px;
z-index: 1000;
border-bottom: 1px dotted #FFFFFF;
}
We don't have any link or any image for reference, so in this case we all have to guess.
anyway you are talking about submenu section. can we use a IE7 specific hack here..
*:first-child+html .subnav_wrapper_ul li {
border-bottom: 1px dotted #FFFFFF;
float: none !important;
padding: 0;
width: 100%;
}
Another way to target IE7 is:
*border-bottom: 1px dotted #FFFFFF;
I want to add a white gap between menu elements but Im encountering a weird problem. See this jfiddle: http://jsfiddle.net/ERYat/1/
Here is the CSS code:
/* a styling */
ul#menu-menu-services a {
display: block;
font-size: 20px;
color: #000;
text-decoration: none;
padding: 5px;
border-bottom: 2px solid #fff;
border-left-style: solid;
border-left-width: 3px;
border-left-color: #000;
}
/* li fix */
ul#menu-menu-services li {
margin: 0;
padding: 0;
border: none;
}
/* Sub Menu */
ul#menu-menu-services li ul.sub-menu {
display: block;
margin-left: 0px;
}
ul#menu-menu-services li ul.sub-menu li a {
padding-left: 15px;
font-size: 14px;
}
I can't figure out why is the border diagonal on the left. Anyone knows?
Borders come together like this:
||
||______
|/______
You should use margin-bottom instead of border-bottom fiddle:
ul#menu-menu-services a {
display: block;
font-family: 'Droid Sans', arial, serif;
font-size: 20px;
color: #000;
text-decoration: none;
padding: 5px;
margin-bottom: 2px;
border-left-style: solid;
border-left-width: 3px;
border-left-color: #000;
}
And if you need a white line, consider using :after:
ul#menu-menu-services a { position: relative; }
ul#menu-menu-services a:after {
content: '';
width: 100%;
position: absolute;
height: 2px;
background: #fff;
left: 0;
bottom: -2px;
}
It's because it's drawing the corner of the two borders. Try changing your bottom border to something other than white and you'll see more clearly what it's doing.
To get rid of this effect, you need to get rid of the bottom border.
If you need the gap that the bottom border is currently giving you, you could use padding-bottom or margin-bottom instead.
I am just cleaning up some CSS for a client.
I am not a front-end person, but have been saved by bootstrap (thank you, twitter).
However, I am having a really hard time cleaning up a custom navigation panel
(no twitter). I have provided the CSS below. I need it to be able to:
1) close gracefully at the end (the beginning starts with a vertical border, not an arrow.
I would like the end to have symmetry and close the way it began).
2) Get the container to not expand to the end of the page.
3) I can't seem to get it to work in chrome. It falls apart in chrome but works in IE and Ff.
Here is the link. Any advice? Thanks so much.
http://annualdinnerdev.elasticbeanstalk.com/
/* ------- Wizard Interface ---------- */
#wizHeader
{
border: solid 3px #fff;
margin-bottom:25px;
-moz-box-shadow: 3px 3px 4px #C2CBCE;
-webkit-box-shadow: 3px 3px 4px #C2CBCE;
box-shadow: 3px 3px 4px #C2CBCE; /* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#C2CBCE')"; /* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color= '#C2CBCE' );
}
#wizHeader li label
{
font-size:x-large;
}
#wizHeader li a
{
font-size:large;
}
#wizHeader li .prevStep
{
background-color: #D6E6FA;
color:#000;
}
#wizHeader li .prevStep:after
{
border-left-color: #D6E6FA !important;
}
#wizHeader li .currentStep
{
background-color: #6699CC;
color:#fff;
}
#wizHeader li .currentStep:after
{
border-left-color: #6699CC !important;
}
#wizHeader li .nextStep
{
background-color: #F0E9EA;
color:gray;
}
#wizHeader li .nextStep:after
{
border-left-color: #F0E9EA !important;
}
#wizHeader
{
list-style: none;
overflow: hidden;
font: 14px Helvetica, Arial, Sans-Serif;
margin: 0px;
padding: 0px;
}
#wizHeader li
{
float: left;
}
#wizHeader li a
{
color: white;
text-decoration: none;
padding: 10px 0 10px 55px;
background: brown; /* fallback color */
background: hsla(34,85%,35%,1);
position: relative;
display: block;
float: left;
}
#wizHeader li a:after
{
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */
border-bottom: 50px solid transparent;
border-left: 30px solid hsla(34,85%,35%,1);
position: absolute;
top: 50%;
margin-top: -50px;
left: 100%;
z-index: 2;
}
#wizHeader li a:before
{
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 35px solid white;
position: absolute;
top: 50%;
margin-top: -50px;
margin-left: 1px;
left: 100%;
z-index: 1;
}
#wizHeader li:first-child a
{
padding-left: 10px;
}
#wizHeader li:last-child
{
padding-right: 18px;
}
Add a background color to #wizHeader to create the visual of a right-side border.
Specify a width value in #wizHeader to prevent it from expanding to the right of the page.
It seems to be working fine on Chrome for me (latest version)
Here are some examples of declarations to add to #wizHeader (add these to the ones currently in the CSS declaration)
#wizHeader {
background: #6699CC;
width: 960px;
}
Adding more based on comment...
The reason the arrows are being bumped down is because the 's are block elements, floated left, so they'll flow to fit whatever width they have available and drop down onto the next line when they run out.
If you want to cut off the last arrow, you'll have better luck by targeting the that wraps the last . This worked for me, editing in Chrome's Inspector:
#wizHeader li:last-child {
width: 172px; /* you might have to tweak this a bit*/
overflow: hidden;
padding-right: 0;
}
Then, change the width of the #wizHeader accordingly. 930px wide seemed to do the trick with the above snippet.
I am trying to create a tooltip with css to span elements but when I do a mouseover it adds extra padding to original text. Is there a way to fix that?
Here's the code
http://codepen.io/anon/pen/BmJqj
Thank you
You need to use
position: absolute; on span:before and span:after
and
position: relative; on span.
Like this:
span {
color: #333;
text-decoration: none;
position: relative;
}
span:hover:after{
content: attr(data);
dislpay: block;
padding: .4em;
color: #fff;
background-color: #333;
border-radius: .4em;
position: absolute;
top: 1.75em;
left: 0;
white-space: nowrap;
}
span:hover:before {
display:block;
content:"";
position: absolute;
border-right: .5em solid transparent;
border-bottom: .5em solid #333;
border-left: .5em solid transparent;
top: 1.25em;
left: .5em;
}
Give it position absolute. The way you have it now, the content gets inserted as normal content:after. So it is in the normal flow and shifts the rest. When you put position:absolute to it, you take it out of the flow and can position it as liked.