So I'm having problems with cross browser alignments. I'm looking at Safari and Mozilla Firefox. I develop in Safari and so it looks perfect there however in Firefox my vertical alignments and div widths are off. It's as if firefox has a different definition of a pixel than safari. Here is the url: http://theprize.chemouni.com/testing.php. When you select the Option from the pull down, the first part of the form appears. Then when you select Type the rest of the form appears depending on the type.
I had to use 2 different tables for each form or my javascript function wouldn't work but here are the 2 screen shots and below is my code. As you can see, the second part that appears is much higher (covers the bottom border of the top table) and wider in firefox but not in safari. Thanks for any help
Safari:
Firefox:
Expand|Select|Wrap|Line Numbers
- <!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN">
- <link rel="stylesheet" href="style.css" type="text/css" /> <body bgcolor=030309>
- <script>
- function switchDiv(div_id)
- {
- var style_sheet = getStyleObject(div_id);
- if (style_sheet)
- {
- hideAll();
- changeObjectVisibility(div_id, "visible");
- }
- else
- {
- alert("sorry, this only works in browsers that do Dynamic HTML");
- }
- }
- function switchDivtwo(div_id)
- {
- var style_sheet = getStyleObject(div_id);
- if (style_sheet)
- {
- hideAlltwo();
- changeObjectVisibility(div_id, "visible");
- }
- else
- {
- alert("sorry, this only works in browsers that do Dynamic HTML");
- }
- }
- function getStyleObject(objectId) {
- // checkW3C DOM, then MSIE 4, then NN 4.
- //
- if(document.getElementById && document.getElementById(objectId)) {
- return document.getElementById(objectId).style;
- }
- else if (document.all && document.all(objectId)) {
- return document.all(objectId).style;
- }
- else if (document.layers && document.layers[objectId]) {
- return document.layers[objectId];
- } else {
- return false;
- }
- }
- function changeObjectVisibility(objectId, newVisibility) {
- // first get the object's stylesheet
- var styleObject = getStyleObject(objectId);
- // then if we find a stylesheet, set its visibility
- // as requested
- //
- if (styleObject) {
- styleObject.visibility = newVisibility;
- return true;
- } else {
- return false;
- }
- }
- function hideAll()
- {
- changeObjectVisibility("- Choose One -","hidden");
- changeObjectVisibility("default","hidden");
- changeObjectVisibility("Option","hidden");
- changeObjectVisibility("OpArticle","hidden");
- changeObjectVisibility("OpExample","hidden");
- }
- function hideAlltwo()
- {
- changeObjectVisibility("OpArticle","hidden");
- changeObjectVisibility("OpExample","hidden");
- }
- </script>
- <center><div style="height:900px;">
- <form>
- <span class="small"><font color="999999">Category:</font>
- <select name="form_type" onChange="switchDiv(this.form.form_type.options[this.form.form_type.selectedIndex].value);">
- <option>- Choose One -
- <option>Option
- </select>
- </form>
- <!-- default divs --!>
- <div id="default" style="position:relative;top:33px;left:0px;">
- <centeR><i>Select a submission category from above to access the appropriate form</i>
- </div>
- <div id="- Choose One -" style="position:relative;top:20px;left:0px;visibility:hidden;">
- <centeR><i>Select a submission category from above to access the appropriate form</i>
- </div>
- <!-- Option --!>
- <div id="Option" style="position:absolute;top:55px;left:225px;visibility:hidden;margin:auto;overflow:hidden;">
- <form action="" method="post">
- <table border=0 cellpadding=3 cellspacing=0 bgcolor=030309 align=center bordercolor=101118>
- <tr>
- <td bgcolor=383838 style="border:solid;border-width:2;border-color:101118;">Title</td>
- <td style="border:solid;border-width:2;border-color:101118;border-right:none;border-left:none;border-top:none;" colspan=1><font color="030309">.</font></td>
- <td width=16 style="border:none;"></td>
- </tr>
- <tr>
- <td valign=top class="small" rowspan=1 style="border:solid;border-width:2;border-color:101118;border-top:none;">
- <font color=999999>Category:</font> Option <br>
- <font color=999999>Type:</font> <input type=radio value="article" name="type" onClick="switchDivtwo('OpArticle');">Article
- <input type=radio value="example" name="type" onClick="switchDivtwo('OpExample');">Example<br>
- <font color=999999>Setting:</font> <input type="text" name="environment" size=15> <span onMouseover="ddrivetip('Environment best suited for opener')"; onMouseout="hideddrivetip()"><img src="images/helpi.jpg" valign=middle border=0></span>
- <p class="small">
- <font color=999999>Author:</font> <?php echo $_SESSION['username']; ?><br>
- <font color=999999>Entry Date:</font>
- <?php
- $dt = explode( "-", $loco_info[datesubmitted] );
- $date = $dt[1]."-".$dt[2]."-".$dt[0];
- echo $date;
- ?>
- <br>
- </td>
- <td valign=top rowspan=1 colspan=1 style="border:solid;border-width:2;border-color:101118;border-left:none;border-top:none;" class="small">
- <font color=999999>Title:</font> <input type="text" name="title" size=25>
- <p class="small">
- <font color=999999>Description/Summary:</font>
- <br><textarea cols=43 rows=4></textarea>
- </td></tr></table></div>
- <!-- Option Article --!>
- <div id="OpArticle" style="position:absolute;top:187px;left:225px;visibility:hidden;">
- <table border=0 cellpadding=3 cellspacing=0 bgcolor=030309 align=center bordercolor=101118>
- <tr><td width=512 colspan=2 rowspan=3 style="border:solid;border-width:2;border-color:101118;border-top:none;" class="small" valign=top>
- <font color=999999>Article:</font>
- <br><textarea cols=69 rows=30 name="article" onFocus="htmlhelp();" onBlur="htmlhelpoff();"></textarea>
- </td><td height=370></td></tr>
- <tr><td style="border: solid; border-width:2; border-color:101118;border-left:none; padding:2px; padding-top:2px; padding-bottom:2px;" align=center height=19 width=16>
- <INPUT TYPE="image" SRC="images/confirmi.jpg" BORDER="0" onMouseover="ddrivetip('Submit Entry')"; onMouseout="hideddrivetip()" name="op" value="op" onClick="return checkForm();"></td></tr>
- <tr>
- <td style="border: solid; border-width:2; border-color:101118; border-top: none;border-left:none; padding:2px; padding-top:2px; padding-bottom:2px;" align=center height=20 width=16>
- <a href="submit.php"><img SRC="images/reseti.jpg" BORDER="0" onMouseover="ddrivetip('Cancel Submit')"; onMouseout="hideddrivetip()"></a></td></tr>
- </table>
- </form>
- </div>
- <!-- Option Example --!>
- <div id="OpExample" style="position:absolute;top:187px;left:225px;visibility:hidden; margin:auto;overflow:hidden;">
- <table border=0 cellpadding=3 cellspacing=0 bgcolor=030309 align=center bordercolor=101118 width=544>
- <tr><td colspan=2 rowspan=3 style="border:solid;border-width:2;border-color:101118;border-top:none;" class="small" valign=top>
- <font color=999999>about:</font>
- <br><textarea cols=69 rows=4 name="intro" onFocus="htmlhelp();" onBlur="htmlhelpoff();"></textarea><p class="small">
- <font color=999999>Opener:</font>
- <br><textarea cols=69 rows=10 name="article" onFocus="htmlhelp();" onBlur="htmlhelpoff();"></textarea>
- </td>
- <td height=187></td></tr>
- <tr><td style="border: solid; border-width:2; border-color:101118;border-left:none; padding:2px; padding-top:2px; padding-bottom:2px;" align=center height=19 width=16>
- <INPUT TYPE="image" SRC="images/confirmi.jpg" BORDER="0" onMouseover="ddrivetip('Submit Entry')"; onMouseout="hideddrivetip()" name="op" value="op" onClick="return checkForm();"></td></tr>
- <tr>
- <td style="border: solid; border-width:2; border-color:101118; border-top: none;border-left:none; padding:2px; padding-top:2px; padding-bottom:2px;" align=center height=20 width=16>
- <a href="submit.php"><img SRC="images/reseti.jpg" BORDER="0" onMouseover="ddrivetip('Cancel Submit')"; onMouseout="hideddrivetip()"></a></td></tr>
- </table>
- </form>
- </div>
- </div>