Layer verticle alignment in IE vs. Others

@Z-237Oct 08.2004

Ok, I have a couple of layers that are using relative positioning to stay where I want them…in IE.

Safari seems to bump them up ever so slightly (although not much) and Mozilla/Netscape display them too low. Horizontal alignment isn’t creating a problem.

here’s what I have:
#parent
{margin-top: 0px; margin-left:auto; margin-right:0px; margin-bottom:auto; width 650px; text-align: center;}

#layer1
{ position: relative; z-index: 1; top: -34 px; left: 13px; height: 38px; visibility: visible }

#layer2
{ position: relative; top: -107px; left: 254px; width: 40px; height: 32px; visibility: visible }

The layers are then nested in a table in the “parent” div. What am I doing wrong to piss off the non-IE browsers? Is there a clean fix or will this require adding browser checks and a bunch of other things that I’m probably not too good at.

oh, I’ve also run into something where non-IE browsers are displaying a different part of the site on the left, rather than center. It’s just an unrelated table, so I’m wondering what the other browsers have against
</table>
</div>
<div align=”center”>
<table border=”0″ cellpadding=”0″ cellspacing=”0″ width=”619″>
<tr>
<td width=”5″></td>
<td width=”609″>
<div align=”center”>

Thanks in advance.

Z-237

to post a comment

CSS

12 Comments(s) _↴

@toicontienOct 08.2004 — #We'll probably need to see the full HTML and CSS.

@Z-237authorOct 09.2004 — #Here's the head:

<html>

<head>
   <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
   <title>Vassar College Campus Dining | Locations | The Atrium</title>

#layer1
   { position: relative; z-index: 1; top: -34 px; left: 13px; height: 38px; visibility: visible }
  #layer2
   { position: relative; top: -107px; left: 254px; width: 40px; height: 32px; visibility: visible }
  body
   { scrollbar-arrow-color: #582121; scrollbar-base-color: #c6c6c6; scrollbar-face-color: #dfdfdf; scrollbar-track-color: #dfdfdf }

</style>

<LINK href="../css/menu.css" rel=stylesheet>

<csscriptdict>

<script></script>

</csscriptdict>

<csactiondict>

<script></script>

</csactiondict>

</head>

@Z-237authorOct 09.2004 — #and here's the body. Sorry to have split them up:

<body bgcolor="#FFFFFF" link="#582121" alink="#a40d0d" vlink="#692e3a" text="black" onload="CSScriptInit();">

<div id="parent">

<div align="center">

<table border="0" cellpadding="0" cellspacing="0" >

<tr>

<td colspan="3">

<div align="center">

<img src="atrium_graphic.jpg" width="616" height="154" border="0"></div>

</td>

</tr>

<tr>

<td></td>

<td>

<div align="center">

<p><font face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular" size="2"><a href="../index.html">Home</a> | <a href="../news/news.html">News</a> | <a href="../plans/mealplan.html">Meal Plan Information</a> | <a href="../ftv/ftv.html">Farm to Vassar</a> | <a href="locations.html">Dining Locations</a> | <a href="../nutrition/nutrition.html">Nutrition Information</a> | <a href="../contact.html">Contact Us</a></font></p>

</div>

</td>

<td></td>

</tr>

<tr>

<td></td>

<td>

<hr width="585" color="black" noshade size="4">

</td>

<td></td>

</tr>

<tr>

<td></td>

<td>

<div align="center">

<div id="layer1">

<p>

<script language="JavaScript" src="../css/menu.js"></script>



<script language="JavaScript" src="../css/menu_items.js"></script>



<script language="JavaScript" src="../css/menu_tpl.js"></script>

<script language="JavaScript">

<!--//

// each menu gets two parameters
  // 1. items structure
  // 2. geometry structure
 
  new menu (MENU_ITEMS, MENU_POS);
 
  // Leave this alone, lest ye be like a cow in a china shop.
  //-->

</script>

</p>

</div>

<div id="layer2">

<csobj w="33" h="29" t="Button" ht="../images/graphic_VC-over.gif" cl="../images/graphic_VC-down.gif" st="Vassar College"><a href="http://www.vassar.edu" target="_blank" onmouseover="return CSIShow(/*CMP*/'vc-button',1)" onmouseout="return CSIShow(/*CMP*/'vc-button',0)" onmousedown="CSIShow(/*CMP*/'vc-button',2);return CSButtonReturn()"><img src="../images/graphic_VC.gif" width="33" height="29" name="vc-button" border="0" alt="Vassar College"></a></csobj></div>

</div>

</td>

<td></td>

</tr>

</table>

</div>

<div align="center">

<table border="0" cellpadding="0" cellspacing="0" width="619">

<tr>

<td width="5"></td>

<td width="609">

<div align="center">

<table border=0 cellpadding=0 cellspacing=0 width="501">

<tr height="21">

<td rowspan=2 width="5"><img src="../images/header_graphic_01.gif" width=5 height=26 alt=""></td>

<td height="21" width="417">

<p><font face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular" size="3"><b>The Atrium Juice Bar</b></font></p>

</td>

<td rowspan=2 width="86"><img src="../images/header_graphic_01-03.gif" width=86 height=26 alt=""></td>

</tr>

<tr height="5">

<td height="5" width="417"><img src="../images/header_graphic_01-04.gif" width=420 height=5 alt=""></td>

</tr>

<tr height="5">

<td height="5" colspan="3">

<hr color="black" noshade size="2">

</td>

</tr>

<tr height="5">

<td height="5" colspan="3" valign="bottom">

<div align="center">

<p></p>

<table border="0" cellpadding="2" cellspacing="2" width="95%">

<tr>

<td rowspan="2" valign="top" align="right" width="76">

<div align="right">

<img src="atrium_sub_graphic.jpg" width="74" height="140" border="0"></div>

</td>

<td rowspan="3" colspan="2" bgcolor="white">

<div align="center">

<table border="0" cellpadding="2" cellspacing="2" width="98%" bgcolor="#ffe2be">

<tr>

<td rowspan="3" colspan="3">

<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#ffcba2">

<tr>

<td width="187" valign="top">

<div align="right">

Hours:</div>

</td>

<td colspan="2" valign="top">

<div align="right">

Monday - Thursday 11:00am-10:00pm</div>

</td>

</tr>

<tr height="13">

<td width="187" height="13"></td>

<td height="13" align="right" valign="top" width="67">

<div align="left"></div>

</td>

<td height="13">

<div align="right">

Friday 11:00pm - 2:00pm</div>

</td>

</tr>

<tr height="16" valign="bottom">

<td colspan="3" height="16">

<div align="right">

<p>Accepting Retreat and Declining Balance points</p>

</div>

</td>

</tr>

</table>

<h2><font size="3">W</font><font size="2">hether you've just completed a workout, a class, an intramural game, or are just plain hungry, the new Atrium juice bar could be just the spot you were looking for. Located in the four story vaulted lobby of the new sports complex, The Atrium offers fresh juice drinks, smoothies, panini, and original pizzas, as well as, sports drinks, spring water, and nutrition bars.<br>

<br>

</font></h2>

<h2><font size="2">The sleek steel cafe furnishings create the perfect setting for a light meal, and the overstuffed club chairs are an ideal place to chill down with friends and one of our delicious juice creations (Maybe you'd like to try our Shakespeare's Garden, fresh strawberries and raspberries blended with cranberry juice and ice; a Vassar Veggie, our fresh vegetable ****tail, or perhaps give one of our daily specials a try). The Atrium is a great place to get a healthy snack and it takes Retreat and optional points.<br>

</font></h2>

</td>

</tr>

<tr></tr>

<tr></tr>

</table>

</div>

</td>

</tr>

<tr></tr>

<tr>

<td width="76"></td>

</tr>

</table>

</div>

<hr color="black" noshade size="2">

</td>

</tr>

<tr valign="top" height="2">

<td colspan="3" valign="top" bgcolor="black" height="2"></td>

</tr>

</table>

<br>

</div>

</td>

<td width="5"></td>

</tr>

</table>

<br>

<br>

<br>

<table border="0" cellpadding="0" cellspacing="2" width="95%" bgcolor="white">

<tr>

<td colspan="3">

<hr color="black" noshade size="1" width="95%">

</td>

</tr>

<tr>

<td colspan="3">

<div align="center">

<font face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular" size="2"><a href="../index.html">Home</a> | <a href="../news/news.html">News</a> | <a href="../plans/mealplan.html">Meal Plan Information</a> | <a href="../ftv/ftv.html">Farm to Vassar</a> | <a href="locations.html">Dining Locations</a> | <a href="../nutrition/nutrition.html">Nutrition Information</a> | <a href="../contact.html">Contact Us</a></font></div>

</td>

</tr>

<tr>

<td colspan="3">

<hr color="black" noshade size="1" width="95%">

</td>

</tr>

</table>

<p></p>

<p><font face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular">© 2004 Vassar College</font></p>

</div>

</div>

</body>

</html>

@toicontienOct 10.2004 — #[i]Originally posted by Z-237 [/i]

[B]What am I doing wrong to piss off the non-IE browsers?[/b][/quote]
function CSIEStyl(s) { return [b]document.all[/b].tags("div")[s].style; }

Document.all is an Internet Explorer-only object. The recommended method now is document.getElementById, or document.getElementsByTagName (Standard DOM). That JavaScript appears to be an IE-only script.

[i]Originally posted by Z-237 [/i]

[B]Is there a clean fix...[/b][/quote]
Gonna have to go with No on that one. The whole script should be reworked.

Also, the [b]<csactiondict>[/b] tag is something that I've never heard of. I'm assuming it's IE-only. Same thing for the [b]<csobj>[/b] tag. I'm not sure where you got the script and markup, but you'll probably need to ditch it completely if you want to support other browsers. What's the effect you are trying to achieve?

Lastly, you've got links to .js files, but I can't link to them with the code you've given, so I can't even get the effect to work at all. Could you post the code for the .js files too?

You might be able to work with someone here at the JavaScript forum to get a workable cross-browse script, and ditch the IE-only markup.

@ray326Oct 10.2004 — #I saw right off the bat that you have no doctype. Without that you can kiss your work bye bye.

@Z-237authorOct 10.2004 — #nuts. well, the <csobj> and <csactiondict> are just the names Adobe GoLive calls it's readymade scripting objects. In this case, I had GoLive throw together a little rollover effect.

The linked .js files are for a dropdown menu. Here's the actual page so you can see everything (working or not working depending on your browser. If you're not in IE, the dropdown and "vc" thing appear in the wrong place vertically.) [URL=http://campusdining.vassar.edu/test/locations/acdc.html]Link.[/URL]

So I'm not sure the GoLive readymade is bumping things, as the actual rollover it's there for worked in other browsers.

As for the doctype, what are my options here? I've seen people fighting about which is best, but for what I have going here, what would you reccomend?

Thanks,

Z-237

@ray326Oct 11.2004 — #You can always start out with an HTML 4 transistional. That's pretty loose but it still gets IE out of quirks mode.

@Z-237authorOct 12.2004 — #Well, I put it [URL=http://campusdining.vassar.edu/test/locations/atrium.html]this[/URL] into transitional, and it didn't seem to affect Safari, and only slightly helped in Mozilla. Mozilla displayed the layer a little bit higher on the page, but not really high enough. It still seems rather arbitary. IE really didn't seem to care about the doctype though. It's still happy.

Do browsers automatically deal with tables differently? right now the layers originate from within a table, so maybe they're adding or subtracting distance there? I'm just brainstorming here. Feel free to correct me.

@ray326Oct 13.2004 — #Still not a complete doctype.

@Z-237authorOct 13.2004 — #ok, so I'm feeling dumb, but what do you mean by that? It's not the doctype of choice, or that everything should then be rewritten following it's rules.

I tried the W3 validator for transitional and, with a few touch-ups, it seemed to be in ok shape. (no, the version above doesn't reflect these changes).

Also, and I post this only because it seems really weird, I tried another version changing two things:

-removed mention of height or width from the layer info

-moved the <div id=layer> originiation point in the table. Instead of starting from below the point I wanted them, they start on the right and left of where they should be displayed. This seems to make Mozilla, Firefox, Opera, and Safari more or less happy. It's [URL=http://campusdining.vassar.edu/test/index.html]this[/URL] vs. [URL=http://campusdining.vassar.edu/test/index3.html]this.[/URL]

Does this make sense to anyone? Is it a symptom of something else? Do browsers just look at tables that differently? It's embarrassing but I'm starting to feel mystified by why this makes much of a difference.

@ray326Oct 14.2004 — #http://www.alistapart.com/articles/doctype/

@Z-237authorOct 14.2004 — #Thanks, Ray

Also in #CSS _↴

menu bar problim a:active will just not work-please help Hide vertical scrollbar in <select> element

Success!

Help @Z-237 spread the word by sharing this article on Twitter...

Tweet This

Layer verticle alignment in IE vs. Others

12 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Layer verticle alignment in IE vs. Others

12 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

12 Comments(s) _↴

Also in #CSS _↴