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.
Related
I am building a vertical timeline as a < ul > with the < li >s as events. This is the intent:
I've customized the bullets easily enough, and I made the vertical line with a background-gradient; the one thing I haven't been able to do is terminate the vertical line at top and bottom.
So far, it looks like this:
My SCSS code:
ul.timeline {
list-style: none;
color: red;
font-size: .8em;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+5,d8d8d8+6,d8d8d8+7,ffffff+8,ffffff+100 */
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(left, #ffffff 0%, #ffffff 1px, #d8d8d8 2px, #d8d8d8 3px, #ffffff 4px, #ffffff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #ffffff 0%,#ffffff 1px, #d8d8d8 2px, #d8d8d8 3px, #ffffff 4px,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #ffffff 0%,#ffffff 1px, #d8d8d8 2px, #d8d8d8 3px, #ffffff 4px,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
background-position: 29px 0;
li {
&::before {
content: "\26AB";
font-size: 1.3em;
color: #d8d8d8;
display: inline-block;
width: 1em;
margin-left: -1em;
vertical-align: middle;
}
a {
color: black;
text-decoration: underline;
}
}
}
My HTML code:
<ul class="timeline">
<li>asd as</li>
<li>werwer we</li>
</ul>
I know I can scrap the whole custom-bullet and background-gradient css and do this with background-images, I was just hoping to find a css-only solution.
You can use pseudo-elements for this, one for circle and other one for the line, and :not(:last-child) so you don't set line on last element.
ul {
list-style: none;
}
li {
position: relative;
padding: 10px;
}
li a {
color: gray;
}
li:before {
content: '';
width: 16px;
height: 16px;
border-radius: 50%;
background: #D8D8D8;
position: absolute;
left: -15px;
top: 50%;
transform: translateY(-40%);
}
li:not(:last-child):after {
content: '';
width: 2px;
height: 100%;
background: #D8D8D8;
position: absolute;
left: -8px;
top: 50%;
}
<ul class="timeline">
<li>asd as</li>
<li>werwer we</li>
<li>werwer we</li>
</ul>
Method using background-gradient...
ul.timeline {
list-style: none;
color: red;
font-size: .8em;
position: relative;
}
.timeline::before {
position: absolute;
content: "";
display: block;
height: 80px;
width: 30px;
top: 6px;
left: 0;
background: radial-gradient(circle, grey 20%, transparent 20%);
background-size: 50px 25px;
}
.timeline::after {
position: absolute;
content: "";
display: block;
top: 8px;
left: 24px;
height: 70px;
width: 1px;
background: grey;
}
.timeline li {
padding: .5em;
}
a {
color: black;
text-decoration: underline;
}
<ul class="timeline">
<li>asd as</li>
<li>werwer we</li>
<li>werwer we</li>
</ul>
This is my first time building a responsive website and so far so good. But the problem right now is that it's working fine on google chrome (tested on phone and toggle device mode) but not on Firefox.
If you open this in device mode you can see what I mean (Firefox).
Anyone know what the problem is?
I don't think the html code is necessary and the css code. Cause I think the problem lies in the first row code, but just in case I put the css code up.
EDIT: in 320 x 480 pixels
CSS:
#media only screen and (min-width: 320px) and (orientation:portrait){ /*Mobiel portrait modus*/
html, body
{
margin: 0;
font-family: arial;
height: 100%;
}
.link
{
color: inherit;
text-decoration: none;
}
.top
{
position: fixed;
z-index:9999;
background: #80c217; /* Old browsers */
background: -moz-linear-gradient(top, #80c217 0%, #80c217 37%, #80c217 40%, #a1d54f 66%, #7cbc0a 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#80c217), color-stop(37%,#80c217), color-stop(40%,#80c217), color-stop(66%,#a1d54f), color-stop(100%,#7cbc0a)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #80c217 0%,#80c217 37%,#80c217 40%,#a1d54f 66%,#7cbc0a 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #80c217 0%,#80c217 37%,#80c217 40%,#a1d54f 66%,#7cbc0a 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #80c217 0%,#80c217 37%,#80c217 40%,#a1d54f 66%,#7cbc0a 100%); /* IE10+ */
background: linear-gradient(to bottom, #80c217 0%,#80c217 37%,#80c217 40%,#a1d54f 66%,#7cbc0a 100%); /* W3C */
width: 100%;
height: 200px;
}
h1, h2
{
display: inline;
}
.menu
{
width: 70px;
float:right;
margin-right: -220px;
}
h1
{
font-size: 30px;
}
h2
{
font-size: 18px;
}
.logo
{
float:right;
width: 150px;
padding-top: 75px;
padding-right: 75px;
}
.title
{
float:left;
padding-left: 75px;
padding-top: 75px;
}
.navbar
{
margin-top: 199px;
position: fixed;
background-color: black;
color:white;
width: 100%;
height: 250px;
padding-top: 5px;
padding-bottom: 15px;
overflow:hidden;
z-index: 200;
}
.nav
{
list-style-type: none;
margin-left: -40px;
margin-top: -4px;
}
.nav li
{
padding-top: 5px;
font-size: 40px;
text-align: center;
border-top:1px solid white;
}
.nav li:last-child
{
border-bottom:1px solid white;
}
.head2
{
font-size: 40px;
}
.links
{
text-align: left;
list-style-type:none;
padding-left: 50px;
padding-right: 50px;
}
.middle
{
text-align:center;
padding-top: 200px;
position:relative;
background-color: #ccd3c3;
width: 100%;
height: 950px;
font-size: 30px;
overflow: hidden;
padding-bottom: 50px;
}
.middlemachtiging
{
text-align:center;
padding-top: 200px;
position:relative;
background-color: #ccd3c3;
width: 100%;
height: 710px;
font-size: 30px;
overflow: hidden;
padding-bottom: 50px;
}
.middleprijzen
{
text-align:center;
padding-top: 200px;
position:relative;
background-color: #ccd3c3;
width: 100%;
height: 1150px;
font-size: 30px;
overflow: hidden;
padding-bottom: 50px;
}
.text
{
text-align: left;
padding-left: 50px;
padding-right: 50px;
}
.auto
{
width: 100%;
overflow: hidden;
}
footer
{
overflow: hidden;
background: #9ffe62;
color:black;
width:100%;
height:150px;
position: relative;
text-align: center;
}
footer p
{
padding-top: 45px;
}
}
.pricetable
{
font-size: 30px;
}
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
I have a dropdown menu on the top of a page like so:
CSS:
div#navwrapper {
position: relative;
clear: both;
width: 100%;
height: 35px;
line-height: 35px;
letter-spacing: 1px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(241,241,241,1) 50%, rgba(225,225,225,1) 51%, rgba(246,246,246,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(50%,rgba(241,241,241,1)), color-stop(51%,rgba(225,225,225,1)), color-stop(100%,rgba(246,246,246,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */
}
div#coachnavigation {
width: 990px;
margin: 0 auto;
font-weight: bold;
}
#coachnavigation .firstli {
background-image: url('../coach/images/logo_tsa.png');
background-repeat: no-repeat;
text-align: right !important;
padding-left: 35px;
}
#coachnavigation .down {
background-image: url('../images/button_down.png');
background-repeat: no-repeat;
background-position: 95% 50%;
padding-right: 26px;
}
div#searchbar {
clear: both;
float: left;
width: 975px;
height: 28px;
line-height: 28px;
background-color: #164a98;
padding-left: 15px;
color: #fff;
}
#searchbar a {
color: #fff;
}
#box
{
line-height: 32px;
}
#box .field
{
background: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0%, #FEFFFE),
color-stop(100%, #BDBDBD)
);
height: 20px;
margin: 0px;
-webkit-border-radius: 25px;
}
#box .field input[type=text]
{
padding: 2px 2px 2px 25px;
border: 0;
-webkit-border-top-left-radius: 25px;
-webkit-border-bottom-left-radius: 25px;
margin: 0;
outline: 0;
width: 144px;
height: 20px;
float: left;
background: url('images/magnifier.png') 7px 5px no-repeat;
border: 1px solid #333333;
color: #333333;
}
#box .field input[type=submit]
{
float: left;
background: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(100%, #C6C6C6),
color-stop(0%, #8F8F8F)
);
border: 1px solid #606060;
width: 60px;
height: 26px;
padding: 2px 0 2px 0;
-webkit-border-top-right-radius: 25px;
-webkit-border-bottom-right-radius: 25px;
margin: 0 0 0 -1px;
opacity: 0.9;
cursor: pointer;
text-shadow: 1px 1px 0 #DBDBDB;
}
.coachnavmenu>li>ul>li>ul>li { width: 400px; }
.coachnavmenu,
.coachnavmenu ul,
.coachnavmenu li
{
padding: 0px;
margin: 0px;
z-index: 2;
text-align: right;
}
.coachnavmenu > li
{
float: left;
}
.coachnavmenu li
{
list-style-type: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: 30px;
letter-spacing: 0px;
color: #333333;
border-right: 1px inset #f6f6f6;
padding: 5px 12px 0px 12px;
}
.coachnavmenu > li li
{
list-style-type: none;
text-align: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
border: 1px solid #f6f6f6;
color: #333333;
background-color: #f6f6f6;
padding: 0 20px 0 4px;
}
.coachnavmenu ul
{
display: none;
position: absolute;
margin-left: -15px;
margin-top: -1px;
}
.coachnavmenu li:hover > ul
{
display: block;
}
.coachnavmenu ul.parent_hover
{
display: block;
}
.coachnavmenu a
{
color: #333333;
line-height: 100%;
width: 100%;
text-decoration: none;
}
.coachnavmenu li.greenhover:hover
{
color: #333333;
background-color: #7dc242;
}
.coachnavmenu li.hover,
.coachnavmenu a:hover
{
color: #333333;
background-color: #7dc242;
text-decoration: underline;
}
.coachnavmenu ul ul
{
margin-top: -30px;
left: 99%;
}
.coachnavmenu span
{
display: block;
}
.coachnavmenu
{
float: left;
width: 100%;
color: #000;
}
.endmenu
{
clear: left;
}
Live html can be found here, but I think the problem is the CSS.
http://www.buffalolacrosse.com/test.cfm
I am having issues getting this menu to display correctly. It works in chrome or firefox, just not in IE. The menus are collapsed (the li padding doesnt work) and the alignment is all out of whack on vertical alignment. Your help is appreciated.
I think you need to specify the line height of the a elements in your menu.
I tried by setting the
#coachnavigation a
{
line-height:30px;
}
and it appears fine to me.
also add z-index to your menu, so the dropdown wont appear behind some elements.
div#navwrapper {
z-index:999;
}
I am using "lightview" to show images in my website, the problem is that the image to much low, so I can see less than 50% of the photo
I that when I set Height to object in css, the image is lower
Here is my CSS code:
/****HTML Tags****/
body {
margin: 0;
padding: 0;
text-align: right;
direction: rtl;
font-family: Arial, Arial Hebrew, Helvetica, sans-serif;
}
::selection {
background: #BFBFBF;
}
header {
background-image: url('../g.png');
position: relative;
width: 100%;
background-repeat: no-repeat;
}
h1 {
font-family: Tahoma, Geneva, sans-serif;
text-decoration: underline;
color: #3852A4;
padding-bottom: 20px;
font-size: x-large;
}
/****General****/
.content {
width: 900px;
position: relative;
padding: 0px;
margin: 0 auto;
}
.main {
padding-right: 15px;
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U1ZTVlNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(229,229,229,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(229,229,229,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(229,229,229,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(229,229,229,1) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(229,229,229,1) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(229,229,229,1) 0%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#00ffffff',GradientType=0 ); /* IE6-8 */
background-size: Auto 200px;
background-repeat: repeat-x;
}
.details {
padding-bottom: 15px;
}
.details div {
margin-top: 10px;
}
#author {
font-weight: bold;
font-size: 16px;
}
#date {
font-size: 14px;
font-weight: bold;
}
/**Track Properties***/
#area {
font-size: 14px;
}
.track {
position: relative;
padding: 0px;
margin: 0 auto;
width: 980px;
width: 100%;
}
.trackdetails {
position: relative;
top: -51px;
line-height: 25px;
border-right: 2px solid #9e9e9e;
padding-right: 25px;
padding-bottom: 15px;
font-size: 14px;
margin: 0;
left: 50px;
width: 250px;
float: left;
}
.title {
color: #3852A4;
font-size: large;
text-decoration: underline;
font-family: Tahoma, Geneva, sans-serif;
margin-bottom: 20px;
}
.trackdetails #content {
z-index: 1111;
}
#map-image {
display: inline-block;
padding-top:-50px;
}
#trackdescription {
text-align: justify;
max-width: 650px;
width: 500px;
float: right;
padding-bottom:100px;
}
How can I fix this?
Qish for help.. thanks!
Here is live example: http://lawb.co.il/test.html
Try top: 10% !important; or margin-top: -n; n = image box height / 2 :P n isn't a css property :)