XPages and Me

My Journey into XPages Development

Dabbling in Bootstrap and Font Awesome Part 1: Legend-Tag and IE 8/9

Welcome to my first part of “Dabbling in Bootstrap and Font Awesome”. In this series I will post about the issues I ran into while using Bootstrap / Font Awesome with , but not limited to IE 8/IE 9 and the solutions / work-around I found for them.

First up, the <Legend> Tag. With the legend tag, you can create a nice title for your form / page. Just add the <legend> tag to your source code and some text in between the tag:

Image 4

 

When you open your XPage in the browser, you’ll see that Bootstrap formats it rather nicely for you:

Image 1

 

However, if you open your XPages in IE 8 / IE 9, the Bootstrap styles are not being applied:

Image 2

 

The reason for this is, IE 8 / IE 9 can’t handle the legend tag without it being wrapped inside a fieldset tag and if you look at the HTML code, the legend tag has been scrambled by IE, thus Bootstrap can’t apply its styles:

Image 3

 

The solution to this problem is rather simple: Wrap the legend tag inside the fieldset tag and Bootstrap will apply its styles even in IE 8/ IE 9:

Image 5

 

Et voila, it works in IE 8/ IE 9 as well:

Image 6

 

Happy Coding!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: