In the nav bar on this site, we're having a problem with padding on the li items in the nav bar.
http://www.wbbearonline.com/
In Chrome and Safari, the left padding on each li item says 10, but it's actually adding a couple extra pixels (making padding 12 or 13).
Firefox and IE9 show the correct 10px.
Any ideas what might be causing this?
FireFox is not applying the a:link css property to links that have been visited, therefore those links do not receive the 3px padding. Chrome is applying it however.
To fix it, try just changing your css "a:link" rule to "a".
There might be margins or pads inherited from parent items, have you tried a css reset file(Although it may be a bit extreme for this instance)? Or setting the pads/margins further up the tree to 0?
Related
I have an issue with my menu in IE9-10. In any other browser spaces between elements are equals. But In IE it displays fixed width for each item. The behavior will be the same in other browsers if I will specify table-layout:fixed to <nav> tag, but I tryed to specify table-layout:auto with no success.
Here is Fiddle: http://jsfiddle.net/UcuBt/
Is there any way to fix it? Thanks
UPDATED
The same issue in Opera 12.15
Remove width:1%; for table-cell item, then in IE they will take space needed and won't be even cells anymore.
if that was your problem :)
In Chrome and Safari, the following CSS problem occurs:
ul, li and a or link have a default CSS property that pushes everything vertically away. I have fiddled with the following properties:
font-size
margin-right
padding
color
text-decoration
margin
padding
border
display
list-style
vertical-align
line-height
line-height
font-style
margin
font-variant
padding-top
padding-bottom
margin-top
margin-bottom
And nothing seems to prevent the problem.
I've downloaded the CSS reset by Yahoo, but I'm unsure how to use it properly.
I haven't pursued that because I don't know that it would solve my problem anyway.
I've looked at your Fiddle and I'm slightly confused. You say things are being pushed away vertically, but I don't see that happening at all.
The only thing I see which could even somewhat meet that description is the fact that your links are on separate lines.
If this is the problem, the solution very simple: divs are block-level elements. This means that they default to 100% width and are designed to break onto a new line before they start, and onto a new line after. This is the behavior of display: block; and is built-in to the default styles of a div.
To fix this, apply the following style:
#headernav div{ display: inline; }
This, however, is the least of your problems. The code you copied into the fiddle lacks a closing tag for one of the div elements, which could cause unpredictable behavior in older browsers. You have two divs with the same ID, which is a major no-no.
In this update to your fiddle I have fixed the HTML problems you have. Note that 'tempLink' is now a class, and is targetted by a '.' in CSS, not the '#' that indicates an ID.
I have applied the above CSS to the class tempLink, instead of any div within your headernav.
Note in that fiddle that your two links are now side-by-side. You can control the horizontal spacing between them with margin and padding (target the tempLink class).
As Adrift mentioned it would be a lot easier to diagnose if you use jsFiddle. That being said, have you tried display: inline-block or float: left?
I have an issue which I've been completely baffled by.
I am currently working on a client's site and on Chrome, the navigation bar has a 1px gap on the very right (more noticeable when you hover "contact") however firefox is fine. BUT on Firefox if you go onto (http://meskholdings.com/about) there is a massive gap, yet on Chrome its not there.
Been trying to deal with this all day and I cant figure out whats going on!
You are going to get inconsistent results when it comes to dealing with pixel fractions. I suggest replacing the padding on your anchor elements (0 left and right padding), give the anchor element text-align center and a width of 20%.
nav li a {
width:20%;
padding:10px 0;
text-align:center;
}
The following example is a very simplified version of my top navigation.
http://jsfiddle.net/AEqxT/
If you look in most browsers, you should see two green list items next to eachother, with a blue box or 'badge' sitting on top, bridging the gap between the two. In IE7 however, the blue box always falls below the second li. I've tried all manner of fixes to this. Setting a higher z-index to the parent ul didn't change anything, and if I use position: relative; on the 'badge', it loses its width and height.
Is there an obvious fix to this that I am missing?
You'll probably struggle with your badge in with the LI, take it out of the list and you should be ok, with a bit of messing with position:
http://jsfiddle.net/AEqxT/2/
If you absolutely have to have it in with the LI, then you'll probably have to have some JS to make this work
This is a reported IE7 bug.
You could fix it with the JS solution posted to this question, or you could manually set different z-indexes to all <li> element, ordered from high to low values:
http://jsfiddle.net/AEqxT/3/
I've inherited a site that is literally about to go live. I've got an issue which only affects webkit - when the page is zoomed out, the last nav item drops down to the next line.
It's fine in all other browsers (even IE!) and I cannot find a fix. I've tried sizing the menu in % and in ems and the same thing happens (in fact, it's worse when using these two units instead of PX...)
The nav container (a UL) is set to 959px in width and each child LI is set to 112px. There are 8 LIs so there is easily enough room for them.
When the page is zoomed out 1 level, the computed width of the UL is 799px and each LI is 93px, so there still should be enough room.
Any ideas? I can't link to a live example...