Site Alignment Problem

Kagex · August 19, 2006

I have got a problem here, and I'm not sure whether its a CSS problem or a possible padding problem. If you open my site www.greatdeals.com.sg in IE, it works fine but the alignment of the site goes everywhere when opened in firefox. I appreciate it if anyone could spot any issue in my CSS file.

CSS File:

@charset "iso-8859-1";
/* CSS Document */
/*common tools*/
* {margin: 0px; padding: 0px; color:#474747;}
A {
 color: #3B3639;
 text-decoration: none;
}

A:hover {
 color: #3B3639;
 text-decoration: underline;
}
body{text-align: center;font:68% Arial, Helvetica, sans-serif;color:#474747; background-color:#ffffff;}
.fixcenter {width: 758px; background: #ffffff; color: #000000; margin: auto; margin-top: 20px; text-align: left;}
/* Header*/
*.topmenu{display:block; height:17px; width:228px; padding-top:4px; text-decoration:none; text-align:left; font:110% Tahoma,Arial, Helvetica, sans-serif; color:#FFBFBF;}
*.topmenu:hover{display:block; height:17px; width:101px; padding-top:4px;text-decoration:underline; text-align:left; font:110% Tahoma,Arial, Helvetica, sans-serif; color:#FFE400;}
#topmenu{float:left;width:240px;}
#currencies{ float:left; width:105px; padding-left:25px; border-left:1px solid #DCDCDC; height:47px; }
#topmenu ul{list-style-image:url(images/str.gif); margin-left:30px; margin-top:2px; margin-right:0px;}
*.column{float:left; width:115x;}
a.atopmenu{font-family:Tahoma Arial, Helvetica, sans-serif;color:#1970AD; text-decoration:none;}
a.atopmenu:hover{font:Tahoma Arial, Helvetica, sans-serif;color:#1970AD; text-decoration:underline;}
#shopping_cart{color:#E6173D; width:162px; height:71px; padding-left:60px; padding-top:18px; background:url(images/shopping_cart_bg.jpg) no-repeat;}
#shopping_cart img{}
a.menu{float:left;background:url(images/menu_bg.gif) no-repeat;display:block; width:102px; height:24px;  padding-top:16px; padding-left:0px;color:#5F5F5F; font:bold 100% Tahoma, Helvetica, sans-serif; text-decoration:none;}
a.menu:hover{float:left;background:url(images/menu_bg.gif) no-repeat;display:block; width:102px; height:24px;  padding-top:16px; padding-left:0px;color:#C20000; font:bold 100% Tahoma, Helvetica, sans-serif; text-decoration:none;}
/* end Header*/

/*BoxHeader*/
td.box{width:107px; height:18px; background-color:#4E535A; background-image:url('images/box_bg.gif');}
*.innerbox, *.innerboxMenu, *.innerbox_cat{background:url(images/box_header.jpg) no-repeat; width:148px; height:19px; padding-right:10px; padding-top:20px; text-align:right; color:#B9FB6D; font:bold 100% Tahoma, Arial,Helvetica, sans-serif; text-transform:uppercase; }
*.innerbox_cat{ border:1px solid #F0E8CF; color:#FFFFFF; margin:0px; padding-top:4px;}
*.innerboxMenu{text-align:center;}
*.innerboxMenu a{font:bold 100% Tahoma, Arial, Helvetica, sans-serif; color:#FFFFFF; text-decoration:none;}
*.innerboxMenu a:hover{font:bold 100% Tahoma, Arial, Helvetica, sans-serif; color:#F9BD00; text-decoration:none;}
*.innerbox img{margin:0px 5px;}

/*end BoxHeader*/

/*body*/
*.crimson{color:#E80377; font-weight:bold; text-decoration:none;}
*.crimson:hover{color:#E80377; font-weight:bold; text-decoration:underline;}
a.more{font-weight:bold; font-size:100%; text-decoration:none; color:#FFFFFF;}
a.more:hover{font-weight:bold; font-size:100%; text-decoration:underline;color:#FFFFFF;}
/*end body*/

/*Left column*/
table.search{background:#C6B682 url('images/search_bg.gif') repeat-x bottom;width:100%;}
*.product_cat{border:1px solid #C2C2C2; border-top-width:0px; width:177px;}
table.innersearch,table.innerproduct_cat{width:100%; font:11px Tahoma, Arial, Helvetica, sans-serif;}
table.innerproduct_cat{width:100%; font:11px Tahoma, Arial, Helvetica, sans-serif;width:177px; }
a.red{color:#CB0000; text-decoration:none; font:11px Tahoma, Arial, Helvetica, sans-serif; }
a.red:hover{color:#CB0000; text-decoration:none;font:11px Tahoma, Arial, Helvetica, sans-serif; }
*.product_cat span{color:#CB0000;}
table.innersearch tr td{background:url(images/box_bg.gif) repeat-y; text-align:center;}
table.innersearch a{font:100% Tahoma, Arial, Helvetica, sans-serif;color:#3B3639; text-decoration:none;}
table.innersearch a:hover{font:100% Tahoma, Arial, Helvetica, sans-serif;color:#3B3639; text-decoration:underline;}
table.product_cat{}

*.m11{FONT-SIZE: 11px; COLOR: #686868; TEXT-DECORATION: none}
*.m11:hover{FONT-SIZE: 11px; COLOR: #B80000;TEXT-DECORATION: underline;}
*.h11{FONT-SIZE: 11px; COLOR: #686868; font-weight:bold; TEXT-DECORATION: none}
*.h11:hover{FONT-SIZE: 11px; COLOR: #686868;font-weight:bold; TEXT-DECORATION: underline;}
*.green{ color:#A6EE53; padding-right:5px;}
/*end Left column*/



#bot_menu{margin:0px 5px;height:19px; border:1px solid #6B6F75; border-width:1px 0px; padding-top:4px; text-align:center; font:bold 71% Tahoma, Verdana, Arial, Helvetica, sans-serif; color:#6B6F75;}
#bot_menu a{text-decoration:none;font:bold 100% Tahoma, Verdana, Arial, Helvetica, sans-serif; color:#6B6F75;}
#bot_menu a:hover{text-decoration:underline;font:bold 100% Tahoma, Verdana, Arial, Helvetica, sans-serif; color:#6B6F75;}
#copy{padding-top:3px; padding-bottom:5px; padding-left:200px;font:100% Tahoma, Verdana, Arial, Helvetica, sans-serif; text-align:left; color:#686868;}
*.new_prod{width:115px; height:200px; text-align:center;}
*.new_prod p{padding-left:10px; color:#5C4F27;}
*.new_prod p span{color:#5C4F27;}
*.image{width:107px; height:87px; border:1px solid #BFBFBF;   }
*.image img{margin:2px;}
*.special_price{text-decoration:line-through;color:#E80377; font-weight:bold;}
*.price{text-decoration:none;color:#C70000; font-size:13px; font-weight:bold;}
a.bottom{color:#626262; font-weight:bold; text-transform:uppercase; text-decoration:none;}
a.bottom:hover{color:#626262; font-weight:bold; text-transform:uppercase; text-decoration:underline;}
*.buy{width:112px; border-left:3px solid #FFFFFF;  background-color:#E7E7E7;padding:3px 0px 3px 2px;font:11px Tahoma, Arial, Helvetica, sans-serif; color:#CB0000; text-align:center;}
*.gray{color:#5F5F5F; font-weight:bold;}
*.buy *.lil{color:#E80377; font-weight:bold; background-color:#F1F1F1;}
*.buy a.more{font-size:11px;}
*.buy a.more:hover{font-size:11px; text-decoration:none;}
/**.buy b{color:#CB0000}*/
*.txt{text-align:left;font:70% Arial, Helvetica, sans-serif;margin-right:10px; color:#4F525A;  }
*.txt a{font:100% Arial, Helvetica, sans-serif; color:#BD0302;}
#menu img{margin-left:1px;}
#producer{text-align:center;font:70% Arial, Helvetica, sans-serif;margin-right:10px; color:#D9D9D9; }
#producer img{margin-right:5px;margin-left:5px;}
*.productName{color:#42464E; text-transform:uppercase; font-size:130%; font-weight:bold; text-align:left;}
*.infoBoxHeading{font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#1970AD;}
td.main{padding-left:3px;font-family: Tahoma, Verdana, Arial, sans-serif;
 font-size: 10px;
 }
TD.pageHeading, DIV.pageHeading {
 padding-left:3px;
 font-family: Arial, sans-serif;
 font-size: 14px;
 font-weight: bold;
 color: #474747;
 text-align:left;

}
TD.smallText, SPAN.smallText, P.smallText {

 font-family: Tahoma, Arial, sans-serif;
 font-size: 11px;
}

TABLE.productListing {
 border: 1px;
 border-style: solid;
 border-color: #9FA0A6;
 border-spacing: 1px;
 border-bottom-width:0px;
 width:100%;
}

.productListing-heading {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
 color: #44464B;
 font-weight: bold;
 padding:0px 2px;
 height:16px; background-color:#F2F2F2;
 border-bottom: 1px solid #9FA0A6;
}
.productListing-heading a{color:#44464B; text-decoration:none; line-height:245%;border:0px;}
.productListing-heading a:hover{color:#44464B; text-decoration:underline;}
TD.productListing-data {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
 padding:3px 0px;

}

a.productListing-link{
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
 text-decoration:underline;
 color:#4F525A;
}
CHECKBOX, INPUT, RADIO, SELECT {
 font-family: Verdana, Arial, sans-serif;
 font-size: 11px;
}
.boxText { font-family: Verdana, Arial, sans-serif; font-size: 10px; color:#4F525A; }

TD.fieldKey {
 font-family: Verdana, Arial, sans-serif;
 font-size: 12px;
 font-weight: bold;
}

TD.fieldValue {
 font-family: Verdana, Arial, sans-serif;
 font-size: 12px;
}
*.infoBoxContents{ color: #4F525A;}
SPAN.productSpecialPrice {
 font-family: Verdana, Arial, sans-serif;
 color: #ff0000;
}
TD.main, P.main {
 font-family: Tahoma, Verdana, Arial, sans-serif;
 font-size: 10px;
 line-height: 1.3;
}
SPAN.errorText {
 font-family: Verdana, Arial, sans-serif;
 color: #ff0000;
}
.messageStackError, .messageStackWarning { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-color: #CCCFD2; }
.messageStackSuccess { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-color: #B2F5FF; }
.inputRequirement { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #ff0000; }

.infoBox {

 border:1px solid #BFBFBF;
 padding:3px;
}
.errorBox { font-family : Verdana, Arial, sans-serif; font-size : 10px; background: #ffb3b5; font-weight: bold; }
.stockWarning { font-family : Verdana, Arial, sans-serif; font-size : 10px; color: #E80377; }
.productsNotifications { background: #f2fff7; }
.checkoutBarFrom, .checkoutBarTo { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #8c8c8c; }
.checkoutBarCurrent { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #FF0000; }
.productsNotifications { background: #FAE1ED; }

Here's the html from my site:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>GreatDeals Singapore - Singapore Favorite Online Store!</title>

</head>

<tr>

<tr>

<tr>

<tr>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

<tr>

<tr>

<ul>

<li><a href="http://www.greatdeals.com.sg/about_us.php" class="atopmenu">About Us</a></li>

<li><a href="http://www.greatdeals.com.sg/specials.php" class="atopmenu">Specials</a></li>

<li><a href="http://www.greatdeals.com.sg/advanced_search.php" class="atopmenu">Advanced Search</a></li>

</ul>

</div>

<ul>

<li><a href="http://www.greatdeals.com.sg/create_account.php" class="atopmenu">Create an account</a></li>

<li><a href="http://www.greatdeals.com.sg/login.php" class="atopmenu">Customer login</a></li>

<li><a href="http://www.greatdeals.com.sg/contact_us.php" class="atopmenu">Contacts</a></li>

</ul>

</div></div>

<div id="currencies"><p style="padding-bottom:3px;color:#1970AD;">Currencies: </p>

<tr>

<tr>

<td align="left" class="boxText"><form name="currencies" action="http://www.greatdeals.com.sg/index.php" method="get"><select name="currency" onChange="this.form.submit();" style="width: 100px"><option value="USD">US Dollar</option><option value="SGD" SELECTED>SG Dollar</option></select></form></td>

</tr>

</table>

</td>

</tr>

</table>

</div>

</td>

<td width="134" align="left" valign="middle" height="51" background="images/shopping_bg.gif"><img src="images/shopping_cart_im.gif" width="37" height="37" alt="" align="left" style=" margin:2px 3px 2px 4px;; "><b>Shopping cart</b><br/>now in your cart <br/> 0 items<br/></td>

</tr>

<tr>

<tr>

<td><a class="menu" href="http://www.greatdeals.com.sg/products_new.php">New products</a></td>

<td><a class="menu" href="http://www.greatdeals.com.sg/account.php">My account</a></td>

<td><a class="menu" href="http://www.greatdeals.com.sg/shopping_cart.php">Shopping cart</a></td>

<td><a class="menu" style="width:106px; background-image:url(images/checkout_bg.gif)" href="http://www.greatdeals.com.sg/checkout_shipping.php">Checkout</a></td>

</tr>

</table>

</td>

</tr>

<tr>

<tr>

<td>

<tr>

<td width="100%" height="18" class="infoBoxHeading"><div ><span style="color:#1970AD; font-weight:bold;">Manufacturers</span></div></td>

</tr>

</table>

<tr>

<tr>

<td class="boxText"><form name="manufacturers" action="http://www.greatdeals.com.sg/index.php" method="get"><select name="manufacturers_id" onChange="this.form.submit();" size="1" style="width: 87%"><option value="" SELECTED>Please Select</option><option value="35">Acer</option><option value="36">Inno3D</option></select></form></td>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

<tr>

<td>

<tr>

<td width="100%" height="18" class="infoBoxHeading"><div ><div style="color:#1970AD; font-weight:bold; margin-top:15px;">Search by keyword:</div></div></td>

</tr>

</table>

<tr>

<tr>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr> </table>

</td>

</tr>

</table>

</td>

</tr>

<tr>

</tr>

</table>

</td>

</tr>

<tr>

<tr>

<tr>

<tr>

<td width="100%" height="18" class="infoBoxHeading"><div ><div style="color:#FFFFFF; background:url(images/categories_bg.gif) no-repeat; font-weight:bold; height:20px; padding-top:4px; padding-left:10px; font-size:100%; font-family:Arial;">Browse categories</div></div></td>

</tr>

</table>

<tr>

<tr>

<tr>

<td class="boxText"><tr><TD valign="middle" height="28" align="left" style="padding-left:15px;color: #A64700; border-top:1px solid #FFF;"><a class="h11" href="http://www.greatdeals.com.sg/index.php?cPath=105"><b>Graphic Deals</b></a></td></tr>

<tr><TD valign="middle" height="16" align="left" style="padding-left:15px;border-top:1px solid #FFF; background-color:#F2F2F2"><span style='font-size:1px;'>????</span><a class="m11" href="http://www.greatdeals.com.sg/index.php?cPath=105_109">PCI Express</a></td></tr>

<tr><TD valign="middle" height="28" align="left" style="padding-left:15px;color: #A64700; border-top:1px solid #FFF;"><a class="h11" href="http://www.greatdeals.com.sg/index.php?cPath=103"><b>Tech Deals</b></a></td></tr>

<tr><TD valign="middle" height="16" align="left" style="padding-left:15px;border-top:1px solid #FFF; background-color:#F2F2F2"><span style='font-size:1px;'>????</span><a class="m11" href="http://www.greatdeals.com.sg/index.php?cPath=103_104">Handhelds</a></td></tr>

<tr><TD valign="middle" height="16" align="left" style="padding-left:15px;border-top:1px solid #FFF; background-color:#F2F2F2"><span style='font-size:1px;'>????</span><a class="m11" href="http://www.greatdeals.com.sg/index.php?cPath=103_110">Notebooks</a></td></tr>

<tr><TD valign="middle" height="16" align="left" style="padding-left:15px;border-top:1px solid #FFF; background-color:#F2F2F2"><span style='font-size:1px;'>????</span><a class="m11" href="http://www.greatdeals.com.sg/index.php?cPath=103_107">Projectors</a></td></tr>

</td>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

<tr>

</tr></table>

</td>

<tr>

<tr>

<tr>

<td>

<tr>

<tr>

<td width="100%" style="background-image:url(images/header_bg.gif); color:#FFF; font-weight:bold; padding-left:5px;" align="left">New Products</td>

</tr>

</table></td>

</tr>

</table>

<tr>

<tr>

<tr>

<td colspan="2" class="productName">Acer PD523PD DLP Projector</td>

</tr>

<tr>

</tr>

<tr>

<td height="65" align="left"><P><FONT size=2>There?s a new way to go for projectors. That?s...</td>

</tr>

<tr>

</tr>

<tr>

<td height="32" style="font-size:11px; font-weight:bold;">Price:<span style="color:#C70000; font-size:14px; font-weight:bold;"> S$2,789.00</span></td>

</tr>

<tr>

<tr>

</tr>

</table></form>

</td>

</tr>

</table></td>

<tr>

</tr>

</table></td>

<tr>

<td colspan="2" class="productName">Acer PD120D DLP Projector</td>

</tr>

<tr>

</tr>

<tr>

<td height="65" align="left"><P><FONT size=2>Priced to meet your budget, the Acer PD120D di...</td>

</tr>

<tr>

</tr>

<tr>

<td height="32" style="font-size:11px; font-weight:bold;">Price:<span style="color:#C70000; font-size:14px; font-weight:bold;"> S$1,789.00</span></td>

</tr>

<tr>

&nbs

Kagex · August 20, 2006

Is there a CSS compatibility issue with firefox that i don't know about? I did a quick search on google and there are tonnes of problems reported about firefox and IE's CSS differences.

tkeats · August 20, 2006

Is there a CSS compatibility issue with firefox that i don't know about? I did a quick search on google and there are tonnes of problems reported about firefox and IE's CSS differences.

The site seems to be fine with my firefox 1.5.x (I just upgraded the other day to the last release).

The ONLY issue I see is the 'spacing' or 'positioning' of the HOME/New Products/My Account tabs, add a space or two and you should be good to go.

I've gone through about half a dozen links on your site and everything seems well.

Now if I could get a sweet template like that I'd be laughin ;)

Thomas Keats

:P

P.S. Maybe try restarting your computer or just restarting firefox (specially if you've run the upgrade...)

Kagex · August 20, 2006

The site seems to be fine with my firefox 1.5.x (I just upgraded the other day to the last release).

The ONLY issue I see is the 'spacing' or 'positioning' of the HOME/New Products/My Account tabs, add a space or two and you should be good to go.

I've gone through about half a dozen links on your site and everything seems well.

Now if I could get a sweet template like that I'd be laughin ;)

Thomas Keats

:P

P.S. Maybe try restarting your computer or just restarting firefox (specially if you've run the upgrade...)

Hi tkeats, thanks for the reply, yap, I'm using firefox 1.5.0.6 which is the latest. I managed to center the tabs and the sponsor images below, but the alignment is still bugging me. I've got advice that i should not use div or colspan, but gosh i have no idea how to get around it.... >_<

tkeats · August 20, 2006

Hi tkeats, thanks for the reply, yap, I'm using firefox 1.5.0.6 which is the latest. I managed to center the tabs and the sponsor images below, but the alignment is still bugging me. I've got advice that i should not use div or colspan, but gosh i have no idea how to get around it.... >_<

I think I just figured out what might be bothering you in the alignment...

Are you talking the fact that your 'logo' graphic and the 'home' tab load seemlessly, then split apart? You've most likely got cell padding spacing or somesuch in the wrong spot.

...

Thomas

Site Alignment Problem

Recommended Posts

Kagex

Link to comment

Share on other sites

Kagex

Link to comment

Share on other sites

tkeats

Link to comment

Share on other sites

Kagex

Link to comment

Share on other sites

tkeats

Link to comment

Share on other sites

Archived

Browse

Activity