In Chrome, my site has a bunch of empty space at the end.
Some pages have lots of empty space, some have none. I'm not sure what the problem is, I've tried lots of different changes in the css (using chrome's inspect element), but nothing fixes the problem.
There is no problem in Firefox, I don't know about IE right now.
Edit: Removed links. None of those pages exist any more.
The problem is the last hr element.
It has display: inline-block.
Remove that property value and it works fine.
It has been listed as a rendering bug: see here
http://41.206.47.2/support/forum/p/Chrome/thread?tid=6d78452432a4c4d7&hl=en
Seems to have been fixed in later dev versions. I get the same issue in 11.0.696.65
Related
I've just started a new project for my clan. First i worked in chrome, but one of my friends told me there was a strange problem with the site. At the top of the page there is a white space, but this happens only in Mozilla. When i inspect it, it says it's apart html. I've triple checked the css for margins and paddings, but i couldn't find the problem.
Here is the CSS:
https://docs.google.com/file/d/0B8jNXRky-LW_aUw4Z1hXVlVwbHM/edit?usp=sharing
This is quite a strange issue. I see it in chrome also. It seems to go away if I add display:inline-block to .content
I'm looking through it atm but i am unable to find why it requires this. will edit if I find
EDIT:
its the span inside .content it has a lot of margins / padding on top of it, it is shoving everything else down. You need to modify this
See http://www.arthwine.co.uk.
This used to work fine in Chrome and works fine in all other browsers (afaik). Now, for some reason, Chrome is hiding most of the left column (apart from the bear). If you look on a different browser, there is a panel with the branding and a menu in it under the bear.
I can't figure out at all why it's doing this. Any ideas?
The reason it breaks is because of the bear. Or rather, it is because of the way you relatively positions the image of the bear outside the bounds of every single one of it's parent elements except the body.
This makes chromes rendering engine choke on your layout somehow.
You can test this very easily by just deleting the image of the bear from the source code, and see how everything else suddenly pops into place.
I checked it in Chrome 9.0.597.98 and I had the same problem. The solution that I found, is to add position:absolute; for the #header.
I don't see anything wrong in Chrome. I see the menu and the branding.
I have this website, http://www.escuelita.info. Now I tried many times to make it work on IE 7 (possibly IE6 too didn't check) but for some reason the middle frame on the right doesn't show content.
If you compare it to Firefox or Chrome (or even IE8) it works ok.
I need to fix this but I'm not sure what's causing the problem..
Note
I checked with IE7 and the pages don't show content
(the main content DIV content_outer)..
The content shows below the sidebar. Either IE7 enters quirks mode or you trigger some sort of bug that causes IE7 to misbehave.
Double check your doctype, tags and most importantly, get rid of those nested tables. Nested tables are EVIL and I'd bet they're your culprit. Use CSS grids (here's one that's really good: http://www.1kbgrid.com/) instead.
Dunno if this solves your problem, hopefully so.
http://betawww.helpcurenow.org/media/press/
You'll see I have used spans within an anchor, with the span.hover-description set to display:none; by default, and on a:hover that span is set to display block and absolutely positioned to create a tool-tip effect when hovering over the name and email of the "For Immediate Release" contact names.
Everything looks as desired in Firefox, but Chrome reveals my unknown blunder somewhere.
Any help on what's the problem that is causing Chrome to not display like Firefox?
Incidentally, Explorer shows the tool tip as expected, although I'm getting a funky bottom margin issue below the names, and Safari has the same issue as Chrome (must be a webkit rendering setting that I need to accommodate for).
OK, I figured it out. Since I'm using a pretty complex nesting structure to accomplish the CSS tool-tips, I overlooked the fact that I had actually nested a p tag within a p, and of course that is a no-no.
Firefox is really friendly to a lot of validation errors, but Chrome and Safari seem to be much more strict.
In the end I changed the p's to span elements and all is well across browsers.
I fall into an IE bug that I don't find a way to solve
Here's the template http://codecanyon.net/item/tquery-dynamic-tables/full_screen_preview/89478
If you open with Firefox or Chrome, the table header shows correctly, no BLACK, if you use IE7 or IE8, it shows some black space. Why? I tried to change padding, margin... but that didn't work, the black space is still glued. How can I fix such bugs?
Please also, explain what tools, or methods can help fix this bug
Update: Bug Fixed!
The reason is that IE gives an arbitrary size/padding/margin to the img element when the src is undefined.
When the src attribute is defined dynamically through JavaScript, this doesn't correct it. It still undefined, so it doesn't solve the problem.
Solution: Fix a height/width for the image.
The sort image you have in the cells still takes up space - in this case, the space used by IE's default "invalid image" placeholder, because you left the src attribute empty. You can verify this using Developer Tools, and setting the height to 1 pixel.
The problem is that visibility: hidden doesn't mean "don't use any space" - it means "claim the space, but don't show anything there". Use display: none instead if you don't want it to take up any space.
You may still wonder "But why didn't I see this anywhere else?" Well, that's due to the other browsers handling the missing image differently.
One tool that can help is the IE Developer Toolbar, which wil let you look at individual elements and the CSS applied to them. Looking quickly at the real page, not the link you sent (because the IE toolbar can't go through IFRAMEs for some reason), the one thing that pops out is the TD and TH elements in your table head show hasLayout: -1. It's a custom IE property that causes all sorts of bugs. You can read about it here. A couple of quick fixes you can try: apply 'zoom: 1;' or 'position: relative;' to those elements to see if it goes way. That's not a fix, it's a hack, but it often works.