I have uploaded a web page
The problem is that when I resize the window of browser, the content overlaps with each other. I saw multiple posts related to the topic online, but was not able to find a reasonable answer. I have tried position relative and everything I knew of. If you know, anything about how to solve this issue, please tell me.
CSS:
#import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
#charset 'UTF-8';
h1, h2, h3, h4, h5, h6, p, a, ul, ol, li, small
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
background: transparent;
}
#intro
{
position:relative;
width:100%;
height:30%;
background: #566074;
min-width:50%;
min-height:20%;
}
#nav
{
position:relative;
width: 100%;
height: 7%;
}
#buffer
{
position:relative;
width:100%;
height:1%;
}
/* Base Styles */
#nav ul,
#nav li,
#nav a {
list-style: none;
margin: 0;
padding: 0;
border: 0;
line-height: 1;
font-family: 'Lato', sans-serif;
}
#nav {
border: 1px solid #133e40;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
width: auto;
}
#nav ul {
zoom: 1;
background: #36b0b6;
background: -moz-linear-gradient(top, #36b0b6 0%, #2a8a8f 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #36b0b6), color-stop(100%, #2a8a8f));
background: -webkit-linear-gradient(top, #36b0b6 0%, #2a8a8f 100%);
background: -o-linear-gradient(top, #36b0b6 0%, #2a8a8f 100%);
background: -ms-linear-gradient(top, #36b0b6 0%, #2a8a8f 100%);
background: linear-gradient(top, #36b0b6 0%, #2a8a8f 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#top-color', endColorstr='#bottom-color', GradientType=0);
padding: 5px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
#nav ul:before {
content: '';
display: block;
}
#nav ul:after {
content: '';
display: table;
clear: both;
}
#nav li {
float: left;
margin: 0 5px 0 0;
border: 1px solid transparent;
}
#nav li a {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
padding: 8px 15px 9px 15px;
display: block;
text-decoration: none;
color: #ffffff;
border: 1px solid transparent;
font-size: 16px;
}
#nav li.active a {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
display: block;
background: #1e6468;
border: 1px solid #133e40;
-moz-box-shadow: inset 0 5px 10px #133e40;
-webkit-box-shadow: inset 0 5px 10px #133e40;
box-shadow: inset 0 5px 10px #133e40;
}
#nav li:hover {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
border: 1px solid #36b0b6;
}
#nav li:hover a {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
display: block;
background: #1e6468;
border: 1px solid #133e40;
-moz-box-shadow: inset 0 5px 10px #133e40;
-webkit-box-shadow: inset 0 5px 10px #133e40;
box-shadow: inset 0 5px 10px #133e40;
}
img
{
height:100%;
position:relative;
width:15%;
padding-right:2%;
float:left;
}
#intro p
{
color: white;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size:150%;
padding-top:2%;
font-weight:bolder;
}
#buffer1
{
width:100%;
height:1%;
position:relative;
}
#content {
position : absolute;
width : 99%;
height : 60%;
background-color : #566074;
text-align: center;
}
#content:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
HTML
<html>
<head>
<title>
HomePage
</title>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<div id= 'intro'>
<img src="pics/Sushil_Parti.jpg" alt="Sushil Parti">
<p>
Sushil Parti <br>
Graduate Student <br>
Dept. of Computer Science <br>
University of Windsor
</p>
</div>
<div id='buffer'></div>
<div id='nav'>
<ul>
<li class='active'> <a href='#'><span>About</span></a></li>
<li> <a href='academics.html'><span>Courses</span></a></li>
<li> <a href='research.html'><span>Research</span></a></li>
<li> <a href='work.html'><span>Work Experience</span></a></li>
<li> <a href='activities.html'><span>Activities</span></a></li>
<li class='last'><a href='contact.html'><span>Contact Me</span></a></li>
</ul>
</div>
<div id='buffer1'></div>
<div id ='content'>
<div id='info'>
<p>
Hi, I am a first year MSc student in Computer Science at
University of Windsor. </br>
I am currently working under the supervision of Prof. Dan Wu. My research interests
include Computer Vision, Robotics, Machine Learning and AI.
<br> <br>
I have completed my bachelors degree (B.Tech) in Computer Science with specialization in Software Engineering from Lovely Professional University
in 2011.<br><br>
Curriculum Vitae [PDF]
</p>
</div>
</div>
</body>
</html>
Image of webpage after window is resized.
![enter image description here][1
This is doing what you told it to do. You have min-height of #intro set to 20%. If you make the browser too small, then that 20% is not tall enough to show all of your text.
Try setting the min-height to be 150px. That seems to be enough to keep your text from being clipped. Then it will still grow if you make the window taller.
Related
I'm creating a submenu for my website but it needs some little fixes.
First, I can't make the z-index work, is displayed under the content div, in the live example I removed all z-index, and righ now, I really have no idea how this works :(
Second, in the submenu from second option, the box is more large than the first one. I'm trying to fix it but I don't see where the problem is.
/* Sub-menu */
#main-nav ul {
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
/* rounded corner */
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
#main-nav ul li {
float: none;
display: block;
/* box shadow */
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 1px 1px rgba(0, 0, 0, .4);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 1px 1px rgba(0, 0, 0, .4);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 1px 1px rgba(0, 0, 0, .4);
/* rounded corner */
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
#main-nav ul li:last-child {
box-shadow: none;
}
#main-nav ul a {
color: #fff;
background: #474747;
display: block;
white-space: nowrap;
}
#main-nav ul a:hover {
/* gradient */
background: #6a6a6a url(images/nav-bar-bg.png) repeat-x;
background: -webkit-gradient(linear, left top, left bottom, from(#b9b9b9), to(#6a6a6a));
background: -moz-linear-gradient(top, #b9b9b9, #6a6a6a);
background: linear-gradient(-90deg, #b9b9b9, #6a6a6a);
background-image: linear-gradient(-90deg, #cdcdcd, #797979);
}
#main-nav ul li:first-child a {
/* rounded corner */
-webkit-border-radius: 8px 8px 0 0;
-moz-border-radius: 8px 8px 0 0;
border-radius: 8px 8px 0 0;
}
#main-nav ul li:last-child a {
/* rounded corner */
-webkit-border-radius: 0 0 8px 8px;
-moz-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;
}
#main-nav ul li:first-child a:after {
content:'';
position: absolute;
left: 30px;
top: -8px;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #444;
}
#menu ul li:first-child a:hover:after {
border-bottom-color: #fafafa;
}
#main-nav:after {
visibility: hidden;
display: block;
font-size: 0;
content:" ";
clear: both;
height: 0;
}
Here's a live example: http://jsfiddle.net/y59kjsLn/1/
Thanks in advance!
Edit: add more css
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
.clearfix { display: block; zoom: 1; }
Chan this cause the z-index problem?
Edit2: Add the html code
Hmmm maybe has something to do with...
<div id="content">
<article class="post clearfix">
<?php
if(array_key_exists($matches[1], $includes)) {
$content = include($includes[$matches[1]]);
} else header("Location: /home");
?>
</article>
</div>
This is just behind the menu.
#content CSS code:
#content {
opacity: 0.8;
background: #fff;
margin: 30px 0 30px;
padding: 20px 35px;
width: 600px;
float: left;
/* rounded corner */
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
/* box shadow */
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,.4);
box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
#content .error {
color: red;
text-align: center;
}
#content .note {
font-size: 80%;
text-align: center;
}
#content p {
margin-top: 30px;
}
h2.post-title {
margin-top: 15px;
background: #888;
border-radius: 5px;
padding: 0px 5px ;
border-top: 1px solid #889;
border-bottom: 1px solid #889;
text-align: center;
}
h2.post-title a {
color: #FFFFFF;
font-size: 0.9em;
text-shadow: 1px 1px 2px #333333;
}
.post {
margin-bottom: 20px;
}
.post-title {
margin: 0 0 5px;
padding: 0;
font: bold 26px/120% Arial, Helvetica, sans-serif;
}
.post-title a {
text-decoration: none;
color: #000;
}
.post-meta {
margin: 0 0 10px;
font-size: 90%;
}
figure.post-imagen img {
float: left;
margin: 5px;
max-width: 260px;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
.clearfix { display: block; zoom: 1; }
Js Fiddle
removed the margin which was affecting the sub menu
#main-nav li:first-child {
margin-left: 10px;
}
edit
Remove and Add
#content
opacity: 0.8; /* removed */
background: rgba(255, 255, 255, 0.55); /* added */
}
I have some issues with my horizontal menu. The main content should avoid the sub menu. So when the sub menu opens it should shove the main content down.
The html
<ul id="menu">
<li class="active">Menu1</li>
<li class="active">Menu2
<ul>
<li class="active">Sub 1</li>
<li class="active">Sub 2</li>
<li class="active">Sub 3</li>
<li class="active">Sub 4</li>
</ul>
</li>
and the css
#menu{
width: 100%;
margin-left:auto;
margin-right:auto;
padding: 15px 0 0 0;
list-style: none;
background: #111;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: 0 2px 1px #9c9c9c;
-webkit-box-shadow: 0 2px 1px #9c9c9c;
box-shadow: 0 2px 1px #9c9c9c;
min-width: 1100px;
position: relative;
clear: both;
text-align:center;
}
#menu li{
display: inline-block;
padding: 0 0 10px 0;
}
#menu a{
float: left;
padding: 0px 50px 0 0;
color: #999;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
height: 30px;
}
#menu li:hover > a{
color: #fafafa;
}
*html #menu li a:hover{ /* IE6 */
color: #fafafa;
}
#menu li:hover > ul {
display: block;
}
/* Sub-menu */
#menu ul{
width: 100%;
margin: 0px 0 0 0;
padding: 15px 0 0 0;
list-style: none;
display: none;
position: absolute;
top: 55px;
left: 0px;
background: #111;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: 0 2px 1px #9c9c9c;
-webkit-box-shadow: 0 2px 1px #9c9c9c;
box-shadow: 0 2px 1px #9c9c9c;
min-width: 1100px;
}
}
#menu ul li{
float: left;
padding: 0 0 10px 0;
position: relative;
}
#menu ul a{
float: left;
height: 30px;
padding: 0px 25px;
color: #999;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu ul a:hover{
background: #0186ba;
background: -moz-linear-gradient(#04acec, #0186ba);
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec, #0186ba);
background: -o-linear-gradient(#04acec, #0186ba);
background: -ms-linear-gradient(#04acec, #0186ba);
background: linear-gradient(#04acec, #0186ba);
}
/* Clear floated elements */
#menu:after{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html #menu { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */
I tried to change the #menu ul position to relative. But that messes up the whole style.
Anybody who likes to help me? =)
JSFIDDLE: http://jsfiddle.net/M8S3T/
The elements that are absolutely or fixed positioned are removed from the normal flow of the page. You must avoid position:absolute if you want to preserve the flow.
I try to make a quick example to show: http://jsfiddle.net/M8S3T/1/
#menu li{
float:left;
padding: 0 0 10px 0;
width:5em;
}
/* Sub-menu */
#menu ul{
width: 100%;
margin: 40px -80px 0;
padding: 15px 0 0 0;
list-style: none;
display: none;
background: #111;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: 0 2px 1px #9c9c9c;
-webkit-box-shadow: 0 2px 1px #9c9c9c;
box-shadow: 0 2px 1px #9c9c9c;
min-width: 1100px;
}
#menu li ul li {
float:left;
padding: 0 0 10px 0;
width: 10em;
}
#menu ul a{
float: none;
height: 30px;
padding: 0px 25px;
color: #999;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
I only post you the parts I have changed. With this you can play with the float, and if you use a fixed width for the list items it will work.
I'm trying to create a navigation bar. What I want is when I hover to the block item it changes the background. My problem is the block is a little bigger than the link, so if I move the mouse outside the link area I can't click on it.
This is the jsfiddle I created, I changed the background color of the link when hovering over for a better visual aid
http://jsfiddle.net/Tx8MK/3/
so how can I make the link block fit the list block.
Thank you
#navBar li{
float:left;
display:block;
text-align:center;
position:relative;
padding: 4px 10px 4px 10px;
margin-right:30px;
border:none;
}
#navBar li:hover{
border: 1px solid #777777;
border-bottom:none;
padding: 3px 9px 4px 9px;
/* Background color and gradients */
background: #F4F4F4;
background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
/* Rounded corners */
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
}
#navBar li a{
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
color: #EEEEEE;
display:block;
outline:0;
text-decoration:none;
text-shadow: 1px 1px 1px #000;
padding: 0 25px;
}
#navBar li a:hover{
text-decoration: none;
color:#000;
display:block;
padding: 0 25px;
background:#fff;
}
Instead of giving the padding to the list items, give it to the anchors. Updated fiddle below:
#navBar li a{
font-family:Arial, Helvetica, sans-serif;
padding: 4px 10px 4px 10px;
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
...
}
http://jsfiddle.net/hQJye/
The problem was your padding applied to your LI. Removing that made the <a> fill your LI.
http://jsfiddle.net/Tx8MK/5/
html, body {
margin: 0;
padding: 0;
}
body {
font: 13px/22px Helvetica, Arial, sans-serif;
background: #f0f0f0;
}
nav {
position:absolute;
top:0;
width:100%;
background: #000;
color: #fff;
list-style: none;
}
nav section{
margin:10px 20px;
}
#navBar li{
float:left;
display:block;
text-align:center;
position:relative;
margin-right:30px;
border:none;
}
#navBar li:hover{
border: 1px solid #777777;
border-bottom:none;
/* Background color and gradients */
background: #F4F4F4;
background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
/* Rounded corners */
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
}
#navBar li a{
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
color: #EEEEEE;
display:block;
outline:0;
text-decoration:none;
text-shadow: 1px 1px 1px #000;
padding: 0 25px;
}
#navBar li a:hover{
text-decoration: none;
display:block;
color:#000;
background:#ff0000;
}
I can't put my navigation menu to the right of screen. I used a lot of CSS but so it's a bit hard to find where is my mistake.
This is my html code:
<div id="main-container">
<div id="content">
<div id="header">
<ul id="nav">
<li >Nav 1</li>
<li>Nav 2</li>
<li class="selected">Nav 3</li>
<li>Nav 4</li>
</ul>
</div>
<div id="pictures">
</div>
</div>
This is the CSS i have trouble with:
#main-container {
}
#content {
background-color: #FFAA00;
background: url(images/table-surface-2-resized.jpg) repeat-x #000000;
width: 800px;
height: 600px;
border-radius: 5px;
}
#header {
background-color: #FFD200;
width: 800px;
height: 26px;
}
#pictures {
background-color: #A64D00;
width: 760px;
height: 540px;
border: 2px solid white;
border-radius: 15px;
margin-left: auto;
margin-right: auto;
margin-top: 14px;
}
/* TABS WITH ROUND, OUT BORDERS */
#nav {
text-align: center;
list-style: none;
margin: 0;
padding: 0;
line-height: 24px;
height: 26px;
overflow: hidden;
font-size: 12px;
font-family: verdana;
position: relative;
}
#nav li {
border: 1px solid #AAA;
background: #D1D1D1;
background: -o-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
background: -ms-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
background: -moz-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
background: -webkit-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
background: linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
display: inline-block;
position: relative;
z-index: 0;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 #FFF;
text-shadow: 0 1px #FFF;
margin: 0 -5px;
padding: 0 20px;
}
#nav li.selected {
background: #FFF;
color: #333;
z-index: 2;
border-bottom-color: #FFF;
}
#nav:before {
position: absolute;
content: " ";
width: 100%;
bottom: 0;
left: 0;
border-bottom: 1px solid #AAA;
z-index: 1;
}
#nav li:before,
#nav li:after {
border: 1px solid #AAA;
position: absolute;
bottom: -1px;
width: 5px;
height: 5px;
content: " ";
}
#nav li:before {
left: -6px;
border-bottom-right-radius: 6px;
border-width: 0 1px 1px 0;
box-shadow: 2px 2px 0 #D1D1D1;
}
#nav li:after {
right: -6px;
border-bottom-left-radius: 6px;
border-width: 0 0 1px 1px;
box-shadow: -2px 2px 0 #D1D1D1;
}
#nav li.selected:before {
box-shadow: 2px 2px 0 #FFF;
}
#nav li.selected:after {
box-shadow: -2px 2px 0 #FFF;
}
#nav a {
color: black;
text-decoration: none;
}
/* END TABS WITH ROUND, OUT BORDERS */
try out this css (addition)
#nav {
padding: 0 10px;
float:right;
}
here is working link
Fixed: http://dabblet.com/gist/3435951
Float #nav to the right, give it a right margin, remove overflow: hidden from it and add it on the #header.
I am trying to add a mini triangle to the hover state of navigation bar.
HTML:
<div id="menu_bars">
<div id="main_bar">
<ul>
<li class="maintabs maintabs_tri">Over</li>
<li class="maintabs maintabs_tri">Collar</li>
<li class="maintabs maintabs_tri">Bod</li>
</ul>
</div>
<div id="css_arrow" class="maintabs_tri">
</div>
</div>
The 'main_bar' div creates a horizontal navigation menu.
The div id 'css_arrow' is being use to create an arrow which will show up on hover state.
I game them all a class called 'maintabs_tri' which includes the triangle and the 'main_tab' navigation menu, so that when the hover state becomes active, the triangle appears on the navigation bar.
CSS:
/* START OF MAIN BAR */
#main_bar ul {
float: left;
width: 630px;
height: 48px;
}
.maintabs {
display: inline-block;
width: 25%;
list-style-type: none;
background: rgba(237,237,237,1);
background: -moz-linear-gradient(top, rgba(255,255,255,1), rgba(237,237,237,1));
background: -webkit-gradient(linear, top, bottom, from(rgba(255,255,255,1)), to(rgba(237,237,237,1)));
-moz-box-shadow: 1px 2px 2px rgba(0,0,0,0.2);
-webkit-box-shadow: 1px 2px 2px rgba(0,0,0,0.2);
box-shadow: 1px 2px 2px rgba(0,0,0,0.2);
-webkit-transition-property:
}
.maintabs:first-child {
-webkit-border-top-left-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-bottomleft: 6px;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.maintabs:last-child {
-webkit-border-top-right-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-moz-border-radius-topright: 6px;
-moz-border-radius-bottomright: 6px;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.maintabs a {
display: block;
text-decoration: none;
text-align: center;
vertical-align: middle;
line-height: 14px;
text-shadow: 0px 1px 2px rgba(0,0,0,0.3);
padding: 18px 0px;
}
.maintabs ul {
display: none;
list-style-type: none;
}
.maintabs ul li a {
text-decoration: none;
}
/* END OF MAIN BAR */
/* TRIANGLE ------ for testing, to be used with hover later */
#css_arrow {
border-color: transparent transparent rgba(111,46,11,0.0) transparent;
border-style: solid;
border-width: 8px;
height: 0;
width: 0;
position: absolute;
top: 34px;
left: 78px;
}
.maintabs_tri a:hover {
border-color: transparent transparent rgba(111,46,11,1) transparent;
}
Could someone share why this is not working? I cannot figure out for the life of me...
Adding to .maintabs_tri a:hover this: border-bottom: 3px solid #000 fixes it in Chrome.
The issue was that there was no border-width or border-style defined.