473,320 Members | 1,859 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

Firefox/Safari alignment problems

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
2 17055
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
9,065 Expert Mod 8TB
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

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

Similar topics

1
by: Cruzweb | last post by:
http://storm-enterprises.net/cgi/contact.php is the design Works fine in ie, but in firefox the content <div> expands behind the footer <div> and through the wrapper <div> background. Any help is...
2
by: WizyDig | last post by:
We have an asp.net page written in C# that runs fine on IE windows, IE Mac and Mozzilla Mac. Here are the symptoms when it runs on Safari. When the page loads and the users tries to click on any...
2
by: Chris Mahoney | last post by:
Hi I'm using several Sessions in my app. When the user has cookies enabled in their browser, everything works fine. But with cookies disabled, only IE seems to remember the sessions. In Firefox...
1
by: tony dong | last post by:
Hi There After I developed portal application, it is working very well in IE browser, but it is not working using firefox, safari browser etc. The problem is the web part drag and drop...
12
by: cewisham | last post by:
I have a menu that pops up different layers as you mouse over. Seems to work OK in IE 6. I position the layers dynamically with javascript because the menu moves when users resize their browser...
1
by: supergrover1981 | last post by:
Gidday gang, I've been teaching myself CSS over the past 2 days and for the most part I thought I had it all working. All the problems I've had have been in IE...until now. If anyone could offer...
3
by: Benedictum | last post by:
I have added the BrowserCaps in web.config file but it did not do anything in the prsentation of the web page. Is there anything else to do to have Firefox render the page like IE?
1
by: vvcortazar | last post by:
I'm having a problem with some javascript buttons on firefox and safari, the code that is executed is the following: <tr> <td...
2
by: Kevin G. | last post by:
Hello, I'm exporting an ASP page to Excel using 'Response.ContentType = "application/vnd.ms-excel"' and it is working fine for the most part except the particular page I'm exporting has images,...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.