Please subscribe to my feed.

You can subscribe by entering your email address below, and you will never miss any good posts by our panel of authors. Don't worry, you can unsubscribe ANYTIME.


Should you want to join Kongtechnology.com, please read here.

I think anybody who is doing web scripting and web design is well aware of the CSS problems across browsers, especially in Internet Explorer (IE). This is especially true and frustrating with the CSS indentation problem. Holly ‘n John have compiled a list of Internet Explorer CSS bugs on their website if you wanted to take a look.

But if you are looking for a quick solution… then read on. I was doing a quick simple page for a friend of mine when I found myself using the <ul> tag. Check out the following screen shots.

Firefox CSS

<ul style=”margin-left:-15px; color:#3056AE”>
<li>List item 1
<li>List item 2
</ul>

The list looks perfect in Firefox, right or not? I put in “margin-left:-15px” to shift the items to the left slightly. The indentation is just nice. I love you Firefox!

Internet Explorer CSS

However, it’s a totally different sight for Internet Explorer, the world’s most used web browser. It looks horrible. List items are shifted too much to the left, even run off the screen! I am not sure if this is a bug, or just a weird behavior.

There might be a solution… perhaps a better one in CSS, but I am not going to do too much of research in this. I prefer a quick and dirty workaround. This is what I did to fix it. At least seems to have been fixed. :)

1. Download PHP Browser Detection script. Oh yeah, I forgot to mention my script is coded in PHP. Save the downloaded script file as “browser_detection.php”.

2. Put the following code at the top of the existing file.

<?php
include “browser_detection.php”;

if( browser_detection( ‘browser’ ) == ‘ie’ )
$margin = “20px”;
else
$margin = “-15px”;
?>

The above code basically uses the function browser_detection to check what’s the browser type we are using, and sets the margin accordingly.

3. Change the existing code to the following.

<ul style=”margin-left:<?php echo $margin; ?>; color:#3056AE”>
<li>List item 1
<li>List item 2
</ul>

That’s it. Now view the list items in both Internet Explorer and Firefox! They look great in both! Congratulations!

Should you have a nicer solution in CSS itself, please do let me know. :)

Share this story with the world: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • del.icio.us
  • MisterWong
  • Wists
  • BlinkList
  • Furl
  • Reddit
  • StumbleUpon
  • Technorati