Ten Tonne Baby!

Where's Mama?

Archive for the rendering tag

• Testing IE rendering

  I have to admit until recently I’ve been using virtual machines for testing rendering in different versions of IE – just came across IETester which lets you open new tabs running the rendering engine from different versions. You probably know all about this already, but it was new to me. Last time I looked into this it was still a major headache.

  I’d really recommend taking a look if you’re doing any client-side dev work.

  Update: There isn’t a huge amount of information about exactly how this is implemented and whether you can solely rely on this for testing rendering + javascript of a major application. The closest I could find was this from the author on a forum… ‘I am hooking win32 functions to override standard calls and launch custom versions of IE instead of standard version.’ Everything I’ve tried so far has been accurate, but I think better documentation would really help adoption.

  There may be info I haven’t found in the forums.

  Posted:

  February 26, 2009 @ 13:22

  Categories:

  Development

  Tags:

  rendering, x-browser

  Comments:

  2 comments so far

• EmbeddedStream Mobile Version

  

  After learning that I have at least one occasional mobile using accessing the site (yes Jimmy, that’s you!) I’ve put in place a much more appropriate stylesheet, linked in with the handheld media type. I’ve been testing this against Opera – pressing Shift-F11 will switch Opera to handheld mode and will emulate it’s rendering behaviour when running on a mobile device. I think overall it works pretty well. Some of the features include…

  • Only 2 images in the design, and these are mini, mini images (3K each)
  • Single column fluid layout
  • More appropriate text sizing and margins
  • Better sizing of form controls

  I don’t really know enough about how widely the handheld media type has been adopted by mobile browsers, but I guess at least Opera crops up all over the place and it will render really nicely. Any feedback from my one mobile user would be appreciated

  While I was in the mood I’ve also added a print stylesheet, so think I should now be covered all round. I might have a little rant about Aural media type shortly, but will save that treat for another day.

  Posted:

  December 11, 2007 @ 9:06

  Categories:

  Personal

  Tags:

  browser, Design, handheld, mobile, my sites, opera, rendering

  Comments:

  2 comments so far

• HasLayout in IE7

  The majority of freaky rendering behaviour in IE6 came down to whether the haslayout attribute was applied to an element. This was a speed optimisation in the rendering engine – certain behaviour was skipped when deciding how to render an element if haslayout was false to increase the efficiency of rendering a page. The result was that a valid set of CSS instructions would produce unexpected rendering behaviour in IE6 unless haslayout was true on certain elements.

  One of the hacks used to get around this was to apply height: 1px to an element (in a hacks file, served only to IE6 via conditional comments). As IE6 treated height like min-height, this would have no adverse behaviour, but would result in haslayout resolving to true for the element.

  This morning I came across my first strange rendering issue in IE7 due to haslayout being false on a container element. I think a lot of the quirks have been fixed, but just be aware that the engine can still render differently according to haslayout. The previous height:1px fix is no longer applicable, as IE7 quite correctly respects any absolute height that you specify.

  The fix in this case was to set min-height: 1px, which is another attribute that will now result in haslayout being set. In our case this had no adverse effect on the desired rendering, and therefore was a suitable fix. The actual problem was minor – 1px of extra padding on an element for no good reason.

  I think in a lot of cases setting a min-height value would be a good approach (obviously this can be abstracted to a seperate file and served with conditional comments). However this is a fairly unobtrusive fix, so could stay with the core set of instructions without polluting the water too much.

  Posted:

  October 4, 2006 @ 11:55

  Categories:

  Development

  Tags:

  browser, bugs, css, IE, rendering

  Comments:

  No comments so far

• Think Before You Hack

  I’ve just been looking at a ‘broken’ site in IE7 and helping a friend diagnose what the problems are. I think people tend to assume that if a site renders happily in a bunch of different browsers, but has problems in IE7, then the browser is bad. The default response is then to add some hacks to make IE7 work correctly.

  This is a bad way to go. Each problem that I’ve looked at so far, IE7 is actually rendering correctly based on the instructions it understands. We just fixed a big layout problem where the root cause was a container div not stretching to contain it’s floated children. However this was the correct behaviour. Based on the instructions that IE7 had parsed and understood, it was rendering correctly.

  The fact that those instructions didn’t arrive at the desired layout was the problem, not the browser rendering. By taking the time to diagnose the problem and understand why it was rendering in a certain way, you can solve the root issue rather than adding a new layer of hacks on top of broken instructions.

  Generally IE7 will behave in a very logical way – it’s really worth taking the time to figure out why something looks wrong, rather than jumping straight in and hacking.

  UPDATE: the particular issue we were looking at was how to get an element to contain it’s floated children. This has been discussed already on 456 Berea Street and Malarky.

  Posted:

  October 3, 2006 @ 10:02

  Categories:

  Development

  Tags:

  bugs, hacks, IE, rendering

  Comments:

  2 comments so far

• Musings on Mass Uptake of IE7

  I was thinking about the impact of the delivery of IE7 via Windows Update and the fact that most people will be in possession of a good quality modern browser in the near future. I think the shortcomings of the previous version were only really so prominent due to the period of inactivity which allowed the competition to overtake.

  I developed a (probably quite sad) affection for Firefox due to the advanced state of it’s rendering engine and CSS support, but I think IE7 is actually an amazing achievement. To be in a situation where a number of different browsers running on different platforms can render in a consistent way is a big milestone. I now feel like I should also have an IE7 t-shirt and wear them on alternate days (although wearing FF regalia to TVP does seems a little rebellious).

  So it looks like the major pain in web development is slipping away. The fight for web standards is almost starting to seem retro, because of the prominent awareness of all the issues in the general populous. I really enjoyed going to the @Media event this year, but it seemed like the speakers were struggling to cover material that people weren’t already aware of. This was a massive difference from the same event the previous year.

  I’m extremely interested to see how Firefox develops in response to the IE7 full release. I think competition is extremely healthy, and will ensure that the renewed energy in the development of IE continues in the future.

  In CSS terms I think my personal favourite is proper implementation of width and height, and full support for min-width and max-width. Simple, but so welcome!

  Posted:

  September 5, 2006 @ 9:41

  Categories:

  Development

  Tags:

  css, IE, rendering

  Comments:

  No comments so far