in the "ul" Elememt it shows that it has padding on the left side (padding is green and the orange is margin
but when I looked through what I've got in my CSS structure i do not not have any padding at all
My Nav Bar elements
I tried to fix it by checking through the dev tools but nothing happened and then I tried removing some properties in my CSS but it didn't make any changes
The user agent stylesheet of the browser itself is applying that padding. If you want to get rid of it, you'll need to override it by setting:
ul {
/* All your other ul styling here... */
padding-left: 0;
}
Related
I have made a menu that 'popups' on hover when javascript is disabled. However this is working ok, the menu shows a scrollbar when the menu is to large to fit into the viewport (window).
When it popups on hover there are two scrollbars, one of the window and one of the menu. Looks very ugly and can confuse the user.
With javascript enabled I apply a .noscroll class to the body so there only one scrollbar.
.noscroll { overflow:hidden !important; }
Tried to do this with CSS only but can't get it to work, tried several things like:
.nav .panel:hover > body,
.nav .panel:hover > html { overflow:hidden !important; }
.nav .panel:hover #body { overflow:hidden !important; } /* body with id body */
The menu itself is fixed positioned. The reason I do it this way is to be sure the menu covers the whole window because height:100% doesn't want to cover the whole document and it's very ugly. Also, the search bar will be always visible.
How can achieve the effect I want?
Image (click on right mousebutton to view larger image):
This can't be done with current CSS rules. You can only apply rules to children of the specified element, not parents. See https://stackoverflow.com/a/1014958/1034613 for specifics. For now, you will have to stick to Javascript for that.
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've been searching through stack overflow to find an answer to this, but nothing has been helping me (or I've been adding it incorrectly).
I've set up a horizontal menu on a website for a client and am trying to center the menu items within the menu bar, however, the right and left padding is off by 1px between firefox and chrome, which makes the last menu item in the row butt up against the right edge only in Firefox. Dropping the left and right padding in firebug by 1px on the li tags in the menu makes it look like it does in Chrome with my original CSS.
The problem code seems to be on the li tags padding.
Here is a JSFiddle with my menu code (sans background images, but the problem is still evident) http://jsfiddle.net/FxznT/1/
and here is the original site I've been working into for reference: http://clients.taylordesign.com/LCBP/site/home.html
What am I missing? I am already using a CSS reset. Thanks.
You could try and use a CSS hack to select only Firefox:
#-moz-document url-prefix() {
.ul.topNav li {
padding: 16px 11px;
}
}
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;
}
Moved the link because it no longer points to the site, and solution has been found
I have some list elements that have a mysterious left padding/margin.
In Firefox, it displays as expected. But in IE7, there is a text indent or something forcing the inner text in about 4 spaces. See the example link above.
I have set padding to 0, margin to 0 (though it shouldn't be this as clearly the border goes around the element containing the gap), text-indent to 0, and text-align: left.
Does anyone know what may be causing this?
In your style.css file you set the LIST-STYLE-POSITION to inside. This is causing your issue in IE.
#content-body UL {
LIST-STYLE-POSITION: inside; LIST-STYLE-TYPE: disc
}
You can either remove that element, or you can add a style to your .events UL
.events UL {
...
LIST-STYLE-POSITION: outside! important;
}