http://www.pcdconsultancy.co.uk/
Im having trouble with my menu. It appears to have at least a couple of pixels bigger on Firefox than IE or chrome, can someone advise me what the appears to be? ive tried to tweak it but it seems to still be out.
My menu css is :
#headermenu { margin-top: 9px; margin-left: 80px;}
#headermenu ul {background: #efefef;
padding: 0px;
margin: 0;
list-style: none;
display: inline-table;
}
#headermenu ul li {
float: left;
background: -moz-linear-gradient(top, #999999 0%, #3a3a3a 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999999), color-stop(100%,#3a3a3a)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #999999 0%,#3a3a3a 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #999999 0%,#3a3a3a 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #999999 0%,#3a3a3a 100%); /* IE10+ */
background: linear-gradient(to bottom, #999999 0%,#3a3a3a 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#999999', endColorstr='#3a3a3a',GradientType=0 ); /* IE6-9 */
border-left: 1px solid #666666;
border-right: 1px solid #000;
border-top: 1px solid #999999;
border-bottom: 1px solid #999999;
}
#headermenu ul li:hover {}
#headermenu ul li a {display: block; color: #fff; text-decoration: none;font: 15px Arial; padding: 7px 20px; /* Old browsers */}
If you add a line-height declaration to the #headermenu ul li a element, that should fix the issue. See code below:
#headermenu ul li a {line-height: 15px;}
I guarantee that will fix your issue.
Thank you!
Related
In internet explorer we get a strraight line.in chrome we get distorted lines and rest of all the browsers have the desired case.which is shown by first image. Kindly tell some code to achieve this as i need it very badly. here is the code:
ul#tabs li a {
color: #a09b95;
padding: 6px 15px 7px 15px;
padding: 6px 15px 5px 15px\9; /* IE-only fix */
text-decoration: none;
display: block;
border-bottom: 1px solid #c9c3ba;
border-right: 1px solid #c9c3ba;
/* background-color: #ffffff; */
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f3efeb)); /* Saf4+, Chrome */
background: -webkit-linear-gradient(top, #ffffff, #f3efeb); /* Chrome 10+, Saf5.1+, iOS 5+ */
background: -moz-linear-gradient(top, #ffffff, #f3efeb); /* FF3.6+ */
background: -ms-linear-gradient(#FFFFFF, #F3EFEB); /* IE 8 */
background: -o-linear-gradient(top, #ffffff, #f3efeb); /* Opera 11.10+ */
background: linear-gradient(to bottom, #ffffff, #f3efeb); /* IE9+ */
-pie-background: linear-gradient(#FFFFFF, #F3EFEB); /* IE 6-7 via CSS3Pie */
behavior: url("http://ocw5.mit.edu/styles/pie/PIE.php");
}
ul#tabs li a.selected {
color: #b30838;
border-bottom: 1px solid #fff;
background-color: #fff;
background: none;
-pie-background: none;
behavior: url("http://ocw5.mit.edu/styles/pie/PIE.php");
}
/* Chrome/Safari-only CHP tab border fix */
#media screen and (-webkit-min-device-pixel-ratio:0) {
ul#tabs {
margin: 19px 0 -1px 0;
outline: 0;
}
}
Try this:
ul#tabs li {margin-bottom: -1px;}
I need to make a responsive navbar and I wanted to use something like this
http://getbootstrap.com/examples/justified-nav/
It is supposed to load like this
And when min-width reaches 768px it changes to this
But in my project it loads like this and it doesn't change at all
I used the styles from the example page (http://getbootstrap.com/examples/justified-nav/justified-nav.css)
This is what's inside the body of my html
<header>
<img id="logoss" src="images/logo.png">
<ul class="nav nav-justified">
<li class="active">Empresa</li>
<li class="divider-vertical"></li>
<li>Medios</li>
<li class="divider-vertical"></li>
<li>Acción</li>
<li class="divider-vertical"></li>
<li>Herramientas</li>
<li class="divider-vertical"></li>
<li>Staff-Sumate</li>
<li class="divider-vertical"></li>
<li>Contacto</li>
</ul></header>
and all of my style.css
* {
margin:0;
padding:0;
}
body {
background-color:#3b8476;
}
header {
height:200px;
margin: 0 auto;
max-width: 80%;
background-color:#fff;
background: #dddddd; /* Old browsers */
background: -moz-linear-gradient(top, #dddddd 0%, #ffffff 16%, #ffffff 82%, #dddddd 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dddddd), color-stop(16%,#ffffff), color-stop(82%,#ffffff), color-stop(100%,#dddddd)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #dddddd 0%,#ffffff 16%,#ffffff 82%,#dddddd 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #dddddd 0%,#ffffff 16%,#ffffff 82%,#dddddd 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #dddddd 0%,#ffffff 16%,#ffffff 82%,#dddddd 100%); /* IE10+ */
background: linear-gradient(to bottom, #dddddd 0%,#ffffff 16%,#ffffff 82%,#dddddd 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dddddd', endColorstr='#dddddd',GradientType=0 ); /* IE6-9 */
}
#logoss {
height:8em;
width:8em;
display:inline-block;
margin:2em;
}
/* from justified navbar example */
.nav-justified {
background-color: #eee;
border-radius: 5px;
border: 1px solid #ccc;
}
.nav-justified > li > a {
margin-bottom: 0;
padding-top: 15px;
padding-bottom: 15px;
color: #777;
font-weight: bold;
text-align: center;
border-bottom: 1px solid #d5d5d5;
background-color: #e5e5e5; /* Old browsers */
background-repeat: repeat-x; /* Repeat the gradient */
background-image: -moz-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%); /* FF3.6+ */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
background-image: -webkit-linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* Chrome 10+,Safari 5.1+ */
background-image: -o-linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* Opera 11.10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
background-image: linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* W3C */
}
.nav-justified > .active > a,
.nav-justified > .active > a:hover,
.nav-justified > .active > a:focus {
background-color: #ddd;
background-image: none;
box-shadow: inset 0 3px 7px rgba(0,0,0,.15);
}
.nav-justified > li:first-child > a {
border-radius: 5px 5px 0 0;
}
.nav-justified > li:last-child > a {
border-bottom: 0;
border-radius: 0 0 5px 5px;
}
#media (min-width: 768px) {
.nav-justified {
max-height: 52px;
}
.nav-justified > li > a {
border-left: 1px solid #fff;
border-right: 1px solid #d5d5d5;
}
.nav-justified > li:first-child > a {
border-left: 0;
border-radius: 5px 0 0 5px;
}
.nav-justified > li:last-child > a {
border-radius: 0 5px 5px 0;
border-right: 0;
}
}
There was something wrong with the version of bootstrap I'm using, I updated the file and worked just fine, thanks to everyone who tried to help
I had a problem concerning border-right in my menu. This is what it looks like:link I would like to have the border take up the whole blue bar, not extending below
it, but touching the edge at the top. how could I do this? my code is this:
#container #header #metaNavi{
height:58px;
background: #bbd4eb; /* Old browsers */
background: -moz-linear-gradient(top, #bbd4eb 0%, #76a8d6 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bbd4eb), color- stop(100%,#76a8d6)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #bbd4eb 0%,#76a8d6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #bbd4eb 0%,#76a8d6 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #bbd4eb 0%,#76a8d6 100%); /* IE10+ */
background: linear-gradient(to bottom, #bbd4eb 0%,#76a8d6 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bbd4eb', endColorstr='#76a8d6',GradientType=0 ); /* IE6-9 */
position:relative;
top:455px;
font-size:20px
}
#container #header #metaNavi ul{
padding:0;
margin:0;
list-style:none;
}
#container #header #metaNavi li{
display:inline-block;
padding:8px 25px 10px 10px;
margin:10px 10px 10px 10px;
color:#bf7a30;
font-family:Verdana;
font-variant:small-caps;
border-right: 1px solid #717171;
min-height:58px;
max-height:58px;
}
#container #header #metaNavi li:last{
border-right: none
My Html is:
<div id="metaNavi">
<ul>
<li id="active">Home</li>
<li>Wir über Uns</li>
<li>Dienstleistungen</li>
<li>Kontakt</li>
</ul>
demo here: http://jsfiddle.net/#&togetherjs=GA5vE7nrgv
you must edit this line #container #header #metaNavi li
add -> line-height: 55px;
remove -> padding: 8px 25px 10px 10px;
add -> padding: 0 25px 0 10px;
Try this CSS:
I removed the margin, adding padding to space along the x-axis and changed min/max-height to just height. Then targeted the active within the list-item so that it is a block level element at 100% width and 58 pixels height. The line-height on the list item, centers it vertically.
#metaNavi:before,
#metaNavi:after {
content: "";
display: table;
}
#metaNavi:after {
clear: both;
}
#metaNavi {
zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}
#container #header #metaNavi{
height:58px;
background: #bbd4eb; /* Old browsers */
background: -moz-linear-gradient(top, #bbd4eb 0%, #76a8d6 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bbd4eb), color-stop(100%,#76a8d6)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #bbd4eb 0%,#76a8d6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #bbd4eb 0%,#76a8d6 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #bbd4eb 0%,#76a8d6 100%); /* IE10+ */
background: linear-gradient(to bottom, #bbd4eb 0%,#76a8d6 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bbd4eb', endColorstr='#76a8d6',GradientType=0 ); /* IE6-9 */
position:relative;
top:455px;
font-size:20px
}
#container #header #metaNavi ul{
padding:0;
margin:0;
list-style:none;
}
#container #header #metaNavi li{
display:block;
float: left;
padding:0 20px;
color:#bf7a30;
font-family:Verdana;
font-variant:small-caps;
border-right: 1px solid #717171;
height:58px;
line-height: 58px;
}
#metaNavi ul li a{
display: block;
width: 100%;
height: 58px;
}
#container #header #metaNavi li:last{
border-right: none
}
#container #header #metaNavi li a{
color:#bf7a30;
text-decoration: none;
}
#container #header #metaNavi #active{
color:#333333;
font-weight:800;
}
I have the following links :
<div class="links">
Home
About Me
Contacts<span></span>
Contact Author
<div class="link">
</div>
</div>
with this css file:
.links {
height: 50px;
display: inline;
text-align: center;
padding: 0px 0px 0px 170px;
margin-right: 0px;
margin-top: 7px;
border: none;
line-height: 25px;
}
.links a {
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
color: black;
font-family: Calibri;
font-size: 13px;
text-decoration: none;
padding: 2px 10px;
border: 1px solid #ccc;
}
.links a span {
width: 0;
height: 0;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-top: 3px solid #555;
display: inline-block;
margin: 2px 7px;
}
I want the links to show in one line ie: [home] [contacts] [link3] etc
but currently its showing on seperate lines like:
[home][contacts]
[link3]
How can I get them on one line?
You've got display: block assigned to your <a> tags. That will put each one on their own line. Remove that, and they'll be on the same line.
I came across www.css3pie.com yesterday while looking for ways to get box shadow and border radius working in IE8. So far, it has helped out great but am racking my head trying to figure out why it won't work for the last part of the dev...the two tabs at the top. The gradient shows up in the non-active state, but is unchanged when the class 'current' is applied. The href is also changing how it's supposed to. Check out the following code:
<div class="nav1">
<ul>
<li <?php if ($thisPage=="Contact Us") echo "class=\"current\""; ?>>Contact Us</li>
<li <?php if ($thisPage=="Visit Us") echo "class=\"current\""; ?>>Visit Us</li>
</ul>
</div>
and it's being styled like so...
.nav1 ul {
margin:0px;
padding:0px;
list-style:none;
}
.nav1 ul li {
position: relative;
font-size:12px;
float:left;
margin-right:5px;
border: 1px solid #999999;
background-color: #fafafa;
border-radius: 5px 5px 0px 0px;
background: #f7f7f7; /* Old browsers */
background: -moz-linear-gradient(top, #f7f7f7 0%, #ccc9c9 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f7f7), color-stop(100%,#ccc9c9)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f7f7f7 0%,#ccc9c9 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f7f7f7 0%,#ccc9c9 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f7f7f7 0%,#ccc9c9 100%); /* IE10+ */
background: linear-gradient(top, #f7f7f7 0%,#ccc9c9 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#ccc9c9',GradientType=0 ); /* IE6-9 */
color:#868686;
text-shadow: 1px 1px #fafafa;
padding: 6px 30px;
behavior: url(inc/PIE.htc);
}
li.current{
position: relative;
border-radius: 5px 5px 0px 0px;
background: #e0e0e0; /* Old browsers */
background: -moz-linear-gradient(top, #e0e0e0 0%, #bab8b8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e0e0e0), color-stop(100%,#bab8b8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e0e0e0 0%,#bab8b8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e0e0e0 0%,#bab8b8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #e0e0e0 0%,#bab8b8 100%); /* IE10+ */
background: linear-gradient(top, #e0e0e0 0%,#bab8b8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0e0e0', endColorstr='#bab8b8',GradientType=0 ); /* IE6-9 */ text-shadow: 1px 1px #fafafa;
behavior: url(inc/PIE.htc);
}
.nav1 ul li a{
font-size:14px;
float:left;
color:#868686;
text-decoration:none;
}
.nav1 ul li a:hover{
color:#666666;
font-size:14px;
float:left;
color:#000000;
text-decoration:none;
}
.nav1 ul li.current a {
color: #000;
}
Since CSS PIE is going to handle the gradients for IE you can safely remove the filter: declaration. That may help.