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

 <!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>

Aug 22 '06 #1

Follow Post Reply

16879

cbjewelz

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

Firefox/Safari alignment problems

Post your reply

Similar topics