Category: HTML And CSS

HTML and CSS tips and tricks

HTML (Hyper Text Markup Language) is the language behind the web pages of the Internet, created by Tim Berners-Lee, and uses a system of tags for applying layout, formatting and links to content. CSS (Cascading Style Sheets) are used to describe the presentation of the HTML. This section contains howtos, tips and tricks about how to use HTML and CSS.

Google remarketing tag iframe height issue

Google’s remarketing code inserts an iframe (with no content) directly below the opening <body> tag, which is 300x13px and can throw out a website’s layout. This post looks at how to effectively hide it with CSS in a couple of different ways that hopefully shouldn’t mess with its functionality at all.

Using position: absolute

Add this to your CSS and it will use absolute positioning, pushing it off the left side of page so it cannot be seen and doesn’t affect content flow:

iframe[name='google_conversion_frame'] {
    position: absolute;
    left: -1000px;
}

Setting the height

Another method is to set the height instead:

iframe[name='google_conversion_frame'] {
    height: 0;
}

I’ve seen posts that suggest setting display: block as well, but just setting the height seems to work OK. If you find it’s not setting the hide in a particular browser, then try adding display block too.

Setting display: none?

This will work to hide the frame, but it’s probably not a good idea because it may mess with the functionality of the remarketing code. Obviously the above options may too, but something needs to be done to prevent it from pushing layouts out.

Read More »

HTML/CSS background-position

The HTML/CSS background position can be set using px, % and the constants top, center, bottom for vertical positioning and left, center, right for horizontal positioning. This post looks at the order they need to be in, and a "gotcha" that can catch you out when moving from constants to pixels.

Read More »

Opacity for Internet Explorer using CSS3 PIE and Alpha Transparency

Alpha transparency is a much easier way to make a background transparent than having to specify a whole bunch of cross browser CSS opacity statements and works in a wide variety of browsers, with the usual exception of Internet Explorer prior to version 9. If you are using the CSS3 PIE utility in your web project then there’s an easy way to use alpha transparency with CSS3 PIE.

What am I trying to achive?

I’ve used this technique myself for the top navigation of one of my websites where there’s a background image with navigation tabs on top. The website also uses border-radius which PIE also helps with, but I won’t include that in the example in this post.

The screenshot below shows an example of a background image with a transparent block on top with some text. The background image can be seen opaque through the block.

example of transparency using alpha transparency

The HTML and CSS

In the above example, the HTML looks like this:

<div id="exampleContainer">
 <div id="exampleTransparency">Example transparency</div>
 </div>
 

The CSS looks like this:

#exampleContainer {
 background: url(https://electrictoolbox.com/wp-content/uploads/running.jpg);
 height: 97px;
 width: 500px;
 }
 #exampleTransparency {
 /* set background with alpha channel transparancy: 1st for IE no PIE, 2nd for IE PIE, 3rd for others */
 background: rgb(95,83,75);
 -pie-background: rgba(0,0,0,0.5);
 background: rgba(0,0,0,0.5);
 /* add PIE for IE < 9 */
 behavior: url(https://electrictoolbox.com/examples/pie.htc);
 /* IE needs position set to something other than the default for this to work */
 position: relative;
 /* other css settings for content */
 color: white;
 padding: 10px;
 }
 /* prevent IE9 using PIE */
 :root *> #exampleTransparency {
 behavior: none;
 }
 
 

It’s fairly self explanatory but just a couple of points…

There are three declarations for the background. The first is the fallback which will show a solid background color if PIE doesn’t work (i.e. Javascript is switched off). The second is the declaration for PIE which will be ignored by all browsers other than IE using PIE. The third sets the background with alpha transparency. Browsers that don’t support this will ignore it and use the earlier declaration.

Obviously change the path for pie.htc to where you store it on your own site. It does need to have the full path to it, as I mentioned in my gotchas about PIE post.

And finally that odd looking declaration at the end prevents IE9 from using PIE at all; by doing this it ensures IE9 will not download the pie.htc file. I talked about this in an earlier post as well.

Browser support for alpha transparency

All modern browsers support alpha transparency:

  • Chrome
  • Firefox 3+
  • IE9+
  • Opera 10+
  • Safari 3+

Working example

I have a working example available to view in a browser, which should look more or less exactly like the screenshot example in this post.

Read More »

border-radius and box-shadow support across browsers

This post is a reference sheet I needed for myself to show which browsers support the CSS3 box-shadow and border-radius properties, which require vendor prefixes, and which have no support at all.

box-shadow / border-radius support

The border-radius support and box-shadow support columns indicate what property name is required for the property to work in that browser. For older versions of Firefox the are prefixed by -moz, for older versions of webkit they are prefixed with -webkit.

Browser and versionborder-radius supportbox-shadow support
Chromeborder-radiusbox-shadow
Firefox 4.0+border-radiusbox-shadow
Firefox 3.6-moz-border-radius-moz-box-shadow
Firefox 3.5-moz-border-radius-moz-box-shadow
Firefox 3.0-moz-border-radiusNo support
Internet Explorer 9+border-radiusbox-shadow
Internet Explorer 8 and earlierNo supportNo support
Mobile Safari 4.0.5 (iOS 4)border-radius-webkit-box-shadow
Mobile Safari 4.0.4 (iOS 3)-webkit-border-radius-webkit-box-shadow
Opera 10.50+border-radiusbox-shadow
Opera 10.10 and earlierNo supportNo support
Safari 5.0border-radius-webkit-box-shadow
Safari 4.0-webkit-border-radius-webkit-box-shadow

Mobile Safari was tested on iOS3 and iOS4 using the iPad and iPhone simulators on a Mac, and also on Android 2.2 (which reports it as 4.0 and 533.1). The version on Android 2.2 was like 4.0.5 where it needed the vendor prefix for box shadow but not border radius.

Cross Browser Usage

In order to ensure the greatest cross browser usage, set up border-radius and box-shadow like so:

-moz-border-radius: [radius settings here];
-webkit-border-radius: [radius settings here];
border-radius: [radius settings here];

-moz-box-shadow: [shadow settings here];
-webkit-box-shadow: [shadow settings here];
box-shadow: [shadow settings here];

Replace [radius settings here] with the exact same settings for each; and the same for [shadow settings here].

Note: I used the HTML5 DOCTYPE when testing to create the above table.

Read More »

Aligning HTML bullet points against the margin

Paddings and margins on <ul> and <ol> elements in HTML are fairly inconsistent across browsers, even when they are both explicitly set. This post looks at how to try to align these bullets points against a margin as consistently as possible across browsers.

Read More »

Getting ready for HTML 5

I started working on the template for a new website today and decided to have a look at HTML 5 for laying it out. Everything was looking nice until I discovered that Internet Explorer does not allow CSS styling for elements which it does not know about (e.g. <header> <section> etc). There is a Javascript workaround but I prefer not to use that so show here my solution for the time being.

Some more about HTML 5

I won’t comment here about the new elements etc in HTML 5. Instead, have a read of these two recent articles:

The Javascript Solution

The Javascript solution is to create elements like so:

document.createElement('myelement');
 

This means they can then be styled in Internet Explorer. However, if the visitor has Javascript disabled then it’s not going to work and the layout of the site will be broken. Although the numbers of visitors with Javascript disabled is low, it’s not something I’m prepared to accept at the present time.

My temporary solution

Until all but a few Internet Explorer users have upgraded to an HTML 5 compliant version of Internet Explorer (IE9) I’ll use the solution presented here. It’s not ideal but it will make changing the HTML to be more semantic HTML 5 later easy.

Here’s more or less the document structure I was trying to do:

<header>
 <nav> ... </nav>
 </header>
 <section>
 <aside>...</aside>
 <article> ...</article>
 <aside> ...</aside>
 </section>
 <footer>
 ... 
 </footer>
 

And here’s my solution, which is to replace the HTML 5 elements with <div>s with the class name the same as the HTML 5 element which they replace:

<div class="header">
 <div class="nav"> ... </div>
 </div>
 <div class="section">
 <div class="aside"> ... </div>
     <div class="article"> ... </div>
 <div class="aside"> ... </div>
 </div>
 <div class="footer">
 ...
 </div>

I’ve used classes rather than ids because the elements can appear multiple times in the DOM. As you can see in the above example there are a couple of asides.

In the future when I decide to make the document template semantically correct HTML 5 I can simply replace <div class=”header”> … </div> with <header> … </header> etc and change my CSS from .header { } to header { } and it’s all good.

Read More »