Some HTML & JS gotchas
1. Mysterious padding
<div style="background-color:blue;">
<img src="some_url/a.gif" alt="Header" />
</div>


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