I've been having this problem for a while now, in some parts of my report the columns overlap, no matter what I do on the styling I still can't fix it. Here's how it looks:
EDIT:
I'd also like to add that this issue is inconsistent. This mostly happens when opening the report on Google Chrome but it doesnt happen on Edge. Also there are zoom levels that the layout is fixed for example if I zoom about 150% the layout gets fixed.
Also I think what's strange is that only the colored columns overlaps. As you can see the columns with just white background are working well.
Related
I've found a TON of posts and questions on mobile width/height. The top two answers are to use media queries, or to use vh/calc(). The other issue I've seen numerously is the mis-understanding of width/height(100%) vs width/height(auto) with the use of margins/padding/borders. What I've run into seems to be unique, but with the flood of mobile issues, I have a feeling somewhere out there is an answer to this already. If you've seen this, please point us to the correct question/answer.
I've created a black glass along with an element to use as an image previewer. The glass and image have width("100%") and height("100%") without any padding, margin, or border. On a computer, it looks perfect. On a mobile device, the dimensions can get thrown off and the background shows through.
If I remove the height("100%") on images that are taller than wide, it resizes to the entire element. If an image is wider than tall, removing the width("100%") causes it to grow appropriately again too. However, this doesn't solve my issue because without a width or height cap at 100%, larger images will overflow.
I first noticed this issue on my cellphone (android) and have had no issue repeating it on Chrome's emulator. I have uploaded a quick recording of what I am seeing to screencast.
It's been suggested that a css rule is leaking from a parent element. Chrome supports the style 'all: initial;' to reset the css. I also manually reset my css with this method. Resetting the styles did not change the issue.
Once again, thank you for taking the time to look at my issue!
So my problem is that for some reason on one page of a website I've been fiddling with, the two navigation bars that I have (Top and Sidebar Navigation) are for no apparent reason scaled down in the Google Chrome browser, their behavior is entirely normal in both iE and Firefox. The bar's remain completely functional, but are simply scaled down perhaps to 66% of the intended size.
Here is the code for the page in question: http://pastebin.com/uvrPR1JW
Here is the code for a similar, but functioning page for reference: http://pastebin.com/5dAMREfC
They're running off the same style sheet so the issue is likely in the HTML, however the style sheet is linked in the comment section for reference. If anyone spots any reason why it would be doing anything like this it'd be great to know. And I apologize for the messy code, as I said I'm just playing around with it.
Update:
You may notice that my code includes at least one flexbox, here is question posted by another user that may be related but I can't make heads or tails of it: Chrome shrinks figure elements as they are added to a flexbox
Update: Doesn't seem to be a problem with the flexbox, the issue still exists even when I remove all content except the top header.
I'd say it's the setup of your navbar, how you have an image and you just change the position of it on hover. Chrome has a weird feature where it moves things around when there is images so I would suggest looking up how to make a proper navigation bar (It's pretty easy).
I have a dashboard that I have to show on screen and print to paper. It has dates and some colored blocks to form a grid.
On the screen, everything looks right. But when I try to print to paper, rows are broken in the wrong places, even though there's enough space left. I have tried making the grid smaller, but it keeps happening and break lines are introduced wrongly.
I only have this problem in Firefox. Safari and Chrome are working properly. I have not tested IE yet.
Here you have some screenshots that show the problem.
This is the way it looks on the screen:
This is the way it looks when printed (to paper/pdf):
In this link you can see the html and css that I wrote: Source code
Any advice?
Try not using a width in pixels for the main container but use the 100%
Apologies if this is a vague description, I just cannot see how this is happening.
In Chrome and Firefox, this page appears completely fine.
However in IE, the main content (name of record, picture, details etc) moves down to the bottom of the page. I just cannot get my head round why this is happening. Hoping someone can spot the problem.
A slightly strangers problem is this:
In the right content unit (display the smaller images of records), the last record has some of its content "duplicated" onto the next line. This is really strange.
As I said, the page works completely fine in Chrome/FF and these errors only appear in IE.
If you need me to post any code then let me know.
In most cases it is a width problem.(IE looks with another glasses) You can try to reduce the width of release_text or release_image part or increase the total width.
On most of my web site (http://sellsbrothers.com), the right-hand column where I keep the search bar and the ads stays on the right-hand side as I intended. However, on some pages (http://www.sellsbrothers.com/Posts/Details/12670), it doesn't. How do I fix the ones that don't? Thanks!
Looks fine on my machine - generally though, I have this problem if the combined widths including padding and margins are too large. This can sometimes happen when the contents of a div forces it to be larger than you have specified, so you have to take this into account. Try experimenting with the padding/margin/width of each element.
I checked it with firefox 3.6.2 and was able to see both search box and the ads on both pages. You can check for yourself at Browsershots. It is very possible that on certain browser it might not behave it should.
Two Pages at Browsershot:
Result