I'm building the landing page for our app, and i found some inconsistencies when opening up my page on google chrome. I designed the page to have the text be on the right side of the picture. However sometimes when i refresh the page, the text drops below the picture. This doesn't happen all the time, but if i keep pressing refresh, the text will eventually drop.
I'm assuming that it's because i might be putting my width of the div a little too narrow. but i dont understand why it works sometimes and not other times.
the site is on : https://www.thedashapp.com/about.html
(disclaimer: the site isn't supposed to be live yet, so the links aren't all properly hooked up yet, and the app still hasn't launched)
See pictures:
How it's supposed to look like:
What happens when i click refresh a couple times:
You'd be better off putting the text in a separate div, and perhaps the image too. Then apply float:left; to both the div containing the text and the image or div that contains the image. I'm pretty sure that'll fix it.
Related
I have searched for a couple hours on this topic, to no avail. When I view my site on mobile via Safari, sometimes pieces of the background image are missing. For instance, everything will look great, but then there will be a chunk missing in the middle. Or, perhaps instead there will be a chunk missing from the bottom. It appears to be random. Then, if I turn the phone, the missing piece fills in and even if I turn it back to portrait mode, the piece has filled in.
Any ideas as to why a section of an image won’t load? Could it be that the image is too big? Just looking for some ideas to get started with. Unfortunately, I haven’t come across this problem in my searches. Thanks.
Images should not be missing chunks. If it is a JPEG image, there is the tiny possibility your image is being corrupted in transit. Is the image being created dynamically?
But the most likely cause is that you have some html element over the top of the image that is opaque - and preventing the underlying image from being displayed.
I have a little problem in my CSS (or maybe it's Chrome) but it happens with <a> links, it's kind of hard to show you the problem without video but I'll try with screenshots:
Below is the screenshot of my index page: (link)
When I click on any <a> link, initially it appears like in the below screenshot: (link) and after approximately 0 to 2 seconds, the page appears normal (like in the first screenshot).
It's as though the underline appears before the text appears, so it's messed up and after a little moment it return good.
I couldn't manage to make a fiddle with multiple HTML pages and so took a little video. You can see the bug happen at 0:07s, but in fact it happens everytime I click but because of how fast it is and how low the framerate of the video is you can't see it everytime.
Have you already experienced this problem ?
Im havin a big problem.
Im programming a website for a company in germany.
Since there are so many sites on the page i took an iframe in my index.html file instead of using a div tag because this would need a lot more time since i need to write the div stuff on every page.
Every Browser like IE,Chrome,Opera and also Safari shows the website like i want it to be shown.
But Firefox shows the iframe part in a small window in the left upper side of the window.
So you cant see any content or even 100x bigger than normally and in a quite small window.
So do I have to change anything in my code or do i need to add something?
The bigger problem is actually that the man who is able to start the server doesnt want to start it for let the website goin online because that doesnt work on firefox.
He explained the problem to me that way. but my program (mirabyte) shows everything in the right way (ALSO FIREFOX) so what can I do now because I need to let him try every small change i will do. So it would be nice if anyone does know the EXACT answer because he or she already had the problem.
Any ideas?
Thank you so much
Sasse
Make sure that if you have the iframe in any sort of container, that container also has the applicable height attribute. Also make sure that the iframe height is applied to both the HTML and the body tags.
Beyond that, we would have to see the part of your code where you're declaring the iframe to say anything more specific.
The website I've been working on has this odd, and seemingly non-consistent issue, and it only appears to happen on Google Chrome.
My main content section will, occasionally, product vertical and horizontal scroll bars.
When I open the page as a file, the scroll bars pop up intermittently upon opening the page, and refreshing the page. They usually do not show up, but every couple of refreshes or so, they will pop up.
When I run the page locally using NGiNX, the scroll bars will pop up upon opening the page, but disappear when I refresh and no amount of refreshing will bring them back. If I click back and forth between two different test pages I have set up, the scroll bars stick around. Only upon hitting reload, do they disappear.
I have not seen the issue when I run it from my temp free webhosting site, Zymic. I was actually not even going to worry about it because it didn't show up when it was live, but when I noticed the issue popping up from my locally ran web server, I figured I should look into this.
I have no idea where to start looking for what may be causing the problem, but I'm providing a video that will clearly show the issue, and a link to my current live site. Based on reports of others and my own experiences, the issue will not show up from the live site, but it will give access to all of my current code (current-ish, I'm in the midst of trying some things out) and I will happily provide any specifically requested pieces of code. I would try and supply the bits right away that might be causing the problem, except that I have no idea :\ But if I narrow anything down, I will include that bit of the code along with what I've discovered.
Short 58 second video of the problem: http://youtu.be/K7tjGJ8hIV0
Live site (issue should not occur from this link): http://jrltest.zxq.net/
Thank you all very much!
This is caused by your overflow:auto; style on your #maincontent div. Just change the style to overflow:hidden; to make the scrollbars disappear permanently.
Automatic overflow will work by doing nothing with the overflowing content if it fits in the container, but if it overflows by even a bit, it inserts scrollbars to allow the user to scroll. In your case, Chrome will probably recognise a single pixel of overflow, so insert scrollbars. This probably has to do with caching and image-loading. What I think is that if the image is already in the cache, Chrome knows exactly how big it is, and it knows the image will fit in the container, but when it's not cached yet, it reserves some space for the image to load in, and since that space is apparently slightly larger than the actual image, it will take up some extra space.
Check if body value for you is set to overflow:hidden;
If it is, than change it ;)
The same Issue occurred to me while coding in Next.js
just set overflow: hidden; for the Html tag in the global.css file.
This works fine on my computer but im wondering if its a good idea in terms of accessibility, etc.
I have a page of product listings, and I want each listing to link to a product page. The listing is made up of an image and a few photographs of text.
I want the entire listing area to be a link, including white space. So rather than make the images and text links individually, ive put the entire div in a link.
As I said, this is working fine on my computer, but is a good idea for a production site?
Thanks
If it's like a grid or something, and you give a visual cue when the user moves the mouse over the row (background color changing etc) along with the cursor becoming a hand, it should be fine if you use the whitespace as part of your link.
If you want me in your website's audience, I would prefer if you wouldn't. When switching between windows, clicking in the window area is the quickest way to switch focus between windows. If like 80% of your window is really a link, I would find that annoying. I think I am not the only one.
The way it sounds there is also plenty of area which you can make behave like a link, such as the image, and the text in the grid. If that would be clickable, that would be big enough a target to hit.
Also imagine your app being used on a touch screen. These sometimes imsinterpret drag (scroll/zoom) and tick gestures. Which is annoying if everything responds to clicks.
Look at the right-side video links on YouTube. These are block-layout spans wrapped in a tags. (Not that just because Google does it means it's a good idea, but...)
If the area has a :hover color (as these do), then it should be clear enough to the user that this is an action item.
Syntactically it's invalid, you cannot put block elements (div, p, table) inside of inline elements (span, a, strong, em).