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;
}
Related
I've got two inputs, styled primarily by Zurb's Foundation framework. They're in a .row.collapse and each in a .medium-6.columns (these columns are 50% width, floated left, no margins). The inputs themselves are 100% wide within their containers. It's all pretty simple, and the Inspector and jQuery.css are all returning what I'd expect them to. But there's a border issue. Here's the gist of the CSS:
input {
border: 1px solid #dddddd;
&.first {
border-right-width: 0;
}
}
This is to have the effect of collapsing the middle border. But for some reason, this border-right-width: 0 is throwing Webkit (Chrome and Safari but not Firefox) off. The inspector shows 1px border, and the proper border-color. The white input background lines up properly with the second input (that is, there's room for the border), but there's no gray border. Maybe it's rendering transparent?
If I open this up on a retina display, it renders normally - proper borders on both. If I zoom in, the borders show up when it hits the "small" media query (mobile device sizes). But I can't make this border show up on a non-retina, desktop display in Chrome.
Here's how it looks in Chrome:
And here's how it looks in Firefox:
To double-check, I used the Web Inspector to apply a simple border to the first element. It showed up fine (looked like the Firefox screenshot). Adding border-right-width: 0 reintroduced the problem. It seems clear that that's the issue. But I don't know why?
It seems like border-radius may play into this as well? The Firefox screenshot above shows a double-border in the middle, despite the Inspector showing 0 right border. If I uncheck border-radius, in Firefox, it fixes that issue.
These properties should all be independent of one another. Why are they affecting each other?
Edit
Trying to recreate in codepen. Unsuccessful so far, but it looks like it has something to do with transform - these inputs are in a container that is set with the following
position: absolute;
top: 50%;
left: 50%;
#include transform(translate(-50%,-50%));
This has the effect of vertically and horizontally centering the element no matter the width or height in modern browsers. When I turn off transform the border shows up as it should. As I understand, transform accesses the GPU? Or it can? It seems quite possible that this is what's throwing it off. If you look at the screenshot, there are strange border artifacts (like, a partial, interior border on the right side of the left element) that I can't explain.
Edit 2
It's got to be transform - changing the border-color to red makes this clear: the border is being rendered at a sub-pixel level and then, for some reason, cut off in a funky way. You can see a vague pink border around the left input:
This may or may not help and without the fiddle, it's difficult to recreate; but I wanted to share something I've recently encountered with webkit browsers and Foundation.
By default, Foundation attaches a right float on the last column in each row or horizontal block...
foundation.css
[class*="column"] + [class*="column"]:last-child {
float: right; }
99% of the time this is never an issue, unless you have a very small border between columns. Webkit browsers calculate percentages strangely at times.
You mentioned your columns were floated left, but just in case this is still an issue; overriding the above pseudo class to float the last-child column left may help.
I am using a wordpress template and everything looks fine in FireFox.
But- Surprise, Surprise - it looks wrong in Internet Explorer 8
On this page there are two issues:
http://www.thebuddhagarden.com/blog/
1) The search box (which is supposed to be to the right in the navigation menu) is pushed DOWN so that it is hidden behind the word Categories.
2) And (probably related) the navigation menu (which starts with Blog Home, Shop Our Store, etc.,) is supposed to be aligned to the LEFT. Looks great in FireFox, but it is aligned center in IE8.
No this is not a float issue.
I figured 2 issues in IE-7 its working fine in IE-8.
do the followings
1.Remove line height:18px from your h1 this will show your title which is mixing with navigation in ie7.
2.Put width:690px (or your desired, obv it should be less then 695px) on your <div id="navmenu-wrapper"> and things will be okay.
Internet Explorer doesn't like elements that are floated right following elements that are floated left. I'm not sure why this is, but for some reason it considers right floats to be new line right floats. You have two options here.
Put the box-search div above the navmenu in your code. This should not have any affect on other browsers - FF, Chrome, Safari, Opera - they will all display it as they do now. IE, however, will allow your right float to be on the same line as your left float, thus fixing the issue.
Or, give your navmenu a specific width such that it uses all but the space needed by search, and float both left.
Your problem is because of this property:
#navmenu ul {
margin:0 auto;
}
On line 656 of your styles.css stylesheet. You're trying to center a list when you want to float it to the left, so just change it margin:0 and you should be all set.
I'm trying to create a site which uses laterally-stacked "blades" of content. The element containing them is moved laterally inside a div with overflow-x: hidden to create the desired sidescrolling effect. This seems to be working fine: The element containing the "blades" is set to display: table; width: 100%; table-layout: fixed and each blade is styled as follows: display: table-cell; width: 601px; border-right: 1px solid white; padding: 10px. Finally, the nav element has width 621px, with no horizontal padding or margins.
It all seems simple enough, but I'm getting a very odd cross-browser bug: Firefox and IE9 agree on how the page looks, but Chrome has a different opinion. I've figured out what Chrome is doing, but I haven't been able to figure out why it's doing it.
The doctype's set and everything else seems to be working fine. Except for background-colors, the rules above are all I've defined in the stylesheet, and there are no inline styles. Here are some screenshots which illustrate the problem behavior.
Here's the page in Firefox - as desired, the right edge of the navigation bar aligns with the right edge of the content box.
Same in IE9.
In Chrome, the padding is subtracted from the width, creating the overhang shown above. I never set border-box anywhere in the stylesheet, nor do I see it in the computed rules in Chrome - it just says that the width is 581px, whereas it's 601px in the other two browsers.
[Note: I saw that there were other posts on padding issues, but none where Firefox and IE9 agreed and Chrome did something different.]
Edit Here's a JSFiddle link: http://jsfiddle.net/aCeAw/
This is just a bug in Chrome. When it computes column widths for table-layout: fixed, it incorrectly ignores cell padding. See discussion in https://bugzilla.mozilla.org/show_bug.cgi?id=652941 complete with spec quotes, and the almost-5-year-old WebKit bug report at https://bugs.webkit.org/show_bug.cgi?id=13339.
You may be able to work around this by using width styles on display: table-column elements, as discussed in the Mozilla bug report above. Alternately, you could add a first row with 0 height and no paddings, but the cell widths you want... I realize both of those mess with the actual site markup, which may not be an option in your case, of course.
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?
hi
i've encountered a really annoying problem
i'm about to create a imagegallery as can be seen here
http://freeri.freehostia.com/test/
the issue here is that in all later browsers they take in count
that the element before the pagination buttons has padding therefor
the page buttons get placed accuratly 70px beneath last row of images
while ie7 does not so it get's placed only after what margin i've given
the buttons that is 10px beneath
screenshots can be seen here
http://browsershots.org/http://freeri.freehostia.com/test/
try this
.last{
float:none;
margin-bottom:70px;
margin-left:0;
}