I'm rather per perplexed by this. When I view my web page on Chrome, FireFox, IE9, Opera, or Safari on my main computer, there is an extra 3px of top padding on my menu's rollover.
When I check on my other two computers in the house, on all said browsers above (plus IE8), the menu doesn't have the 3px extra padding.
I have reset the browsers on my main computer, though I'm thinking something external must be impacting the page rendering, since it's happening on all of my browsers...? It wouldn't be a monitor condition would it? I have not done anything fancy about monitor calibration. All my browsers are at zoom 100%.
Main comp: Windows 7
Other two comps: Windows 7 and Windows XP
Any guessing about why this may be would be super helpful. Thanks.
CSS:
#access {
clear: both;
display: block;
float: left;
margin: 0px 0 40px 0;
padding:0;
width: 100%;
text-align:left;
/* height:54px; */
background-image:url(images/menu-bar.gif);
background-repeat:no-repeat;
background-position:top center;
}
#access ul {
list-style: none;
margin: 0 0 0 20px;
padding: 0;
width:100%;
}
#access ul li { display:inline;padding:0;margin:0; }
#access li {
background-image:url(images/menu-bar-divider.gif);
background-repeat:no-repeat;
background-position:top right;
}
#access ul li a {
color: #ffffff;
display:block;
float:left;
padding: 18px 39px 17px 39px;
text-decoration: none;
font-size:16px;
text-shadow: 0px 1px #c86209;
}
#access li a:link { }
#access li:last-child { background-image:none; }
#access a:hover { text-shadow: none;background-image:url(images/menu-bar-hover.gif);background-repeat:repeat-x;background-position:bottom center;color:#000000!important;}
#access a:visited { color:#ffffff!important;}
Possible scenarios:
is this a CMS? are you maybe logged in as an admin in the other
pc? I had the same problem with Wordpress. http://wordpress.org/support/topic/31-update-causing-28px-top-spacing-in-html-body
do you have any addons, plugins, adware installed that are
interfering with your layout?
Did you use a CSS reset or
Normalize? (one of them not both) This can help you solve
similar issues.
http://necolas.github.com/normalize.css/
http://developer.yahoo.com/yui/reset/
Could you try reproducing your case in JSFIDDLE or http://tinkerbin.com/ ?
Related
I could very well have lost it.
My :hover, a:link states do not seem to work on a mobile.
I have a fixed nav at the bottom of the screen:
/* nav */
nav#desktop {
position: fixed;
width: 100%;
left: 0px;
bottom: 0px;
background-color: transparent;
padding-top: 28px;
z-index: 1002
}
nav#desktop > ul {
position: relative;
height: 25px;
overflow: hidden;
float: left;
margin: 0 0 28px 2.3%
}
#media only screen and (max-width: 675px) {
nav#desktop > ul {
position: relative;
height: 25px;
overflow: hidden;
float: left;
margin: 0 0 28px 3%
}
}
nav#desktop > ul > li {
width: 200px;
font-size: 19px;
font-weight: 400;
float: left;
margin-right: 12px;
position: abolute;
bottom: 0px;
overflow: hidden
}
nav#desktop a {
color: #000
}
nav#desktop a:hover {
color: #8974A7
}
On a desktop the hover works successfully, as in when you hover it shows purple and then goes back to black.
Why on a mobile, when the li item is clicked, does it go purple, and then stay purple.
I did have:
nav#desktop a {
color: #000
}
nav#desktop a:hover, a:focus {
color: #8974A7
}
Thinking :focus was behind it, having removed it now; still no change.
Interestingly, I have:
#mobile-open #mobile-container > ul {
position: relative
}
#mobile-open #mobile-container > ul > li {
margin: 0px;
padding: 0px 0px 15px 0px;
}
#mobile-open #mobile-container > ul > li:last-child {
margin: 0px;
padding: 0px
}
#mobile-open #mobile-container a {
color: #fff;
text-decoration: none;
}
#mobile-open #mobile-container a:hover {
color: #ccc
}
For links within my open menu, and the two states work as expected.
As you can imagine, :hover is almost impossible to truly support on consumer touch devices (there's no detection for when a user is hovering over the screen but not touching it).
So the devices do the best they can, and they end up with what you observe, which is a pretty terrible experience, but you're at the mercy of browser vendors - you're developing on their platforms.
Do what often seems to be done, add a piece of JavaScript to detect (imperfect) user-agent/touch detection and add a class of touch to the body element.
And then, everywhere in your CSS you'd have to do this:
body:not(.touch) someselector:hover { }
Or do the inverse:
body.no-touch someselector:hover { ... }
If you decide you like the :hover implementation of a particular browser vendor when on touch, but not the implementation of another, then you can add further classes to your CSS to target specific browsers/devices.
All solutions are pretty terrible, really.
You need to use :active and :visited to change the color after you selected the element.
:hover on mobile don't work. Devices try to render it as better as they can but with touch device there's not an :hover status.
I have been struggling with this problem for some time now mostly because, it only happens every now and then and I also do not know where to begin on narrowing down the cause of this problem. So occasionally, when my website page loads, the menu bar, which should be horizontal, will load vertically and aligned all the way to the right side of the header.
As I said before this only happens every now and then sometimes it loads just fine, and the menu layout usually corrects itself (horizontally) after refreshing or reloading the page once
here is the css code for the menu
div.hideSkiplink
{
margin:0px auto 0px 195px;
position:absolute;
bottom:0;
right:0;
}
div.menu
{
background-color:#080808;
padding: 0px auto 4px auto;
}
div.menu ul
{
background-color:#080808;
list-style:none;
margin: 0px;
padding: 0px;
width: auto;
}
div.menu ul li a, div.menu ul li a:visited
{
background-color: #080808;
/* border: 1px #585B5E solid; */
border-right:1px solid #585B5E;
color: #dde4ec;
display: block;
line-height: 2.15em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
}
div.menu ul li a:hover
{
background-color: #bfcbd6;
color: #465c71;
text-decoration: none;
}
div.menu ul li a:active
{
background-color: #465c71;
color: #cfdbe6;
text-decoration: none;
}
and below are pictures of what is happening vs. what it should look like.
Incorrect...
Correct...
Any Tips on how to figure out why this is happening are greatly appreciated.
I still haven't been able to figure this out, anyone have any thoughts?
I don't know if it would be some script thats loading before this that is haulting the menu loading or what. Any suggestions on how to figure out why it is doing this would be helpful.
I think you il have display: block property, may be from some parent element.
try to fix it like this:
div.menu > ul li{
float: left !important;
}
if this help this mean you have simple problem this display: block propery.
I am working on a site, in which on the main menu (top navbar), I have used list-style to separate each menu item. In Firefox is show fine and the small circles are inbetween each menu item as they should be. However on Chrome, they seem to be behind the menu item itself. I'm not sure whether it's something to do with my styling or whether it could possibly be a Chrome bug.
Link to the site:
http://cocobrownboutique.co.uk/site
I'm not going to post all the CSS as it's a Joomla template and thus will be too long, however I will post the my additional CSS:
#menubar {
height: 25px;
}
.menu, .menu ul {
list-style: circle outside none;
margin-left: 20px;
}
.menu-dropdown li.level1 {
height: 18px;
padding: 0 32px 0 15px;
}
.menu-dropdown a.level1 > span, .menu-dropdown span.level1 > span {
line-height: 25px;
}
.menu-dropdown li.level2 {
list-style: none outside none;
}
If a link to the main menu.css file is required I will of course provide it. I pointer in the right direction would be much appreciated as for the life of me cannot understand why this is happening.
i tried with "firebug" on chrome.
Add float:left; on you're menu-dropdown li :
.menu-dropdown li{
position:relative;
float:left;
}
And delete this :
.menu-dropdown, .menu-dropdown .level1, .menu-dropdown .level1 > span{
float:left; <-- delete this
}
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...
This is pretty specific, but I'm hoping someone could take a look.
I have a Video theme (from Press75) and wanted to add a nice drop down menu below the logo area.
I copied the relevant code and CSS (with some tweaks) to the theme, and it works great in FF, Chrome, IE9. It does NOT work in IE8 or 7.
Edit: Sorry for lack of explanation. By not work, it just displays the menu as a unstyled list, going down the page and pushing aside below content. What I want is a horizontal, styled menu as it appears in Twenty Eleven theme. It works fine in everything but IE 7 and 8.
If there's anyone with some CSS knowledge who could look it over, I would be way appreciative. I'm stumped and been working on it for hours. Can't get help from Press75 without costly customizations.
Thanks.
Here's the URL: http://www.psychetruth.net
Here's the CSS code currently in use for the menu:
/************ MENU **************/
#access {
background: #ececec; /* Show a solid color for older browsers */
background: -moz-linear-gradient(#ececec, #cccccc);
background: -o-linear-gradient(#ececec, #cccccc);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ececec), to(#cccccc)); /* older webkit syntax */
background: -webkit-linear-gradient(#ececec, #cccccc);
clear: both;
display: block;
float: left;
margin: 0 auto 0;
width: 100%;
}
#access ul {
font: 14px/16px Times New Roman,Georgia,serif;
letter-spacing: 0.5px;
list-style: none;
margin: 0;
padding-left: 0;
}
#access li {
float: left;
position: relative;
}
#access a {
color: #333;
display: block;
line-height: 3em;
padding: 0 1.2125em;
text-decoration: none;
border-right: 1px solid #BBBBBB;
}
#access ul ul {
-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
box-shadow: 0 3px 3px rgba(0,0,0,0.2);
display: none;
float: left;
margin: 0;
position: absolute;
top: 3em;
left: 0;
width: 188px;
z-index: 99999;
}
#access ul ul ul {
left: 100%;
top: 0;
}
#access ul ul a {
background: #E6E6E6;
border-bottom: 1px dotted #ddd;
color: #444;
font-size: 13px;
font-weight: normal;
height: auto;
line-height: 1.4em;
padding: 10px 10px;
width: 168px;
}
#access li:hover > a,
#access ul ul :hover > a,
#access a:focus {
background: #f9f9f9; /* Show a solid color for older browsers */
background: -moz-linear-gradient(#f9f9f9, #e5e5e5);
background: -o-linear-gradient(#f9f9f9, #e5e5e5);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */
background: -webkit-linear-gradient(#f9f9f9, #e5e5e5);
color: #373737;
}
#access ul li:hover > ul {
display: block;
}
#access .current_page_item > a,
#access .current_page_ancestor > a {
font-weight: bold;
}
WordPress Twenty Eleven is an HTML5 theme, and uses the HTML5 <nav> element for its menu. This won't be recognised as a styleable element by older versions of IE, and that's why your styling isn't working. Internet Explorer versions below IE9 just won't "see" it.
WordPress Twenty Eleven includes a Javascript file called html5.js, which is Remy Sharp's HTML5-enabling "shiv" to fix this up.
In order for your site to work properly, you'll need to do one of two things:
(My recommendation) Read up on HTML5 and this "shiv", change your DOCTYPE to the HTML5 doctype (necessary if you're going to be properly compatible with the new elements like <nav>), and add the shiv script, or:
(Simpler, but you'll learn less) Change the <nav> element to a <div> and make any necessary fixes to the CSS to match. By the looks of it, all you'll need to do is change <nav id="access" role="navigation"> to <div id="access" role="navigation"> (and the closing tag to match, of course!) as the CSS targets by ID rather than element name.
You may find other parts of the Twenty Eleven code you've grabbed incompatible with your current DOCTYPE; whatever you do, it wouldn't hurt to validate your HTML afterwards.