Any lists that I make with the following CSS appear differently in IE8 and FF4. IE8 doesn't have rounded corners, but FF4 doesn't change colour when I hover over it. Are either of them right?
ul#mend {
border-bottom: 1px #5C87B2 solid;
padding: 0 0 2px;
position: relative;
margin: 0;
float: left;
text-align: left;
}
ul#mend li {
display: inline;
list-style: none;
}
ul#mend li#greeting {
padding: 10px 20px;
font-weight: bold;
text-decoration: none;
line-height: 2.8em;
color: #fff;
}
ul#mend li a {
padding: 10px 20px;
font-weight: bold;
text-decoration: none;
line-height: 2.8em;
background-color: #FF99CC;
color: #034af3;
border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
}
ul#mend li a:hover {
background-color: #000000;
text-decoration: none;
}
ul#mend li a:active {
background-color: #a6e2a6;
text-decoration: none;
}
ul#mend li.selected a {
background-color: #fff;
color: #000;
}
Edit: Added HTML
<div id="menucontainer">
<ul id="mend">
<li>#Html.ActionLink("TicTacToe", "TicTacToe", "Games")</li>
</ul>
<ul id="menu">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
<li>#Html.ActionLink("French", "French", "Home")</li>
</ul>
</div>
Internet Explorer doesn't support rounded corners natively. You need to use a hack to get that done.
IE 9 now supports rounded corners. I'm partial to this solution for previous versions of IE:
CSS3 Pie
I might be missing something but the second list you have included (id="menu") doesn't have any corresponding CSS in your example.
Backing up what the others have said IE8 doesn't support border-radius.
Related
Hi I am trying to develop navigation bar using CSS.
I am display menus in navigation but these menus are not displaying as expected. I am trying to display as below.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
border-top: 4px solid #2e92fa;
}
<ul>
<li><a class="active" >Product Name</a></li>
<li><a class="active" >Dashboard</a></li>
<li><a >Reports</a></li>
<li><a >Map</a></li>
</ul>
Can someone help me to change css classes in order to look like as below image? Any help would be appreciated. Thank you
Is that the way you want it to be ?
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px 20px 16px;
text-decoration: none;
border-top: 6px solid transparent;
}
li a:hover {
background-color: #222;
border-top: 6px solid #2e92fa;
}
li a:active {
background-color: #000;
border-top: 6px solid blue;
}
<ul>
<li><a class="active">Dashboard</a></li>
<li><a>Reports</a></li>
<li><a>Map</a></li>
</ul>
You can use psuedo classes for this
:active works on click
:hover works on mouse over
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
border-top: 4px solid transparent;
}
li a:hover {
background-color: #111;
border-top: 4px solid #2e92fa;
}
li a:active
{
border-top:4px solid blue;
}
<ul>
<li><a class="active" >Dashboard</a></li>
<li><a >Reports</a></li>
<li><a >Map</a></li>
</ul>
I'm sorry if this should be more obvious, but I've spent a lot of time searching and can't seem to fix my problem.
I'm trying to get a specific arrow shape for a navigation list. It works perfectly on my PC on firefox and chrome, but when I take it to safari on my ipad, there's a 1px space between my :before pseudo element and the background for the link. Is there any way to fix this so that they're aligned correctly on both?
<ul id="listnav">
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
</ul>
css
#listnav {
list-style-type: none;
float: right;
padding: 0;
margin: 0;
}
#listnav a:link, a:visited {
display: block;
color: #ffffff;
background-color: #111111;
height: 20px;
width: 220px;
text-align: left;
padding: 3px;
margin:0 15px 5px 10px;
text-decoration: none;
position: relative;
border: none;
}
#listnav a:hover, a:active {
background-color: #462530;
color: #e2d276;
}
#listnav a:before {
content: "";
border-top: 13px solid transparent;
border-bottom: 13px solid transparent;
border-right: 8px solid #111111;
position: absolute; left: -8px; top: 0;
border-radius: 1px;
padding: 0;
}
#listnav a:hover:before {
border-right-color: #462530;
}
jsfiddle link
Thanks for your help!
I have a top navigation bar that still has the white borders around. I would like to know how to remove them using css.
This is the css:
#nav {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #4c4c4c;
}
#nav li {
float: left;
}
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: white;
border-right: 1px solid #ccc;
}
#nav li a:hover {
color: grey;
background-color: white;
}
This is the HTML:
<body>
<ul id="nav">
<li>About Us</li>
<li>Our Products</li>
<li>FAQs</li>
<li>Contact</li>
<li>Login</li>
</ul>
Thanks.
Not sure about the question. In #nav li a You are giving border-right: 1px solid #ccc; remove this and I can not see any border any more. Let me know in case you needed something else.
Change border-right: 1px solid #ccc; to border-right: 0px solid #ccc; .Hence,
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: white;
border-right: 0px solid #ccc;
}
please check the below code and modify accordingly. The issue will be resolved.
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: white;
}
Below is my HTML code
<UL>
<LI>
<LI>
..
<LI>
<a class="upload_menu" href="someLink" ><span>Your Recipes</span></a>
</LI>
<LI>
</UL>
Below is the CSS class
.ie7 #navigation .upload_menu {
background-color: #bb3f3f;
color: #FFF;
float: left;
font-size: 12px;
font-weight: bold;
padding: 9px 4px 10px 6px;
text-decoration: none;
!background: url(../../../static-files/images/common/nav-divider.gif) no-repeat right;
border-right: 1px solid #BCDAEE;
}
.ie7 #navigation .upload_menu:hover {
background-color: #bb3f3f;
}
Also gave a try for below CSS
*:first-child +html #navigation .upload_menu {
background-color: #bb3f3f;
color: #FFF;
float: left;
font-size: 12px;
font-weight: bold;
padding: 9px 4px 10px 6px;
text-decoration: none;
!background: url(../../../static-files/images/common/nav-divider.gif) no-repeat right;
border-right: 1px solid #BCDAEE;
}
*:first-child +html #navigation .upload_menu:hover {
background-color: #bb3f3f;
}
But background-color attrtibute itself is not being taken as can be seen in Developer tool.
I think the problem here is the hacky:
!background: url(../../../static-files/images/common/nav-divider.gif) no-repeat right;
It appears to be overriding your background-color attribute (going by the background-image property in the "Current Style" list) - unless you're giving it a background-image elsewhere - if so that code hasn't been provided.
What you can do is add the colour to that declaration:
!background:#bb3f3f url(../../../static-files/images/common/nav-divider.gif) no-repeat right;
Or alternatively separate those background parts out a little to prevent it overriding the background-color attribute:
!background-image:url(../../../static-files/images/common/nav-divider.gif);
!background-repeat:no-repeat;
!background-position-x:right;
I created the menu with css but in IE it shows with a problem.
Internet Explorer:
(source: picofile.com)
Firefox:
(source: picofile.com)
CSS:
<style>
.invertedshiftdown{
padding: 0;
width: 100%;
border-top: 5px solid #D10000;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}
.invertedshiftdown ul{
float:right;
margin:0;
padding: 0;
list-style: none;
}
.invertedshiftdown li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;
}
.invertedshiftdown a{
float: left;
display: block;font-size:11px;
color: black;
text-decoration: none;
margin: 0 1px 0 0;
padding: 5px 10px 9px 10px;
background-color: white;
}
.invertedshiftdown a:hover{
background-color: #D10000;
padding-top: 9px;
padding-bottom: 5px;
color: white;
}
.invertedshiftdown .current a{
background-color: #FF7400;
padding-top: 9px;
padding-bottom: 5px;
color: white;
}
</style>
HTML:
<div style="width:600px;height:30px;float:right;">
<div class="invertedshiftdown">
<ul>
<li >Home</li>
<li>New</li>
<li >Revised</li>
<li>Tools</li>
<li>CSS</li>
<li >Forums</li>
l>
</div>
</div>
How can I fix this?
Use css line-height instead of padding and it should solve your problems.