I have a website which in the past few days has stopped rendering correctly on Chrome and Firefox. The site code has not been updated at all which could have caused the error. It still renders correctly on IE and Edge.
The search box is an absolute element which should appear over the grey bar and the magnifying glass should appear within the search box.
It is difficult to show code as until a few days ago, it was functioning correctly.
I don't know if some css standards changed recently but the addition of a 'top: 0px' to the css seemed to fix this.
Related
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.
Cross-browser testing gives me a headache at the best of times, but this one has really stumped me.
I developed my website in Google Chrome (and on a Mac), and have recently updated the search function and re-styled the search input area.
I noticed that when I did cross-browser checks in Internet Explorer, the text in the search input in the top right-hand corner of the website was not positioned in the same way as it is on chrome.
In my version of Chrome, the text is 10px away from the left edge of the box, so it sits in there nicely. On Internet Explorer, however, it is right up against the egde of the box.
Here's the issue - When I opened my website in Chrome on a PC the text in the input was positioned in the same way as it appears in IE.
I assume this is because Chrome on my Mac is a different version than that that is on the PC. Can anybody help me solve this so that the text sits nicely across these browsers?
You can view my website here at http://tinyurl.com/8uaajmz
Thanks in advance everybody!
Your CSS rule for #search_bar_2 has an _ at the beginning of the name change it to:
text-indent:10px !important;
and you're fine. Not a cross browser issue it's a typo issue.
I've been racking my brain over this for the past few days and haven't been able to find a fix yet. I'm working on a website for a client and it displays fine in Chrome and FF, but IE9 renders it unusable. The navigation bar (everything to the right of the logo) is pushed down. If I open IE's developer tools, every element receives an "Text - Empty Text Node" message and some of my HTML elements appear to be duplicated with no content inside of them.
WEBSITE REMOVED - PROBLEM SOLVED.
I'm at a loss on this one, as I've tried several fixes including removing white-space. Anyone have any ideas?
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.