Dreamweaver 8 Button Alignment Question

Mini · 03-10-2010, 03:52 PM

This question is regarding a website I’ve built in Dreamweaver 8. The problem I’m having has to do with the misalignment of my buttons when viewed on a lap top in firefox or internet explorer. The website looks fine in Safari and the buttons stick to the top like their supposed to but when I view it in the other browsers, the buttons seem to try to center them selves with the rest of the layout and therefore become misaligned and spread out.

This problem began occurring when I inserted a larger amount of text into the table next to the buttons therefore making the page longer than it was before.

The buttons are imported image graphics from Firefox. I can tell from looking at the code that spacers were added into the dreamweaver code, when I deleted them the layout moved to the top, but I wasn’t able to find enough of them to align all the buttons so this idea didn’t work and the buttons were still misaligned.

My goal is to find a way to adjust the layout so that the buttons and graphics stick to the top and do not spread out. If any one has any ideas on how to do this I would greatly appreciate some advice.

mezangath · 03-11-2010, 02:24 AM

Post some code.

Mini · 03-11-2010, 03:05 PM

Here is the code for one of the buttons and the table:

Button:
<tr>
<td height="42"><a href="index1.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('TheLightedWaySpaceClear ingsPageCut_r3_c1','','images/TheLightedWaySpaceClearingsPageCut_r3_c1_f2.jpg',1 );"><img name="TheLightedWaySpaceClearingsPageCut_r3_c1" src="images/TheLightedWaySpaceClearingsPageCut_r3_c1.jpg" width="192" height="42" border="0" id="TheLightedWaySpaceClearingsPageCut_r3_c1" alt="" /></a></td>
<td><img src="images/spacer.gif" width="1" height="42" border="0" alt="" /></td>
</tr>

Table:

<tr>
<td width="15" height="13"></td>
<td width="313"></td>
<td width="18"></td>
</tr>
<tr>
<td height="595"></td>
<td valign="top">About myself 
Since childhood I have been aware of “the other side”, I can remember as far back as 4 years old being led by my “friend” to come and see the trees blossom I have learned to use the energy flow to create a positive atmosphere to accomplish the desired outcomes. 
My expertise include the martial arts, feng shui, herbology and healing with an added 20 plus years on the police force. 
It is my goal to offer healing pathways to the seeker. Not “my” way but “THE WAY”. 
These healing pathways include but are not limited to: 
• Working with your mind and changing destructive thinking patterns, learning the art of positive thinking. 
• Personal energy and the clearing of ones own energy field (the aura) this includes ones own personal space and how to improve the quality of ones energy field and what kinds of things you draw to yourself. 
• The clearing of personal space and ones environment from negative energies, habits and patterns. 
• Paranormal occurrences that may be happening in your life or the life of someone you know.  
</td>
<td></td>
</tr>
<tr>
<td height="14"></td>
<td></td>
<td></td>
</tr>

PixelPusher · 03-12-2010, 03:52 PM

I think part of your issue is going to be that you are using tables to layout your site. Also I would refrain from javascript to execute a simple image rollover on a button. This can be done much easier (and cleaner) with CSS.

Mini · 03-12-2010, 04:08 PM

Alright then, I'll give CSS a try.

PixelPusher · 03-12-2010, 04:21 PM

FYI,

when using images for buttons you want to add the image as a background element, and not wrap an image tag with an anchor tag. This way you can have anchor text in the link (that can be hidden with CSS) which will improve the indexing of your site.

If you don't and a user turns of images for your website, then all your navigation is gone! By having anchor text this provides an alternate source of information, and it is just good web dev practice

Mini · 03-12-2010, 04:29 PM

Hey, Thanks! I forgot about people turning images off.

PixelPusher · 03-12-2010, 04:36 PM

No prob, your welcome.

03-10-2010, 03:52 PM	#1
Mini New Member Join Date: Feb 2010 Posts: 8	Dreamweaver 8 Button Alignment Question This question is regarding a website I’ve built in Dreamweaver 8. The problem I’m having has to do with the misalignment of my buttons when viewed on a lap top in firefox or internet explorer. The website looks fine in Safari and the buttons stick to the top like their supposed to but when I view it in the other browsers, the buttons seem to try to center them selves with the rest of the layout and therefore become misaligned and spread out. This problem began occurring when I inserted a larger amount of text into the table next to the buttons therefore making the page longer than it was before. The buttons are imported image graphics from Firefox. I can tell from looking at the code that spacers were added into the dreamweaver code, when I deleted them the layout moved to the top, but I wasn’t able to find enough of them to align all the buttons so this idea didn’t work and the buttons were still misaligned. My goal is to find a way to adjust the layout so that the buttons and graphics stick to the top and do not spread out. If any one has any ideas on how to do this I would greatly appreciate some advice.

03-11-2010, 02:24 AM	#2
mezangath Silver Member Join Date: Mar 2009 Location: Stockholm, Sweden Posts: 108	Post some code. __________________ Nerdrage Mezangath Web

03-11-2010, 03:05 PM	#3
Mini New Member Join Date: Feb 2010 Posts: 8	Here is the code for one of the buttons and the table: Button: <tr> <td height="42"><a href="index1.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('TheLightedWaySpaceClear ingsPageCut_r3_c1','','images/TheLightedWaySpaceClearingsPageCut_r3_c1_f2.jpg',1 );"><img name="TheLightedWaySpaceClearingsPageCut_r3_c1" src="images/TheLightedWaySpaceClearingsPageCut_r3_c1.jpg" width="192" height="42" border="0" id="TheLightedWaySpaceClearingsPageCut_r3_c1" alt="" /></a></td> <td><img src="images/spacer.gif" width="1" height="42" border="0" alt="" /></td> </tr> Table: <tr> <td width="15" height="13"></td> <td width="313"></td> <td width="18"></td> </tr> <tr> <td height="595"></td> <td valign="top"><p class="style5">About myself </p> <p>Since childhood I have been aware of “the other side”, I can remember as far back as 4 years old being led by my “friend” to come and see the trees blossom I have learned to use the energy flow to create a positive atmosphere to accomplish the desired outcomes. </p> <p>My expertise include the martial arts, feng shui, herbology and healing with an added 20 plus years on the police force. </p> <p>It is my goal to offer healing pathways to the seeker. Not “my” way but “THE WAY”. </p> <p>These healing pathways include but are not limited to: </p> <p>• Working with your mind and changing destructive thinking patterns, learning the art of positive thinking. </p> <p>• Personal energy and the clearing of ones own energy field (the aura) this includes ones own personal space and how to improve the quality of ones energy field and what kinds of things you draw to yourself. </p> <p>• The clearing of personal space and ones environment from negative energies, habits and patterns. </p> <p>• Paranormal occurrences that may be happening in your life or the life of someone you know. </p> <p class="style14"> </p> </td> <td></td> </tr> <tr> <td height="14"></td> <td></td> <td></td> </tr>

03-12-2010, 03:52 PM	#4
PixelPusher Super Moderator Join Date: Oct 2008 Location: Arizona, USA Posts: 1,050	I think part of your issue is going to be that you are using tables to layout your site. Also I would refrain from javascript to execute a simple image rollover on a button. This can be done much easier (and cleaner) with CSS. __________________ John Darling Graphic / Web Designer SmarterTools Inc. (877) 357-6278 www.smartertools.com Last edited by PixelPusher; 03-12-2010 at 04:15 PM. Reason: spelling

03-12-2010, 04:21 PM	#6
PixelPusher Super Moderator Join Date: Oct 2008 Location: Arizona, USA Posts: 1,050	FYI, when using images for buttons you want to add the image as a background element, and not wrap an image tag with an anchor tag. This way you can have anchor text in the link (that can be hidden with CSS) which will improve the indexing of your site. If you don't and a user turns of images for your website, then all your navigation is gone! By having anchor text this provides an alternate source of information, and it is just good web dev practice __________________ John Darling Graphic / Web Designer SmarterTools Inc. (877) 357-6278 www.smartertools.com

03-12-2010, 04:08 PM	#5
Mini New Member Join Date: Feb 2010 Posts: 8	Alright then, I'll give CSS a try.

03-12-2010, 04:29 PM	#7
Mini New Member Join Date: Feb 2010 Posts: 8	Hey, Thanks! I forgot about people turning images off.

03-12-2010, 04:36 PM	#8
PixelPusher Super Moderator Join Date: Oct 2008 Location: Arizona, USA Posts: 1,050	No prob, your welcome. __________________ John Darling Graphic / Web Designer SmarterTools Inc. (877) 357-6278 www.smartertools.com

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode