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 just finished my personal website. Everything is good with all modern browsers but I have just a little problem with internet explorer 8/7. My website is based on feeds from all my social network all posts are performed with masonry brick and infinite scroll, so the pagination is hidden. In IE the css style disappear just in the first page of my content and masonry doesn't work good until the second page is arrived. Are there anyone who can help me to find the error? IE doesn't serve useful tools to check it out so I need someone helps me please!!! Thanks to every one!
The reason why your formatting is broken in Internet Explorer 7 and 8 is because you're using the article element; which isn't natively understood in versions of Internet Explorer prior to 9.
I dropped in the HTML5Shim (which creates some support for HTML5 elements) and refreshed your page - it solved the issue(s).
I'm pulling my hair out over this probably very simple problem..
I just built a website for an iphone repair company:
http://www.cellcity.co.nz/
When viewed on google chrome and safari the website shows up without any problems,
when viewed on internet explorer i just have the mobile optimised version showing while i get around to sorting out its problems.
but on firefox all my elements are pushed up one pixel. I have all the content within a table within divs, have a quick look at my source code or request some code to be shown. I don't understand what could be wrong, I am using the border-collapse css style, maybe that might be a contributing factor?
Thanks in advance,
Matt
Ok I figured out that for every css class and id, you can make a firefox independant one that is only seen by firefox. Just place #-moz-document url-prefix() {.....} around the second version of your css class and firefox will override the old version =D
hopefully this helps someone else!
I have a cross browser solution for dragging and dropping using HTML 5 that works for all elements in IE 9, Chrome, and Safari. Firefox works for everything except input types such as textboxes.
I have done a lot of research on this with a lot of help from these resources:
http://www.useragentman.com/blog/2010/01/10/cross-browser-html5-drag-and-drop/
http://html5doctor.com/native-drag-and-drop/
I have also scoured the HTML 5 spec and the Firefox MDN and other resources and have found no solution to the problem. I would hate to fall back to a jQuery library, but it just looks like HTML 5 is not ready for prime time and that I may have to do so.
Has anyone tried this and have a solution or am I going too far over the edge here? Glad to see workarounds are so prevalent in HTML 5 already and my dream of HTML 5 being cross browser so quickly destroyed with the first new thing I try. The spec makes it sound simple. Add a draggable attribute and handle a few events. Except, IE only supports anchor tags and image tags. Webkit browsers need CSS and Firefox apparently doesn't support input fields.
Try dragable attribute for firefox and -webkit-user-drag css property for webkit-based browsers.
See http://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html#link9
I am having my first foray into website design and I am learning a lot. I am also now seeing why web developers are not a huge fan of developing for Internet Explorer. Nothing seems to work how I expect. However, since the website has to work cross-browser, I am spending time looking at it in Firefox, Chrome, and IE. Something that is very non-obvious to me, however, is how to tell where problems lie in the website.
For example, the layout of one of my pages forces a footer to the bottom of the page. It looks great in Chrome and Firefox, but there's something broken in IE that make the footer align to the right (and cause a horizontal scroll to appear). I have played around with the code, but nothing really is responding to how I want in IE (even though it does in other browsers).
Are there any tools that can help "debug" the problems on a web site so fixing it is more than just a trial-and-error approach? Thanks.
One of my favorites that works in all browsers is X-Ray. You simply stick the link on that page into a bookmark and it loads some external JavaScript on top of the page you're testing. It reveals a bunch of parameters about the DOM object you click on, as well as its hierarchy in the model.
As for your specific footer problem, I would look to a potential lack of clearing of floats and divs that are wider than their parent containers somewhere up the line.
There are frameworks like GWT, ext-js, YUI which hide a lot of the browser bugs from you. But today (near the end of 2009), there still isn't a good, realiable way to narrow down browser issues and to fix them.
PS: I'm collecting tools that help during debugging here: Which tools do you use to debug HTML/JS in your browser?
I assume you have checked that your code is valid, with
HTML validator, for example: W3C Markup Validation Service
CSS checker, for example: W3C CSS Validation Service
And, of course, you should have correct doctype in your html file. Without doctype, some browsers go to quirks mode to emulate bugs in old browsers.
A cross-browser JavaScript library, like jQuery and its UI components, can be very helpful in avoiding idiosyncrasies between browsers. Microsoft provides the IE Developer Toolbar, it's not quite as easy to use as Firebug, but can still be very helpful. A Just-In-Time debugger like MS Script Debugger or Visual Studio are also a time saver.
I like Firebug for Firefox
and IE8 has Developer Tools from the tools menu and IE Developer Toolbar for older versions.
Chrome has similar tools from the page menu.
All of which allow you to see elements on the page as they are rendered in their specific browsers, which I usually find very helpful in debugging browser specific problems.