Blog of Shaun McCran - Architecting robust, elegant technical and business solutions - Browsers

Samsung Galaxy Tab 10.1: Switching your browser from mobile view

Sun, 25 Sep 2011 13:27:00 -0000

The Samsung Galaxy 10.1 tablet has a screen that is easily capable of rendering full size website layouts, but the default view mode is as a mobile device. This means that you are served up the mobile optimised version of a website instead of the regular desktop experience. [More]

Position:relative and overflow CSS issues in Internet Explorer

Tue, 06 Sep 2011 08:23:00 -0000

I was working on a project this week and in the final testing phases I noticed that there was some unusual behaviour in Internet explorer. A div with an overflow of auto had elements within it that had a position: relative class. The problem here was that the elements remained fixed in place, and the scrollbar was no longer scrolling their content. [More]

Creating a baseline HTML 5 document

Sun, 14 Aug 2011 09:11:00 -0000

Browser standards and cutting edge web design are not great bedfellows. I've heard the arguments from creative designers that you have to write specific browser CSS styles to accommodate the multitude of browsers and their own unique way of rendering CSS. I disagree. I firmly believe that with a good understanding of the structure of CSS elements and how they interact with each other you can develop a completely cross-browser non JavaScript baseline template. This article explains how I have approached creating a HTML 5 layout file, that works across legacy browsers just as well as the more modern interpreters. [More]

IE9 .Woff font browser support test

Wed, 03 Aug 2011 02:50:00 -0000

I started using Font Squirrel a while ago to embed custom font faces into websites. After upgrading to Windows 7 I encountered a heavily documented issue about IE 9 and @font faces. [More]

Handling JavaScript event model differences in Internet Explorer and Firefox

Wed, 14 Apr 2010 15:15:00 -0000

A few weeks ago I created an inline editing system for a Content Management System. It allowed a user to click on a page element and edit it inline. The updated data was then submitted through an AJAX request. I have recently discovered an issue with some of the JavaScript code that I wrote in the event handling routine. [More]

Creating a CSS only cross browser drop down menu

Fri, 08 Jan 2010 16:47:00 -0000

I'll say this up front, I'm not a CSS guru. I like CSS, but it can be incredibly frustrating. One of the clients I am currently producing work for requires a high level of Accessibility. High enough that we need to avoid using JavaScript unless any script has a "Non" JavaScript equivalent. The site navigation is through a top level horizontal menu, but what if we also want a drop down menu? Can we do it in CSS only, and it still be Firefox, Internet Explorer 6,7 and 8 compatible? Yes, we can, but it's a lot of code, and it's not pretty. The basic concept behind most CSS menus is to use a list, and transform each list item to suit your styling. So we will create a div, with a class of menu. Then create a list inside it.


	
		
		Top menu option
		
		
	
		
			Link 1
			Link 2
			Link 3
			Link 4
			Link 5
			Link 6

Notice that there are some specific if statements relating to different versions of Internet Explorer. these basically make the functionality the same for each version, they are compensating for the differences in code handling between IE versions. Next create a set of CSS styles to alter the appearance of the list. I am not going to go into the CSS line by line, as it is commented, but I'll explain the methodology behind it. The top level menu item is always displayed, but the list is hidden using "visibility:hidden". When the user mouse's over the menu div the CSS applies a:hover ul{visibility:visible;. This makes the list visible.





.menu {width:149px; height:32px; position:relative; z-index:100;border-right:1px solid #000; font-family:arial, sans-serif;}

/* hack to correct IE5.5 faulty box model */
* html .menu {width:149px; w\idth:149px;}

/* remove all the bullets, borders and padding from the default list styling */
.menu ul {padding:0;margin:0;list-style-type:none;}
.menu ul ul {width:149px;}

/* float the list to make it horizontal and a relative position so that you can control the dropdown menu positon */
.menu li {float:left;width:149px;position:relative;}

/* style the links for the top level */
.menu a, .menu a:visited {display:block;font-size:12px;text-decoration:none; color:#fff; width:138px; height:30px; border:1px solid #000; border-width:1px 0 1px 1px; background:#c0c0c0; padding-left:10px; line-height:29px; font-weight:bold;}

/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {width:149px; w\idth:138px;}

/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited {background:#c0c0cc url(arrow.gif) no-repeat 130px center;}

/* style the second level hover */
.menu ul ul a.drop:hover{background:#c0c0cc url(arrow.gif) no-repeat 130px center;}
.menu ul ul :hover > a.drop {background:#c0c0cc url(arrow.gif) no-repeat 130px center;}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {visibility:hidden;position:absolute;height:0;top:31px;left:0; width:149px;border-top:1px solid #000;}

/* another hack for IE5.5 */
* html .menu ul ul {top:30px;t\op:31px;}

/* style the table so that it takes no part in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0; border-collapse:collapse;}

/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {background: ghostwhite; color:#000; height:auto; line-height:1em; padding:5px 10px; width:128px;border-width:0 1px 1px 1px;}

/* yet another hack for IE5.5 */
* html .menu ul ul a, * html .menu ul ul a:visited {width:150px;w\idth:128px;}

/* style the top level hover */
.menu a:hover, .menu ul ul a:hover{color:#000; background:#c0c0cc;}
.menu :hover > a, .menu ul ul :hover > a {color:#000; background:#c0c0cc;}

/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul{visibility:visible;}

There are also a lot of other browser specific hacks present, as the aim was to get the menu working in every Internet Explorer version, and be Accessible. There is a demo of this here: CSS menu demo

My handy IE CSS tweaks list

Fri, 18 Dec 2009 12:05:00 -0000

I'm not really a design kind of person, I like designing things, and I'm learning more and more CSS all the time, but it's the server side coding that I love like Apple Pie and custard. Recently I've had to do a bit more design work, so I've been tripping all over myself to get CSS working in IE6,IE7,IE8 and firefox. I've learnt a few interesting things in the last few days, and I know I'm going to need to use them again. Some are considered 'hacks', some are just clever CSS techniques. They all feel a bit like secret rules of a club I'm not really a member of yet though. So I'm making a handy list, so I don't loose them. I hope to refine and add to this on an ongoing basis, so if you know a better / easier way please let me know. After all coding standards are for life, not just Christmas, and I don't like the idea of anything being a hack, even if it is CSS.

Adding a 1px high line to IE

I am trying to add a 1px line, like a HR line to the page, it displays fat in IE? It seems that some versions of IE will display a div without content as the same height as your font size. Add html comments to it to drop it down to the right height:

IE is adding padding and margins to everything by default

I think there is a lot more information about this out there, but for now I've found that adding the code below will kill most of IE's random padding/margin issues.


* {margin:0; padding:0; border: 0px;}

I've built a JQuery accordion and the content doesn't move correctly

When expanding a JQuery accordion element the content underneath it is not moving down, and the accordion is expanding over it. This was a simple fix, but a bit of a pain to find. Just do not specify a height attribute on the div that hold the accordion, IE will stick to the height, but firefox will let it grow to be longer.

Styling form element borders

If you have a CSS rule like the one above that removes all the margins, padding and borders then all your form elements will have no border. IE your text fields and textareas etc will not have a clearly defined edge to them. By adding the line of CSS under this (select,input, etc) you can set the style width and colour of your form elements so that you control them, rather than the browser defaults. In Internet explorer this will also add borders to the checkbox and radio form elements. There does not seem to be any way of writing a CSS style to remove this inherently, so create a style of borderless and set all your radio and checkbox fields to "class=borderless".


* {margin:0; padding:0; border: 0px;}

select,input,textarea{border-width: 1px; border-style: solid; border-color: grey;}

/* IE stops the radio borders */
.borderless{border: 0px;}

Strange IE positioning fix

Sometimes in IE (mainly 6) using position: absolute just does not render the div on screen. I am not sure why. Adding a "clear: both;" or a "clear: left;" or a "clear: right;" appears to fix this.

Easy centering of elements

I used to struggle with centering elements on a page all the time, but now you can do something like this:


P.blockoftext {
    margin-left: auto;
    margin-right: auto;
    width: 6em
}

Text

This will center a block of text and give it a width of 6. For images you can do this:



img.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto }

That will auto center the image inside its containing div.

Firefox helpfully caching forms and their values

Mon, 14 Dec 2009 14:58:00 -0000

Whilst building a form recently I hit a real noob stumbling block. I was trying to set a select value to selected if the value had previously been submitted, something like this:

Pretty straight forward, you'll all agree. The issue comes in where I had entered selected="selected". This isn't the correct code for a select option. Handily Firefox will cache the form structure and form data, so that when you refresh the page it just loads up the cached version. This is great if you coded it correctly, otherwise it happily serves you up your coding errors again. So don't refresh your forms in testing. Add ?test=1 or something to make the request a new URL.

Long button issues in IE, a CSS fix

Wed, 05 Aug 2009 10:54:00 -0000

A brief CSS interlude. A styling issue came up on a site recently, we had a series of buttons that had long text. Like whole sentences. In Firefox that was fine, but in Internet Explorer (7 and 8) they were super widely padded out. They were a fair bit longer than necessary, so long they were messing up the general layout of the template.

Long buttons in Internet Explorer:

The same buttons in Firefox:

After looking at setting the margins, or the padding to 0, or even negative numbers nothing was working. Turns out you need to set the width to auto, and just let the text push out the width of the button using 'overflow:visible'. This is the CSS that generates the above buttons:

This then makes text was a little close to the edge, so I've added a left and right padding setting, gives it that bit of space at the edges.

Apostrophe ( ' ) display issues

Wed, 01 Jul 2009 11:07:00 -0000

It appears that the character entity ' is not a valid HTML entity. It was just XML, and thus XHTML. If you are using a browser that doesn't support XHTML then you probably shouldn't use it, as it will appear as a normal text string. I found this whilst testing something in IE 8, as that is not XHTML compliant. So just use the ' character, or if you really feel that you have to escape it use: ' Just be careful with that one, as it will cause coldFusion to flip out. Then you may need to escape your escape characters, and then where will you be?

Firefox not displaying Google maps generated images

Tue, 30 Jun 2009 15:50:00 -0000

My latest Google maps lookup template was not working in Firefox 3.n. It was working fine in IE 8 (and 8) so I thought maybe IE was compensating for some shaky JavaScript code, and 'working out' what I was trying to do and fixing it for me. After spending half an hour painstaking going through my Google JavaScript and removing everything out of my FuseBox framework, just in case anything was mysteriously interfering, I was at a dead end. A quick flick around online and it seems that there is a setting in FireFox that blocks this sort of functionality.

Type 'about:config' (without quotes) in the browser's address bar.
Type 'image' (without quotes) in the 'Filter' field.
Verify that 'dom.disable_image_src_set' is set to FALSE.
Verify that 'permissions.default.image' is set to 0 (the default setting).

For some reason in my FireFox installation the 'permissions.default.image' was set to 1, which blocks the function return from Google. Google has a tech note on it here: http://maps.google.com/support/bin/answer.py?answer=18529&topic=10789 It is really frustrating when 'controls' are set outside of the development environment. Now to put all my code back!