I'm trying to have an underline when a link is hovered over. However, you'll notice that the underline doesn't sit flush with the line below it. Could someone explain or show me how to change this CSS to work so when the link is hovered, the 3px line sits on top of the 1px line spanning the page. Thanks
<!DOCTYPE html>
<html>
<head>
<style>
.menu {
font-family: "Helvetica Neue", verdana, arial;
position:fixed;
background:transparent;
width:100%;
top:100px;
left:0;
height:25px; /* decide on this as some stage */
padding: 0;
text-align:center;
font-size: 12px;
font-weight: 600; /* decide on this as some stage */
padding-top: 10px; /* decide on this as some stage */
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}
.ty-menu__items {
position: absolute;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width:100%;
text-align: center;
}
.ty-menu__item {
display: inline-block;
padding-right: 50px;
padding-left: 50px;
}
a:link, a:visited {
display: block;
width: 100%;
font-weight: light;
color: #494949;
background: transparent;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
background: transparent;
border-bottom: 3px solid #494949; /* decide on this as some stage */
color: #494949; /* decide on this as some stage */
}
</style>
</head>
<body>
<div class="menu">
<ul class="ty-menu__items">
<li class="ty-menu__item">home</li>
<li class="ty-menu__item">news</li>
<li class="ty-menu__item">contact</li>
<li class="ty-menu__item">about</li>
</ul>
</div>
</body>
</html>
I added a padding-bottom to your hover, which appears to sit the 3px line on top of the 1px as you intended.
a:hover, a:active {
padding-bottom:8px;
background: transparent;
border-bottom: 3px solid #494949; /* decide on this as some stage */
color: #494949; /* decide on this as some stage */
}
Updated JS Fiddle:
http://jsfiddle.net/rqu39zcf/1/
I changed it to this if I think I understand
.menu {
font-family: "Helvetica Neue", verdana, arial;
position:fixed;
background:transparent;
width:100%;
top:100px;
left:0;
height:35px; /* decide on this as some stage */
padding: 0;
text-align:center;
font-size: 12px;
font-weight: 600; /* decide on this as some stage */
padding-top: 10px; /* decide on this as some stage */
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}
.ty-menu__items {
position: absolute;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width:100%;
text-align: center;
}
.ty-menu__item {
display: inline-block;
padding-right: 50px;
padding-left: 50px;
}
a:link, a:visited {
display: block;
width: 100%;
font-weight: light;
color: #494949;
background: transparent;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
padding-bottom:1px;
background: transparent;
border-bottom: 3px solid #494949; /* decide on this as some stage */
color: #494949; /* decide on this as some stage */
}
namely I changed the .menu: height
Related
It is hard to learn "float" "overflow" "clear" and some other properties so please help me find good online websites to learn these properties ..
I opened some websites to make designs like them I found http://wix.com I admired its nav bar so i tried to make like it but i had a problem when mouse is over the il it is pushed down to show the top border how can I fix that
thanks and I am sorry for my weak English
body {
background-color: lightblue;
}
ul {
position: fixed;
list-style-type: none;
overflow: hidden;
top: 0px;
right: 0px;
width: 100%;
margin: 0px;
padding: 0px;
padding-top: 8px;
padding-bottom: 8px;
display: block;
background-color: #666666;
transition:background-color, 1s;
}
ul:hover {
background-color: #333;
}
il {
transition:border-top,1s;
float: left;
padding-right: 10px;
border-right: 1px solid white;
}
il:hover {
border-top:5px solid lightblue;
}
#navl {
font-family: Trebuchet MS’, Helvetica, sans-serif;
letter-spacing: 3px;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
pre{
font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace;
letter-spacing: 2px;
font-size: 30px;
text-align: center;
color: white;
margin-top: 150px;
}
#plans:link, #plans:visited {
background-color: white;
color: black;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: block;
border: 1px solid white;
border-radius: 30px;
margin: auto;
width: 110px;
padding-top: 20px;
padding-bottom: 20px;
font-size:20px;
font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace;
}
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul>
<il><a id="navl" href="index.html">Home</a></il>
<il><a id="navl" href="Plans.html">Plans</a></il>
<il><a id="navl" href="About.html">About</a></il>
<il><a id="navl" href="Contact.html">Contact Us</a></il>
</ul>
<pre>test</pre>
<a id="plans" href="plans.html">Plans</a>
</body>
</html>
The reason this happens is because the border adds height to the element. To correct it, you can either remove height from the main element or shift it up:
li:hover {
margin-top: -5px; //shifts the element up 5px
}
or you can have an invisible border as Teuta mentions that gets "covered up" by the new border.
At first, replace those il with li, and add this style to your li:
li {
border-top: 5px solid transparent;
}
And in ul, instead of padding-top:8px add padding-top:3px.
Here is the link with a little work around I did. I removed the padding top in ul. Changed the il to li. Because actually it is 'li' not 'il'. And I added a border top in li.
Here is the css code I changed.
ul:hover {
background-color: #666666;
}
li {
transition:border-top,1s;
float: left;
padding-right: 10px;
border-right: 1px solid white;
border-top:5px solid #666666;
}
li:hover {
border-top:5px solid lightblue;
}
https://jsfiddle.net/7x7dy3jt/
I want to change background color (from #333333 to #292929) and keep parent image after making hover event on my list items, my problem is the color doesn't change it still always as before
this is my code :
the part of my problem:
.footer li a:hover {
border-bottom: 1px solid #484848;
border-top: 1px solid #191919;
height: 30px;
line-height: 30px;
border-left: none;
border-right: none;
display: block;
background: #292929 url(http://s10.postimg.org/yejg5cted/widget_bg.jpg);
overflow:hidden;
width: 100%
}
All css code
.footer {
background: #333333 url(http://s10.postimg.org/yejg5cted/widget_bg.jpg);
height: 318px;
}
.footer_container {
width: 960px;
height: 318px;
margin: 0 auto;
}
.footer h1 {
font-size: 18px;
font-family: Kozuka Gothic Pro;
padding-top: 46px;
color: #FFF;
}
ul.ul_links {
width: 225px;
height: 237px;
margin-top: 19px;
}
ul.ul_links a {
color: #cccccc;
text-decoration: none;
font-size: 13px;
line-height: 31px;
}
ul.ul_links a::before {
content: url(http://s3.postimg.org/7bb9a1m4v/links.png);
padding-right: 11px;
padding-left: 8px;
}
.footer li a:hover {
border-bottom: 1px solid #484848;
border-top: 1px solid #191919;
height: 30px;
line-height: 30px;
border-left: none;
border-right: none;
display: block;
background: #292929 url(http://s10.postimg.org/yejg5cted/widget_bg.jpg);
overflow:hidden;
width: 100%
}
jsfiddle
intending results :
Hello there TH3 AWAK3NING, what you need to do is simply change the opacity of your background like so
jsFiddle : https://jsfiddle.net/py3uwpxn/11/
HTML
<div class="footer">
<div class="footer_container">
<div class="Links">
<ul class="ul_links">
<li >www.example.com</li>
<li >www.1stwebdesigner.com</li>
<li >www.labzip.com</li>
<li >www.labzip.com</li>
<li >www.samplelink.com</li>
<li >www.outgoinglink.com</li>
<li >www.link.com</li>
</ul>
</div>
</div>
</div>
CSS
.footer {
background: #333333 url(http://s10.postimg.org/yejg5cted/widget_bg.jpg);
height: 318px;
}
.footer_container {
width: 960px;
height: 318px;
margin: 0 auto;
}
.footer h1 {
font-size: 18px;
font-family: Kozuka Gothic Pro;
padding-top: 46px;
color: #FFF;
}
ul.ul_links {
width: 225px;
height: 237px;
margin-top: 19px;
}
ul.ul_links a {
color: #cccccc;
text-decoration: none;
font-size: 13px;
line-height: 31px;
}
ul.ul_links a::before {
content: url(http://s3.postimg.org/7bb9a1m4v/links.png);
padding-right: 11px;
padding-left: 8px;
}
.footer li a:hover {
border-bottom: 1px solid #484848;
border-top: 1px solid #191919;
height: 30px;
line-height: 30px;
border-left: none;
border-right: none;
display: block;
background: rgba(0,0,0,.1);
overflow:hidden;
width: 100%
}
Using the background: rgba it also allows you to tint the colour of the div which will look like you have changed the colour of the background :)
This will not be possible because the actual image is what defines the original color. What you would need to do in this case is create the image with a transparent background (so it only has the grid dots) then you would be able to change the background color behind it and see the effect you want.
Once you have your new image, set the following properties:
ul.ul_links a {
background: #333333 url(http://s10.postimg.org/yejg5cted/widget_bg.jpg);
}
.footer li a:hover {
background-color: #292929;
}
Here is an example that just needs the new transparent image to be added
Just remove the background image Url from .footer li a:hover and you are good.
.footer li a:hover {
border-bottom: 1px solid #484848;
border-top: 1px solid #191919;
height: 30px;
line-height: 30px;
border-left: none;
border-right: none;
display: block;
background-color: rgba(0,0,0,0.2); //Updated
overflow:hidden;
width: 100%
}
On the navigation bar, the link only works if I hover over the TEXT however it doesnt work if I hover underneath or above the text (between the 1 px horizontal lines and the text) here is a link to the jsfiddle http://jsfiddle.net/hp20wcrd/
<!DOCTYPE html>
<html>
<head>
<style>
.menu {
font-family: Verdana, Arial;
position:fixed;
background:transparent;
width:100%;
top:100px;
left:0;
height:25px; /* decide on this as some stage */
padding: 0;
text-align:center;
font-size: 12px;
font-weight: 600; /* decide on this as some stage */
padding-top: 10px; /* decide on this as some stage */
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}
.ty-menu__items {
position: absolute;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width:100%;
text-align: center;
}
.ty-menu__item {
display: inline-block;
padding-right: 50px;
padding-left: 50px;
}
a:link, a:visited {
display: block;
width: 100%;
font-weight: light;
color: #494949;
background: transparent;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
padding-bottom:7px; /* decide on this as some stage */
background: transparent;
border-bottom: 3px solid #9B9B9B; /* decide on this as some stage */
color: #9B9B9B; /* decide on this as some stage */
}
</style>
</head>
<body>
<div class="menu">
<ul class="ty-menu__items">
<li class="ty-menu__item">home</li>
<li class="ty-menu__item">news</li>
<li class="ty-menu__item">contact</li>
<li class="ty-menu__item">about</li>
</ul>
</div>
</body>
</html>
Try this (your a is not all clickable, you must create vertical full clickable on your a using padding)
CSS
.menu {
font-family: Verdana, Arial;
position:fixed;
background:transparent;
width:100%;
top:100px;
left:0;
height:35px; /* decide on this as some stage */
padding: 0;
text-align:center;
font-size: 12px;
font-weight: 600; /* decide on this as some stage */
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}
.ty-menu__items {
position: absolute;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width:100%;
text-align: center;
}
.ty-menu__item {
display: inline-block;
padding-right: 50px;
padding-left: 50px;
}
a:link, a:visited {
display: block;
width: 100%;
font-weight: light;
color: #494949;
background: transparent;
text-align: center;
text-decoration: none;
text-transform: uppercase;
padding: 10px 0px;
}
a:hover, a:active {
padding-bottom:7px; /* decide on this as some stage */
background: transparent;
border-bottom: 3px solid #9B9B9B; /* decide on this as some stage */
color: #9B9B9B; /* decide on this as some stage */
}
DEMO HERE
You can add padding in a element instead:
.menu {
font-family: Verdana, Arial;
position: fixed;
background: transparent;
width: 100%;
top: 100px;
left: 0;
height: 25px;
/* decide on this as some stage */
padding: 0;
text-align: center;
font-size: 12px;
font-weight: 600;
/* decide on this as some stage */
/* decide on this as some stage */
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
padding-bottom: 10px;
}
.ty-menu__items {
position: absolute;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
text-align: center;
}
.ty-menu__item {
display: inline-block;
padding-right: 50px;
padding-left: 50px;
}
a:link,
a:visited {
display: block;
width: 100%;
font-weight: light;
color: #494949;
background: transparent;
text-align: center;
text-decoration: none;
text-transform: uppercase;
padding-top: 10px;/*add padding top*/
padding-bottom: 10px;/*add padding bottom*/
}
a:hover,
a:active {
padding-bottom: 7px;
/* decide on this as some stage */
background: transparent;
border-bottom: 3px solid #9B9B9B;
/* decide on this as some stage */
color: #9B9B9B;
/* decide on this as some stage */
}
<div class="menu">
<ul class="ty-menu__items">
<li class="ty-menu__item">home
</li>
<li class="ty-menu__item">news
</li>
<li class="ty-menu__item">contact
</li>
<li class="ty-menu__item">about
</li>
</ul>
</div>
It's because you gave padding to the ul element and its parent, not the actual anchor, which is the "clickable" area. Something like this should work (with removing the extra padding on the ul element):
.ty-menu__item a {
padding: 8px 0 6px;
}
See it here:
.menu {
font-family: Verdana, Arial;
position:fixed;
background:transparent;
width:100%;
top:100px;
left:0;
height:32px; /* decide on this as some stage */
padding: 0;
text-align:center;
font-size: 12px;
font-weight: 600; /* decide on this as some stage */
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}
.ty-menu__items {
position: absolute;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width:100%;
text-align: center;
}
.ty-menu__item {
display: inline-block;
padding-right: 50px;
padding-left: 50px;
}
.ty-menu__item a {
padding: 8px 0 6px;
}
a:link, a:visited {
display: block;
width: 100%;
font-weight: light;
color: #494949;
background: transparent;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
padding-bottom:7px; /* decide on this as some stage */
background: transparent;
border-bottom: 3px solid #9B9B9B; /* decide on this as some stage */
color: #9B9B9B; /* decide on this as some stage */
}
<div class="menu">
<ul class="ty-menu__items">
<li class="ty-menu__item">home</li>
<li class="ty-menu__item">news</li>
<li class="ty-menu__item">contact</li>
<li class="ty-menu__item">about</li>
</ul>
</div>
http://jsfiddle.net/hp20wcrd/14/
I added padding for the anchor tag and dropped the padding-top on .menu
edit: i also added padding-bottom to the .menu to match your hover selector
.menu {
font-family: Verdana, Arial;
position:fixed;
background:transparent;
width:100%;
top:100px;
left:0;
height:25px; /* decide on this as some stage */
padding: 0;
text-align:center;
font-size: 12px;
font-weight: 600; /* decide on this as some stage */
padding-bottom:7px;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}
.ty-menu__items {
position: absolute;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width:100%;
text-align: center;
}
.ty-menu__item {
display: inline-block;
padding-right: 50px;
padding-left: 50px;
}
a:link, a:visited {
display: block;
width: 100%;
font-weight: light;
color: #494949;
background: transparent;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
a {
padding:7px 0px;
}
a:hover, a:active {
background: transparent;
border-bottom: 3px solid #9B9B9B; /* decide on this as some stage */
color: #9B9B9B; /* decide on this as some stage */
}
Put the padding on the a tags, and let those take up the space. The li tags will simply take the size of the a tags.
I put together this jsfiddle (I commented out what wasn't needed): http://jsfiddle.net/g5o9dun9/
.menu {
font-family: Verdana, Arial;
position:fixed;
background:transparent;
width:100%;
top:100px;
left:0;
/* height:25px; */ /* decide on this as some stage */
padding: 0;
text-align:center;
font-size: 12px;
font-weight: 600; /* decide on this as some stage */
/* padding-top: 10px; */ /* decide on this as some stage */
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}
.ty-menu__items {
/* position: absolute; */
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
/* width:100%; */
text-align: center;
}
.ty-menu__item {
display: inline-block;
margin:0px 50px;
}
.ty-menu__item a{
padding:20px
}
a:link, a:visited {
display: block;
width: 100%;
font-weight: light;
color: #494949;
background: transparent;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
padding-bottom:7px; /* decide on this as some stage */
background: transparent;
border-bottom: 3px solid #9B9B9B; /* decide on this as some stage */
color: #9B9B9B; /* decide on this as some stage */
}
been trying to get my logo which is a .gif to float on my header image and stick there even when resizing page
almost had it, then i resized my window. Am i wasting my time because i actually give up been trying for hours with no luck.
<head>
<meta charset="utf-8" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>B.13 DJ Hire</title>
<link rel="stylesheet" type="text/css"
href="http://yui.yahooapis.com/2.8.0r4/build/reset/reset-min.css">
<link rel="stylesheet" type="text/css" media="screen" href="bubba.css"/>
</head>
<body>
<div id="box">
<div id="header">
<a href="index.html" class="banner">
<img src="images/banner.jpg">
</a>
<a href="index.html" class="logo">
<img src="images/logo.gif">
</a>
</div>
<h1>B13. DJ Equipment Hire</h1>
<nav>
<ul id="mainnav">
<li class="home">Home</li>
<li class="mixers">Mixers</li>
<li class="turntables">Turntables</li>
<li class="mp3">MP3 Media Players</li>
<li class="headphones">Headphones</li>
<li class="contact">Contact Us</li>
</ul>
</nav>
<h2> Our Equipment Range<h2>
<br><br>
<p> we are a equipment hire company..</p>
<br>
<p id="footer">45 Marsh Grass Ln. • Marble, MN 55764 • (218) 555-5253</p>
</div>
</body>
Here is my CSS code
body {
padding: 0;
margin: 0;
font-family: tahoma, arial, helvetica, sans-serif;
}
h1, h2 {
text-align: center;
font-family: georgia, "times new roman", times, serif;
}
h1 {
margin: 0;
font-size: 2em;
color: white;
background: #585858;
line-height: 1.90em;
width: auto;
text-align: centre;
background-position: center;
text-shadow: 2px 2px 4px #000000;
border-radius: 0.30em;
}
h2 {
font-size: 1.5em;
}
#box {
border-style: none;
width: 70em;
padding: 0em;
margin-left: auto;
margin-right: auto;
background: #C2C2C2;
}
#header{
}
.banner img{
position: relative;
float: left;
height:206px;
width:1120px;
z-index: 1;
display:block;
}
.logo img {
position: absolute;
float:right;
margin-top: 0px;
margin-left: 0px;
z-index: 2;
height:290px;
width:712px;
bottom:335px;
right:50px;
}
#footer {
background: #A6A6A6;
text-align: right;
padding: 0.25em;
margin: 0;
}
.callout {
font-weight: bold;
}
#mainnav {
text-align: center;
background: #A6A6A6;
padding: 0.75em;
margin: 0;
position: relative;
border-radius: 0.5em;
}
#mainnav li {
display: inline-block;
list-style-type: none;
padding: 0;
background: A6A6A6;
color: #A6A6A6;
}
#mainnav a:link{
color:black;
background-color: transparent;
text-decoration: none;
}
#mainnav a:hover{
color: blue;
background-color:#C2C2C2;
text-decoration: underline;
text-shadow: 8px 12px 12px blue;
}
#mainnav a:visited {
color: black;
}
#mainnav li.home a{
color: black;
padding: 10px 20px;
border-top: 2px solid #A6A6A6;
border-bottom: 2px solid #A6A6A6;
}
#mainnav li.home a:hover {
color: black;
background-color:#C2C2C2;
padding: 10px 20px;
}
#mainnav li.mixers a{
color: black;
padding: 10px 20px;
border-top: 2px solid #A6A6A6;
border-bottom: 2px solid #A6A6A6;
}
#mainnav li.mixers a:hover {
color: black;
background-color:#C2C2C2;
padding: 10px 20px;
}
#mainnav li.turntables a{
color: black;
padding: 10px 20px;
border-top: 2px solid #A6A6A6;
border-bottom: 2px solid #A6A6A6;
}
#mainnav li.turntables a:hover {
color: black;
background-color:#C2C2C2 ;
padding: 10px 20px;
}
#mainnav li.mp3 a{
color: black;
padding: 10px 20px;
border-top: 2px solid #A6A6A6;
border-bottom: 2px solid #A6A6A6;
}
#mainnav li.mp3 a:hover {
color: black;
background-color:#C2C2C2 ;
padding: 10px 20px;
}
#mainnav li.headphones a{
color:#black;
padding: 10px 20px;
border-top: 2px solid #A6A6A6;
border-bottom: 2px solid #A6A6A6;
}
#mainnav li.headphones a:hover {
color: black;
background-color:#C2C2C2 ;
padding: 10px 20px;
}
#mainnav li.contact a{
color: black;
padding: 10px 20px;
border-top: 2px solid #A6A6A6;
border-bottom: 2px solid #A6A6A6;
}
#mainnav li.contact a:hover {
color: black;
background-color:#C2C2C2 ;
padding: 10px 20px;
}
#slideshow {
position:absolute;
text-align: center;
}
#pics {
margin-left: auto;
margin-right: auto;
width: 50%;
float: right;
text-align: center;
}
#content {
position: relative;
}
#content img {
position: absolute;
top: 0px;
right: 0px;
}
img {
max-width: 120%;
display: block;
background-size: 100%;
}
img {
max-width: 100%;
display: block;
}
#slideshow {
wd
You say you want to float your image, and you have float stated for the logo style, but you also have position:absolute stated as well. You need to use one or the other to achieve your goal my friend.
Also you are missing a few closing DIVs in your code. Can you share a URL to your issue? that may be easier than seeing the incomplete code.
Your CSS styling you have (position:absolute) is causing the problem. Along with the fact that you have it positioned exactly in a fixed spot on the page with your position properties like "top" "bottom" "left" and "right". You do not want this when you have a logo in a spot on the page that doesn't move around (like in your header). To fix this, you want to remove what you had under the CSS for ".logo img" and put the following:
.logo img {
height:200px;
width:200px;
}
Here is an example of it: https://jsfiddle.net/Lp7fwm7a/. When you resize the window, the logo stays in the correct place like how you want it.
You might also want to look into the float property if you have two div's in your header. Here's a good article on it: https://css-tricks.com/all-about-floats/.
Using the position: absolute; attribute means that image is being positioned according to the browser window (because you don't have any other absolute positioned elements on the page).
Your top and bottom values are counting from the edge of the browser window, not from the edge of your image.
You can center it like by replacing .logo img with:
position: absolute;
left: 0;
right: 0;
margin: 0 auto 0;
height: 290px;
width: 712px;
z-index: 2;
Your logo is a lot taller than your header image. I noticed the top of the logo in your code was cut off, not sure if you meant to do that or not but if you edit that first 0 in margin, you can adjust the top margin. -100px or so should put it back where you had it.
Also just a comment about what the other answers say, you're not missing a closing div tag - there's just really inconsistent indentation making your HTML and CSS really difficult to read. You are missing a / in the closing h2 tag and you spelled 'center' as 'centre' in your h1, h2 CSS.
Here's a link to all the fixes (including indentation): http://codepen.io/anon/pen/KpXKVG
So I don't have to post too much code the page is: http://www.ketchikanvet.com . The problem is I can't get the tabs to be attached to the pane in IE8. The majority of the vets clients use IE8 apparently so this is making it a pain in the ass for me. Anyone know why? CSS is:
html {
margin: 0;
padding: 0;
}
body {
width: 100%;
text-align: center;
margin: 0;
padding: 0;
background-color: #17BFEE;
color: #111111;
font-family: Arial, sans-serif;
}
h1 {
margin: 0;
font-family: 'Marmelad', sans-serif;
font-size: 5em;
color: #111111;
text-shadow: 0px 2px 3px #efefef;
}
#header {
text-align: center;
margin-top: 10px;
margin-bottom: 30px;
}
#content {
text-align: left;
margin: 0 auto;
width: 70%;
}
/* root element for tabs */
ul.tabs {
margin:0 !important;
margin-bottom: 0;
padding:0;
height:30px;
}
/* single tab */
ul.tabs li {
float:left;
padding:0;
margin:0;
list-style-type:none;
}
/* link inside the tab. uses a background image */
ul.tabs a {
float:left;
font-size:13px;
display:block;
padding:5px 30px;
text-decoration:none;
border:2px solid #001401;
border-bottom:0px;
height:18px;
background-color:#ddd;
color:#000;
margin-right:2px;
margin-bottom: 0;
position:relative;
outline:0;
border-radius:5px 5px 0 0;
}
ul.tabs a:hover {
background-color:#F7F7F7;
color:#000;
}
/* selected tab */
ul.tabs a.current {
background-color:#F0F0FF;
border-bottom:2px solid #F0F0FF;
color:#000;
cursor:default;
}
/* tab pane */
.panes div {
display:none;
border:2px solid #001401;
min-height:150px;
padding:15px 20px;
background-color:#F0F0FF;
border-radius: 0 5px 5px 5px;
box-shadow: 1px 1px 8px #C4C4C4;
}
/*End of Tabs*/
#gallery img {
border: 2px solid #001401;
border-radius: 5px;
margin-right: 5px;
}
#gallery img:hover {
border: 2px solid #494949;
}
#footer a {
color: #111111;
text-decoration: none;
}
#footer a:hover {
color: #efefef;
}
#addhours {
width: 100%;
}
#addhours td {
width: 50%;
}
.clear {
clear: both;
}
a {
text-decoration: none;
color: #890224;
}
a:hover {
text-decoration: none;
color: #890224;
}
a:visited {
text-decoration: none;
color: #890224;
}
.falselink {
cursor: pointer;
}
.bioimage {
box-shadow: 1px 1px 8px #C4C4C4;
border: 2px solid #001401;
border-radius: 10px;
}
.photo {
box-shadow: 1px 1px 8px #C4C4C4;
border: 2px solid #001401;
border-radius: 10px;
}
#browsercheck {
color: #ff0000;
}
add to UL.tabs A
border-bottom-color:rgb(221, 221, 221);
border-bottom-style:solid;
border-bottom-width:2px;
I added a height of 32px to your anchors inside the ul.tabs and it seemed to be what you're looking for.
ul.tabs a {height:32px;}
If you're using the html5 boiler plate you can target ie alone.
.ie8 ul.tabs a {height:32px;}