I am working with Foundation 4 plus WP and came across a very interesting issue and this is not a UTF-8 issue.
Page rendering in Chrome:
http://www.nmjgraphics.com/imaging/chrome_ren.jpg
Page rendering in Firefox (IE 10 loads the same way):
http://www.nmjgraphics.com/imaging/ff_ren.jpg
In both FF and IE the top navigation renders perfect out of the box, but in chrome it is bumped down by 30px. Now I can apply a margin of -1.9% 0% 0% 24.5% and that gets the menu back to where is "should" be on the browser, but IE and FF shift the menu by -1.9% and that cuts the navigation in half. In addition to that I also tried using the top element setting at 100% initially and then using "inspect element" in chrome move the number down to 0 with no effect at all.
This has not been tested on Opera or Safari, but my assumption is they will render just like FF and IE.
I do apologize for the links instead of images, but I need 10 rep just to add images to the question and I can only post two links, but I did have a total of 3 images showing the rendering on the three browsers. If you want to see the ie rendering, just change the browser name to ie_ren.jpg.
solved it. I was pulling my hair out for nothing. Page renders fine if I am not logged in. I completely forgot about the bar. I figured that if I wasn't placing it in the theme it wouldn't show up at all. Learned something new there. I will either add the bar (which I should) or disable it all together.
Related
The webpage which I am currently front end coding is https://www.softpaz.com/software/download-jetbrains-webstorm-windows-180745.htm
Issue is that the
1) sidebar sometimes gets transparent
2) div background are blank, then suddenly appear and then go blank again.
3) The buy links table has flickering borders
4) Most of the small icons are flickering
These things happen when scrolling in Microsoft Edge, and IE11. Have tested the same webpage in chrome and firefox, and its working without any issues.
I have tried:
http://ieflicker.com/
tried removing the background, removing box shadows, text shadows, disable rounded corners and put everything at 100% opacity, but it still happens.
When the page is small, that is, there are less number of elements on the page, like the about us page of softpaz(link on top top right) then everything display fine.
Am confused on what to do now!?
I figured it out! Posting it if someone is facing the same problem. My system has the Intel HD3000 and running on Windows 10, which means that there was limited hardware acceleration support(as there are no official drivers from Intel). The page runs fine on other systems.
Once again, I see that Firefox, Chrome, Opera, etc outshine IE/Edge on the same system!
I have a site that works fine in android browser, FF, Chrome, Safari IE9+ but in IE8 the upper half of an elements background disapears as well as the background color on a couple of input elements.
I have run through IE debugging tools and also W3C and there is nothing that is coming up that would make this occur.
The site in question is http://ukritic.com if anyone can check it in FF then IE8 and maybe suggest what could be causing the problem it would be greatly appreciated.
If you need anything from me let me know and I will post it up for you.
ADDITION:
The problem that is occurring is that in IE8 the white background containing the content is only visible 1/2 way down the page but is hidden on the upper half of the page and also hidden where the facebook like box is located.
In all other browsers the entire content container shows the #FFF background from the top of the page to the bottom of the page.
We have tested in IE compatibility and normal mode but the problem persists.
What I do notice is that while the page is loading the content container is white but as soon as the page loads completely it disappears on the top half and the facebook container.
Thanks
~M
The problem was in the border-radius.htc file as soon as I removed that call the page rendered perfectly.
There really is no effective way of rendering round corners on ie8 as the .htc file needs a relative path to the page that is rendered which does not really work well with dynamic depth address bars (shortUrls).
Guess I will have to settle for rounded corners only in IE9+ and all other browsers.
Thanks for the input
I am having a real hard time developing for Internet Explorer.
Below is a snapshot of a project as it appears in IE9 and below that in Google Chrome it looks the same in Firefox as well.
Some of the things not working correctly in IE9 on this page...
The navigation bar, the links are stuck at the top in IE instead of vertically centered
The navigation bar does not have the box shadow applied in IE
The sidebar and content boxes do not have either the shadow or beveled corners in IE
The Tag boxes do not have the round edges in IE
In the content section, notice the 2 tags "CSS" and "FONTS" on the right side of page are pushed down, in the Chrome version they are aligned.
The project is not online so I can't show it but I have put the header section into a JSSFiddle page here http://jsfiddle.net/kenLs/3/embedded/result/ you can see that this JSFiddle of the header DOES work correctly in IE9.
That really has me confused, it works on JSFiddle but not on my site. I have looked at everything I can think of to make it work correctly. I even added <meta http-equiv="X-UA-Compatible" content="IE=9" /> to my header. I had some HTLM5 elements on my page but I replaced all them with regular div's just to test with IE, nothing I do seems to change any of these problems.
IE9 snapshot
Chrome snapshot
I know this is hard to debug since the project is not online but if you have any ideas why this may be happening I would really love to know.
UPDATE
I just realized that on that JSFiddle, if I turn off Compatibility view then even the header will look like the one in my image
I also added another simple JSFiddle test that just has the code for my tags, even this little code does not work correctly in IE, I have to hit the compatibility mode for it to work otherwise the corners are square http://jsfiddle.net/j9Qe3/1/
If it works in jsfiddle but not on your site, I wonder if you are using a doctype or if there is anything placed before the doctype which would put IE into quirks mode.
I've checked other questions on here but I haven't found anything that will help me.
Since FireFox 4 was released I've been having an issue with the menu on my website.
www.ffxivinfo.com
As you can see, the menu is supposed to fit along the little graphic buttons so that each link is on the "button". In Chrome, IE8 (not checked 9) and FireFox 3.5 this looked perfect. However since FireFox 4 it has been displaying wrong.
It looks like it's a padding issue but I can't figure out where it is coming from. I have even removed the padding between each link so that they are close together (0 padding) yet the menu still stretches further to the right in FireFox 4+ than in other browsers.
I use the auto generated menus available at purecssmenu.com and I modified it to fit my own website.
Here is a link to just the nav code, I use a PHP include to insert it.
http://www.ffxivinfo.com/nav.php
And here is a link to the CSS for it.
http://www.ffxivinfo.com/navstyle.css
Basically I need the navigation to look the same in all browsers so that it fits into the graphic "buttons". I'm tempted to just scrap the current design and go with a simple gradient background and leave the menu wider in FireFox 4+ than other browsers but that's a bit defeatist.
Any help would be much appreciated. This is the first time a coding problem has sent me to a forum asking for help but I just can't figure this one out.
I believe the problem is not in your margins but due to the differences in text rendering between the browsers. In this case, Firefox is rendering the text slightly wider.
If I might suggest an alternative, rather than using an image background and hoping for pixel-perfect rendering (which is pretty unlikely given the diversity of browsers and operating systems out there) try styling the links themselves with background-color and border-radius.
I don't see the problem in FF6. However, I see you specify your font size in pt. pt is for print, not the web. Try changing that to px and see if that fixes your situation.
I might ignore the Firefox 4 issue.
FF is now on version 6.
Your issue does not appear in FF3.5 (the most widely used FF) or FF6, both of which have more browser share than FF4.
http://gs.statcounter.com/#browser_version-ww-monthly-201008-201108-bar
I am working on the redesign of my website http://square1dev.com. In the sidebar however, I am having some issues making it look correct in Google Chrome. Issues are:
Categories Title (h2 Background Image) - There is supposed to be a small little line to the right side of the word "Categories". Safari and Firefox show this, Chrome however doesn't.
Categories List (li list-style-image) - Each list item is supposed to have a small image of Right Angle Quotes (ยป). Again, Safari and Firefox show this, Chrome not so much.
Any ideas why this would be?
Chrome can have some weird CSS caching behavior, based on comments and my viewing it in half a dozen browsers, I have to suggest blowing away your Chrome cache and trying again...I've run into this several times where it'll lodge a stylesheet in cache and not let go.