I'm having trouble with cross-browser compatibility.
I have a simple menu (with all JS functionality removed for the purpose of this demonstration). The background of the links are meant to go orange when hovered over.
Firefox (V3.6.17): Works properly.
Chrome (V11.0.696.60): The Main Links expand with :hover, shifting all the other menu items. I think the padding or margins expand on hover
InternetExplorer (V8): The links show in blue despite defining a colour.
I think the problem would easily be recognised by someone who knows CSS well, but my knowledge isn't up to scratch. An explanation would be greatly appreciated!
Here is the code on JS Fiddle
Here is a portion of the CSS:
#mainlinks {
position:absolute;
display:block;
overflow:visible;
margin:0px;
padding:0px;
}
#mainlinks li {
display:block;
position:relative;
float: left;
cursor:pointer;
overflow:hidden;
padding:4px;
margin:45px 3px 2px 3px;
font-family:Arial, Helvetica, sans-serif;
color:#000;
font-size: 14px;
text-decoration:none;
list-style: none;
}
#mainlinks li :visited {
text-decoration:none;
color:#000;
padding:4px;
margin:45px 3px 2px 3px;
}
#mainlinks li :hover {
text-decoration:none;
color:#FFF;
padding:4px;
margin:45px 3px 2px 3px;
background-color:#f1592a;
}
try li:hover instead of li :hover, li:visited instead of li :visited
hope this works ^^
you should try applying the text specific styles (ie: color) to the 'a' tag instead of on the LI
Related
On all the other pages of the website the navigation bar is in normal font but for some reason the font on the home page nav bar is in italics. I've completely forgotten how to make it so it doesn't have italics or where to search to change it so please help
http://surbaisse.com/index.html
#tabsJ {
float:left;
width:100%;
background:#F4F4F4;
font-size:93%;
line-height:normal;
border-bottom:1px solid #24618E;
}
#tabsJ ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
text-align: center;
}
#tabsJ li {
display:inline-block;
margin:0;
padding:0;
}
#tabsJ li a:hover {
background color: #111
}
#tabsJ a {
float:left;
background:url(file:///C|/Users/xw4600/Documents/Bugatti Dave/tableftJ.gif) no-repeat left top;
margin:0;
padding:0 0 0 5px;
text-decoration:none;
}
#tabsJ a span {
float:left;
display:block;
background:url(file:///C|/Users/xw4600/Documents/Bugatti Dave/tabrightJ.gif) no-repeat right top;
padding:5px 15px 4px 6px;
color:#24618E;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsJ a span {float:none;}
/* End IE5-Mac hack */
#tabsJ a:hover span {
color:#FFF;
}
#tabsJ a:hover {
background-position:0% -42px;
}
#tabsJ a:hover span {
background-position:100% -42px;
}
#tabsJ #current a {
background-position:0% -42px;
}
#tabsJ #current a span {
background-position:100% -42px;
color:#FFF;
}
After reviewing your site, the reason the text is in italics is because you put it in an <em> tag. As you can see on w3schools, <em> makes any string between it's opening and closing tags emphasized, making them appear as italics.
Remove the 3 em blocks from under #Layer3.
Also, and please, don't take this the wrong way, but your HTML-structure is horrible. Please, consider rebuilding your site's structure so it will be easier to maintain in the future.
For example, em is an inline type element, while div is a block type element. Putting block elements in inline ones, while not impossible, should be avoided. It makes building maintainable structure and sane CSS harder, and only leads to headache, tears and swearing in the future.
You are using <em> it makes your text italic.Your markup structure is not good.
Add in your css on #tabsJ font-style: normal;
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 am making a vertical list of links, but I don't want just plain text, I want a background. I have added this, and have set "padding-right" and added 25px. After this, I noticed that the sizes are different depending on text.
I realize that I could just edit it in HTML, but I also want it to change depending on if its being hovered or not.
Also, I tried setting the width, but that did not work.
Thanks in advance.
HTML
<ul id="sidelinksleft">
<li>Quick Start</li>
<li>Tag Helper</li>
<li>HTML</li>
<li>CSS</li>
<li>Photoshop</li>
</ul>
CSS
#sidelinksleft{
width:90%;
margin-left:auto;
margin-right:auto;;
height:25px;
position:relative;
clear: right;
float:left;
}
#sidelinksleft li{
position:relative;
top:2px;
padding-right:20px;
list-style-type: none;
}
#sidelinksleft li a{
color:#777777;
font-size:13px;
font-family: sans-serif;
text-decoration:none;
background-color:#B2FF99;
height:17px;
position:relative;
border:1px solid black;
padding-right:25px;
}
#sidelinksleft li a:hover{
color:#a3a3a3;
font-size:13px;
font-family: sans-serif;
text-decoration:none;
}
#sidelinksleft li a:active{
color:#00B2EE;
font-size:13px;
font-family: sans-serif;
text-decoration:none;
}
If you remove width:90% from #sidelinksleft and then add the following they will end up as the same size:
jsFiddle
#sidelinksleft li a {
width:100%;
display:block;
margin-bottom:2px;
}
So what this is doing is expanding all a elements out to fill 100% of its parent which in turn is width of the largest child.
FYI You need to apply it to the a element (not just li) if you want the entire area to trigger the link.
Currently, your background color and padding are specified for your a elements, which vary in size depending on their contents because they're inline. This is also why you can't change the width on the anchors - they're inline instead of block.
You'd probably be better off moving your background color and border styles to the li elements, and adding a little margin and width to spread them out. Example:
#sidelinksleft li a { /* remove border and bg declarations */ }
#sidelinksleft li {
background-color:#B2FF99;
border:1px solid black;
margin: 5px;
width: 40%;
}
I've modified some existing CSS code i found to develop a menu. It all works fine except when i hit the drop down menu. if there there is another HTML component on the page, the menu stays behind the component instead of it staying on top (i hope my description makes sense).
Here is the CSS:
#navMenu{
/*font-family: 'Tenor sans', Calibri, Times, Times, serif;*/
margin-left:2px;
/*width: 944px;*/
width:100%;
font-weight:normal;
font-size:15px;
}
#navMenu ul{
margin:0;
padding:0;
line-height:30px;
}
#navMenu li {
margin:0;
padding:0;
/*removes the bullet point*/
list-style:none;
float:left;
position:relative;
background-color: #F9F9F9;
}
/*for top level */
#navMenu ul li a{
text-align:center;
font-weight:bold;
font-size:0.8em;
line-height:height;
font-family:Arial,Helvetica,sans-serif;
text-decoration:none; /*remove underline*/
margin:-1px;
/*height width for all links*/
height:30px;
width:150px;
display:block;
/*border-bottom: 1px solid #ccc;*/
color: #00611C;
}
/* hiding inner ul*/
#navMenu ul ul{
position:absolute;
visibility:hidden;
/*must match height of ul li a*/
top:28px;
}
/*selecting top menu to display the submenu*/
#navMenu ul li:hover ul{
visibility:visible;
}
#navMenu li:hover {
/*background-color: #F9F9F9;*/
background-color: #DBDB70;
border-radius: 5px;
}
#navMenu ul li:hover ul li a:hover{
/* color: E2144A;*/
color:#E2144A;
}
#navMenu ul li a:hover{
/*color: E2144A;*/
color:#E2144A;
}
Would anybody be able to tell me whats missing to enable the drop down menu to stay on top?
thanks.
It would be useful to have the HTML code, not just the CSS, to troubleshoot this. But with just the CSS you posted, look into setting a z-index on the elements that are layered backwards from the way you would like.
http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/
https://developer.mozilla.org/en-US/docs/CSS/Understanding_z-index?redirectlocale=en-US&redirectslug=Understanding_CSS_z-index
use z-index.
#navMenu{
/*font-family: 'Tenor sans', Calibri, Times, Times, serif;*/
margin-left:2px;
/*width: 944px;*/
width:100%;
font-weight:normal;
font-size:15px;
z-index:1;
}
Try giving your menu a z-index: 1; (or higher). You can also lower the z-index of whatever content is covering up your menu.
You need to set the parent that will wrap your menu to be in position: relative, this could be a body or maybe an outer wrapper. Then you can use absolute position to place it always at the top and specify some z-index:
For more information: see this z-index property information in here:
https://bytutorial.com/tutorials/css/css-z-index
I'm working on a simple HTML site and having trouble with the navigation not rendering correctly in Chrome and Safari but is fine in Firefox (all on Mac).
The nav li's should each be blocks with 15px of padding, floated left next to each other, showing a light green background on hover. In Chrome and Safari, they're just showing up with the page default link styles with no float.
The site can be seen here: http://www.rjlacount.com/clients/GreenTree
Thanks for any help!
And here's the CSS I'm using for the nav menu:
ul#nav {
font-size:16px;
border-top:1px solid #a4a4a4;
border-bottom:1px solid #a4a4a4;
text-align:center;
margin:40px auto;
list-style:none;
}
ul#nav li a:link, ul#nav li a:visited {
float:left;
padding:15px 43px;
text-decoration:none;
font-weight:normal;
color:#000;
}
ul#nav li a:active, ul#nav li a:hover {
background:#e6ffdc;
text-decoration:none;
}
ul#nav li.highlight a:link, ul#nav li.highlight a:visited {
background:#e6ffdc;
}
Looking at your source, it seems to be a problem in your markup. The <a> tags should be inside the <li> tags, this seems to be automatically done on firefox, but not in webkit.
In your CSS that you have provided, you are also searching for any anchors within a list item, so it wouldn't be able to find it anyway, as you have them the wrong way around.