I've been pulling my hair out for the last few hours trying to wrestle with the IE8 developer toolbar while working with some styles not playing with IE7 mode properly...
Coming over from Firebug the difference is like... well lets just say its better then nothing.
What I'm wondering is, has there been any.. additions, patches, hacks, updates etc to improve the toolbar at all in IE8? It seems, like with most things associated with the IE line, this was really done as an afterthought and not much effort was put into making it work well...
Update: So I was, it seems, not specific enough.. here is what is annoying me about the IE offerings:
Style support - yeah, it is there, but it just doesn't feel right. It isn't easy to see the inheritance, and if you want to tweak an existing style you have to go into Attributes and add an override to the element.
HTML element location. This just seems a LOT cleaner in Firebug
Scrolling - If you have an element selected in the HTML pane, and you goto scroll in the CSS pane on the right it wont happen until you focus that pane.
Most of all its just the small annoyances - I think I've been too spoiled by Firebug, and I want it in IE - but considering the 'closed'-ness of the product it would be hard to get this rectified. To be honest, if I could contribute I would, because it would make my life so much easier - but... yeah.
Not sure what specific issues you are trying to debug, but the following tools all work well for their specific purposes:
Fiddler2 - HTTP Debugging Proxy - if you want to see what files are called, loaded, how, headers etc. this is the tool you want.
IE Tester - If you want to see how your site renders in IE6, IE7, IE8 without installing a bunch of virtual machines (or different PCs) this is a very good tool (not perfect, but very good)
DebugBar - Similar to the IE dev toolbar (but its been around much longer) it will let you inspect/alter various aspects of the HTML/CSS/JavaScript.
You're looking at Firebug Lite. See: http://getfirebug.com/lite.html
You can just install it easily onto your web page and it'll work just like Firebug on Firefox.
Tools may not help in this case as readily as you may wish. Here is Position Is Everything, a site that addresses some of the hacks required Internet Explorer. I have used IETester for IE 6 issues, but not for IE 8.
Good luck. IE issues really suck. If you're dealing with Sharepoint and it's mess of html and css I feel for you dude! If not, be thankful.
Related
I've just downloaded the latest Nivo slider 3.2 as I need it on a responsive site and out of the box with no modifications the transitions in ie7 and ie8 don't work.
They simply flick between images - no sliceDown or Fade they just rotate.
I've used it in the past with no problems - I've just view 2.6 in ie7 and ie8 and it's fine.
Does anyone know what can be done to fix it?
I've just checked out their demo too http://nivo.dev7studios.com/responsive-demo/ and the same issue is happening there.
Cheers
Just sharing what worked on my site -- I was using the default demo code, pretty much unedited from the download. It was beautiful and responsive (which I wanted) in all of the browsers I tested, except any version of i.e.. If i.e., it was just a rotation, no effects.
However, when I designated a size dimension for the wrapper div and the image divs, the transitions worked in i.e. also. (height: 350px;) You can specify the dimension in your css/stylesheet or inline -- if that's what it takes.
On my site, I only needed to specify a height dimension; for your site, you might need both height and width, or just width. A little experimentation was all it took.
But, with the height dimension specified, this threw off the display in the other browsers, so the dimension needs to be specified in terms of a "hack" for internet explorer: either a separate stylesheet just for internet explorer users or by using whatever your favorite internet explorer hacking method is: underscore, or \9, and so on. Here's a list of useful internet explorer workarounds, just for reference: internet explorer hacks
I know we hate to recommend hacking, but we all do it :). Would love to find out why this one worked for me, maybe there's a better way without the hack.
how to edit Firefox 'basic page style'
for all sites
with a Stylish script
to set scrollbar to a higher contrast color.
I can't see the thing its terrible.
is there any other way to do this?
The scrollbar is an operating system feature, not a feature of your website. Its look-and-feel are controlled by the user, not the webpage. IE provides a way to change scrollbar colors but it was heavily abused in the early days and is now considered a generally bad idea. In short, if you are trying to manipulate scrollbars from a webpage you're going to have to code a 'fake' scrollbar in Javascript or forget about it.
If you are trying to change only your own system then you may find some possibilities in creating user chrome, greasemonkey script or persona. I'm not sure what is possible there.
I have developer toolbar, any other tools I am missing ?
I am not doing any fancy graphics/html 5.
I have just been told I need to a support ie8; so want to know if I need to test in both, or just ie8.
Have used ms superpreview, but this is only good for static sites - I am developig a large data driven jsp website. and as far as I can see there is not any easy way to test on both ie6 ie8, without using a separate machine (albeit virtual).
edit
Will ietester remove my standard ie install (I want to keep developer toolbar). ietest will enable me to test under both, and then develop usign developer toolbar in whichever is my browser (ie6/ie8)
IE6 one of the most dumbest browser and biggest pain for both designer and developer. There is no guarantee that your site will work in both IE8 and IE6. As for checking you can use the IE Tester software which is free. Some even say that we should stop considering IE6 :)
You'll need to test in both. IE6 renders pages in a vastly different manner than IE7 or IE8.
Definitely not. If you need a page / site to work properly in IE6 then develop for that. More often than not a page that works in IE6 will work in everything else.
IE6 in particular is terrible with it's calculations regarding spacing, especially where padding is involved.
Test in both browsers on all systems possible.
Simple answer: NO.
you will need to test in all browsers you support as they all have differences to some degree.
IE6 is terrible at rendering css correctly.
you can use a tool called IETester to view your site in multiple version of IE although you wont have developer toolbar support. The other solution is to have different version on an windows image in a virtual machine.
The best way to develope a site is to develope it in a browser with the best support of css. (firefox, chrome, etc). Once you have done that then start adding browser specific fixes for browsers which do not display correctly.
Have a look at this article for how to setup your css file structure CSS
IE6 doesn't support HTML5 and CSS 3. In essence, your IE8 markups may not render well (in fact, many won't work at all) on IE6 (unless you do some CSS hack for IE).
If you want your system to work in both IE6 and IE8, test your system on both browser versions and make visual adjustments (CSS, HTML markup, etc.) accordingly.
Short answer: You cannot just code in IE8, you will need to test in IE6, too.
It's a very strange request to start coding only for those two browsers. Are you absolutely sure that's what you want? For example, what about IE7 or IE9? If you DO want to make your site as compatible as possible, in as many browsers as possible, you should make your site Standards Compliant (e.g. HTML 4 or XHTML).
Even if you don't, it's definitely where I'd start if I was going to focus on just IE6 and IE8. Unfortunately, IE6 will still likely give you trouble, but making your HTML/CSS standards compliant will make it easier a lot to ensure compatibility with IE8.
Tip to remember in IE6: If things aren't lining up exactly the way you imagine, it might be a carriage return in your HTML (yes, IE6 doesn't always ignore them *facepalm*).
Edit: Ah, corporate logic. I see.
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.
What are the main differences (if any) between the box models of IE8 and Firefox3?
Are they the same now?
What are the other main differences between these two browsers? Can a web developer assume that these two browsers as the same since they (seem to) support the latest web standards?
The Internet Explorer box model has been "fixed" since Internet Explorer 6 so long as your pages are in standard compliants mode.
See: Quirks mode and Internet Explorer box model bug.
Until I learnt about doctype declerations getting IE to work properly was a real PAIN, because IE runs in "quirks mode" by default. So having a standards mode doctype will eliminate a whole bunch of the most painful CSS problems.
I would never assume that any browser renders a page exactly the same.. always test!
Even though they support standards, there are plenty of variations between different browsers and even different versions. FF1 renders differently to FF2 which renders differently to FF3.
You also have to remember that each browser has their own JavaScript engine which again, will cause some scripts to work and other to fail.
You can ofcourse reduce these differences by using CSS and JavaScript frameworks which have been developed to support multiple browsers.
However, you still must test in all browsers. There will always be something that doesn't quite look or behave right.
Things that will always differ between the two (and other browsers) are default values (font sizes in headings, for example). The way they achieve default visuals is often different, as well, such as whether or not they use padding or margin to achieve the indentation in bulleted lists.
Something quite positive that I just noticed is that IE8 finally fixes IE's handling of margin: 0 auto for block elements that you want horizontally centered in their respective parents.