I am getting a bottom white border in chrome while using fullpage.js. I have seen this issue before but have yet to have a solution that works for me. Below is the site I am having issues with:
my website
Related
So, my web development business is expanding a bit and I'm finally getting around to making my own site for it. I'm using create-react-app with the associated buildpack from mars on Heroku, and the white elements show up fine when i run it on localhost, but show up as dark grey on Heroku. Here is a link to my site (it's clearly not complete), and here is a link to the github repository. Specifically, the portfolio section and the service cards are the bottom are all supposed to have white backgrounds.
The same thing with the buttons - when you hover over them they turn from red to dark grey, but locally they are white when you hover over them (and that's what they're supposed to be)
(To note, I don't actually hate it and might actually wind up incorporate that background or a slightly lighter version of it into the app itself, but I do plan on having an toggle for day mode, so I would like to know why it's doing that to correct it.)
I figured it out - turned out to be a dark mode extension on my chrome browser
My Boostrap framework is working fine on Chrome and Safari. It also is mostly on Explorer and Firefox. However, in Explorer and Firefox, a couple of images on interior pages appear to have an offset applied. The issue will be apparent when viewing the pages:
notagamebook.com/the-author-2
notagamebook.com/excerpts
I have been unable to find anyone else who has encountered the same issue. And I realize a manual fix won't be all that difficult, but I would like to keep the images in the framework and figure out what is happening in case it occurs again in the future.
EDIT
After attempting to fix this issue manually, I have realized it is NOT a Bootstrap issue. Firefox and Explorer are pushing the first piece of content following the page label to the right. It did so even when coding outside of the Bootstrap framework. I tried putting a piece of text as the first item and got the same result.
I've found the solution to this problem: There was a difference in the bottom margin being applied to the title in Explorer and Firefox, pushing the content to the right of the title div.
I've got a Wordpress site with some CSS3 rules applied to some images that rotate the images and have a hover effect on rollover too. Problems are showing up in Safari & Firefox when you hover on and then off these images and I can't seem to locate any similar issues by people on the Interwebs.
See http://tinyurl.com/3n2eude and hover on and then off the images (the slightly rotated ones):
Member name goes blurry and then back to normal (Firefox)
Member image border becomes jagged (Firefox)
A big black line displays to the side of the member images sometimes when you hover back and forth between two member images (Safari)
If I disable the transform:rotate rules, it's all fine. So seems to be an issue with that rule. Just can't work out how to get around it.
Anybody got some ideas on how I could get around these or what might be causing it?
Thanks for any ideas you might have!
Bit old of a question but that problem is related with rendering on browser (from what I understood). It cannot be fixed on CSS/HTML side. It must be fixed on user side.
Fix: http://www.askvg.com/how-to-enable-direct2d-directwrite-hardware-acceleration-in-mozilla-firefox/
More information about problem: CSS3 rotate - rendering problems in Firefox and Safari
I've run into this issue before without ever really figuring out what the problem was, but I'm attempting to do the standard "drop-shadow" effect by using an image border on the main content of my page. The content portion has a blue background (#3366ff) so the border image has one pixel of that color before the "drop-shadow". Everything works great in Chrome (Windows & Mac), Safari (Mac), IE8 and Firefox (Mac) but it falls apart on Firefox for Windows. The images are below, but instead of rendering the #3366ff color, Firefox renders #4e50fb. Thoughts? Could this be a color profile issue? And if so, how would I go about fixing it?
Thanks!
Bad Rendering:
Good Rendering:
have searched previously asked questions but still not getting quite the answers I need.
I built wwww.broadstairsfoodfestival.org.uk in DreamWeaver 8.
Ran both the page code and CSS through W3C to clean up any errors.
Ive looked at Check Target Browser in DW but all looks clean.
However Preview in Browser shows problems.
On some pages blocks of text flash; on others its the paragraph title that flashes . . and I'm damned if i can see what to chnage.
Help!
....................................
Remove text-decoration: blink from
the styles applied to some of the
elements and the blinking will stop.
Please do not use any the following:
Tables for layout
Marquee for scrolling headlines
The blink text-decoration property or the blink element
Dreamweaver's WYSIWYG mode. Especially a version that is as old as 8
Stop referring to Firefox as Netscape. One is the second most popular browser on the web today, the other an old outdated browser from the era of the First Browser Wars.
That is all.