Hello, I have a classic problem concerning DIV positioning in Firefox. We had tool's UI designed with DIV elements inside a table. It looks OK in IE but completely out of whack in Firefox. You can see it here and compare the rendering by the 2 browsers (the tool is in the blue table on the right): http://www.sweetartsdesign.com.ws026.alentus.com/200WebSite/indexb.html To complicate things, the div heights in the html file compete with the ones defined in a js file. This is what we are trying to do - we need to keep the same table's total height but: 1) Make the 3rd area (name area) look better when minimized. There's a light blue gap at the bottom but we'd like only a 1 pixel thick line, as the ones that separate the other areas above (letter and design areas) 2) Have the whole tool's UI in Firefox match the one in IE Do you have any tips? If you want to play with it, please find the code attached. Thanks!
Remove the absolute positioning: <DIV style="POSITION: absolute; TOP: 145px; RIGHT: 77px" align=center><IMG height=25 alt="Preview Your Design" title="Preview Your Design" src="Artwork/previewyourdesign.jpg" width=170> Code (markup): It becomes: <DIV align=center><IMG height=25 alt="Preview Your Design" title="Preview Your Design" src="Artwork/previewyourdesign.jpg" width=170> Code (markup): Also the name area is not explicitly hidden: <div id="nameArea" style="margin:0px 1px -135px 1px; height:135px; border-left:solid thin #008ed8; border-bottom:solid thin #008ed8; border-right:solid thin #008ed8"> Code (markup): Should be: <div id="nameArea" style="margin:0px 1px -135px 1px; height:135px; border-left:solid thin #008ed8; border-bottom:solid thin #008ed8; border-right:solid thin #008ed8; visibility: hidden;"> Code (markup):
It appears to also be broken 'large fonts' in IE - probably from the invalid font size declarations. "font-size:12;" Twelve what? I'm not even sure what it's supposed to look like, being it appears to give me five different appearances in six different browsers... but from looking at the code I can be sure of one thing: Too Much Code. We've got a table for NO fathomable reason since it appears to be a single column... Divs around things that shouldn't need the extra container, text just thrown in that should be inside LABEL tags, and no header tags when visually it appears to use headers. Of course, a valid doctype probably wouldn't hurt, using your form elements inside a FORM might not be a bad idea either... and some indentation that made sense would help not only debugging, but prevent errors in the first place. Give me a while, I might toss together a rewrite for you.