By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
448,506 Members | 1,228 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 448,506 IT Pros & Developers. It's quick & easy.

Firefox/Safari alignment problems

P: 6
Hey all.
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
  1. <!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <link rel="stylesheet" href="style.css" type="text/css" /> <body bgcolor=030309>
  3. <script>
  4. function switchDiv(div_id)
  5. {
  6.   var style_sheet = getStyleObject(div_id);
  7.   if (style_sheet)
  8.   {
  9.     hideAll();
  10.     changeObjectVisibility(div_id, "visible");
  11.   }
  12.   else 
  13.   {
  14.     alert("sorry, this only works in browsers that do Dynamic HTML");
  15.   }
  16. }
  17. function switchDivtwo(div_id)
  18. {
  19.   var style_sheet = getStyleObject(div_id);
  20.   if (style_sheet)
  21.   {
  22.     hideAlltwo();
  23.     changeObjectVisibility(div_id, "visible");
  24.   }
  25.   else 
  26.   {
  27.     alert("sorry, this only works in browsers that do Dynamic HTML");
  28.   }
  29. }
  30. function getStyleObject(objectId) {
  31.   // checkW3C DOM, then MSIE 4, then NN 4.
  32.   //
  33.   if(document.getElementById && document.getElementById(objectId)) {
  34.     return document.getElementById(objectId).style;
  35.    }
  36.    else if (document.all && document.all(objectId)) {  
  37.     return document.all(objectId).style;
  38.    } 
  39.    else if (document.layers && document.layers[objectId]) { 
  40.     return document.layers[objectId];
  41.    } else {
  42.     return false;
  43.    }
  44. }
  45. function changeObjectVisibility(objectId, newVisibility) {
  46.     // first get the object's stylesheet
  47.     var styleObject = getStyleObject(objectId);
  48.  
  49.     // then if we find a stylesheet, set its visibility
  50.     // as requested
  51.     //
  52.     if (styleObject) {
  53.     styleObject.visibility = newVisibility;
  54.     return true;
  55.     } else {
  56.     return false;
  57.     }
  58. }
  59. function hideAll()
  60. {
  61.    changeObjectVisibility("- Choose One -","hidden");
  62.    changeObjectVisibility("default","hidden");
  63.    changeObjectVisibility("Option","hidden");
  64.    changeObjectVisibility("OpArticle","hidden");
  65.    changeObjectVisibility("OpExample","hidden");
  66. }
  67. function hideAlltwo()
  68. {
  69.    changeObjectVisibility("OpArticle","hidden");
  70.    changeObjectVisibility("OpExample","hidden");
  71. }
  72.  
  73.  
  74. </script>
  75. <center><div style="height:900px;">
  76. <form>
  77. <span class="small"><font color="999999">Category:</font>
  78. <select name="form_type" onChange="switchDiv(this.form.form_type.options[this.form.form_type.selectedIndex].value);">
  79. <option>- Choose One -
  80. <option>Option
  81. </select>
  82. </form>
  83.  
  84. <!-- default divs --!>
  85. <div id="default" style="position:relative;top:33px;left:0px;">
  86. <centeR><i>Select a submission category from above to access the appropriate form</i>
  87. </div>
  88.  
  89. <div id="- Choose One -" style="position:relative;top:20px;left:0px;visibility:hidden;">
  90. <centeR><i>Select a submission category from above to access the appropriate form</i>
  91. </div>
  92. <!-- Option --!>
  93. <div id="Option" style="position:absolute;top:55px;left:225px;visibility:hidden;margin:auto;overflow:hidden;">
  94. <form action="" method="post">
  95. <table border=0 cellpadding=3 cellspacing=0 bgcolor=030309 align=center bordercolor=101118>
  96. <tr>
  97. <td bgcolor=383838 style="border:solid;border-width:2;border-color:101118;">Title</td>
  98. <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>
  99. <td width=16 style="border:none;"></td>
  100. </tr>
  101. <tr>
  102. <td valign=top class="small" rowspan=1 style="border:solid;border-width:2;border-color:101118;border-top:none;">
  103. <font color=999999>Category:</font> Option <br>
  104. <font color=999999>Type:</font> <input type=radio value="article" name="type" onClick="switchDivtwo('OpArticle');">Article 
  105. <input type=radio value="example" name="type" onClick="switchDivtwo('OpExample');">Example<br>
  106. <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>
  107. <p class="small">
  108. <font color=999999>Author:</font> <?php echo $_SESSION['username']; ?><br>
  109. <font color=999999>Entry Date:</font> 
  110. <?php 
  111. $dt = explode( "-", $loco_info[datesubmitted]  );
  112. $date = $dt[1]."-".$dt[2]."-".$dt[0];
  113. echo $date; 
  114.  ?>
  115. <br>
  116. </td>
  117. <td valign=top rowspan=1 colspan=1 style="border:solid;border-width:2;border-color:101118;border-left:none;border-top:none;" class="small">
  118. <font color=999999>Title:</font> <input type="text" name="title" size=25>
  119. <p class="small">
  120. <font color=999999>Description/Summary:</font>
  121. <br><textarea cols=43 rows=4></textarea>
  122. </td></tr></table></div>
  123. <!-- Option Article --!>
  124. <div id="OpArticle" style="position:absolute;top:187px;left:225px;visibility:hidden;">
  125. <table border=0 cellpadding=3 cellspacing=0 bgcolor=030309 align=center bordercolor=101118>
  126. <tr><td width=512 colspan=2 rowspan=3 style="border:solid;border-width:2;border-color:101118;border-top:none;" class="small" valign=top>
  127. <font color=999999>Article:</font>
  128. <br><textarea cols=69 rows=30 name="article" onFocus="htmlhelp();" onBlur="htmlhelpoff();"></textarea>
  129. </td><td height=370></td></tr>
  130. <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>
  131. <INPUT TYPE="image" SRC="images/confirmi.jpg" BORDER="0" onMouseover="ddrivetip('Submit Entry')"; onMouseout="hideddrivetip()" name="op" value="op" onClick="return checkForm();"></td></tr>
  132. <tr>
  133. <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>
  134. <a href="submit.php"><img SRC="images/reseti.jpg" BORDER="0" onMouseover="ddrivetip('Cancel Submit')"; onMouseout="hideddrivetip()"></a></td></tr>
  135. </table>
  136. </form>
  137. </div>
  138. <!-- Option Example --!>
  139. <div id="OpExample" style="position:absolute;top:187px;left:225px;visibility:hidden; margin:auto;overflow:hidden;">
  140. <table border=0 cellpadding=3 cellspacing=0 bgcolor=030309 align=center bordercolor=101118 width=544>
  141. <tr><td colspan=2 rowspan=3 style="border:solid;border-width:2;border-color:101118;border-top:none;" class="small" valign=top>
  142. <font color=999999>about:</font>
  143. <br><textarea cols=69 rows=4 name="intro" onFocus="htmlhelp();" onBlur="htmlhelpoff();"></textarea><p class="small">
  144. <font color=999999>Opener:</font>
  145. <br><textarea cols=69 rows=10 name="article" onFocus="htmlhelp();" onBlur="htmlhelpoff();"></textarea>
  146. </td>
  147. <td height=187></td></tr>
  148. <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>
  149. <INPUT TYPE="image" SRC="images/confirmi.jpg" BORDER="0" onMouseover="ddrivetip('Submit Entry')"; onMouseout="hideddrivetip()" name="op" value="op" onClick="return checkForm();"></td></tr>
  150. <tr>
  151. <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>
  152. <a href="submit.php"><img SRC="images/reseti.jpg" BORDER="0" onMouseover="ddrivetip('Cancel Submit')"; onMouseout="hideddrivetip()"></a></td></tr>
  153. </table>
  154. </form>
  155. </div>
  156.  
  157. </div>
Aug 22 '06 #1
Share this Question
Share on Google+
2 Replies


P: 6
I realize my doctype is invalid however when I used valid ones I found no change in my problem. I have tried using overflow:auto and margin:auto to no avail either and I think there are no white spaces (I hope). Perhaps the float attribute although I don't really know how to use it.
Aug 22 '06 #2

Banfa
Expert Mod 5K+
P: 8,916
Your page is too complex, if you want it centered then have a single div that is centered and put everything else inside that

don't use the center tag, use CSS to do your centering (for that matter don't use FONT either or I or B)

Just because it doesn't correct this problem is not a reason not to correct the doc type.

However my first statement is your main problem, you have made this page so complex that no-one has a chance of making it work. Why all the relative and absolute positioning?

Creating tables using floats can work but in this case I think you would be justified using a small table (without any nested tables) as what you have in a data entry table for related data for an article.
Aug 27 '06 #3

Post your reply

Sign in to post your reply or Sign up for a free account.