Forum Moderators: not2easy
I'm trying to align a table in the centre of the browser window (whatever the width of the window), with an image on the left and a menu on the right.
I got it to work in Firefox and thought I was up and running. Then I looked in IE7, and my 'centred' table is displaced over to the right. (I haven't dared look in IE6 yet.) I've tried a couple of suggested fixes I read about in an old thread, but neither makes any difference.
Here's the offending code:
<div style="position:absolute; top:20px; clear:left;">
<form name="throwching">
<table border="0" align="center" width=40%>
<tr>
<td>(Lots of long table content in many rows goes here)</td></tr></table>
</form>
</div>
<div style="float:right;">
<p class="small">Open instructions in new window
<br>here's the right-hand menu with dropdowns
</p>
</div>
<div style="float:left;">
<img src="../../../../wireframe/public_html/img/logof.gif" width="206" height="125" alt="" border="0">
</div>
I would be massively grateful for any help fixing this.
[edited by: Hilary at 9:46 pm (utc) on Sep. 2, 2007]
Your code is not detailed enough yo provide an answer. Can you either provide more or PM the url of the offending page.
Marshall
I've found a way to fix the problem I wrote about. The absolute positioned div with the table was actually on the right in IE whether there was an image to the left of it or not. I made it a centre-aligned div, and I've also made the left-hand image part of a background.
Now I'm realising I have another problem. I can't control the width of the table in IE! So it's way too wide. It ignores table width=. If I assign a width to the div it's in, Firefox no longer respects the centre alignment, and puts it back on the left.
The offending page isn't online yet. Here's its entire <body> - sorry about the length of the table:
<body><div style="background: url(../../../../wireframe/public_html/img/logof.gif) no-repeat 0 0; height:125px;">
<div style="align:center;">
<FORM NAME="throwChing">
<table border="0" align="center" width="20%" cellpadding="0">
<tr><td colspan="3" height="35px"></td></tr>
<tr><td colspan="3" width=100% align="center">
<INPUT TYPE="hidden" NAME="hex1" VALUE="index">
<INPUT TYPE="hidden" NAME="hex2" VALUE="index">
<input type="text" style="width:80%;" value=" Type your question here..." onclick="this.value=''" class="bigyellow">
</td></tr>
<tr><td colspan="3" height="3px"></td></tr>
<tr>
<td width="32%" align="center"><IMG SRC="images/empty.gif" WIDTH="61" HEIGHT="8" NAME="line6pic"></td>
<td align="center" rowspan="3" valign="top"><INPUT TYPE="button" NAME="throw" VALUE="Consult the I Ching" onClick="chooseLine(this.form); return false" class="bigyellow">
</td>
<td align="center"><IMG SRC="images/empty.gif" WIDTH="61" HEIGHT="8" NAME="line12pic"></td>
</tr>
<tr>
<td align="center"><IMG SRC="images/empty.gif" WIDTH="61" HEIGHT="8" NAME="line5pic"></td>
<td align="center"><IMG SRC="images/empty.gif" WIDTH="61" HEIGHT="8" NAME="line11pic"></td></tr>
<tr>
<td align="center"><IMG SRC="images/empty.gif" WIDTH="61" HEIGHT="8" NAME="line4pic"></td>
<td align="center"><IMG SRC="images/empty.gif" WIDTH="61" HEIGHT="8" NAME="line10pic"></td></tr>
<tr>
<td align="center"><IMG SRC="images/empty.gif" WIDTH="61" HEIGHT="8" NAME="line3pic"></td>
<td align="center" rowspan="3" valign="top">
<SELECT NAME="directoryName" class="bigyellow">
<OPTION VALUE="wilhelm/">Wilhelm translation
<OPTION VALUE="legge/">Legge translation
</SELECT></td>
<td align="center"><IMG SRC="images/empty.gif" WIDTH="61" HEIGHT="8" NAME="line9pic"></td></tr>
<tr>
<td align="center"><IMG SRC="images/empty.gif" WIDTH="61" HEIGHT="8" NAME="line2pic"></td>
<td align="center"><IMG SRC="images/empty.gif" WIDTH="61" HEIGHT="8" NAME="line8pic"></td></tr>
<tr>
<td align="center"><IMG SRC="images/empty.gif" WIDTH="61" HEIGHT="8" NAME="line1pic"></td>
<td align="center"><IMG SRC="images/empty.gif" WIDTH="61" HEIGHT="8" NAME="line7pic"></td>
</tr>
<tr><td width=32% align="center" valign="top"><INPUT TYPE="button" NAME="hexagramURL1" VALUE="Primary Hexagram" onClick="hexFrame1(this.form); return false" class="bigyellow"></td><td align="center" valign="top">
<INPUT TYPE="button" NAME="hexagramBoth" VALUE="Show both hexagrams" onClick="hexFrameBoth(this.form); return false" class="bigyellow"></td><td align="center" valign="top"><INPUT TYPE="button" NAME="hexagramURL2" VALUE="Relating Hexagram" onClick="hexFrame2(this.form); return false" class="bigyellow"></td></tr>
</table>
</FORM>
</div>
<div style="position:absolute; top:20px; right:10px;">
<p class="small">Open instructions in new window
<br>here's the right-hand menu with dropdowns
</p>
</div>
</div>
</body>
Gnash...
...edit and update. Got it! I think. I hope linking to the source of a fix (not my site) is OK.
[edited by: Hilary at 10:30 am (utc) on Sep. 3, 2007]
<div style="background: url(../../../../wireframe/public_html/img/logof.gif) no-repeat 0 0; height:100%; margin: 0 atuo; text-align: left; padding: 0;">
<div width="475px; margin: 0; padding: 0;">
Using margin: 0 atuo; text-align: left; in the first <div> will cause it to stay center. The text-align: left is an IE thing. This will enable you to assign a width in the second <div> without affecting FF, which I tested it in. The only other thing I can suggest if the button fix does not help, is use an image for the button:
<INPUT TYPE="image" src="image_source.gif" NAME="hexagramURL1" VALUE="Primary Hexagram" onClick="hexFrame1(this.form); return false" class="bigyellow">
This also makes the button a little smaller:
<input type="button" value="Show both hexagrams" style="border:none;background-color:#00F;color:#FFF;"> and it is easy to add a background color or specify a font color. This is sometimes helpful as a visual aid.
Hope this helps.
Marshall
Going to look at what IE6 makes of it now...
