I am trying to create some tabs across the top of a page.
I have a ul li div /div /li /ul. The div is dsplaced downwards to overlap the bottom border of the ul to give the tab effect:
Here's the HTML
<ul>
<li>not selected</li>
<li id="selected"><div id="innerselected"><span>selected</span></div></li>
<li>not selected</li>
</ul>
And here's the CSS:
<style type="text/css">
ul {
border-bottom: 1px solid DarkRed;
}
li {
display: inline-block;
margin-left: 1px
}
#selected {
border-left: 1px solid DarkRed;
border-top: 1px solid DarkRed;
border-right: 1px solid DarkRed;
}
li a {
display: block;
padding: 2px 5px;
border-top: 1px solid #666666;
border-right: 1px solid #666666;
border-left: 1px solid #666666;
text-decoration: none;
background: gainsboro
}
#innerselected {
padding: 2px 5px;
background: White;
position: relative;
bottom: -2px
}
#innerselected * {
position: relative;
bottom: 2px
}
</style>
In IE8, Safari and Chrome it looks as intended.
In IE9+ and Firefox, the ul height expands to accomodate the displaced div, leaving the 'selected' tab slightly raised and detached. I don't understand why it would do that. Any ideas how to stop it?
cracked it - need to add:
vertical-align: top;
to the li {}
Related
I have a carret in a drop down menu that works correctly in all browsers except Microsoft Edge.
In Microsoft Edge is the caret split in two parts with a black line in the middle.
I am attaching screenshot and css declaration.
.caret {
display: inline-block;
width: 0px;
height: 0px;
margin-left: 2px;
vertical-align: middle;
border-top: 4px solid\9;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}
This should work across browsers:
HTML:
<span class="caret"></span>
CSS:
.caret {
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid red;
border: none\9;
}
First heads up is that I'm in my first year at University and I could be making a dumb as balls mistake. However, when I try to get my a:selected to be the same length as my li:hover, the a:selected seems to be off by a few amount of pixels. I've been messing with the padding and still have no luck. Is there a specific reason with my CSS used or a technical problem/browser interpreting it differently?
Here's my CSS:
a {
font-family: Armata;
}
body {
background-image: url(http://i.imgur.com/26DXP2k.png);
background-repeat: repeat;
background-position: fixed;
}
#siteNavigation {
width: 100%;
margin: 55px 0px;
padding: 0px 0px 0px;
text-align: center;
}
#siteNavigation li:hover {
padding: 0px 0px;
background-color: #E03A00;
border-top: 10px solid #E03A00;
border-bottom: 3px solid #BDBFBE;
text-transform: uppercase;
color: #BDBFBE;
}
#siteNavigation a:hover {
color: #BDBFBE;
padding: 10px 45px;
}
#siteNavigation ul {
margin-top: 0px;
color: inherit;
}
#siteNavigation li {
margin: 0px;
padding: 0px 0px;
display: inline;
list-style: none;
color: #E03A00;
background-color: #BDBFBE;
border-bottom: 3px solid #E03A00;
border-top: 6px solid #BDBFBE;
border-left: 1px solid black;
border-right: 1px solid black;
}
#siteNavigation a {
margin: 0px;
padding: 0px 45px;
display: inline;
text-decoration: none;
color: #E03A00;
}
#siteNavigation #selected a {
margin: 0px;
padding: 0px 45px;
background-color: #E03A00;
border-top: 10px solid #E03A00;
border-bottom: 3px solid #BDBFBE;
text-transform: uppercase;
color: #BDBFBE;
}
Here's the HTML:
<!doctype html>
<head>
<title>First Web page</title>
<meta charset="utf-8" />
<meta name="author" content="Matthew Sharp" />
<meta name="description" content="Index page" />
<link href="http://fonts.googleapis.com/css?family=Armata%7cLobster%7cRoboto%7cPontano+Sans" rel="stylesheet" type="text/css">
<link href="main.css" rel="stylesheet" type="text/css">
<!-- Grey Color's {Light to dark}:
FCFFFD
E3E5E4
BDBFBE
7E7F7F
3F403F
ORANGE: E03A00 //Comment used for personal use due to non saved kuler -->
</head>
<body>
<nav id="siteNavigation">
<ul>
<li>
Home
</li>
<li id="selected">
Structure
</li>
<li>
Common Elements
</li>
<li>
CSS Selectors
</li>
<li>
Common CSS
</li>
</ul>
</nav>
<section id="bodyLayer">
</body>
And the results can be seen here:
Cheers.
Solution in JSFiddle
Basically, the problem is that you're applying the selected CSS to the a tag, when you wanted to apply it to the li tag.
The a tag captures the text and a small area around it based on the margin and padding, but the actual "cell" is represented by the li tag, so that's where you want to apply the selected CSS.
#siteNavigation #selected a { /*should be #siteNavigation li#selected*/
margin: 0px;
padding: 0px 45px;
background-color: #E03A00;
border-top: 10px solid #E03A00;
border-bottom: 3px solid #BDBFBE;
text-transform: uppercase;
color: #BDBFBE;
}
I also tidied up some of the CSS, like removing the unnecessary padding, the too-thick border-top for selected, and added this :
#siteNavigation #selected a{
color: #BDBFBE;
}
So the text color would be correct.
Check the JSFiddle for the detailed answer.
Here's a cleaned up version of your navigation:
Demo: http://jsfiddle.net/rxh17e3h/
Use float:left instead of display:inline-block
Use class="selected" istead of id
Control everything from the li. Don't assign hover to the a tag
a {
font-family: Armata;
}
body {
background-image: url(http://i.imgur.com/26DXP2k.png);
background-repeat: repeat;
background-position: fixed;
}
#siteNavigation {
width: 100%;
margin: 55px 0px;
padding: 0px 0px 0px;
text-align: center;
}
#siteNavigation ul {
margin-top: 0px;
color: inherit;
}
#siteNavigation li {
float:left;
margin: 0px;
padding: 0px 0px;
list-style: none;
border-bottom: 3px solid #E03A00;
border-top: 6px solid transparent;
border-left: 1px solid black;
border-right: 1px solid black;
background-color: #BDBFBE;
color: #E03A00;
}
#siteNavigation li a{
padding: 10px 45px;
color:inherit;
text-decoration: none;
}
#siteNavigation li:hover, #siteNavigation li.selected{
color: #BDBFBE;
background-color: #E03A00;
border-top: 6px solid #E03A00;
border-bottom: 3px solid #BDBFBE;
}
The problem is that quite simply you are putting an action on the tag and expecting it to behave in the same way as the same action on an tag. Quite simply the two tags hold a different space on your page. The contains your tag.
So apply the behaviour to one or the other.
Some just target the a tag with a:hover a:selected etc others will target li. Whenever I get problems like this I just comment out the dimension code and un comment until the error appears or just use firebug.
I've made a tag-like shape in HTML/CSS as can be seen here - http://jsfiddle.net/RuXyP/
.tag {
float: left;
text-align: center;
height: 14px;
width: 110px;
background-color: #2e353d;
color: #FFFFFF;
padding-top: 2px;
margin-top: 1px;
font-size: 10px;
}
.arrow-right {
width: 0;
height: 0;
float: left;
margin-top: 1px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid #2e353d;
}
I'm attempting to add an outline to it and have got as far as this - http://jsfiddle.net/RuXyP/1/
However, I'm struggling to work out how to add an outline to the arrow bit.
I can't use a border as that's how the arrow is created
I can't use outline as it can't be specified for individual sides
Is there any way for this to be done?
I prefer to not use pseudo selectors for this, and instead just use two divs for the triangle, one 1px larger than the other, and you simply move the margin over on the second div. Like so:
.arrow-border {
width: 0;
height: 0;
float: left;
margin-top: 1px;
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-left: 9px solid #FF00FF;
}
.arrow-right {
width: 0;
height: 0;
float: left;
margin-left: -9px; /* Width of .arrow-border's border */
margin-top: 2px;
border-top: 8px solid transparent; /* One less than .arrow-border's border width */
border-bottom: 8px solid transparent;
border-left: 8px solid #2e353d;
}
Demo: http://jsfiddle.net/RuXyP/4/
Nit: Keep in mind that if you put this in a container smaller than your arrow, it is possible that the arrow head will detach. Generally this shouldn't be a problem.
you could use a pseudo element and absolute position:
The idea is to stack both pseudo:before and after on top of eachother, and draw one that is 1pixel larger on each sides. Set the biggest underneath to draw the red border-color .
DEMO
.tag {
float: left;
position:relative;
text-align: center;
height: 14px;
width: 110px;
background-color: #2e353d;
color: #FFFFFF;
padding-top: 2px;
margin-top: 1px;
font-size: 10px;
border: 1px solid #FF00FF;
border-right: none;
}
.tag:after, .tag:before {
content:'';
margin-right:-10px;
width: 0;
height: 0;
position:absolute;
top:0px;
left:100%;
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-left: 8px solid #2e353d;
}
.tag:before {
top:-1px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 9px solid #FF00FF;
}
I have this design of a table with a menu next to it: fiddle, The problem is that the corners of the #settingNev ul li a is shown on the border-right so there are little white dots and the border the is connected to the menue and the table(you can se the in the fiddle easly).
How can i do hat they wont be? i want that the ul's li background-color will stay white and will not transparent(transparent solves it)?
Also i dont want to set the left,top and bottom borders as 0px becaus ethen when its hover one li the other move
similar to musefans answer but with a fix^^
#settingNev ul li a {
display: block;
border-radius: 6px 0px 0px 6px;
color: #666;
//padding: 5px 3px;
padding: 6px 3px 6px 4px;
border: none;
border-right: 1px solid black;
//margin: 1px 0 1px 1px;
}
#settingNev ul li a:hover {
border: 1px solid black;
border-right: 1px solid white;
//margin: 0;
padding: 5px 3px;
}
#settingNev .active a {
border: 1px solid black;
border-right: 1px solid white;
//margin: 0;
padding: 5px 3px;
}
here is a fiddle(updated)
also you have some duplicated css in you fidle
UPDATE: use padding instead of margin this works now you can see it in my updated fiddle
This question already has answers here:
Why is this inline-block element pushed downward?
(8 answers)
Closed 8 years ago.
I have some HTML and CSS that creates inline block elements (divs) that one might find on a landing page. However, they only appear to be vertically aligned correctly when they contain some content (an unordered list) inside the divs. If there is no content in the div, the element get pushed down. Here is a jsfiddle. Here is the code. Can anybody explain why the third div block is not vertically aligned?
EDIT: While I'm comfortable that the "fix" to this issue is to ensure that each div uses "vertical-align:top" in the styling, I'm still a little puzzled as to why I'm required to use this styling in the first place. I would think that the div elements would always line up evenly, regardless of the content inside the divs.
<html>
<head>
<style type="text/css">
body {
font-family: Helvetica;
}
h1 {
margin: 0px;
padding: 10px;
font-weight: bold;
border-bottom: 1px solid #aaaaaa;
font-size: 12px;
}
a {
text-decoration: none;
}
ul {
padding-left: 20px;
}
li {
list-style-type: none;
font-size: 12px;
}
.landing-block {
display: inline-block;
background-color: #eeeeee;
margin-right: 30px;
width: 192px;
height: 140px;
border: 1px solid #aaaaaa;
-moz-box-shadow: 3px 3px 5px #535353;
-webkit-box-shadow: 3px 3px 5px #535353;
box-shadow: 3px 3px 5px #535353;
}
.header {
padding: 10px;
background-color: red;
border-bottom: 1px solid #aaaaaa;
color: #ffffff;
}
a:hover {
text-decoration:underline;
}
h1 > a {
color: #ffffff;
}
h1 > a:hover {
color:#ffffff;
}
li > a {
color: #000000;
}
li > a:hover {
color: #000000;
}
</style>
</head>
<body>
<div>
<div class='landing-block'>
<h1 style='background-color: #3991db;'>
<a href='#'>COMPANIES</a>
</h1>
<ul>
<li><a href='#'>Search Companies</a></li>
<li><a href='#'>New Company</a></li>
<ul>
</div>
<div class='landing-block'>
<h1 style='background-color: #9139db;'>
<a href='#'>PEOPLE</a>
</h1>
<ul>
<li><a href='#'>Search People</a></li>
<li><a href='#'>New Person</a></li>
<ul>
</div>
<div class='landing-block'>
<h1 style='background-color: #c2db39;'>
<a href='#'>Products</a>
</h1>
</div>
<div>
</body>
</html>
inline-block elements are vertical-align:baseline; by default. Change this to vertical-align:top;
.landing-block {
display: inline-block;
background-color: #eeeeee;
margin-right: 30px;
width: 192px;
height: 140px;
border: 1px solid #aaaaaa;
-moz-box-shadow: 3px 3px 5px #535353;
-webkit-box-shadow: 3px 3px 5px #535353;
box-shadow: 3px 3px 5px #535353;
vertical-align:top; /* add this rule */
}
add vertical-align:top; to .landing-block class
Set vertical-align: top for the .landing-block class declaration in your CSS.
Add float: left
.landing-block {
display: inline-block;
background-color: #eeeeee;
margin-right: 30px;
width: 192px;
height: 140px;
border: 1px solid #aaaaaa;
-moz-box-shadow: 3px 3px 5px #535353;
-webkit-box-shadow: 3px 3px 5px #535353;
box-shadow: 3px 3px 5px #535353;
float: left;
}
jsfiddle