I'm trying to figure out why the front page of my blog (http://www.ulblog.org) renders differently between Google Chrome and FireFox. It appears 'broken' in Google Chrome, but renders without issues in FireFox.
Other pages on the site, however, appear to render fine in both (stack overflow apparently will only allow me to include one link, so unable to provide link to a working page).
Any help appreciated!
On line 238 you have <p> </p. It should be <p> </p> (i.e. you're missing an end angle bracket.)
(seems broken in my Firefox 3.6)
Replace the margin-left on your #sidebar with a float: left.
Remove the sidebar div from #maincontent and place it below it rather than within it.
This should fix most of your Chrome related issues (and FF for me).
Oh. As stated by #Kieran, try validating your code.
Related
A client recently informed us that a store site I helped develop was displaying weirdly in Safari on desktop. I checked into his question and sure enough the client company's logo is getting cut off by the search bar:
Safari desktop view
I checked it against Chrome, Firefox and IE and all those seem to be displaying ok:
Chrome view
I double checked element styling and it looks ok, I even got my developer involved, and even he is stumped - says Safari should be using Webkit and as such should display consistently.
Link to the site
I've tried searching if others have had Safari-related rendering issues and haven't found any relevant articles. Wondering if there needs to be browser-specific conditional formatting in my markup.
I don't think you have a need for the third section, so remove that section and leave the container to be nested under the nav, it is the sixth nested element. Hopefully that should fix it :)
I have been developing a website and I have had no problems at all with it. I am now testing it on different PC's and am having a problem where the rendering breaks in google chrome. The pc's all run the same versions of chrome which is version 21.0.1180.89. On some pc's the page renders perfectly and on others, the position: fixed property is completely ignored and me page header disappears when scrolling. On inspecting the element with the chomr developer tools it says the element is there but the element is not visible. It is not a problem with z-index since I set this really high and did not fix it.
Where do I even start to look for a reason for this problem? Is this a css issue or an issue with the browser?
Thanks in advance
Edit:
The solution was found. I had set opacity: 0.99 on the body element of the document in an attempt to fix a problem with fonts displaying incorrectly on Mac's. This should be a valid css property? However it seems that on some browsers this caused the page to reder incorrectly.
The solution was found. I had set opacity: 0.99 on the body element of the document in an attempt to fix a problem with fonts displaying incorrectly on Mac's. This should be a valid css property? However it seems that on some browsers this caused the page to reder incorrectly.
This page is being rendered incorrectly by IE 9 (and probably older versions too). The right menu is floating to the bottom of the page. Firefox, Chrome and Safari are rendering it correctly. Other pages in the blog are also being rendered fine by all browsers. I already tried to fire IE 9 Developer Tools (F12) and reduce the width of some divs (such as #main and .columns-inner)... no lucky with this approach, even with extra space the right menu is still rendered at the bottom. So I figure that the problem is in the Blogger auto-generated tags / css for the page content (which I am able to modify). Any CSS gurus out there can point what is wrong?
Cheers,
You have this line in your <head>, which is causing IE9 to render the page in IE7 mode:
<META content=IE=EmulateIE7 http-equiv=X-UA-Compatible>
If you remove this, it renders fine in IE8 and IE9. It still renders poorly in IE7, though.
Edit:
In response to your comment, I am able to replicate the issue with the background no longer being opaque. After some investigation, there is a particular script file being loaded:
http://www.blogger.com/static/v1/jsbin/938506610-ieretrofit.js
If you remove the <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/> on line 4 of the source, and you remove the ieretrofit.js file from line 1471 of the source, the page should render correctly in IE9.
Since the ieretrofit.js file appears to be generated by Google, you might want to ask them about it. If you would like to disable it JUST for IE9, and allow it to continue for IE8 and below, you should take a closer look at line 1471 of the source. Here is a snippet (it's quite long, this starts around character #2275):
'\74!--[if IE]\76\74script
The !--[if IE] there is part of an IE conditional comment. You can change that snippet like so, and it will still target IE8 and below, without affecting IE9:
'\74!--[if lte IE 8]\76\74script
Let me know if you have any further issues!
The page has 104 validation errors — I’d start by fixing those if I were you.
Almost certainly it is because the page is invalid. Also, I really would think about starting again with this page as it is overly complex markup.
Guys. Figured it out (with great help from andyb and Paul D.)
The validator pointed to some unpaired </div> tags that I removed. Now it is working flawless.
for reasons unknown my html is causing all browsers, except firefox and ie, to skip over the links in the nav element when using the tab key, doesn't focus on them at all. firefox does something equally bizarre but different, it doesn't skip the links, instead it duplicates the header link and places the h1 element out of the link within the header. and with ie it works spot on perfect... yeah i know... (woah!)
i've narrowed it down to being a problem within my html because it still happens with both javascript and css disabled. i haven't yet included a skip to main content link so it can't be that, i haven't used the tabindex attribute anywhere and it all validates perfectly fine.
here's the problem to see for yourselves - www.thisbengreenguy.com/creative.php
thanks for all your help in advance.
by converting it backwards from html 5 to xhtml strict i've got it looking right in firefox and working perfectly in opera as well as ie now. and with safari and chrome you have to use opt/alt + tab to focus. at least it looks as intended and is as close to completely accessible as i can get it.
I've ran into a snag I've been working on for a couple days and can't seem to come up with an answer online. The site template I'm working on now is located at "http://citylakersbaseball.org/2.0" - I've got a div named "sponsors" that shows up fine in Chrome and the built in Live View of Dreamweaver CS5 - however, in Firefox 3.6 & 4beta it completely vanishes. I can see it in the view source, yet firebug has it grayed out. Maybe it's a DOM issue? (for which I don't know much about). Rendering engine issue?
I ran the source (index,htm) and CSS (style.css/nav.css) through the HTML validator - HTML is fine, and the CSS didn't spit back anything I would think could effect the div's display, especially since Webkit has no issues with it.
Any thoughts would be appreciated. Thanks in advance!
Your ad-blocking Firefox plugin is detecting and removing the div from the DOM. I experienced the same behaviour in Chrome and Firefox (which have ad-blocking plugins/extensions), but not in Safari or IE (which don't); and, indeed, the div appears if I disable Adblock Plus. One of the more basic rules Adblock Plus and the like follow is to look for HTML elements with class="sponsors" or id="sponsors" and remove them.