When you zoom out on this site: https://www.zm-online.de/, it breaks the top nav on: PC: FF, Chrome, Safari (It's fine on IE9) on a MAC:Chrome and Safari (It's fine on FF).
I am thinking of fixing it on line number 598 and changing the padding from: 25 to 20, so the code will look like:
av#main_navi ul li a b.n2{
background: url("../_img/bg/mainnavi/bg_navi.jpg") repeat-x scroll 0 0 transparent;
color: #444;
font-weight: bold;
text-transform: uppercase;
height: 37px;
line-height: 37px;
/*padding: 0 19px;*/
/*padding: 0 25px;*/
padding: 0 20px;
text-align: center;
}
However, this did NOT work on a PC and a MAC with Safari and Chrome and it made the top nav not look quite right in "normal" view. Any help would be appreciated. :-) Thanks!
Rita
Hi try setting your padding as a %. Hope this helps.
Hey this is not a good solution but if you change font-size to 10px , the navigation doesn't break on Firefox.
And giving the float to the li makes some problems to me. I use display:inline-block for horizontal menu, display:inline-block is okay with IE,FF but Chrome has some bugs when your zoom level is 33% or 25%.
In my opinion try to design this nav with using display:inline-block.
Related
Having issues with aligning my button text across browsers. I've combed similar questions and have tried the suggestions but to no avail (display: inline-block for my hyperlinks, line-height: 1). There is too much headroom in firefox with my buttons (see homepage slider) and it looks just fine though in Chrome. Site is: jdd.meteor.com
*I was told this question was "off topic" when I tried to ask before. Please let me know what I can do to keep this question active if it is not on topic, whatever that means, so I can make changes.
Thanks!!
Screen captures (Chrome then Firefox):
#middle-section #slider .item .content hgroup a.call-to-action {
background: #820024;
color: white;
padding: 20px 30px;
letter-spacing: 0px;
font-size: 1.2em;
}
a {
color: #00aab5;
display: inline-block;
line-height: 1;
}
I had the same issue this morning, you need to define a height as well, that solved the problem for me, it looked great in Chrome but without height it looked squished in Firefox. Hope this helps.
My buttons appear as they should in Chrome and Firefox but the text fails to vertically center in Internet Explorer. Most times I success in getting around this problem but this time I'm stuck. A little help would be nice!
Here's the adress so you can see for yourself, the problem is within the header meny.:
http://spectra.macework.se
Here's my css:
#header-family_menu ul li a{
display:block;
font-size: 1.1em;
color:#000;
font-family:"SofiaProBold";
line-height: 1.3em;
padding: 9.0px 0 3.5px 0;
width:92.5%;
as you can see i've been trying to use line-height and padding to center my text but this time it fails in IE.
On the site I'm working on, for some reason the margin is needing to be different for Safari than in FF, IE8, Chrome & Opera? I have a link that I want lined up next to a label. It's lining up fine in all but Safari which needs a 12 pixel difference. Here's a screenshot to better describe the issue: Click
The Safari screenshot shows the label down too low. This is the CSS I use for the working 4 browsers:
.submitter a {
float: right;
margin: -2px 0 0 2px;
padding: 0 !important;
}
And here's the code that works for Safari, however, usig it throws the link UP 12 pixels.
.submitter a {
float: right;
margin: -14px 0 0 2px; Works in Safari & Chrome
padding: 0 !important;
}
Anyone able to shed some light on this? TIA
This seems to sort it out:
.submitter a {
float: none;
display: inline !important;
margin: 0 0 0 2px;
}
It's really very convoluted in there due to nonsensical use of the cascade.
Some rules are being applied to elements where they really shouldn't be due to selectors like:
.box_777 ul li a
You'd be better replacing that selector with something like:
.individual-likes > a
But, it's difficult to predict how improving your selectors will change how your page displays.
The reason it goes up like that could be because of the - pixel value. Are they nested correctly in the div? And did you apply the same alignment (CSS, Html, etc.) for the Chrome buttons?
There is a lot going on, but you might try one of the following:
.submitter .smalltext { float: left; }
(or)
Move the "follow" anchor tag before the "smalltext" span
Looking at the site, the anchor is being set to block by .box_777 ul li a and then floated right by .submitter a.
If I remove the display: block; and float: right; things align.
I have the following CSS class defined:
.box .login {
border: 0;
float: right;
clear: both;
height: 48px;
background: url(../images/submitr.gif) no-repeat right;
line-height: 20px;
padding: 12px 42px 16px 23px;
margin: 8px 22px;
color: #FFF;
font-weight: bold;
}
The multiple background are working perfectly on Chrome, Firefox, Opera, Safari, and IE9. However, they're not working on IE8. Does anyone know why that is?
(if I only have one background, it DOES work on IE8. It's when I start introducing those other backgrounds that it starts to flip out.)
Thanks for the help! I really appreciate it :)
Multiple Backgrounds is a CSS3 specification. IE8 DOES NOT understand CSS3, and IE9 for that matter doesn't understand it all. To get it to work in older browsers you'll have to combine the images into one, or overlay multiple elements to get them all to display on top of one another. z-index: is your friend :-)
Well, I'm a tad late I guess, but there are ways to have multipe backgrounds with CSS2.1 which work in IE8:
http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/
Internet Explorer 8 doesn't support CSS 3 multiple backgrounds.
URL: www.htiops.com
CSS: www.htiops.com/css/htiOps.css
The last two links in the gray horizontal nav bar are vertically dropping down in FF 3.5.3. It doesn't happen in older versions of FF, IE7, O8, Saf3.
Changing the font in #navBar ul li a from .8em to 10px fixes the drop-off problem, but is not the desired appearance of the menu.
Any thoughts?
The problem is that all the elements are too wide for the container and they are wrapping. I had the exact same thing in Wordpress recently. I shortened the text and it worked fine.
One thing that works - as a hack - is:
#navBar ul {
margin: 0px;
padding: 0px;
color: #fff;
float: left;
font-weight: bold;
display:block;
width: 120%; <-- from 100%
}
Perhaps you can play with the widths and get it all to fit, or shorten some words. (I know, it's a hack and I don't like them, but it's fast and looked ok to me :)