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;
Related
I am trying to get the the menu on the right side of the search bar to breakout of the parent.
Code: http://jsbin.com/xecolubodi/edit?html,css,js,output
I believe a modified to the following css styles is required:
.mapsearch-menu ul {
display: none;
position: relative;
top: -55px;
padding: 55px 0 0 0;
margin: 0;
user-select: none;
}
.mapsearch-menu ul:hover {
display: block;
}
.mapsearch-menu li {
background: white;
padding: 4px;
list-style: none;
border: 1px solid rgba(0, 0, 0, 0.298039);
margin-top: -1px;
}
.mapsearch-menu input[type=checkbox],
input[type=radio] {
vertical-align: middle;
position: relative;
bottom: 1px;
}
.mapsearch-menu li:hover {
background: #eee;
cursor: pointer;
}
.mapsearch-menu .button {
display: inline-block;
user-select: none;
cursor: pointer;
height: 16px;
width: 16px;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAJ0lEQVQ4y2NgGDbgJBD/JxGfQDbgOBkGHB1mYXBi6IfBmdEwIB8AAEQSURX+8q0jAAAAAElFTkSuQmCC");
}
.mapsearch-menu {
display: inline-block;
position: absolute;
top: 0;
right: 0;
margin-top: 12px;
padding-right: 5px;
}
Before click:
After click:
I want the hamburger menu icon to stay stationary and have the dropdown menu either breakout of the parent divs bounds or have the list items right justified.
I have been working on this for an hour and I am not getting anywhere. I tried various things (floating, etc).
ps: I prefer to have the search icon, the search text, and the hamburger all left-floated instead of the hack I am currently doing with padding with the search. If that is easier to fix that first then please attempt (I also been trying to fix that)
I updated your css below, It will probably work for you.
.mapsearch-menu ul {
display: none;
position: absolute; /* Add this you can change it as per you need */
top: -34px; /* Add this */
right:0px; /* Add this you can change it as per you need */
min-width:170px; /* Add this */
padding: 55px 0 0 0;
margin: 0;
user-select: none;
}
.mapsearch-menu .button {
display: inline-block;
user-select: none;
cursor: pointer;
position:relative; /* Add this */
height: 16px;
width: 16px;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAJ0lEQVQ4y2NgGDbgJBD/JxGfQDbgOBkGHB1mYXBi6IfBmdEwIB8AAEQSURX+8q0jAAAAAElFTkSuQmCC");
}
.mapsearch-menu li {
background: white;
padding: 4px;
list-style: none;
border: 1px solid rgba(0, 0, 0, 0.298039);
margin-top: -1px;
display:inline-block; /* Add this */
}
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;
}
I'm doing a CSS exercise wherein the old BBC's site is to be cloned. The original problem was that the white bottom borders of the #topmenu li's appeared wonky (I included this code in the page below as a comment)
That has been fixed by adding the right red border using pseudo elements. However, the anchor tags have been disabled. I think it's due to the red border's "absolute" position, but I can't get the menu to appear as it should without the absolute position. Now, it looks how I want it, but the top menu links don't work anymore: http://jsbin.com/poginowibe/1/edit?output
Any ideas on how this can get sorted out? Any help would be appreciated.
/* This is the original code when the white bottom borders appeared weird */
#topmenudiv li {
list-style: none;
height: 100%;
padding: 14px 15px 11px 15px;
border-right: 1px solid #990800;
float: left;
position: relative;
z-index: 1;
}
#topmenudiv li:hover {
color: #ffffff;
text-decoration: none;
padding: 14px 15px 8px 15px;
border-bottom: 3px solid #FFFFFF;
outline: 0;
}
/* This is the code after the wonky appearance is fixed but the tags were disabled */
#topmenudiv li {
list-style: none;
height: 100%;
padding: 14px 15px 11px 15px;
float: left;
position: relative;
z-index: 1;
}
#topmenudiv li:hover {
color: #ffffff;
text-decoration: none;
padding: 14px 15px 8px 15px;
border-bottom: 3px solid #FFFFFF;
outline: 0;
}
#topmenudiv li::after {
content: "";
position: absolute;
bottom: 0; top: 0; left: 0; right: 0;
border-right: 1px solid #990800;
}
With some tweaks to Joerg's code, I was finally able to make it work!
#topmenudiv ul {
margin-top: 0px;
padding: 0;
}
#topmenudiv li {
list-style: none;
height: 38px;
line-height: 40px;
float: left;
position: relative;
z-index: 3;
}
#topmenudiv li:hover {
color: #ffffff;
text-decoration: none;
border-bottom: 3px solid #FFFFFF;
outline: 0;
}
#topmenudiv li a {
height: 100% !important;
font-size: 1em;
line-height: 40px;
border-right: 1px solid #990800;
display: block;
padding-left: 15px;
padding-right: 15px;
}
#topmenudiv li a:hover {
text-decoration: none;
}
Thanks a bunch! :)
Remove the #topmenudiv li::after from your css and change #topmenudiv li in this way:
#topmenudiv li {
list-style: none;
height: 100%;
padding: 14px 15px 11px 15px;
float: left;
position: relative;
z-index: 1;
border-right: 1px solid #990800;
}
Update
Use this code and see the remarks below:
#topmenudiv ul {
height: 40px;
margin: 0;
padding: 0;
}
#topmenudiv li {
list-style: none;
height: 40px;
float: left;
border-bottom: 3px solid #FFFFFF;
}
#topmenudiv li:hover {
color: #ffffff;
text-decoration: none;
border-bottom: 3px solid blue;
outline: 0;
}
#topmenudiv li a {
height: 40px !important;
font-size: 1em;
line-height: 40px;
border-right: 1px solid #990800;
display: block;
padding-left: 15px;
padding-right: 15px;
}
#topmenudiv li a:hover {
text-decoration: none;
}
Remove all your topmenudiv stuff in CSS, also this one above the comments.
I made the border-bottom line for hovering blue, so you can see that it works.
You are using an image on the right site of the topbar, #sphere. This should be an background-image in CSS, so you have not to handle with z-index and then the rest of the links will work.
What I have done is, give the a tags some height and line-height and bind the red border-left to it. I also removed some paddings and margins.
Site in question: http://khill.mhostiuckproductions.com/siteLSSBoilerPlate/
If you test the above link in IE7 (I am using IE9 with browsermode and browser compatability for IE7), there is a positioning problem with the subnavs.
Hover over about us, then hover over home, and then go back to About us. You will see the sub-nav has moved to the right by the width of the LI above it.
This is coded purely in CSS. This works perfectly in all browsers except for IE7, I would like to keep this working within CSS, without any Javascript fixes.
I also have a z-index issue, any ideas on these two issues?
Here is the CSS code that handles the main UL and LI, as well as the CSS that handles the first Subnav. (note the secondary subnav under "Michael" works as intended).
***Note that the class .main-nav is applied to the first UL that handles the horizontal bar. The class .main-sub-nav is applied to the UL that holds the subnav LI's Michael, Kenny etc. under the About us menu.
nav .main-nav {
position: absolute; /* allows us to absolute position the subnavs */
display: block;
width: 100%;
height: 40px; /*height of inner nav for white border */
padding: 0;
margin: 0;
border: 1px solid #fff; /* Inner white border */
-moz-border-radius: 5px; /*rounded edges */
-webkit-border-radius: 5px;
border-radius: 5px;
}
nav ul > li {
display: inline-block;
height: 40px;
padding: 0;
margin: 0 0 0 -4px;
}
/* MAIN NAV SUBNAV STYLES */
.main-sub-nav { /* BASIC STYLING PLUS HIDE */
position: absolute;
display: none;
z-index: 1;
width: 200px;
height: auto;
top: 100%;
border: 1px solid #d4d4d4;
background: #f6f6f6;
}
nav ul > li:hover > .main-sub-nav { /* ON HOVER MAKE SUB-NAV VISIBLE */
display: block;
}
nav ul li .main-sub-nav li {
position: relative;
height: 40px;
display: block;
padding: 0;
margin: 0;
border-top: 1px solid #fff;
border-right: none;
border-bottom: 1px solid #f2f2f2;
border-left: 1px solid #fff;
}
The thing is that you are incorrectly using positioning.
Try this approach. I have commented few changes.
.row.margin-bottom-15.nav-container { /* Remove overflow:hidden; so your dropdowns will be shown when they overflow. */}
nav .main-nav {
/* removed position:absolute; */
display: block;
width: 100%;
height: 40px;
padding: 0;
margin: 0;
border: 1px solid #fff;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
nav ul > li {
position: relative; /* Add position:relative; so you can absolute position dropdowns */
display: inline-block;
height: 40px;
padding: 0;
margin: 0 0 0 -4px;
}
.main-sub-nav {
position: absolute;
display: none;
z-index: 1;
width: 200px;
height: auto;
top: 100%;
left: 0;
border: 1px solid #d4d4d4;
background: #f6f6f6;
}
nav ul > li:hover > .main-sub-nav {
display: block;
}
nav ul li .main-sub-nav li {
position: relative;
height: 40px;
display: block;
padding: 0;
margin: 0;
border-top: 1px solid #fff;
border-right: none;
border-bottom: 1px solid #f2f2f2;
border-left: 1px solid #fff;
}
Let me know if it helped.
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.