This menu is on an ASP.NET navigation. On Chrome and Safari, it looks like this:
But on Internet Explorer, it looks fine:
Here's my CSS:
div.hideSkiplink {
background-color: #000;
width: 100%;
display: block;
height: 42px;
font-size: large;
font-weight: bold;
background: transparent url('../images/redslate_background.gif') repeat-x left top;
font-family: 'Times New Roman' , Times, serif;
text-transform: uppercase;
color: #000000;
}
div.menu ul {
position: absolute;
margin: 0px;
padding: 0;
list-style-type: none;
width: auto;
}
div.menu ul li {
display: block;
float: left;
margin: 0 1px 0 0;
}
div.menu ul li a {
display: block;
float: left;
color: #000000;
text-decoration: none;
padding: 14px 22px 0 22px;
height: 42px;
}
div.menu ul li a:hover, div.menu ul li a.current {
color: #fff;
background: transparent url('../images/redslate_backgroundOVER.gif') no-repeat center top;
}
Somehow, on Chrome and Safari, the menu seems to be below the background. How can I fix it?
Sadly, this is a regular problem in Internet Explorer. Web Developers hate it so bad because that always happens! Nevertheless there are certain rules that you should follow If you want your site to be open from all web browsers. Please take a look at this: Internet and CSS issues
There are hundreds of articles related to this topic so you should google things like
IE and CSS compatibility
IE and CSS issues
It is evident that you have been struggling with margin-top issue. Hence you can use margin-top:10px and top:10px CSS property interchangeably.
It seems that you have used, margin: 0 1px 0 0. Hence, now you should also add top:10px CSS property to adjust your menu. For more detailed help, also paste your HTML code, so that i can give you example...
Related
I have a header with logo on the left and links on the right.
On smaller screens (such as a tablet) links doesn't fit in one line.
When using float:left for the logo, and float:right for the links, all the links fall to a new line, which is not the desired behaviour.
When using display: table-cell for both divs, the link area background-color spreads beyond the link area, which is not the desired behaviour too.
I'm stucked on what css formula is the better solution.
I need to keep all the links on the right of the logo, but the background-color should not spread beyond the link area.
Here is a fiddle with 2 examples, one with a lot of links (2 lines) and one with less links (1 line):
http://jsfiddle.net/ARauS/
#header {
display: table;
height: 25px;
background-color: #e7e7e7;
width: 100%;
}
#header #logo {
#float:left;
display: table-cell;
}
#header #links {
#float:right;
background-color: silver;
text-align: right;
display: table-cell;
font-size: 0; /* remove whitespace between menu itens*/
}
#header #links a {
font-family: Arial, sans-serif;
font-size: 8pt;
line-height: 18pt;
text-decoration: none;
color: #6a6a6a;
padding: 5px;
padding-left: 10px;
padding-right: 10px;
margin-left: 1px;
white-space: nowrap;
}
#header #links a:hover {
text-decoration: underline;
}
#header #links a.personal {
background-image: linear-gradient(to bottom, #fcfcfc, #e7e7e7);
}
I am so ready to be done with this website, but I'm stuck on a couple things, one of which has me COMPLETELY stumped. I'm working with Dreamweaver CS6, but I am horrible with Adobe software in general (not a regular web developer!), so I'm just doing all the code myself. I have a menu bar running horizontally across the top of my page. The final link in the menu looks fine in the Dreamweaver preview, but when I check it out in browser(s), the last menu item is sitting below the rest. I tried to enter an image, but this is my first day on the website, so I haven't gathered enough reputation points. :shrug:
Here is my HTML code for the div:
<div id="nav1">
<ul>
<li>Home</li>
<li>FAQs</li>
<li>Rates</li>
<li>Contact Us</li>
<li>Portfolio</li>
</ul>
Here is the CSS. (Pardon the messy stuff; again, I'm just a newbie freelancing girl without a lot of experience. Side note: The percentages are due to the fact that I'm creating a responsive layout.)
#nav1 {
background-image:url(Images/NavBkgrnd.png);
width: 100%;
margin-top: 2%;
text-align: center;
word-spacing: normal;
}
#nav1 ul{
height: 30px;
padding: 8px 0px;
margin: 0px;
}
#nav1 li{
display: inline;
padding: 20px;
}
#nav1 li a{
color: rgb(255,255,255);
padding: 5px 5px 25px 5px;
width: 16.5%;
border-right: 1px solid rgb(51,51,51);
display:block;
float:left;
font: 400 12px/1.4 "Palatino Linotype",Verdana,Geneva,sans-serif;
font-weight:bold;
text-decoration: none;
text-transform: uppercase;
}
#nav1 a:hover{
color: rgb(0,0,0);
background-color: rgb(170,0,0);
}
#nav1 li a#visited {
background-color: rgb(170,0,0);
}
Can anybody point out errors that might be causing this crazy misalignment? I really wish I could've posted a picture. The website isn't live, so I can't post a link, either. But maybe it won't be necessary if you spot some issue with the code. Please help!
UPDATE: Answers below have solved the problem. Thanks for the speedy solutions, everyone.
The last li of the #nav1 needs to have its padding-top set to 0px. Try adding style="padding-top: 0px" or doing something like this.
#nav1 li:last-child {
padding: 0px !important;
}
Remove the padding from #nav1 li seems to fix it for me.
jsFiddle example
I made a few changes to your code.
First off, I set the <li> elements to have inline-block display, rather than inline display to apply the block style to the outermost element. Second, I set the 16.5% width to the <li> elements and made the <a> elements have 100% width.
Note that this also centered the nav bar.
Working JSFiddle
#nav1 {
background-image:url(Images/NavBkgrnd.png);
width: 100%;
margin-top: 2%;
text-align: center;
word-spacing: normal;
}
#nav1 ul{
height: 30px;
}
#nav1 li{
display: inline;
}
#nav1 li a{
color: rgb(255,255,255);
padding: 5px 5px 25px 5px;
width: 16.5%;
border-right: 1px solid rgb(51,51,51);
display:block;
float:left;
font: 400 12px/1.4 "Palatino Linotype",Verdana,Geneva,sans-serif;
font-weight:bold;
text-decoration: none;
text-transform: uppercase;
background-color: rgb(170,0,0);
}
#nav1 a:hover{
color: rgb(0,0,0);
background-color: rgb(170,0,0);
}
#nav1 li a#visited {
background-color: rgb(170,0,0);
}
I cannot figure this out. I HAVE DONE RESEARCH so please, no comments about me doing more research. Also, I am a noob, so be nice ;)
Here's my site: http://library.skybundle.com/
Hover your mouse over the two black rectangles in the main blue nav bar (header area). The a:hover should make the color change to a gray. The ISSUE is that in Chrome, this looks perfect. But, in Firefox, the padding-right isn't long enough or something, so there is always a small black rectangle at the far right side of the "Educational Courses" button (this will only be visible when hovering your cursor over the button). In other words, the gray box doesn't go all the way to the right-side end of the button area upon mouse hover. I just don't understand why this looks and works great in Chrome, but bugs out in Firefox...
Believe me when I say I have tried everything I can to fix it using Firebug in Firefox. If you play around with it using an editor in your browser, you will see that if you try to make the padding longer for Firefox, it pops the whole button down onto a new line. So to fix THAT problem, you must make the container wider, but then the original problem comes back. It's a circle of problems and I'm sure one of you geniuses out there will see a simple solution that I am missing.
Please help. Thanks!
EDIT :
Here's my JSFiddle and code. Notice how it looks great in Chrome but not in Firefox?
http://jsfiddle.net/S4st8/
HTML:
<div id="navigation">
<div id="navigation-inner">
<div id="page-nav">
<div id="primary-nav">
<ul id="top-menu">
<li id="li-left">Product Training Videos</li>
<li id="li-right">Educational Courses</li>
</ul>
</div>
</div>
</div>
</div>
CSS:
#navigation {
background: url(http://library.skybundle.com/wp-content/themes/business-services/library/styles/colour-images/mu-nav.jpg) repeat-x;
margin: 0px;
padding: 0px;
height: 40px;
width: 100%;
}
#navigation-inner {
margin: 0px auto;
padding: 0px;
height: 48px;
width: 960px;
}
#page-nav {
margin: 0px;
padding: 0px;
height: 40px;
width: 960px;
}
div#primary-nav {
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
}
ul#top-menu {
margin: -5px 0.325em 0 0.325em;
position: absolute;
padding: 0;
z-index: 100;
top: 0;
left: 3em;
width: 367px;
}
ul#top-menu li {
line-height: 3em;
list-style-type: none;
height: 49px;
background-color: #2C2C2C;
float: left;
}
li#li-right {
list-style-position: inside;
border-left: 2px solid #5E5E5E;
}
ul#top-menu li a {
font-weight: bold;
font-size: 11pt;
text-decoration: none;
padding: 15px 10px 16px 10px;
color: #ffffff;
}
ul#top-menu li a:hover {
text-decoration: none;
width: auto;
color: #ffffff;
background-color: #505354;
padding: 15px 10px 17px 10px;
}
its because a tags (anchor tags) have a default display property of inline
due to CSS Box Model you would need to adjust your padding and set the anchor tags display property to display:block;
the display block allows the anchor tag to fill the whole space of the LI tag
change ul#top-menu li a to this:
ul#top-menu li a{
color: #FFFFFF;
font-size: 11pt;
font-weight: bold;
display: block; /* add this */
padding: 0 10px; /* add this */
}
the CSS Box Model adds the content + padding + border + margin
https://developer.mozilla.org/en-US/docs/Web/CSS/box_model
Take a look at this CSS rule:
li#li-right {
border-left: 2px solid #5E5E5E;
list-style-position: inside;
}
Dropping list-style-position: inside seems to fix your issue in Firefox (and still works in Chrome), but I haven't tested the implications in other browsers. The CSS rule is documented here.
The reason why : browsers apply their own css if you don't specify it. Firefox added the space for your bullet (somehow)
FF :
list-style-image none
list-style-position outside
list-style-type disc
GooChrome :
list-style-image: none;
list-style-position: inside;
list-style-type: none;
User JasonSperske gave you a fixing solution,
i invite you to RESET your css.
PS. in the meantime, you are invited to see : https://stackoverflow.com/help AND http://sscce.org/
Reading and understanding those pages will give you few reputations points
Working on revamping a client's site, and one of their requests is to change the nav to accommodate text of any size. Here's the trick: I can't change html, just css and javascript. Oh, and the version of jquery on the site is 1.4.4 - this can't change either.
I've got a javascript-based solution in place, and it's working across all modern browsers - but I can't seem to get it to function in IE7. The solution relies on all nav elements rendering in their native width (i.e. wrapping instead of resizing), in order to calculate the necessary width changes. In IE7, the nav items don't clear - the last one shrinks to a tiny size to fit into the first row, and the javascript thus can't tell that resizing needs to be calculated.
The javascript should work fine, the main issue is that I need to know what my css isn't doing to force the last element to wrap instead of resize in IE7. I've tried an exhaustive number of combinations of display: inline-block;, white-space: nowrap;, and float: left; to no avail.
I isolated the nav in question and put it in a fiddle right here. If anyone has any ideas, or knows a better way I can implement, let me know - all suggestions welcome!
I have two versions of your jsFiddle here to compare with and verify that this is what you're going for. I cleaned up your CSS a bit but the main thing I did was set a percentage width on the li in your navigation. You have 6 elements so 100/6 = 16.6666%. I should also not I removed the jQuery in the jsFiddles below.
http://jsfiddle.net/D8etp/1/
and
http://jsfiddle.net/D8etp/2/
CSS
body {
margin: 0;
}
#top-nav{
padding-top: 30px;
width: 940px;
}
#nav {
color: #FFF;
font-size: 12px;
margin: 0;
padding: 0;
text-transform: uppercase;
min-height: 49px;
background-color: #007369;
overflow: hidden;
}
#nav > li {
display: block;
float: left;
list-style-type: none;
margin: 0;
padding: 9px 0 0 0;
width: 16.6666666666%;
}
#nav > li > a {
display: block;
box-sizing: border-box;
text-align: center;
padding: 7px 12px 17px 12px;
line-height: 16px;
margin: 0 4px;
color: #fff;
text-decoration: none;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
overflow: hidden;
}
#nav > li > a:hover {
background: #b0a893;
}
#nav > li > a:hover {
text-decoration: none;
}
I'm having some trouble with a rollover.. hoping you can help me!
I'm using li navigation, and I want to have separate boxes linking to different pages. This part is fine and works like it should. I want to be able to hover over the box and have the box AND the link change colour. I can get the box changing no problem, and the link changes when you hover over it, but is there a way for them to both change when you're just hovering over the box? Here's what I've got so far:
#nav-menu ul{float: right; text-align: center;}
#nav-menu li{margin-right: 5px; list-style:none; padding-left: 1px; text-align: center; font-size: 14px;float:left; padding:0px 15px; width: 57px; position:relative;z-index:200; background: #000; color: #FFFFFF; font-family: georgia;}
#nav-menu li a{display: block; float: left; color:#fdf2e7;font-size:14px;text-decoration:none; text-align: center; padding:5px 0px 5px 0px; font-family: georgia;}
#nav-menu a:hover{display: block; color:#000000; text-align: center; background: #f3d5e1; text-decoration:none !important; font-family: georgia;}
#nav-menu:hover{display: block; color:#000000; text-align: center; background: #f3d5e1; text-decoration:none !important; font-family: georgia;}
--
Any help would be greatly appreciated. Thanks! :)
Use li:hover to target a list item when you hover over it, and use li:hover a to target an anchor whose parent list item is being hovered over.