My website header is where I have my menu. Except I am having to put a negative margin on it and I don't want to do that, but for some reason, there is something taking up space between the hgroup and the nav element. I thought it might be the form element for the search box, but when I do display:block it makes no difference. The site is here.
Another strange thing is when I hover over a submenu (e.g. recycle) the parent element goes white. I can't for the life of me work out why. See below for strange hover behaviour.
Make your body background longer?
The design changed right after I refreshed your website. As for now, all I see is that the navigation is still 1px off the header. Maybe if you'd reduce the margin-top from 42px to 41px, that problem will be solved.
EDIT:
So in Chrome, there's this 1px issue, but in Firefox, it looks fine.
The same 1px offset in Safari and Opera. But again, in IE8, it looks fine.
I think this problem has occurred due to the defined height for hgroup, if you have done that.
[ the first image is a screenshot from Chrome, the second is from Firefox ]
EDIT 2:
The offset is due to the fixed height of the background image. Other than that, everything is working just fine. Obviously, there are variations in both the images, as you can see, the chrome having the 1px offset while it is absent in Firefox. I, personally don't like to give a defined height to elements that is likely to have results like above.
One good solution would be to make a header container with 100% width and the given background image, while all the header content will go within the container. That way, no matter how high the contents within the container are, the background will remain the way it is meant to, and your navigation will not get an offset.
Yea h2 description is taking space from your header and about your menu, try splitting your rules in mainnav.css, seems like you have :hover grouped with actives, that's why your classes are messing up
This is the rule causing the problem in your css
#access #menu-menu li.current_page_item a, #access #menu-menu li.current_page_item, #access #menu-menu li.current_page_item a:hover, #access #menu-menu li.current_page_item:hover {
background-color: #FAFAF0;
box-shadow: none;
color: #0F0D0C;
<h2 id="site-description"></h2>
If you use Firebug/Inspect element, you'll see it there, just after your h1, taking up a lot of space.
#site-description {
color: #7A7A7A;
font-size: 14px;
margin: 0 270px 3.65625em 0;
}
For the White hover in the nav, make the following change:
#access ul ul {
background-color:red;
}
Related
I have a simple structure
<nav>
<span>
A
B
C
<span>
<nav>
and I go Godzilla on the css, e.g.
margin:0px; padding:0px; vertical-align:bottom; box-sizing:border-box;
But no matter what I try there is always this really cool 1px gap at the bottom of the element. Why is it there and how would you make it go away if you were me?
fiddle
One possible solution would be to make the <span> element inline-block. This will remove the gap
EXAMPLE HERE
nav > span {
display: inline-block;
}
Alternatively, a display of block works too. The point is that it is no longer a pure inline element.
I see what you mean, it does appear (on Firefox) without zooming in closely. I believe the problem is the default line-height given to text in browsers, which results in a bit of extra space between text lines.
With some experimentation, I found that adding these styles works:
nav {
font-size:16px; /* Default font size in Firefox, but specify just in case */
line-height:18px;
}
Here's an updated JSFiddle to demonstrate it. Seems to work properly in Firefox and Chrome. Let me know if you have any problems, though. Hope this helps!
I'm trying to edit the default menu for Wordpress TwentyTwelve theme. So far I have made the sub-menus horizontal but they don't align the same in Firefox than Chrome.
In Ff it looks as I want, but in Chrome, the sub menu align with the Menu item previously clicked, NOT to the far left of the main menu.
basically, I want a horizontal two-lines menu. I can' t get the "position:"" properly.
Here's how it looks in both browsers:
Here's how it looks in both browser:
Chrome:
http://imageshack.us/photo/my-images/248/cssmenuchrome.jpg/
I can't post more links because I need 10 reputation but the second image (menu in Firefox) in there too.
And here's a fiddle of my code so far:
http://jsfiddle.net/ZN9my/
.main-navigation li ul ul {
top: 0;
left: 100%;
}
.main-navigation .menu-item li {
display: none;
margin-right: 14px !important;
}
Your problem, as you say, is that both browsers seem to be dealing with your position:absolute; differently. position:absolute should be calculated in regards to the most recent parent element with an explicitly set position, which means that it's actually Chrome which is interpreting it right.
In this case, you've given .main-navigation li a position:relative, which means that Chrome is positioning the submenu, li.sub-menu, relative to it. If you remove position-relative from the CSS for .main-navigation li and add it to ul#menu-main, then li.sub-menu will be positioned relative to the main navigation ul, and should behave as you want it to across browsers. You'll probably want to change .main-navigation li ul's top from 100% to something like 37px so it still sits in the right place.
I've made the changes to your jsfiddle as well: http://jsfiddle.net/ZN9my/1/.
I have been trying to resolve this issue on my own since Friday and I just don't seem to be having any luck. Hopefully with the following specifics, someone here can help push me in the right direction.
The site in question is http://www.jewelbyjewel.co.uk
The problem area: Top navigation menu
If you look at the menu in chrome, this is how the second menu appears:
This is how the menu SHOULD look.
In IE and FF, this is how the menu looks which is incorrect:
Now, I am aware I can fix this by explicitly specifying a width in the following stylesheet:
http://jewelbyjewel.co.uk/wp-content/plugins/ubermenu/styles/custom.css
I could change this:
#megaMenu ul li#menu-item-225 {
position:relative !important;
}
#megaMenu ul li#menu-item-225 ul.sub-menu-1 {
max-width: none !important;
}
to this:
#megaMenu ul li#menu-item-225 {
position:relative !important;
}
#megaMenu ul li#menu-item-225 ul.sub-menu-1 {
max-width: none !important;
width:400px;
width: 420px\9;
}
(width: 420px\9; is an IE9 hack).
While this does work I am wondering why I am having to specify individual widths when in Chrome this works without issues and I am not specified a maximum width anywhere in the CSS. I hate to admit it but barring using the hack as detailed above, this issue has me beat! I'm pretty certain I've either done something wrong or I'm missing something trivial. Either way, I would love to be able to get to the bottom of this and put it behind me.
Not sure if this helps, but your width behavior is affected by absolute positioning of the <ul class="sub-menu sub-menu-1">.
There is a bit more on the subject: div with unspecified width (absolute positioning), so specifying width or min-width is the way to go.
I made a css-only dropdown menu. The requirement was to have a horizontal bar of items that can each drop down a vertical menu. Furthermore, those items should not drop a tertiary menu, but instead just show bulleted lists. My html has three nested ul and the menu is working perfectly in all modern browsers. It looks like this:
However, I did not like how the darker box behind the link is starting right of the bullet and does not stretch over the whole menu width, so I played around a bit and finally came to this tweak:
#nav li ul li ul li a {
padding-left:1.8em;
margin-left:-1.8em;
}
Now the bulleted menu item looks just like I wanted:
And due to the nature of em beeing relative to the font size, it works independently of the font size, like shown with a larger font size here:
I tested this on Internet Explorer 8+9+10(developer preview), Firefox 3+7, latest Chrome, Opera and Safari and it works like a charm.
However, I just dont understand why it is exactly 1.8em that does the job. How come every browser indents the bullet items exactly this far? I searched the internet on this topic, but I did not find anything helpful. Can I be sure this works on future browsers? Are those 1.8em specified in the HTML standard?
Thanks in advance for any hint!
Edit:
To DisgruntledGoat's answer: It would not work if I used 1em/-1em or 20px/-20px. With this style:
#nav li ul li ul li a {
padding-left:20px;
margin-left:-20px;
}
I get this (obviously not scaling with the font size) result for different font sizes:
Similarly, 1em/-1em is also off and looks like on the right in the picture above but scaling with the font size. It still looks like 1.8em is the magic distance for some reason...
Given your code, you've set up your ul such that it has no margin or padding. However, you've set up your li's such that they have margin-left: 1.8em:
#nav li ul li ul li {
display: list-item;
margin-left:1.8em;
list-style:disc outside none;
}
#nav li ul li ul li {
margin-left: 1.8em;
padding-left: 0;
}
And there it is.
You should definitely do a CSS reset and then set the properties the way you need them. Never trust browsers to be consistent. It adds a bit of coding but at the same time future proofs your code.
Based on many years of inconsistent browsers - I'd say you can't trust them to ever be consistent. The best option is to forcibly control it yourself.
You can use that by simultaneously setting the padding-left and margin-left of an li. eg:
li {
margin-left: 1.8em;
padding-left: 0;
}
Apparently some (mainly older) browsers use padding and some margin - so be sure to set both.
To answer the question and your comment: your solution works because you negate the padding with the exact same size margin. But the spacing to the left of the list is larger with the larger font size. You would get the same result with 1em padding and -1em margin or 20px and -20px.
As I mentioned in the comment, the actual default padding for lists is 40px. To make things even more confusing, on checking the user agent stylesheets (in Chrome Dev Tool and Firebug for Firefox) they report unique CSS properties: -webkit-padding-start or -moz-padding-start respectively.
I assume that these special properties are used in place of regular padding due to lists being a special case in HTML - they have hanging bullets/numbers that don't count in the padding.
If I add this to my CSS...
small a:hover, a:hover {background-color: #CCC; }
This happens to all images that are also links when viewing in IE 8 (fine in firefox)...
They look right...
http://notails.com/nothover.jpg
until I hover over them...
http://notails.com/hover.jpg
If I remove the line of CSS the behaviour goes away. I've tried googling this but I just get unrelated problems.
By default, images align their bottom edges with the baseline of the text. That grey space you're seeing is the space below the baseline, used by decenders like q, p, y, etc. (The fact that you have no text is irrelevant - space for descenders is still reserved.)
You can get rid of it like this:
a img { /* You might want to make this rule more specific! */
vertical-align: bottom;
}
See That mysterious gap under images for a full discussion of this.
You might also try setting line-height on that item to 0.
try
a {
margin: 0px;
padding: 0px;
}
I think you probably need to set the border for the image to none, so border:none;