PDA

View Full Version : Table GFX Move Vertically in IE Browser


uktag
09-16-2005, 01:16 PM
Hi

I am working on a site, the content is basically photoshop slices within a table, the usual method of placement. The page looks good and accurate in the document window but as soon as I look at it in a browser such as IE the gfx move vertically.

Would you say that it could be sorted out with either a 1 pixel transparent .gif in each cell of an unmerged control row at the bottom of the page, or a control column at the right hand side or is there a method using .css.

I am using DW MX2004 and the page is, please scroll down to see the full extent of the problem.

http://www.muddyradish.com/xincom/crucial3.htm ('http://www.muddyradish.com/xincom/crucial3.htm')


thanks as always

davidj
09-16-2005, 02:40 PM
is this any good


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0046)http://www.muddyradish.com/xincom/crucial3.htm -->
<HTML><HEAD><TITLE>Untitled Document</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<STYLE type=text/css>BODY {
MARGIN: 0px
}
</STYLE>

<script language=JavaScript type=text/JavaScript>
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</SCRIPT>

<META content="MSHTML 6.00.2900.2722" name=GENERATOR></HEAD>
<BODY>
<TABLE cellSpacing=0 cellPadding=0 width=832 border=0><!--DWLayoutTable-->
<TBODY>
<TR>
<TD vAlign=top colSpan=3><IMG height=123
src="Untitled Document_files/cable_1.jpg" width=147></TD>
<TD vAlign=top colSpan=3><IMG height=123
src="Untitled Document_files/cable_2.jpg" width=655></TD>
<TD width=28></TD>
</TR>
<TR>
<TD height="28" colSpan=3 vAlign=top><IMG height=28
src="Untitled Document_files/navbox_top.jpg" width=147></TD>
<TD vAlign=top colSpan=3><IMG height=28
src="Untitled Document_files/contentbox_top.jpg" width=655></TD>
<TD></TD></TR>
<TR>
<TD vAlign=top width=6 rowSpan=12><IMG height=281
src="Untitled Document_files/navbox_leftside.jpg" width=6></TD>
<TD width=127 rowspan="12" vAlign=top><p><img height=173
src="Untitled Document_files/crucial_logo.jpg" width=127><br>
<img height=6
src="Untitled Document_files/navbox_cross_1.jpg" width=127><br>
<img height=17
src="Untitled Document_files/crucial_button.jpg" width=127><br>
<img height=6
src="Untitled Document_files/navbox_cross_2.jpg" width=127><br>
<img height=17
src="Untitled Document_files/xincom_button.jpg" width=127><br>
<img height=6
src="Untitled Document_files/navbox_cross_2.jpg" width=127><br>
<img height=17
src="Untitled Document_files/contact_button.jpg" width=127><br>
<img height=6
src="Untitled Document_files/navbox_cross_4.jpg" width=127><br>
<img height=17 src="Untitled Document_files/pdf_button.jpg"
width=127><br>
<img height=13
src="Untitled Document_files/navbox_bottom.jpg" width=127><br>
</p></TD>
<TD vAlign=top width=14 rowSpan=12><IMG height=281
src="Untitled Document_files/navbox_rightside.jpg" width=14></TD>
<TD vAlign=top width=17 rowSpan=12><IMG height=2563
src="Untitled Document_files/contentbox_leftside.jpg" width=17></TD>
<TD vAlign=top width=623 rowSpan=8><IMG height=204
src="Untitled Document_files/top_router_trimmed.jpg" width=623></TD>
<TD vAlign=top width=17 rowSpan=12><IMG height=2563
src="Untitled Document_files/contentbox_rightside.jpg" width=15></TD>
<TD height="173"></TD></TR>
<TR>
<TD height="6"></TD></TR>
<TR>
<TD></TD></TR>
<TR>
<TD height="17"></TD></TR>
<TR>
<TD></TD></TR>
<TR>
<TD height="17"></TD></TR>
<TR>
<TD height="6"></TD></TR>
<TR>
<TD height="17"></TD></TR>
<TR>
<TD vAlign=top rowSpan=3></TD>
<TD height="6"></TD></TR>
<TR>
<TD height="17"></TD></TR>
<TR>
<TD height="13"></TD></TR>
<TR>
<TD vAlign=top></TD>
<TD></TD></TR>
<TR>
<TD vAlign=top></TD>
<TD vAlign=top><IMG height=1 src="Untitled Document_files/spacer.jpg"
width=127></TD>
<TD vAlign=top></TD>
<TD vAlign=top></TD>
<TD vAlign=bottom></TD>
<TD vAlign=top></TD>
<TD></TD></TR>
<TR>
<TD vAlign=top></TD>
<TD vAlign=top><IMG height=1 src="Untitled Document_files/spacer.jpg"
width=127></TD>
<TD vAlign=top></TD>
<TD vAlign=top colSpan=3><IMG height=20
src="Untitled Document_files/nb5.jpg" width=656></TD>
<TD></TD></TR></TBODY></TABLE>
<P></P></BODY></HTML>

uktag
09-16-2005, 05:19 PM
Hey David, thanks very much, that works just fine in the browser, for some reason now the left hand box has spaces in it in the design document window, is this normal.

Also for future reference would you mind giving me a quick summary of what you changed and what I had done wrong, it will prevent me from doing the same again in the future,

Thanks again, your help is much appreciated

davidj
09-20-2005, 09:36 AM
when i design in photoshop using slices i make sure that any menus are independent of the main table

i would output it as you did and then tweak it. In this case i merged the column holding your nav buttons (valign top)

Now your entire menu system is in 1 <TD>

Idealy i would create an independent nested table and place each menu element into the new independent table. This gives you a more control over your menu