I've been searching for information on this, and I see a lot of similar problems (percentage widths calculation problems, padding problems, floats in opposite directions, Safari+Chrome problems, etc), but nothing I've tried seems to fix this one.
I have a mystery 1px vertical space between my content area and my navbar for part of the page heightwise in Safari, Opera, and Chrome. It works fine on FFand IE with no space.
This is the page:
http://the-polyglot.net/uploads/problem_site/
I really apologize for the inefficient, redundant, unorganized messy stylesheet that I've yet to clean up--I just picked up this site again after it lying dormant several years and I was just about to go through and clean up before I discovered this problem.
The most relevant selectors are #right_navbar, #reg_content (the text area), and #main_content (the container). The space seems to coincide with the area governed by #main_content if you check Opera's inspector, but I don't know why. I can fix the issue in Opera/Safari/Chrome by applying padding-left: 1px; to #right_navbar... but then that breaks the entire layout in every other browser.
I'd be grateful for any help. Thanks.
Remove the background-color for the id #main_content
#main_content {
min-height: 630px;
/*background-color: #D1EBF8;*/
}
Related
I have a setup like this:
https://codepen.io/anon/pen/JrrVrV
On Chrome at various display resolutions or zooms (ctrl+ / ctrl-),
there'll appear a 1px space between #two's border and #three, showing the red background of #two
The 1px space will either appear in all 4 sides, top+bottom, or left+right.
I've toyed around with this for a few hours now and the only thing that'll completely eliminate this behavior is removing box-sizing: border-box which unfortunately will break a lot of things.
Think this is a Chrome-only issue as I've yet to be able to replicate it in Firefox or Opera.
Any idea what's causing it?
I've been trying to format the appearance of the RSS button in css, and for some reason there's a big difference between browsers. Chrome renders it perfectly, as if I don't need to mess with it at all. But on Firefox and IE9, it is uneven with the rest of the menu. So I added padding to even it out, and to elongate the hover colour to the bottom of the menu bar. That fixes the issue on Firefox, but it makes the menu uneven in the opposite way on Chrome. Suddenly the bar is too long for the other menu items.
.menunav a {
padding-right: 6px;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 6px;
font-size: 100%;
}
.menunav-rss:hover {
background: #ff6600;
font-size: 100%;
padding-top: 3px;
padding-bottom:3px;
}
This is coming from a wordpress site. I'm quite new to css or coding, so I'm not entirely sure how to amend this. Fixing one seems to make the other worse, and I'm not sure why only the rss button is uneven.
For reference, this is what the menubar appears without any padding on both Firefox and Chrome.
Any help would be appreciated. If you need more information, I can easily give it.
Its due to browsers having different "preset" values. Think of it as each browser having their own stylesheet that gets applied before yours.
The only workaround really is to use a CSS reset. Eric Mayers is considered to be the 'goto' one, and covers pretty much everything you'd want it to.
Simply load the reset before your own styles, and then you should be able to adjust everything to look more or less the same across all browsers.
It's a bit of a pain to have to do it, but you shouldnt really rely on the browser's built in default styling.
I've run into the same issue multiple times. I've found that setting vertical-align: top makes it look the same in both FF and chrome (probably IE9 as well, although I haven't tested that), after which you can add padding-top to position the text within the anchor exactly where you want it.
if someone could help on the following would appreciate this as I spent the whole evening without result on this issue.
I have a site where I want to modify tags appearance after every article.
The problem is that firefox (version 14.0.1) provides smaller height for the text (total <a> height is 15px icnluding 1px bottom padding), while chrome and rest browsers give height 19px. So the difference is 4px. Because of this - the "tag hole" is displayed at different levels. A little bit lower than vertical middle for FF and upper than middle for rest browsers.
I made a picture to get the problem easier:
I have general css reset, so that different browsers behave similar. But it looks like not everything is included there.
Has anyone an idea what could cause this?
Add display: inline-block; to your .tags li a
This won't affect the well-behaving browsers, but will fix FF
I'm having a problem with border-radius on Chrome (latest build). I have a border-radius: 10px; on the slider frame from this page: http://next.lab501.ro/
In Firefox and IE9 everything works, but not on Chrome and I can't figure it out why, because I have other elements with border-radius that work just fine in Chrome.
I've checked using Safari's "Web Inspector", and your CSS is definitely being successfully applied to your container.
I think the problem is related to the contained content of an element with border-radius "breaking out" over the container's rounded corners. See this article for more background. I believe the problem was first properly reported by Richard Rutter.
In your case, you are already using overflow: hidden on the container, and that's not working -- this may be related to the z-indexes you've got going, but it's hard to tell with such a complex example.
I would try rounding the corners of the contained elements that appear to be overflowing, though. This seems to work for me on that page:
dl.slidedeck {
border-radius: 10px;
}
div.sd-node.sd-node-caption {
border-radius: 10px;
}
I am working on a small project, and am having two tiny problems with CSS.
I have played around with everything to no avail.
1) In IE6 the content and logo is not lining up correctly.
2) In Firefox, the tooltip box fixed at the bottom of the page (which degrades in IE6) although styled as width:100%; is not spanning the whole screen. There is a gap on the left hand side.
These problems can be seen by viewing http://gua.com/wd/ in the respective browsers.
If anyone could advise as to what has gone wrong, and why, it would be greatly appreciated.
Thanks
for firefox: Yyou can add left:0; for #bottom
for internet explorer: I see your menu to be wrong not the logo. To solve this just add margin:0 for #top-nav
You should ideally be using some sort of css reset stylesheet to overcome specific browser idiosyncrasies.
In your case appending a margin: 0px; to your body should do the trick (For Firefox). IE6, well, its usually best left to a IE6 specific conditional stylesheet.
"100%" means "100% of the parent box's client space". Not "100% of the entire viewport".
And IE6's CSS support is f*cked beyond sanity. If it doesn't work, use absolute positioning or whatever else it takes in a special stylesheet and include it with conditional comments.