HELP! Alignment issues

I need someone to look at my website, http://www.drhfinegifts.com, and see if they know how to fix this issue.

I am trying to move the tabs at the top (Special Deals, My Cart, etc) over to the left some so there isn't a huge white space above it.

The site was originally designed with a 468x60 banner header, but it left a lot of white space to the right. I recently had a DPer make a new banner header, but I want it to be 100% width of screen.

This is causing an alignment issue with the rest of the site.

If anyone can help me, I would GREATLY appreciate it!

 

I guess your problem is coming from :

<td width="100%" align="left" valign="bottom"></td>  

<td rowspan="3" valign="bottom"><a href="http://www.drhfinegifts.com/specials.php"><img src="templates/modern/images/sale_button.jpg" border="0" alt="Perfumes & Colognes on Sale" title=" Perfumes & Colognes on Sale " width="105" height="42"></a></td>

Code (markup):

See that first one - decrease the 100% and see if they move

 

Thanks for the effort, but that didn't fix it. I reduced it to 80% and also removed the width all together, and it didn't change.

 

OK give me a minute and I'll see what it is

EDIT : I have downloaded the page ...

<TD vAlign=bottom align=left width="100%" ></TD>
    <TD vAlign=bottom rowSpan=3><A 
      href="http://www.drhfinegifts.com/specials.php"><IMG 
      title=" Perfumes &amp; Colognes on Sale " height=42 
      alt="Perfumes &amp; Colognes on Sale" src="1_files/sale_button.jpg" 
      width=105 border=0></A></TD>
    <TD vAlign=bottom rowSpan=3><A 
      href="http://www.drhfinegifts.com/shopping_cart.php"><IMG 
      title=" Cart Contents " height=42 alt="Cart Contents" 
      src="1_files/header_button_mycart.gif" width=105 border=0></A></TD>
    <TD vAlign=bottom rowSpan=3><A 
      href="http://www.drhfinegifts.com/account.php"><IMG title=" My Account " 
      height=42 alt="My Account" src="1_files/header_button_myaccount.gif" 
      width=105 border=0></A></TD>
    <TD vAlign=bottom rowSpan=3><A 
      href="http://www.drhfinegifts.com/checkout_shipping.php"><IMG 
      title=" Checkout " height=42 alt=Checkout 
      src="1_files/header_button_checkout.gif" width=105 border=0></A></TD>
    <TD width=10><IMG height=1 alt="" src="1_files/spacer.gif" width=10 
      border=0></TD>

Code (markup):

If you make the first one some other percentage and assign some width value to the

<TD vAlign=bottom rowSpan=3>

Code (markup):

It works

I also did this :

<tr>
    <td width="100%" align="left" valign="bottom" colspan="6"><a href=http://www.drhfinegifts.com><img src="images/drhfinegifts.jpg" border="0" alt="Discount Perfume, Discount Cologne, &amp; Designer Fragrances - Shop online for authentic brand name designer discount perfumes &amp discount colognes." title=" Discount Perfume, Discount Cologne, &amp; Designer Fragrances - Shop online for authentic brand name designer discount perfumes &amp discount colognes. " ></a></TD> 
  
</tr>

Code (markup):

 

Well, you should separate the table that holds the banner from the rest of layout so that the cells below the banner aren't restricted by the width of the banner, thus allowing the buttons to flow underneath the banner when the width of the page becomes smaller. There's also some stray "tr" tags in the mix that could cause problems in some browsers.

Replace:

<table border="0" width="100%" cellspacing="0" cellpadding="0">
  <tr>
    <td width="100%" align="left" valign="bottom"><a href=http://www.drhfinegifts.com><img src="images/drhfinegifts.jpg" border="0" alt="Discount Perfume, Discount Cologne, &amp; Designer Fragrances - Shop online for authentic brand name designer discount perfumes &amp discount colognes." title=" Discount Perfume, Discount Cologne, &amp; Designer Fragrances - Shop online for authentic brand name designer discount perfumes &amp discount colognes. " ></a></TD> 
  
</tr>

<tr></tr>

                     
</tr>

Code (markup):

With:

<table border="0" width="100%" cellspacing="0" cellpadding="0">
  <tr>
    <td width="100%" align="left" valign="bottom"><a href=http://www.drhfinegifts.com><img src="http://www.drhfinegifts.com/images/drhfinegifts.jpg" border="0" alt="Discount Perfume, Discount Cologne, &amp; Designer Fragrances - Shop online for authentic brand name designer discount perfumes &amp discount colognes." title=" Discount Perfume, Discount Cologne, &amp; Designer Fragrances - Shop online for authentic brand name designer discount perfumes &amp discount colognes. " ></a></TD> 
  
</tr>

</table>
<table border="0" width="100%" cellspacing="0" cellpadding="0">

Code (markup):

That will allow the width of the content below the banner to flow separately from the banner, with the banner remaining 100% across the top. The buttons will therefore move underneath the banner when the width calls for it.

 

I was to suggest a code rewrite but was too busy/lazy I guess : good job InnovativeWebNola

 

Excellent InnovativeWebNola! That did the trick. I also made the banner 100% width as well so now it is 100% accross on different screen res.

 

Not a problem, glad to have helped.

 

hey guys....

i´m having kinda of the same problem that drhfinegifts told here with "widhts" in my website, specially when it´s opened in firefox....i dunno if it´s because of the "divs" or some "tds" that i used but in the IE it looks fine...ok, not that fine, but better than in firefox.

i have tried everything, clear all widths, fixed width and nothing works. I´ve heard that mozilla has problems with divs but dont know exactly waht is wrong.

if someone could take a fast look at my site (www.homeinrio.com) and tell me what´s the cause of this width mistake....

Thanks in advance