Come together with the global Drupal community in Rotterdam, 28 Sept – 1 Oct 2026. Sessions, contribution, connection, and Early Bird savings until 8 June.
By bigheadfish on
I am developing a new theme by basically following bluemarine. However, I met some strange cross browsers behavior. Any help is greatly appreciated.
Here is the HTML I put in header block
<table width="100%" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td width="450"><img src="http://www.fisheries.ubc.ca/images/template/a1.gif" width="450" height="131" border="0" ></td>
<td width="100%" bgcolor="#c6c5d0"> </td>
<td width="295"><img src="http://www.fisheries.ubc.ca/images/template/a2.gif" width="295" height="131" alt="" border="0" /></td>
</tr>
</table>
It is rendered as I expected in IE. but now in FF or Opera.
Here are screenshots for IE, FF, and Opera.
http://www3.telus.net/minghuiyu/drupal/ie.jpg
http://www3.telus.net/minghuiyu/drupal/ff.jpg
http://www3.telus.net/minghuiyu/drupal/opera.jpg
Any idea on why it happens?
Many thanks.
Comments
wwwwwwwwwwwwwwwwwwwwwwwhy are you using tables
???????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????
Web Developer
Music Photographer
bluemarine is a table based
bluemarine is a table based theme.
welcome to designing cross-browser compatible layouts
You just discovered the fun of CSS...every browser interprets it differently. You also need to check each major release for compatibility, e.g. IE 6 & 7.
Unless you only plan on targeting IE, I would recommend developing your theme in Firefox and then adjusting it to make it right in IE, since IE has the most idiosyncrasies.
Using the firebug plug-in would also help you figure out the CSS issues. I reealize that firebug won't directly help for IE but you can often use firebug to identify the elements that you need to adjust in IE.
It must be somethingn in the
It must be somethingn in the css.
Bluemarine works fine on all 3 browsers so check out the relevant parts in the css.
Could be an interpretation problem as IE is funny with 'em' & prefers pixels/percent etc.
Web dveloper in Firefox is
Web dveloper in Firefox is your new best friend. If you don't use it already I would strongly recommend installing it. There is also a DOM reader which can be quite handy
Web Developer
Music Photographer
Yep Firebug is a real
Yep Firebug is a real jewel.
I also use Web Develloper toolbar which is great for showing layouts & works in a slightly different way than Firebug.
Sometimes I can't find the problem in Firebug but can with Web Dev toolbar & vica versa, although when I can't find it with Firebug, it's probaly because I don't know where to look.
;)
seems like a css issue with
seems like a css issue with padding/margin. reset explicitly the margin and padding to 0px and see if it helps. Different browsers have different padding and margin values as default. Also, use Zen theme as a base theme for custom theming. Themers life is lot easy with ZEN.
Loving Life,
Tosho Freny