I have a navigation bar at the top of a page. In FF and Chrome the navigation bar displays fine. However in IE8 (with or without compatibility) the UL seems to indent from the left hand side, not each li just the whole li; despite declaring
text-align:center; width:600px; margin:auto; padding-left:0;
Any ideas what could be causing this?
margin-left:0px;
In Firefox the UL is padded left by default, in IE it has a left margin.
Example:
<html>
<head>
<style>
ul{
border:1px solid red;
margin:0px;
list-style:none;
padding:0px;
}
li{
border:1px solid green;
margin:0px;
}
</style>
</head>
<body>
<ul>
<li>this</li>
<li>that</li>
<li>these</li>
<li>those</li>
</ul>
</body>
</html>
I just used ul { list-style-position:outside; } to fix the indent in IE.
I think it should be:
ul { padding: 0; margin: 0 }
li { padding: 0; }
Using list-style-position:outside; specifically for IE6/IE7 worked for me. However, note that this may only be necessary if you're using list-style-position:inside; for other browsers and simply hiding the default list margin/padding by setting them to 0. Working with IE requires some finesse, and a lot of browser-specific CSS.
Related
I am trying to create a tabs for my page, but my links are not appearing horizontally. I have used float:left which is used to make links appear horizontally. Please let me know why?
<html>
<head>
<title>Test</title>
<style type="text/css">
#navbar #holder ul {
list-style: none;
margin: 0;
padding:0;
}
#navbar #holder ul li a {
text-decoration:none;
float: left;
line-height:20px;
margin-right:5px;
font-family:Calibri;
color:#000;
}
</style>
</head>
<body bgcolor="SteelBlue">
<div id="navbar">
<div id="holder">
<ul>
<li>Home</li>
<li>Product</li>
<li>Mixers</li>
<li>Others</li>
</ul>
</div>
</div>
</body>
</html>
The float left property needs to be applied to the Li element.
In your code it is being applied to the a element within the Li.
This can work, but if the parent element has any height (or if overflow:hidden is applied to it), they will stack up underneath each other and the starting position for the child elements will be on the left, so float:left won't change their position.
It might be easier to think of the list elements as being for layout and positioning, and the anchor element for visual appearance.
#navbar #holder ul {
list-style: none;
margin: 0;
padding:0;
}
#navbar #holder ul li {
float:left;
}
#navbar #holder ul li a {
text-decoration:none;
line-height:20px;
margin-right:5px;
font-family:Calibri;
color:#000;
display:block;
}
The links are appearing horizontally for me:
JSFiddle
Are you viewing the links in a small viewport?
Also, what browser are you using?
It is also more common for the float: left property to be applied to the li element, not the enclosed a element.
I´m trying to put a border-bottom to my ul li a menu element that appears when menu item is clicked.
I already have this effect working, but my border-bottom appears a bit down and its like behind my nav menu.
Can someone give me a little help understanding what is happening?
My Html:
<nav id="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Contacts</li>
</ul>
</nav>
My CSS:
#menu
{
width:960px;
height:auto;
margin:0 auto 0 auto;
background:green;
}
#menu ul
{
list-style-type:none;
}
#menu ul li
{
height:46px;
line-height:46px;
font-family:'arial';
font-weight:300;
display:inline-block;
position:relative;
}
#menu ul li a
{
text-decoration:none;
color:#ccc;
display:block;
margin-right:5px;
height:46px;
line-height:46px;
padding:0 5px 0 5px;
font-size:20px;
}
// this boder is behind the menu!
#menu ul li.active a
{
color:#fff;
border-bottom:1px solid #000;
}
My jsfiddle:
http://jsfiddle.net/mibb/Y4HKF/
It's because you set the display:block for your a, so the border will be around the box (which has height set to 46px). Looks like you explicitly set padding-bottom to 0 and then it still should work (the bottom border should be close to the link text?) but not really, because you also set the line-height to be equal to the height (both are 46px), so the text is centered vertically and give a space between the baseline and the border-bottom.
To solve this problem, simply remove the line display: block; in your css for the a tag. You don't need that at all, removing will solve your problem:
#menu ul li a {
text-decoration:none;
color:#ccc;
margin-right:5px;
height:46px;
line-height:46px;
padding:0 5px 0 5px;
font-size:20px;
}
Just add the box-sizing:
#menu ul li.active a {
box-sizing: border-box;
}
you set the border to an anchor. an anchor will just take the space of whatever element its in/around,
so setting border to an anchor is like setting it to the <li> itself.
you should wrap your text in the anchor with a span, that takes the space of the text and set the border to the span.
here is an example:
http://jsfiddle.net/TheBanana/Y4HKF/5/
I'm not sure your JSFiddle represents your problem accurately, but I'll suggest a solution based on that anyway.
Your JSFiddle example doesn't show a border on "li.active a" at all (if you remove the green background on the ul element, you'll see that there is no border present.) The reason, at least in the JSFiddle example, is that the comment "// this boder is behind the menu!" was not recognized as a CSS comment, thus preventing the code following it from working. I actually could swear I've seen this work fine in some environments, but it definitely wasn't working in this case.
See this thread on Stack Overflow: Is it bad practice to comment out single lines of CSS with //?
Besides that, your code seems to work just fine (I assume your JavaScript works, so I added class="active" to one of your li tags.)
In the following code, the black border is showing just below the bottom of the ul. If you want to change where it shows up, you should only have to change the height of the a element.
The HTML:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<nav id="menu">
<ul>
<li class="active">Home</li>
<li>About</li>
<li>Contacts</li>
</ul>
</nav>
The CSS:
#menu
{
width:960px;
height:auto;
margin:0 auto 0 auto;
background:green;
}
#menu ul
{
list-style-type:none;
}
#menu ul li
{
height:46px;
line-height:46px;
font-family:'arial';
font-weight:300;
display:inline-block;
position:relative;
}
#menu ul li a
{
text-decoration:none;
color:#ccc;
display:block;
margin-right:5px;
height:46px;
line-height:46px;
padding:0 5px 0 5px;
font-size:20px;
}
/* this boder is behind the menu! */
#menu ul li.active a
{
color:#fff;
border-bottom:1px solid #000;
}
The JSFiddle:
http://jsfiddle.net/mibb/Y4HKF/
I want to change the colour of the border on my navigation bar but it ain't working for me.
Here's my code:
<!DOCTYPE html>
<html>
<head>
<title> site </title>
</head>
<style type="text/css">
body
{
background-color:#75b5d6;
color:white;
font-family:"Arial";
text-align:center;
}
a:link
{
color:white;
}
a:visited
{
color:white;
}
a:hover
{
color:white;
}
a:active
{
color:white;
}
.nav
{
border:3px solid white;
border-width:0px;
list-style:none;
margin:2;
padding:2;
text-align:center;
background-color:orange;
font-family:"Bookman Old Style";
}
.nav li{
display:inline;
}
.nav a
{
display:inline-block;
padding:10px;
}
h1
{
font-size:40;
font-family:"Lucida Handwriting";
}
h2
{
font-size:27.5;
text-decoration:underline;
}
p
{
font-size:12;
}
</style>
<body>
<h1> Kevril.net </h1>
<ul class="nav">
<li>Home</li>
<li>site1</li>
<li>site2</li>
</ul>
<h2>Welcome</h2>
<p>Hellow</p>
</body>
</html>
what did i do wrong? Is it something in the css part or the html? I would be very happy if you can help. thanks.
I'm assuming you mean the .nav class. If so, you have:
border:3px solid white;
border-width:0px;
Make sure it has a width and you'll see the colour you set.
You have a border-width:0px; in your style for .nav which is making your border not appear. Remove that line (you set your width in the shorthand border definition anyway) and it should work.
It's handy for these kind of things to use a developer tool such as Chrome's "Inspect Element" to help you work out what style's breaking it.
(IE has "Developer tools" and Firefox has something similar built in, or you can install firebug)
That's because on .nav you've specified border-width:0;.
That's effectively rendering your border with no width, even though you specified 3px in your border style.
Take that off and it works.
DEMO: http://jsfiddle.net/cVNwn/
Remove border-width:0px; from your .nav and it should work
Demo: http://jsfiddle.net/zRQdj/
I am having an issue with this horizontal menu bar. It is suppose to fit the window (width wise) but continues a little bit further than it should. It is also suppose to be top:0;left:0;
Everything I do either one of two things works. Either I align it the top left but the width is too large, or it's not aligned and the width does fit.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Website Title</title>
</head>
<body>
<style>
body{
}
.bg{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -5000;
}
#cssmenu ul {
list-style-type:none;
width:100%;
position:absolute;
display:block;
height:33px;
font-size:.6em;
background: #76B3F1 url(images/menu-bg.png) repeat-x top left;
font-family:Verdana,Helvetica,Arial,sans-serif;
border:1px solid #000;
margin:0;
padding:0;
top:0;
left:0;
}
#cssmenu li {
display:block;
float:left;
margin:0;
padding:0;
}
#cssmenu li a {
float:left;
color:#A79787;
text-decoration:none;
height:24px;
padding:9px 15px 0;
font-weight:normal;
}
#cssmenu li a:hover,.current {
color:#fff;
background: #A3BAE6 url(images/menu-bg.png) repeat-x top left;
text-decoration:none;
}
#cssmenu .current a {
color:#fff;
font-weight:700;
}
</style>
<div id="cssmenu">
<ul>
<li class='active '><a href='#'><span>Home</span></a></li>
<li><a href='#'><span>Products</span></a></li>
<li><a href='#'><span>Company</span></a></li>
<li><a href='#'><span>Contact</span></a></li>
</ul>
</div>
<div id="background">
<img src="background/001.JPG" class="bg"/>
</div>
</body>
</html>
Add the box-sizing: border-box; css property.
This tells the menu to take the border into account when calculating '100%'
The answers so far seem cumbersome, so to re-post my comment as an answer:
Simply change the width:100% to left:0;right:0 in the ul style. This is supported in everything better than IE6. If you need to support IE6, use its expression syntax:
width:expression((this.parentNode.offsetWidth-2)+'px')
If you don't want to use the CSS3 property box-sizing as Rockafella suggested, you can try this edit of your CSS.
I got rid of your position: absolute, added 1px padding to the <div> container, and added -1px margin to the <ul>. This way, the width: 100% on the <ul> makes the width of the content box not include the 1px border you specified.
add overflow-x: hidden to your body
Instead of using a border, how about using an inset box-shadow? You'd need to get your prefix on, and it wouldn't work in older IE. As far as I'm concerned, the industry has turned the corner on older IE and understands that it's not worth the trouble giving it all the shadows and rounded corners.
box-shadow:inset 0 0 1px 0 #000;
I have the following code:
http://jsbin.com/egiju4
That works a treat on FF and chrome, but shows all the blocks aligned in IE.
I've made loads of changes to it, but can't get it to work at all.
Would anyone please be able to give me some help with it?
Thanks in advance
Add width css rule to encapsulating div.
#block_selector {
padding: 10px;
float: left;
width:400px; /*this*/
}
Add clear:left or clear:both to your "selectable" class to clear the floats on the list items.
Set overflow:auto on the UL elements:
.selectable { list-style-type: none; margin: 0; padding: 0; overflow:auto; }
Update:
I am not sure which versions of IE have problems if you don't additionally define a width on the UL elements, but just to be safe, you can always set width:100%:
.selectable { list-style-type:none; margin:0; padding:0;
overflow:auto; width:100%; }
Add clear: left; rule to .selectable:
.selectable { list-style-type: none; margin: 0; padding: 0; clear:left; }
This will ensure each <ul> clears any floated elements before it.