This is a structure of my site:
<html>
<body>
<embed flash>
<div id='dialog'>
<div width="500px" height="300px"><iframe/></div>
</div>
</body>
</html>
<style type="text/css">
.hide { display: none; }
.show { display: block; }
iframe { border: 0; }
#dialog { background-color: rgba(0,0,0,0.5); position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 100; }
#dialog .dialog-inside { width: 650px; -webkit-box-shadow: 0px 0px 30px 0px rgba(50, 50, 50, 0.54); -moz-box-shadow: 0px 0px 30px 0px rgba(50, 50, 50, 0.54); box-shadow: 0px 0px 30px 0px rgba(50, 50, 50, 0.54); margin: auto; overflow: hidden; border-radius: 5px; }
#dialog .dialog-inside .dialog-header { position: absolute; right: 0; right: 1px; top: 3px; }
#dialog .dialog-inside .dialog-header .close { width: 23px; height: 23px; background: url("Images/close.png"); background-position: 2px 2px; background-repeat: no-repeat; border: 1px solid transparent; cursor: pointer; }
#dialog .dialog-inside .dialog-header .close:hover { background-color: #fdc985; border-color: #4040B1; }
#dialog .dialog-inside .dialog-bottom-wrapper { position: absolute; bottom: 0px; right: 0; left: 0; height: 42px; background-color: #f8f8f8; }
#dialog .dialog-inside .dialog-bottom-wrapper .dialog-bottom { float: right; margin: 8px 5px; }
#dialog .dialog-inside .dialog-bottom-wrapper .dialog-bottom .btn { background: rgb(251,251,249); /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZiZmJmOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmM2YzZWYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, rgba(251,251,249,1) 0%, rgba(243,243,239,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(251,251,249,1)), color-stop(100%,rgba(243,243,239,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(251,251,249,1) 0%,rgba(243,243,239,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(251,251,249,1) 0%,rgba(243,243,239,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(251,251,249,1) 0%,rgba(243,243,239,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(251,251,249,1) 0%,rgba(243,243,239,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbfbf9', endColorstr='#f3f3ef',GradientType=0 ); /* IE6-8 */ border: 1px solid #7f9db9; color: #333333; cursor: pointer; display: inline-block; margin-left: .5em; padding: 0px 12px; text-align: center; line-height: 20px; outline: none; border-radius: 3px; }
#dialog .dialog-inside .dialog-bottom-wrapper .dialog-bottom .btn:hover { background-color: #d1d1d1; border-color: #d1d1d1; color: #111; moz-transition: background-position 0.1s linear; ms-transition: background-position 0.1s linear; o-transition: background-position 0.1s linear; text-decoration: none; transition: background-position 0.1s linear; webkit-transition: background-position 0.1s linear; outline: none; }
#dialog iframe { display: block; height: 114px; }
</style>
The problem is dialog I set it position: absolute, left, top, bottom, right: 0, in Chrome, IE work fine, it's rendered full screen with black background. Opera, the dialog has width and height is fix with div child => it doesn't have fullscreen. In firefox, it like the same, but I hover on dialog in Inspect Mode, it show black background.
Anyone has the problem like that?
Try adding
height: 100%;
width: 100%;
on #dialog
Related
I have the following button.
The CSS for the button above is this:
.cta-btn {
display: inline-block;
margin: 20px 0 0 20px;
color: #fff;
background-color: #FF8F1B;
background-image: linear-gradient(to right, #2ab3ff, #ff2d00);
box-shadow: 4px 5px 27px 4px rgba(220, 120, 184, 0.85);
font-size: 21px;
border-radius: 30px;
padding: 12px 21px;
font-family: Montserrat;
}
click me
I want the button to change gradient color smoothly when I hover over it. I do not want the gradient color to just snap onto the button when I hover it. This is my attempt at a smooth gradient color transition:
a.cta-btn:hover {
background-image: linear-gradient(to right,#FF2A67,#FF5D3A);
color: #fff;
box-shadow: 4px 5px 27px 4px rgba(255,45,45,0.85);
transition: background-image .3s linear;
transition: box-shadow .3s linear;
}
Any help is much appreciated.
Short answer, you can't using just background. However, you can achieve a similar effect using other elements (or pseudo elements) inside and fading them in on hover.
The following example uses two pseudo-elements as the two background states. On hover, we simply fade-in the new background giving a similar transition effect that would happen if gradients were transition-able.
NOTE: Not all browsers support transitions on pseudo elements, so you may need to add empty elements to achieve the same effect on older/unsupported browsers.
.cta-btn {
position: relative;
display: inline-block;
margin: 20px 0 0 20px;
color: #fff;
box-shadow: 4px 5px 27px 4px rgba(220, 120, 184, 0.85);
font-size: 21px;
border-radius: 30px;
overflow: hidden;
padding: 12px 21px;
font-family: Montserrat;
transition: box-shadow.3s ease-in-out;
text-decoration: none;
}
/* These are the two backgrounds, absolutely positioned to cover. */
.cta-btn::before,
.cta-btn::after {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
background-image: linear-gradient(to right, #2ab3ff, #ff2d00);
border-radius: 30px;
z-index: -1;
}
.cta-btn::after {
opacity: 0;
background-image: linear-gradient(to right,#FF2A67,#FF5D3A);
transition: opacity.3s ease-in-out;
}
/* On hover, transtiion the shadow of the anchor, and fade in the after element to show the new background. */
.cta-btn:hover {
box-shadow: 4px 5px 27px 4px rgba(255,45,45,0.85);
}
.cta-btn:hover::after {
opacity: 1;
}
click me
I have try all your answers, and i prefer this :
It's lightly and working perfect with only background-size property for the hover
and Work with Chrome IE and ff
Enjoy
.ex-button-0 {
transition: all ease 0.5s;
cursor: pointer;
padding: 10.5px 25px;
border: none;
border-radius: 35px;
background-image: linear-gradient(to left, black, blue, yellow, orange);
background-size:300%;
background-position: 0 0;
-webkit-appearance: none !important;
color: #000;
text-decoration:none
}
.ex-button-0:hover {
background-position: 100% 0;
color:#fff;
}
<a class="ex-button-0" href="">Exemple</a>
Though still able to see background decreasing and increasing in dimensions, this is partially possible using multiple background properties at same element, toggling background-size property.
.cta-btn {
color: #fff;
background: linear-gradient(to right, #2ab3ff, #ff2d00)
, linear-gradient(to right,#FF2A67,#FF5D3A);
background-size:100% 100%, 0% 0%;
background-origin: border-box, border-box;
box-shadow: 4px 5px 27px 4px rgba(220, 120, 184, 0.85);
font-size: 21px;
border-radius: 30px;
padding: 12px 21px;
font-family: Montserrat;
transition: background .3s linear;
}
.cta-btn:hover {
background-size:0% 0%, 100% 100%;
box-shadow: 4px 5px 27px 4px rgba(255,45,45,0.85);
}
click me
Probably a little late to the party, but I did manage to get a gradient transition into a solid color, which is what I needed for my project.
Here is the codepen for proof of concept.
https://codepen.io/etc-umbrella/pen/pXremq
<button class="ui-button">This is a button</button>
<h2>Creating an aninmated gradient background button using only SCSS. Worked pretty good. Didn't have to use any crazy javascript</h2>
.ui-button {
position: relative;
overflow: hidden;
border-radius: 6px;
cursor: pointer;
padding: 12px 18px;
border: 1px solid aqua;
background-color: white;
color: #ffffff;
font-family: raleway;
font-weight: bold;
font-size: 16px;
z-index: 1;
transition: all 800ms ease-in;
&:after{
content: '';
position: absolute;
left: -200%;
top: 0px;
width: 400%;
height: 100%;
background: rgb(33,209,159);
background: linear-gradient(45deg, rgba(33,209,159,1) 0%, rgba(34,44,64,1) 50%, rgba(21,65,153,1) 100%);
z-index: -1;
transition: all 800ms ease-in;
}
&:hover{
color: #ffffff;
background-color: #21d19f;
}
&:hover:after{
left: 0%;
opacity: 0;
}
}
#import url('https://fonts.googleapis.com/css?family=Montserrat:500');
html,body {
font-family: 'Montserrat', sans-serif;
margin:0;
padding:0;
background: linear-gradient(to right, #c9d6ff, #e2e2e2);
}
div {
height: 100vh;
display: flex;
align-items:center;
justify-content:center;
}
h1 {
font-size: 42px;
background-size:200%;
padding:15px;
border-radius:5px;
background-image: linear-gradient(to top left, #fe87c3 0%, #D38312 50%, #A83279 100%);
transition: .3s ease;
cursor: pointer;
}
h1:hover {
background-position: 90%;
color: #202020;
}
.home {
background-size: 200%
}**strong text**
Here is a demo
https://codepen.io/Mikeytown19/pen/aLpNZa
Best way to explain you what i mean you can see on the video. Please pay attention to the cursor. For the first time I'm trying to optimize my website for IE8. I hope there is way to fix this. Thanks in advance !
http://www.youtube.com/watch?v=V0wQGcZKTvc - IE8 on the left, chrome on the right
CSS
.toggle:before {
position: absolute;
top: 0;
left: 0;
content: '';
width: 100%;
height: 5px;
z-index: 1;
}
.toggle:after {
position: absolute;
bottom: 0;
left: 0;
content: '';
width: 100%;
height: 5px;
z-index: 1;
}
.toggle h3 {
position: relative;
width: 100%;
height: 100%;
cursor: pointer;
color: #864747;
font-size: 14px;
padding: 10px 2px 10px 2px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==); /* 1x1px transparent gif */
}
.toggle-cont {
display: none;
position: relative;
padding-bottom: 10px;
text-shadow: -1px -1px rgba(240,238,224,1), 1px 1px rgba(240,238,224,1);
}
.tshadow:before {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
content: '';
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Q2ZDRjOCIgc3RvcC1vcGFjaXR5PSIwLjkiLz4KICAgIDxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZDZkNGM4IiBzdG9wLW9wYWNpdHk9IjAuNzUiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Q2ZDRjOCIgc3RvcC1vcGFjaXR5PSIwLjI1Ii8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(top, rgba(214,212,200,0.9) 0%, rgba(214,212,200,0.75) 50%, rgba(214,212,200,0.25) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(214,212,200,0.9)), color-stop(50%,rgba(214,212,200,0.75)), color-stop(100%,rgba(214,212,200,0.25))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(214,212,200,0.9) 0%,rgba(214,212,200,0.75) 50%,rgba(214,212,200,0.25) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(214,212,200,0.9) 0%,rgba(214,212,200,0.75) 50%,rgba(214,212,200,0.25) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(214,212,200,0.9) 0%,rgba(214,212,200,0.75) 50%,rgba(214,212,200,0.25) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(214,212,200,0.9) 0%,rgba(214,212,200,0.75) 50%,rgba(214,212,200,0.25) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6d6d4c8', endColorstr='#40d6d4c8',GradientType=0 ); /* IE6-8 */
}
.toggle {
position: relative;
padding: 0 14px;
-moz-box-shadow: 0 0 3px rgba(68,68,68,0.3);
-webkit-box-shadow: 0 0 3px rgba(68,68,68,0.3);
box-shadow: 0 0 3px rgba(68,68,68,0.3);
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAMElEQVQIW2N89ODyfwYk8PXrNwZGZEGQADc3F0IQJgDSBFaJLAAWvH715H+QFmQAABDVHcpHFfxXAAAAAElFTkSuQmCC);
}
.tdivider {
display: none;
position: relative;
height: 1px;
width: 100%;
content: '';
background: rgba(170, 169, 162, 0.6);
border-bottom: 1px solid #f0eee0;
margin-bottom: 8px;
}
.tarrow {
position: absolute;
top: 14px;
right: 18px;
margin: 0 0 0 0;
width: 8px;
height: 14px;
content: '';
background: url("../img/arrow.png");
cursor: pointer;
}
DOM
<div class="toggle ">
<div class="tshadow">
<h3># Explanation</h3>
<div class="tarrow rotate2"></div>
<div class="tdivider"></div>
<div class="toggle-cont">
<ol>
<li>sadasd</li>
<li>asd</li>
<li>as</li>
<li>d</li>
<li>as</li>
</ol>
</div>
</div>
</div>
jQuery
$("#single-full-column div.tshadow h3").click(function(e) {
e.preventDefault();
$(this).parent().find($(".toggle-cont")).stop().slideToggle();
$(this).parent().find($(".tdivider")).stop().toggle("slow");
$(this).parent().find($(".tarrow")).stop().toggleClass("rotate1 rotate2");
});
..................................................................................
do not have IE8 to test, but I think what you can do is let your element with height and overall width, hope it helps
For some reason the Menu div is floating too high when the menu is up but when it closes it's perfect. I'm not really sure what to do to bring that Menu div down to touch the right side div under it
footer {
width: 100%;
position: absolute;
bottom: 0;
left: 0;
}
#footer-content {
display: none;
}
#footer-left {
width: 20%;
height: 145px;
float: left;
background-color: #52291c;/*#805f4c;*/
opacity: 0.8;
} #footer-left h3 {
width: 95%;
font-size: 20px;
font-weight: lighter;
margin-top: 95px;
opacity: 1;
text-align: right;
} #footer-left h3 a {
color: #fff;
text-shadow: 1px 1px #000;
text-transform: lowercase;
}
#footer-right {
width: 80%;
height: 145px;
float: right;
background-color: #B29F63; /*#B29F63*/
opacity: 0.3;
} #footer-right ul {
margin: 30px 15px;
font-size: 24px;
} #footer-right ul li a {
color: #52291c;
}
.doing-tricks {
width: 150px;
position: relative;
left: 21%;
top: 132px;
font-size: 24px;
z-index: 100;
} .doing-tricks a {
color: #52291c;
}
.toggle-footer {
width: 100px;
margin: 0px auto;
padding: 10px;
cursor: pointer;
color: #52291c;
text-align: center;
text-shadow: 1px 1px #fff;
background: #B29F63;
background: -moz-linear-gradient(top, rgba(254,255,255,1) 0%, rgba(178,159,99,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,255,255,1)), color-stop(100%,rgba(178,159,99,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(254,255,255,1) 0%,rgba(178,159,99,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(254,255,255,1) 0%,rgba(178,159,99,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(254,255,255,1) 0%,rgba(178,159,99,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(254,255,255,1) 0%,rgba(178,159,99,1) 100%); /* W3C */
opacity: 0.8;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
jFiddle: http://jsfiddle.net/rFdwr/1/
Make the .doing-tricks's position absoluteinstead of relative
.doing-tricks {
...
position: absolute;
...
}
Then you'll need to adjust the top positions of your texts inside the footer.
I am currently adding a navigation bar to a web page. But I am running into some css styling issues. The navigation menu bar is pushing the content below, leaving a huge gap in between and making it uneven. I took the precaution in leaving out anything that will mess with the bottom like margin bottom-padding but I am still getting the same result. How can I get the menu bar to not affect the content below? EXAMPLE
With the Navigation bar added:
Without navigation bar the contents below are even:
I have added the specific css rules that are causing the issue to devgrow.css:
<style>
#navigation {
position:relative;
top:-45px;
left:450px;
}
#au_title {
color: #FC821D;
font-size: 120%;
font-weight: bold;
left: 515px;
letter-spacing: 2px;
position: relative;
text-transform: uppercase;
top: -105px;
}
#searchInput {
left: 700px;
position: relative;
top: -180px;
}
#contentNav { color: #cfdae3; }
/* Dark Button CSS */
.buttonNav {
outline: 0;
padding: 5px 12px;
display: block;
color: #EBEBEB;
font-weight: bold;
text-shadow: 1px 1px #1f272b;
border: 1px solid #1c252b;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background: #232B30; /* old browsers */
background: -moz-linear-gradient(top, #3D4850 3%, #313d45 4%, #232B30 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#3D4850), color-stop(4%,#313d45), color-stop(100%,#232B30)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3D4850', endColorstr='#232B30',GradientType=0 ); /* ie */
box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* CSS3 */
-moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* Firefox */
-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* Safari, Chrome */
}
.buttonNav:hover {
color: #fff;
background: #4C5A64; /* old browsers */
background: -moz-linear-gradient(top, #4C5A64 3%, #404F5A 4%, #2E3940 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#4C5A64), color-stop(4%,#404F5A), color-stop(100%,#2E3940)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4C5A64', endColorstr='#2E3940',GradientType=0 ); /* ie */
}
.buttonNav:active {
background-position: 0 top;
position: relative;
top: 1px;
color: #fff;
padding: 6px 12px 4px;
background: #20282D; /* old browsers */
background: -moz-linear-gradient(top, #20282D 3%, #252E34 51%, #222A30 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#20282D), color-stop(51%,#252E34), color-stop(100%,#222A30)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#20282D', endColorstr='#222A30',GradientType=0 ); /* ie */
-moz-box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* Firefox */
-webkit-box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* Safari, Chrome */
box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* CSS3 */
}
/* Other stuff: */
.button-list { list-style: none; width: 100%; float: left; display: block; }
.button-list li { float: left; margin: 0 5px 0 0; }
.button-list li.search { padding-left: 18px; margin-left: 10px; position: relative; }
/* Search CSS: */
.search-input {
padding: 0 5px 0 22px;
border: 2px solid #DADADA;
height: 30px;
font-size: 12px;
line-height: 30px;
border-radius: 25px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
background: #FFF; /* old browsers */
}
.search-input:focus {outline: none;}
.search-submit {
width: 13px;
height: 13px;
border: none;
background: url(images/mag-glass.png) no-repeat;
display: block;
position: absolute;
left: 26px;
top: 10px;
text-indent: -9999em;
}
</style>
First i have say that the coding is really bad. For fixed that issue remove float from you button-list. Write like this :
.button-list {
list-style: none outside none;
overflow: hidden;
}
Hey now define overflow hidden in your css #contentArea id
as like this
#contentArea {
overflow: hidden;
}
Add style clear both in css of first content area
<div id="contentArea" style="clear:both">
All,
I am trying to build a top menu. For some reason, the li elements are not starting from the top of ul, there appears to be a small margin left at the top. Any explanation please.
jsfiddle: http://jsfiddle.net/K26TN/
HTML Code:
<div id="menu_bars">
<div id="main_bar">
<ul>
<li id="overview_tab" class="maintabs"><a id="text_overview_tab">Overview</a></li><li id="collar_tab" class="maintabs"><a id="text_collar_tab">Collar/ Neckline</a></li><li class="maintabs" id="body_tab"><a id="text_body_tab" >Body</a></li><li id="sleeves_tab" class="maintabs"><a id="text_sleeves_tab" >Sleeves</a></li>
</ul>
</div>
</div>
CSS CODE:
html {
height: 100%;
}
body#container {
position: relative;
width: 100%
min-width: 1280px;
height: 100%;
min-height: 700px;
background-color: rgba(255,255,255,0.8);
margin: 0 auto;
}
#menu_bars {
position: relative;
width: 90%;
height: 20%;
margin: 0 auto;
}
#main_bar {
float: left;
width: 78%;
height: 100%;
}
#main_bar ul {
float: left;
width: 100%;
height: 100%;
border-radius: 6px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.2);
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.maintabs {
display: inline-block;
width: 25%;
height: 100%;
list-style-type: none;
cursor: pointer;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(255,255,255)), color-stop(100%,rgb(237,237,237))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgb(255,255,255) 0%,rgb(237,237,237) 100%); /* Chrome10+,Safari5.1+ */
background: linear-gradient(top, rgb(255,255,255) 0%,rgb(237,237,237) 100%); /* W3C */
}
.maintabs:first-child {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px; }
.maintabs:last-child {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.maintabs a {
display: block;
height: 100%;
color: rgb(125,125,125);
line-height: 100%;
font-size: 0.8em;
text-decoration: none;
text-align: center;
text-shadow: 0px 1px 2px rgba(150,150,150,0.4);
-moz-transition: all 0.3s ease-in;
-webkit-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
#overview_tab a{
color: rgb(142,101,143);
text-shadow: 0px 1px 1px rgba(248,248,248,1);
}
.maintabs a:hover {
color: rgb(153,112,154);
text-shadow: 1px 1px 0 rgba(255,255,255,0.95);
}
Your <li> elements are set to display: inline-block, but their vertical-align property defaults to baseline. Specify this in your CSS:
#main_bar li {vertical-align: top}