I'm working on a new WordPress site, and am running into an odd issue on the homepage, which is supposed to execute a nice fade-in/fade-up effect on initial page load.
Works fine in Firefox, and most of the time in Chrome. But, nearly every first-load in Edge or IE11, the section below the top "slideshow" remains large, not-scrolled-into-place, and blank.
If you resize the browser window, possibly scroll up/down, it slides in/up as is should, and then you can restore the browser to full-screen... but on reload, it's lost again. (For reference, there should not be a huge white space below the slider, but rather a thin gray bar with text.
Any thoughts/suggestions? The site's live at http://blueheron8.com ... any point in the right direction would be appreciated.
Related
There is a gray border showing around the dropdown image, as seen above. That shouldn't be there. I've seen several other questions which state that this is the case because the src of the image cannot be found or loaded. However, that's not the case here. The element contains a src tag which is set to a 16x16 blank GIF.
The file '/images/system/blank.gif' exists, and can be loaded by Safari. Also shows up fine in the Network panel, as 200 - OK.
However, and here is the reason of the bug I guess... In the elements panel the image shows up as:
I can load this image fine in Safari, opening it in a new tab shows as 16x16 GIF... No idea what's going on here.
Just FYI, this is Safari only. Chrome does not show the gray border around the image.
Note: Changing to a transparent PNG image solves the issue, but I'd like to know the underlying cause.
Tracked down the issue to... uBlock!
uBlock decided that an image in the form of /images/system/blank.gif?v=12345 was an ad and decided to cancel the request. The joy.
Hi i really need help on this one, I still can't figure out whats wrong with the scroll down in my website.
The problem:
-As soon as I resize my browser window to a smaller screen, the scroll down stops working
-The problem is happening only in Chrome
this is my website [www.outrippers.cl][1]
I'm developing a website in hebrew, and everything is fine in Chrome and Firefox (as expected), but I have an issue with IE.
When I place
direction:RTL;
unicode-bidi:embed;
the whole page gets shifted to the right, and a horizontal scrollbar appears.
On initial load of the page, IE loads it scrolled to the right side, so it looks good (no need for manual scrolling), but the horizontal scrollbar is there.
All the other elements are placed correctly and I can't find the issue. There is no element that would overflow outside the main wrapper, and the scrollbar is there only if direction:RTL is placed.
I can notice that the scrollbar appears near the end of the loading, but I don't know if there is some way to step through the loading of the page (something like breakpoint/debug/step).
I tested it on 3 different computers (IE8/XP, IE8/Win7, IE9/Win7, and also with http://netrenderer.com )
Some help/guidance would be greatly appreciated.
You can check it at:
http://southbeachsmoke.co.il/
http://southbeachsmoke.co.il/products/category/1
I've been working on a website for a little while now, doing most of my testing in Chrome, Firefox, and IE. As I'm wrapping things up, I've tried viewing it in Safari (on Mac, iPad, and iPhone). I've noticed that certain elements are misplaced in Safari. I've tried playing with the CSS, but I've had no luck.
The page can be viewed here - http://staging.princewebdesigns.com/gallais/
See specifically the logo (being pushed down into the banner), the font of the tagline in the banner (wrapping beyond the banner and extending too far to the left), the 'Featured Work' title wrapping, the project names wrapping, and the footer wrapping.
Here is how the page should look - http://staging.princewebdesigns.com/gallais/images/chrome.png
To see how it looks on my iPhone, change the link above to .../iphone.png
Any help is appreciated.
The issue is (I think) that you have your browser's text zoomed in.
I loaded the page in Safari 5.1 on Mac OS 10.7.3, and it loaded fine initially. When I zoomed normally, the layout stayed intact. As soon as I tried zooming just the text, the layout broke per your description.
That being said, you may want to think hard about how to make the layout more 'flexible' in the event a user does have their text size increased. In IE, for example, the default zoom is full page zoom, but a user can still increase their text size apart from zooming. It's worth testing your layout in those situations to make sure it doesn't completely derail. I'm not saying it has to be perfect, but still legible.
One idea is to try out different units. I've found that when declaring horizontal lengths (e.g. margin-left) using relative measurements works, but when declaring vertical lengths, (e.g. margin-top) using pixel measurements works better. For super critical items, like the site logo, positon:absolute may be a good route to try.
I have recently launched a site built on word press using a heavily edited child theme of the twenty ten theme, the problem is when viewed in google chrome or safari a small portion of the left hand border on the sidebar sat on the left is displaying the wrong colour. Its not a big issue and it goes away when you scroll to the bottom of the page, its more annoying than anything just wondering if any one else had encountered this.
I am using different colour borders to get the pressed in effect if this matters.
The site is located at www.paintedroom.co.uk
I have found what is causing this bug it is the border-radius property. when removed the bug goes away still not sure how to fix though.