Some HTML & JS gotchas

1. Mysterious padding

<div style="background-color:blue;">
    <img src="some_url/a.gif" alt="Header" />
</div>

Image on IEImage on FF

See the output results above, it creates blue padding at the bottom of the image in IE. To fix the issue, you have to rewrite the code without a line break (mean a single line of code) or even simply add <br /> tag immediately after the <img> tag.

2. Setting an integer or string value?

<script type="text/javascript">
    function moveThisElement(value){
        document.getElementById("adiv").style.top = value;

}

</script>

Suppose I passed the values below to moveThisElement()

Value Works?
100 + “px” Yes
100 + ” px” No
100 Yes
“100″ Yes
“100px” Yes

This little test shows that an html element’s top or left value is string. (I confess that I wasn’t sure.) Notice if there is a space between numeric value and “px”, it won’t work in Fire Fox. It works fine in IE and Safari though.

3. JS syntax error in WordPress MU versrion 1.2.3

In version 1.2.3 of WP MU, there is malformed JS literal notation. It creates JS error in IE and it is really annoying. It looks like this and the last comma should be removed. File name is wp-content/mu-plugins/dashboardswitcher.php line #54.

    var h = $( '#blog-title' )
    .css({

        background: 'transparent url( ../wp-content/mu-plugins/bullet_arrow_down.gif ) no-repeat scroll 100% .2em;',

        padding: '0 25px 2px 5px',

        cursor: 'pointer',

        border: '1px solid #14568a',  <-- This comma

    })

admin on September 5th 2007 in Programming

Trackback URI | Comments RSS

Leave a Reply

*
To prove you're a person (not a spam script), type the security text shown in the picture. Click here to regenerate some new text.
Click to hear an audio file of the anti-spam word