I'm looking for a way to create a tab bar that looks like the one in google chrome without using CSS3 or image resources. I want it to work in IE8.
...
This is a CSS3 example that I found on the Internet, but as you can see, it uses "transform", which is not available in IE8.
.tab-box {
height:50px;
background: #fff;
border-radius: 4px;
border:1px solid #ccc;
margin:0 10px 0;
box-shadow: 0 0 2px #fff inset;
-webkit-transform: perspective(100px) rotateX(30deg);
-moz-transform: perspective(100px) rotateX(30deg);
}
For old IE<9 add the class ie,
for non-IE<9 browsers do your amazing stuff with gradient etc....
html, body{height:100%; margin:0;font:16px/24px sans-serif;}
body{background:#abc;}
div{background:#fff;overflow:auto;}
/*TABS DEFAULT STYLES*/
/* here goes your awesomeness*/
.tabs{margin-bottom:0;padding:0;list-style:none;}
.tabs:after{content:"";display:table;clear:both;}
/*TABS IE*/
.tabs.ie li{
position:relative;
overflow:hidden;
float:left;
margin-right: -6px; /* (3) than adjust this value for the overlap */
}
.tabs.ie li a{
background: #ddd;
position:relative;
display:block;
padding: 4px 12px;
margin: 0 12px; /* (2) adjust the value till the borders corner touch */
}
.tabs.ie li a:before,
.tabs.ie li a:after{
content: "";
position:absolute;
top: 1px; width: 1px; /*(fictive 1px "roundness")*/
border-bottom: 60px solid #ddd; /* (1) Edit px till border is not cut */
}
.tabs.ie li a:before{
left: -21px; /* 20border + 1width */
border-left: 20px solid transparent;
}
.tabs.ie li a:after{
right: -21px; /* 20border + 1width */
border-right: 20px solid transparent;
z-index:2;
}
/* ACTIVE TAB */
.tabs.ie li a.active{
background:#fff;
}
.tabs.ie li a.active:after,
.tabs.ie li a.active:before{
border-bottom-color:#fff;
z-index:2;
}
.tabs.ie li:after{
content: "";
position:absolute;
top: 1px; width: 2px;
border-bottom: 60px solid #999;
right: -10px;
border-right: 20px solid transparent;
z-index:1;
}
<ul class="tabs ie">
<li><a>HOME</a></li>
<li><a class="active">ABOUT</a></li>
<li><a>PROJECTS</a></li>
<li><a>CONTACT</a></li>
</ul>
<div><h1>ABOUT</h1></div>
Related
This question already has answers here:
CSS Triangles and box-shadows
(2 answers)
CSS box shadow around a custom shape?
(3 answers)
triangle with shadow using css
(3 answers)
Closed 4 years ago.
I wanted to remove inner border or box from the box, as shown below
below image:
Note: if possible i want to retain my code with bit addition
Note2: i don't want to remove box-shadow on element or :after
here is my codepen:https://codepen.io/anon/pen/wEwgRR
#messagebox,#messagebox2{
width:400px;
height:150px;
background:red;
margin: 0 auto;
position:relative;
color:#fff;
padding:12px;
font-size:18px;
border-radius:3%;
box-shadow:0px 8px 9px black;
margin-top:80px;
}
#messagebox:after{
content:'';
position:absolute;
width:50px;
height:50px;
background:red;
bottom:-25px;
right:65%;
transform: rotate(45deg);
color:#fff;
box-shadow:0px 5px 9px black;
}
#messagebox2:after{
content:'';
position:absolute;
width:50px;
height:50px;
background:yellow;
bottom:-25px;
right:65%;
transform: rotate(45deg);
color:#fff;
box-shadow:0px 5px 9px black;
}
<div id="messagebox">
hello world
</div>
<div id="messagebox2">
hello world
</div>
Please help me thanks in advance !!!!
Create another layer using ::before pseudo element of same width / height as parent.
Apply shadow on this layer instead of parent element.
Add some negative z-index value to place it below the ::after pseudo element i.e arrow.
Demo:
.messagebox {
width:400px;
height:150px;
background:red;
margin: 0 auto;
position:relative;
color:#fff;
padding:12px;
font-size:18px;
margin-top:80px;
}
.messagebox::before {
box-shadow:0px 8px 9px black;
position: absolute;
border-radius:3%;
content: '';
z-index: -2;
bottom: 0;
right: 0;
left: 0;
top: 0;
}
.messagebox:after{
content:'';
position:absolute;
width:50px;
height:50px;
background:red;
bottom:-25px;
right:65%;
z-index: -1;
transform: rotate(45deg);
color:#fff;
box-shadow:0px 5px 9px black;
}
.messagebox2:after{
content:'';
position:absolute;
width:50px;
height:50px;
background:yellow;
bottom:-25px;
right:65%;
transform: rotate(45deg);
color:#fff;
box-shadow:0px 5px 9px black;
}
<div class="messagebox">
hello world
</div>
<div class="messagebox messagebox2">
hello world
</div>
Try this out
.messagebox {
background: red;
border-radius: 12px;
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 1);
box-sizing: border-box;
color: white;
height: 150px;
margin: 20px auto;
max-width: 400px;
padding: 16px;
position: relative;
}
.messagebox:after {
border: 16px solid black;
border-color: transparent transparent red red;
bottom: -30px;
box-shadow: -4px 4px 4px 0 rgba(0, 0, 0, 1);
box-sizing: border-box;
content: "";
height: 0;
left: 50%;
margin-left: -16px;
position: absolute;
transform: rotate(-45deg);
transform-origin: 0 0;
width: 0;
}
<div class="messagebox">Hello World!</div>
I managed to customize the scrollbar area with pure css but haven't been able to figure out how to make it so that the scroll area (white) is hidden. I only want the bar itself, is this possible?
fiddle: https://jsfiddle.net/jzhang172/2qh2yy2o/
jQuery(document).ready(function(){
jQuery('.scrollbar-inner').scrollbar();
jQuery('html').scrollbar();
});
body{
height:1000px;
background:blue;
}
.scrollbar-inner{
height:100px;
width:100%;
overflow:auto;
}
.content{
height:1000px;
width:100%;
}/*************** SCROLLBAR BASE CSS ***************/
/* For the "inset" look only */
html {
overflow: auto;
}
/* Let's get this party started */
::-webkit-scrollbar {
width: 12px;
background:transparent;
}
/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(255,255,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: #545454;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: transparent;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.scrollbar/0.2.10/jquery.scrollbar.min.js
"></script>
<div class="scrollbar-inner"><div class="content"></div></div>
I have a problem to convert this below navigation bar from vertical to horizontal.
http://codepen.io/anon/pen/bdpRjx
Who could help me to take a look on my code. Here is my CSS but the effect and size are chaotic.
*{
box-sizing: border-box;
}
body{
height:100%;
background-color: #444;
}
h1{
font-size:1em;
text-align:center;
color: #eee;
letter-spacing:1px;
text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}
.nav-container{
width:100%;
margin-top:10px;
box-shadow: 0 2px 2px 2px black;
transition: all 0.3s linear;
}
.nav{
list-style-type:none;
margin:0;
padding:0;
}
li{
height:50px;
width: 300px;
position:relative;
background: linear-gradient(#292929, #242424);
display: inline;
}
ul{
float:left;
width: 100%;
}
a {
border-top: 1px solid rgba(255,255,255,0.1);
border-bottom: 1px solid black;
text-decoration:none;
display:inline;
height:100%;
width:300px;
line-height:50px;
color:#bbb;
text-transform: uppercase;
font-weight: bold;
border-left:5px solid transparent;
letter-spacing:1px;
transition: all 0.3s linear;
}
.active a{
color: #B93632;
border-left:5px solid #B93632;
background-color: #1B1B1B;
outline:0;
width: 200px;
}
li:not(.active):hover a{
color: #eee;
border-left: 5px solid #FCFCFC;
background-color: #1B1B1B;
}
span[class ^= "icon"]{
position:absolute;
left:20px;
font-size: 1.5em;
transition: all 0.3s linear;
}
Thank you very much for any suggestion.
Regards
Ryan
Apologies in advance if this is in no way what you meant, but I think all you want to do, basically, is set the list item display to inline-block. Something like this:
.nav-container li {
box-shadow: 0 2px 2px 2px black;
display: inline-block;
width: 300px;
}
You'd need to remove the box shadow and width from .nav-container and put it here instead.
You're obviously going to see a lot of issues on smaller screens if that's all you do, but maybe that gets you started?
I'm using UberGallery and am trying to add facebook like button to jQuery colorbox. As far as I get is here:
(You can see the top of fb plugin)
Then if I press ctrl+f, write test(as I made <div id="extra-info">test</div>) and press enter I get normal view as I want to:
Question is: What do I need to change in css to make colorbox stretch at the beggining (on colorbox OnComplete function)?
colorbox.css (it's UberGallerys default one(nothing changed))
/*
Colorbox Core Style:
The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}
/*
User Style:
Change the following styles to modify the appearance of Colorbox. They are
ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:url(images/overlay.png) repeat 0 0;}
#colorbox{outline:0;}
#cboxTopLeft{width:21px; height:21px; background:url(images/controls.png) no-repeat -101px 0;}
#cboxTopRight{width:21px; height:21px; background:url(images/controls.png) no-repeat -130px 0;}
#cboxBottomLeft{width:21px; height:21px; background:url(images/controls.png) no-repeat -101px -29px;}
#cboxBottomRight{width:21px; height:21px; background:url(images/controls.png) no-repeat -130px -29px;}
#cboxMiddleLeft{width:21px; background:url(images/controls.png) left top repeat-y;}
#cboxMiddleRight{width:21px; background:url(images/controls.png) right top repeat-y;}
#cboxTopCenter{height:21px; background:url(images/border.png) 0 0 repeat-x;}
#cboxBottomCenter{height:21px; background:url(images/border.png) 0 -29px repeat-x;}
#cboxContent{background:#fff; overflow:hidden;}
.cboxIframe{background:#fff;}
#cboxError{padding:50px; border:1px solid #ccc;}
#cboxLoadedContent{margin-bottom:28px;}
#cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
#cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
#cboxLoadingOverlay{background:url(images/loading_background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;}
/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}
#cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
#cboxPrevious{position:absolute; bottom:0; left:0; background:url(images/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxPrevious:hover{background-position:-75px -25px;}
#cboxNext{position:absolute; bottom:0; left:27px; background:url(images/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxNext:hover{background-position:-50px -25px;}
#cboxClose{position:absolute; bottom:0; right:0; background:url(images/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxClose:hover{background-position:-25px -25px;}
/*
The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
when an alpha filter (opacity change) is set on the element or ancestor element. This style is not applied to or needed in IE9.
See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}
colorboxScripts.php (changed a little bit)
<script type="text/javascript" src="<?php echo $path; ?>"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a[rel='colorbox']").colorbox({maxWidth: "90%", maxHeight: "90%", opacity: ".5",
onComplete: function() {
$("#cboxContent").append('<div id="extra-info">test<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&width&layout=standard&action=like&show_faces=true&share=true&height=80&appId=673146712707892" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:80px;" allowTransparency="true"></iframe></div>');
}
});
});
</script>
style.css (changed a little bit)
/* -------------------------------------------------------------------------- */
/* -----| GENERAL |---------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
html {
background-color: #222;
font-size: 100%;
}
body {
color: #333;
font-family: Tahoma, Helvetica, Arial, sans-serif;
font-size: .8em;
}
#galleryWrapper {
background-color: #FFF;
margin: 20px auto;
padding: 3px;
width: 1000px;
}
h1 {
background-color: #000;
color: #FFF;
font-size: 1.6em;
font-weight: bold;
margin: 0 0 3px;
padding: 8px;
}
#galleryListWrapper {
/* NULL */
}
/* -------------------------------------------------------------------------- */
/* -----| GALLERY LIST |----------------------------------------------------- */
/* -------------------------------------------------------------------------- */
#galleryList {
margin: 0;
padding: 0 4px;
}
#galleryList li {
display: inline-block;
float: left;
list-style: none;
margin: 5px 5px;
padding: 0;
}
#galleryList li a {
background-color: #000;
border: 4px solid #DDD;
display: block;
padding: 1px;
}
#galleryList li a:hover {
border-color: #DA8600;
}
#galleryList li a img {
border: none;
}
/* -------------------------------------------------------------------------- */
/* -----| GALLERY FOOTER |--------------------------------------------------- */
/* -------------------------------------------------------------------------- */
#galleryFooter {
background-color: #000;
color: #999;
margin-top: 3px;
padding: 8px;
}
#credit {
float: right;
font-size: .95em;
margin: 4px 0;
}
#galleryFooter #credit a {
color: #999;
}
#galleryFooter #credit a:hover {
color: #DA8600;
}
/* ---------------------------------------- */
/* ----| PAGINATION |-------------------- */
/* ---------------------------------------- */
#galleryPagination {
color: #FFF;
float: left;
font-size: .95em;
margin: 0 !important;
padding: 0 !important;
text-align: center;
}
#galleryPagination li {
border: 1px solid transparent;
display: block;
float: left;
list-style: none;
margin-right: 1px;
}
#galleryPagination li:hover {
background-color: #FFF;
}
#galleryPagination li.title {
background: transparent url(../../page_white_stack.png) no-repeat left center;
border: 1px solid transparent;
font-weight: normal;
padding: 3px 6px 3px 22px;
}
#galleryPagination li a, #galleryPagination li a:visited {
color: #FFF;
display: block;
padding: 3px 6px;
text-decoration: none;
}
#galleryPagination li:hover a {
color: #000;
}
#galleryPagination li.current {
background-color: #DA8600;
color: #000;
font-weight: bold;
padding: 3px 6px;
}
#galleryPagination li.inactive {
background-color: transparent;
color: #999;
border: 1px solid transparent;
display: block;
padding: 3px 6px;
}
/* ---------------------------------------- */
/* ----| SYSTEM MESSAGES |--------------- */
/* ---------------------------------------- */
#systemMessages {
margin: 0;
}
#systemMessages li {
background-color: #DDD;
color: #000;
line-height: 1.4em;
list-style: none;
margin-bottom: 6px;
padding: 5px;
text-align: center;
text-shadow: none;
}
#systemMessages li.notice {
background-color: #DDD;
color: #FFF;
}
#systemMessages li.success {
background-color: #070;
color: #FFF;
}
#systemMessages li.error {
background-color: #DA8600;
}
/* ---------------------------------------- */
/* ----| MISCELLANEOUS |----------------- */
/* ---------------------------------------- */
#errorMessage {
background-color: #FFF;
display: block;
line-height: 1.4em;
margin: 20px;
padding: 20px;
text-align: center;
}
#cboxWrapper {
text-shadow: none !important;
}
#cboxCurrent {
display: none !important;
}
#cboxTitle {
font-size: 1em !important;
}
#extra-info {
position: relative; display: inline-block; bottom:4px; left:0; text-align:center; width:100%; color:#949494;
}
P. S. Yes I have read and tried these threads:
Adding div below images in colorbox
Facebook like button and colorbox
I'm using a plugin for drop down menu. The link for plugin is here.. I want to add this code, into already made html code, but first I wanted to tested. So, far it all works fine until I try to make two copies of widget and make them appear side by side. The default is for input element to appear in-line but the plugin css is pushing it down turning into a single column (stacked) I don't want this. Here is HTML code.
HTML
<head>
<script type="text/javascript" src="lib/jquery-1.2.6.js"></script>
<script type="text/javascript" src="lib/jquery.mcdropdown.js"></script>
<!---// load the mcDropdown CSS stylesheet //--->
<link type="text/css" href="css/jquery.mcdropdown.css" rel="stylesheet" media="all" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
</head>
<body>
<ul id="categorymenu" class="mcdropdown_menu">
<li rel="1">
Arts & Humanities
<ul>
<li rel="2">
Photography
<ul>
<li rel="3">
3D
</li>
<li rel="4">
Digital
</li>
</ul>
</li>
<li rel="5">
History
</li>
<li rel="6">
Literature
</li>
</ul>
</li>
<li rel="7">
Business & Economy
</li>
<li rel="8">
Computers & Internet
</li>
<li rel="9">
Education
</li>
<li rel="11">
Entertainment
<ul>
<li rel="12">
Movies
</li>
<li rel="13">
TV Shows
</li>
<li rel="14">
Music
</li>
<li rel="15">
Humor
</li>
</ul>
</li>
<li rel="10">
Health
</li>
</ul>
<div class="test"> <input type="text" class="category" name="category" id="category" value="" />
<input type="text" class="category" name="category" id="category_1" value="" /></div>
JAVASCRIPT
<script>
$(document).ready(function (){
$("#category").mcDropdown("#categorymenu");
$("#category_1").mcDropdown("#categorymenu");
});
</script>
</body>
</html>
CSS PLUGIN
/*
styles for the psuedo-select box
*/
div.mcdropdown {
position: absolute;
border: 1px solid #8e9daa;
padding: 1px;
display: -moz-inline-block;
display: inline-block;
width: 408px;
height: 14px;
padding: 2px;
}
/* style either the input or div where the plug-in is attached to */
div.mcdropdown input,
div.mcdropdown div {
position: absolute;
background-color: #fff;
left: 0;
top: 0;
width: 98%;
border: 0;
padding: 2px 0 0 3px;
font: 11px Arial, Helvetica, sans-serif;
}
div.mcdropdown a {
position: absolute;
right: 1px;
top: 1px;
background: transparent url(../images/mcdropdown/mcdd_select_button_sprite.gif) no-repeat top left;
display: -moz-inline-block;
display: inline-block;
height: 16px;
width: 15px;
text-decoration: none;
font-size: 0pt;
z-index: 2;
outline: 0;
}
div.mcdropdown a:hover, div.mcdropdown a:focus {
background-position: 0% -16px;
}
div.mcdropdown a:active {
background-position: 0% -32px;
outline: none; /* hide dotted outline in Firefox */
}
div.mcdropdownDisabled {
background-color: #e1e0e0;
filter:alpha(opacity=75);
-moz-opacity: 0.75;
opacity: 0.75;
-khtml-user-select: none;
-o-user-select: none;
-moz-user-select: none;
-moz-user-focus: ignore;
-moz-user-input: disabled;
}
div.mcdropdownDisabled input {
cursor: default;
}
div.mcdropdownDisabled a:hover, div.mcdropdownDisabled a:focus {
background-position: 0 0;
cursor: default;
}
/*
styles for the dropdown menu
*/
ul.mcdropdown_menu {
display: none;
margin: 0px;
padding: 0px;
list-style-type: none;
/* float so we can calculate the size of the columns */
float: left;
clear: both;
z-index: 10000;
-khtml-user-select: none;
-o-user-select: none;
-moz-user-select: none;
-moz-user-focus: ignore;
-moz-user-input: disabled;
}
ul.mcdropdown_menu ul {
display: none;
font: 11px Arial, Helvetica, sans-serif;
/* float so we can calculate the size of the columns */
/*
float: left;
*/
}
/* -- Sub-Menus -- */
ul.mcdropdown_menu ul {
position: absolute;
list-style-type: none;
margin: 0px;
margin-left: 30px;
padding: 0px;
z-index: 10000;
}
ul.mcdropdown_menu ul li {
margin: 0px;
min-width: 150px;
_width: 150px; /* ie6 min-width hack */
}
/* color schema */
ul.mcdropdown_menu {
/*
height: 19px;
*/
height: auto;
background-color: #e1e0e0;
padding: 5px 5px;
/* define font here for IE6 */
font: 11px Arial, Helvetica, sans-serif;
}
ul.mcdropdown_menu li {
padding: 2px 20px 2px 6px;
/* this is needed to ensure that all browsers have the same line-height--fixes issues in Chrome (Mac) and IE10 */
line-height: 14px;
}
/* we don't use "ul.mcdropdown_menu > li" here so that IE6 knows how to style the root level */
ul.mcdropdown_menu li.mc_root {
cursor: pointer;
white-space: nowrap;
color: #666;
border-top: 1px solid #fff;
padding: 2px 20px 2px 6px;
margin: 0 10px;
}
ul.mcdropdown_menu > li.mc_endcol {
border-bottom: 1px solid #fff;
}
/* this is for IE6 only */
ul.mcdropdown_menu li.mc_hover {
background-color: #ccc !important;
}
ul.mcdropdown_menu > li:hover {
border-top: 1px solid #999;
background-color: #999 !important;
color: #fff;
}
ul.mcdropdown_menu > li:hover.mc_endcol {
border-bottom: 1px solid #999;
}
ul.mcdropdown_menu > li:hover + li:not(.mc_firstrow) {
border-top: 1px solid #999;
}
ul.mcdropdown_menu li.mc_parent {
padding-right: 20px !important;
background: url(../images/mcdropdown/mcdd_icon_normal.gif) no-repeat 100% 50%;
}
ul.mcdropdown_menu li:hover.mc_parent {
background: #999 url(../images/mcdropdown/mcdd_icon_hover.gif) no-repeat 100% 50% !important;
color: #fff !important;
}
ul.mcdropdown_menu ul {
background: #f0f0f0;
/* add a slight border for better visualization of deep menus */
border: 1px solid #d0d0d0;
padding-bottom: 10px;
/* IE 6/7 will bleed through the background color if we don't set the visibility to hidden */
visibility: hidden;
}
ul.mcdropdown_menu ul li {
background: #f0f0f0;
padding-left: 16px !important;
border-top: 1px solid #fff;
color: #666;
white-space: nowrap;
}
ul.mcdropdown_menu ul li.mc_firstrow {
border-top: 1px solid #f0f0f0;
}
ul.mcdropdown_menu ul li.mc_endcol {
border-bottom: 1px solid #fff;
}
ul.mcdropdown_menu ul li:hover {
background-color: #d6d6d6;
border-top: 1px solid #dedede;
color: #666;
}
ul.mcdropdown_menu ul li.mc_endcol:hover {
border-bottom: 1px solid #dedede;
}
ul.mcdropdown_menu ul li:hover + li:not(.mc_firstrow) {
border-top: 1px solid #dedede;
}
/*
* drop down shadows
*/
div.mcdropdown_shadow {
display: none;
position: absolute;
margin: 3px 0 0 3px;
/* for IE6, we use just a square transparent image */
background: #000;
filter :alpha(opacity=33);
}
/* ie6 ignores this selector */
html>body div.mcdropdown_shadow {
/* let's use a transparent PNG */
margin: 5px 0 0 5px;
padding: 5px 0 0 5px;
background: transparent url(../images/mcdropdown/shadow.png) right bottom no-repeat !important;
/* remove the filter for IE7 */
filter: none;
}
/*
* styles for the dropdown menu
*/
/* autocomplete styles */
ul.mcdropdown_autocomplete {
display: block;
position: absolute;
height: auto;
max-height: 210px;
overflow-x: hidden;
overflow-y: auto;
clear: both;
padding: 5px 10px;
background-color: #e1e0e0;
z-index: 10000;
margin: 0px;
list-style-type: none;
width: 392px;
font: 11px Arial, Helvetica, sans-serif;
}
ul.mcdropdown_autocomplete ul {
display: none;
list-style-type: none;
margin: 0px;
padding: 0px;
}
ul.mcdropdown_autocomplete ul li {
margin: 0px;
}
ul.mcdropdown_autocomplete li {
display: block;
font: 11px Arial, Helvetica, sans-serif;
cursor: pointer;
white-space: nowrap;
color: #666;
border-top: 1px solid #fff;
padding: 2px 26px 2px 6px;
}
ul.mcdropdown_autocomplete li.mc_endcol {
border-bottom: 1px solid #fff;
}
ul.mcdropdown_autocomplete li.mc_parent {
padding-right: 20px !important;
background: url(../images/mcdropdown/mcdd_icon_normal.gif) no-repeat 100% 50%;
}
ul.mcdropdown_autocomplete li.mc_hover {
border-top: 1px solid #999;
background-color: #999 !important;
color: #fff;
}
ul.mcdropdown_autocomplete li.mc_hover_parent {
background: #999 url(../images/mcdropdown/mcdd_icon_hover.gif) no-repeat 100% 50% !important;
color: #fff !important;
}
Things I have tried that Failed
.category {
float: left;
display: block;
}
#category_1 {
margin-left: 20px; /* or space you want..*/
}
<style>
#category, #category_1{
display: inline;
}
</style>
Please guide me. Thanks.
Add this to your css:
div.test > div {
float: left;
width: 408px;
margin-right: 20px;
}
According to the plugin page:
NOTE: The initial element that you apply the plug-in to is destroyed
and replaced with a new input element with the same id attribute.
While the mcDropdown() method does not destroy the jQuery chain, it
does effectively return a "dirty" reference (since the original
element no longer exists.) Because of this, you'll want to make sure
that the mcDropdown() method is the last call in your chain. Also, if
you plan on caching a reference to the element, you will need to
create the cached instance after you initiated the widget.
Honestly I'm not even sure if that's related.
But your code (albeit not functioning as advertised) is lining up the way you want when I look at it.
Here's a fiddle for you to see what I see.
Keep in mind of course that I'm not sure why it's not functioning properly. I put it on my desktop and replicated the whole example as-is and still nothing. But the input boxes are nice and neat :)
I did notice you left off the jquery.bgiframe.js file but I don't think that's necessary.