Forum Moderators: not2easy

Message Too Old, No Replies

Internet Explorer CSS problem

         

brnm98105

1:49 am on Dec 20, 2008 (gmt 0)

10+ Year Member



Hi all. I have a problem Ive been trying tosolve and cant seem to fix.

I have a 3 column layout. Left side Nav / content Middle / Right side address and a few links.

Onth left side I inserted 2 rows for the purpose of having the middle sections read first by googlebot and others. It all works fine except in IE 6 and 7. In IE the second row of the left column drops depending on the amount of data in the middle column. Here is the code . hopefully I don't supply too much I will xx out andything I see so it doesnt get indexed. Hopefully this makes sense.

<body>
<div align="center">
<table width="100%" height="1031" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top"><div align="center">
<table width="1024" height="1037" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr bgcolor="#AAA976">
<td height="158" colspan="5" valign="middle" bgcolor="#3C1C00"><div align="center"><!-- TemplateBeginEditable name="EditRegion6" --><span class="smalltext2"></span><!-- TemplateEndEditable --><br />
<img src="../images/main/logo6.gif" alt="#*$!#*$!" width="1024" height="158" /><br />
</div></td>
</tr>
<tr>
<td height="15" colspan="5" valign="bottom" bgcolor="#AAA976"><div align="center">
<table width="1024" height="25" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="189" bgcolor="#AAA976"><div align="center"><a href="../index.htm"><strong>Home</strong></a></div></td>
<td width="201" bgcolor="#AAA976"><div align="center"><a href="../about.htm"><strong>About Us</strong></a></div></td>
<td width="242" bgcolor="#AAA976"><div align="center"><a href="../contact.htm"><strong>Contact Us</strong></a></div></td>
<td width="208" bgcolor="#AAA976"><div align="center"><a href="../resource.htm"><strong>Resources</strong></a></div></td>
<td width="184" bgcolor="#AAA976"><div align="center"><strong><a href="http://#*$!#*$!.com/blog/">Blog</a></strong></div></td>
</tr>
</table>
</div></td>
</tr>
<tr>
<td height="42" bgcolor="#FFFFFF"><div align="center">
<p><strong>Not all products are available<br />
to purchase online.<br />
To see all products that are...</strong></p>
</div></td>
<td width="13" rowspan="3" valign="top" bgcolor="#AAA976">&nbsp;</td>
<td width="21" rowspan="2" align="left" valign="top"><div align="center"><img src="../images/main/tl.gif" alt="corner" width="21" height="21" /></div></td>
<td width="590" rowspan="2" valign="top"><div align="center"><!-- TemplateBeginEditable name="EditRegion3" -->
<table width="598" height="446" border="0" cellpadding="0" cellspacing="10" class="white">
<tr>
<td height="114" colspan="3" valign="top"><div align="center">
<h1 class="lineCopy6"><strong>#*$!#*$!</strong></h1>
<em><strong>Main Content!</strong></em></div></td>
</tr>
<tr>
<td width="186" class="lineCopy"><div align="center"><br />
<strong>Natura - #*$!#*$!</strong></div></td>
<td width="186" class="lineCopy"><div align="center"><br />
<strong>#*$!#*$!</strong></div></td>
<td width="186" class="lineCopy"><div align="center"><br />
<strong>#*$!#*$!e</strong></div></td>
</tr>
<tr>
<td class="lineCopy"><div align="center"><br />
<strong>#*$!#*$!</strong></div></td>
<td class="lineCopy"><div align="center"><br />
<strong>T#*$!#*$! (now in stock)</strong></div></td>
<td width="186" class="lineCopy"><div align="center"><br />
<strong>Futons</strong></div></td>
</tr>
<tr>
<td height="124" colspan="3" valign="top"><div align="center">
<h2><em>At <strong>#*$!#*$!.</strong></p>
</div></td>
</tr>
</table>
<p>&nbsp;</p>
<!-- TemplateEndEditable --></div></td>
<td width="217" rowspan="3" valign="top"><div align="center">
<p><img src="../images/main/call.gif" alt="call" width="193" height="60" class="lineCopy" /></p>
<p><strong>Visit our #*$!#*$! Showroom<br />
<br />
#*$!#*$!<br />
#*$!#*$!</strong><br />
<span class="smalltext"><strong>2 blocks west of I-5</strong></span></p>
<p><strong>Open Daily Pacific Time<br />
Mon-Fri 9am-8pm<br />
Sat 9am-6pm<br />
Sun 11am-5pm</strong></p>
<table width="150" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="202" valign="top" bgcolor="#AAA976" class="lineCopy"><div align="center">
<p><span class="blink"><strong>Shop Online</strong></span><strong><br />
(coming soon)</strong><a href="../images/products/#*$!#*$!.htm"><strong><br />
<br />
</strong></a><strong>#*$!#*$! <a href="../images/products/toppers/toppers.htm">#*$!#*$!</a><br />
and <a href="../images/products/#*$!#*$!.htm">#*$!#*$!</a></strong></p>
<p><img src="../images/main/#*$!#*$!.gif" alt="#*$!#*$!" width="100" height="198" border="0" /></p>
</div></td>
</tr>
</table>
</div>
<div align="center"></div></td>
</tr>
<tr>
<td width="184" rowspan="2" valign="top"><div align="center">
<table width="184" border="0" cellpadding="0" cellspacing="10">
<tr>
<td bgcolor="#AAA976" class="lineCopyblink"><div align="center"><strong>Coming Soon Online Store </strong></div></td>
</tr>
<tr>
<td bgcolor="#AAA976" class="lineCopy6"><div align="center"><strong>Products</strong></div></td>
</tr>
<tr>
<td bgcolor="#AAA976" class="lineCopy"><div align="center"><strong><a href="../images/products/#*$!#*$!.htm">#*$!#*$!</a></strong></div></td>
</tr>
<tr>
<td bgcolor="#AAA976" class="lineCopy"><div align="center"><strong><a href="../images/products/#*$!#*$!.htm">#*$!#*$!</a></strong></div></td>
</tr>
<tr>
<td bgcolor="#AAA976" class="lineCopy"><div align="center"><a href="../images/products/#*$!#*$!.htm"><strong>#*$!#*$!</strong></a></div></td>
</tr>
<tr>
<td bgcolor="#AAA976" class="lineCopy"><div align="center"><a href="../images/products/#*$!#*$!.htm"><strong>#*$!#*$!</strong></a></div></td>
</tr>
<tr>
<td bgcolor="#AAA976" class="lineCopy"><div align="center"><a href="../images/products/#*$!#*$!.htm"><strong>#*$!#*$!</strong></a></div></td>
</tr>

<tr>
<td bgcolor="#AAA976" class="lineCopy"><div align="center"><strong><a href="../images/products/#*$!#*$!.htm"> #*$!#*$!</a></strong></div></td>
</tr>
<tr>
<td bgcolor="#AAA976" class="lineCopy"><div align="center"><strong><a href="../images/products/#*$!#*$!.htm">#*$!#*$!g</a></strong></div></td>
</tr>

<tr>
<td bgcolor="#AAA976" class="lineCopy"><div align="center"><a href="../images/products/#*$!#*$!.htm"><strong>B#*$!#*$!</strong></a></div></td>
</tr>
<tr>
<td bgcolor="#AAA976" class="lineCopy"><div align="center"><a href="../images/products/#*$!#*$!.htm"><strong>Daybeds &amp; #*$!#*$!s</strong></a></div></td>
</tr>

<tr>
<td bgcolor="#AAA976" class="lineCopy"><div align="center"><a href="../images/products/#*$!#*$!.htm"><strong>#*$!#*$!</strong></a></div></td>
</tr>
<tr>
<td bgcolor="#AAA976" class="lineCopy"><div align="center"><a href="../images/products/#*$!#*$!.htm"><strong>#*$!#*$!</strong></a></div></td>
</tr>
<tr>
<td bgcolor="#AAA976" class="lineCopy"><div align="center"><a href="../images/products/#*$!x.htm"><strong>#*$!#*$!</strong></a></div></td>
</tr>
<tr>
<td bgcolor="#AAA976" class="lineCopy"><div align="center"><a href="../images/products/#*$!xx.htm"><strong>#*$!#*$!</strong></a></div></td>
</tr>
<tr>
<td bgcolor="#AAA976" class="lineCopy"><div align="center"><strong><a href="../images/products/wood/#*$!#*$!.htm">#*$!#*$!</a></strong></div></td>
</tr>
<tr>
<td bgcolor="#AAA976" class="lineCopy"><div align="center"><a href="../images/products/#*$!#*$!.htm"><strong>#*$!#*$!</strong></a></div></td>
</tr>
<tr>
<td bgcolor="#AAA976" class="lineCopy"><div align="center"><a href="../images/products/#*$!x.htm"><strong>#*$!#*$!</strong></a></div></td>
</tr>
<tr>
<td bgcolor="#AAA976" class="lineCopy"><div align="center"><a href="../images/products/#*$!x.htm"><strong>#*$!#*$!</strong></a></div></td>
</tr>
<tr>
<td bgcolor="#AAA976" class="lineCopy"><div align="center"><a href="../#*$!#*$!/specials.htm"><strong>Specials</strong></a></div></td>
</tr>
</table>
<!-- TemplateBeginEditable name="EditRegion5" --><img src="../images/main/better-business.jpg" alt="Better Business" width="45" height="69" /><!-- TemplateEndEditable -->
<p>&nbsp;</p>
</div></td>
</tr>
<tr>
<td height="21" align="left" valign="bottom"><img src="../images/main/bl.gif" alt="corner" width="21" height="21" /></td>
<td valign="top">&nbsp;</td>
</tr>
<tr>
<td height="15" colspan="5" bgcolor="#AAA976"><div align="center">
<table width="1024" height="25" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="189" bgcolor="#AAA976"><div align="center"><a href="../index.htm"><strong>Home</strong></a></div></td>
<td width="201" bgcolor="#AAA976"><div align="center"><a href="../about.htm"><strong>About Us</strong></a></div></td>
<td width="242" bgcolor="#AAA976"><div align="center"><a href="../contact.htm"><strong>Contact Us</strong></a></div></td>
<td width="242" bgcolor="#AAA976"><div align="center"><a href="../sitemap.htm"><strong>Sitemap</strong></a></div></td>
<td width="208" bgcolor="#AAA976"><div align="center"><a href="../resource.htm"><strong>Resources</strong></a></div></td>
<td width="184" bgcolor="#AAA976"><div align="center"><strong><a href="http://#*$!#*$!#*$!#*$!.com/blog/">Blog</a></strong></div></td>
</tr>
</table>
</div></td>
</tr>
<tr>
<td height="20" colspan="5" valign="top" bgcolor="#3C1C00"><div align="center">
<h3><strong class="linecopywhite">Visit us at our showroom at #*$!#*$!#*$!#*$!#*$!#*$!#*$!#*$!#*$!</strong><br />
</h3>
</div></td>
</tr>
</table>
</div></td>
</tr>
</table>
</div>
</body>

heres a copy of the css

h1 {
font-size: 12px;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}
h2 {
font-size: 12px;
}
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
}
.lineCopy {
border-bottom-width: medium;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-bottom-color: #3C1C00;
border-right-width: medium;
border-top-width: thin;
border-left-width: thin;
border-right-color: #3C1C00;
border-top-color: #3C1C00;
border-left-color: #3C1C00;
}

.nounderline {
text-decoration: none;
}
.linecopywhite {
color: #FFFFFF;
}

.lineCopy2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
}

a:link {
color: #000000;
text-decoration: none;
}
a:visited {
color: #000000;
text-decoration: none;
}
a:hover {
color: #FFFFFF;
}

a:active {
color: #000000;
text-decoration: none;
}
.lineCopy6 {
border-bottom-width: thin;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-bottom-color: #3C1C00;
border-right-width: thin;
border-top-width: thin;
border-left-width: thin;
border-right-color: #3C1C00;
border-top-color: #3C1C00;
border-left-color: #3C1C00;
background-color: #3C1C00;
color: #FFFFFF;
font-size: 14px;
font-weight: normal;
}
.smalltext {
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
}
body {
background-color: #AAA976;
}
.smalltext2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #FFFFFF;
}
.white a:link {
color: #000000;
font-weight: bold;
}
.white a:visited {
color: #000000;
font-weight: bold;
}
.white a:hover {
color: #8D8C58;
font-weight: bold;
text-decoration: underline;
}
.white a:active {
color: #000000;
font-weight: bold;
}
.topline {
border-top-width: thin;
border-top-style: solid;
border-top-color: #FFFFFF;
}

.largetext {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}
.lineCopy7 {
background-color: #FFFFFF;
color: #3C1C00;
font-size: 12px;
border: thin solid #3C1C00;
}
.lineCopyblink {
border-bottom-width: medium;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-bottom-color: #3C1C00;
border-right-width: medium;
border-top-width: thin;
border-left-width: thin;
border-right-color: #3C1C00;
border-top-color: #3C1C00;
border-left-color: #3C1C00;
text-decoration: blink;
}
.blink {
text-decoration: blink;
}
.lineCopy88 {
border-bottom-width: thin;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-bottom-color: #FFFFFF;
border-right-width: thin;
border-top-width: thin;
border-left-width: thin;
border-right-color: #3C1C00;
border-top-color: #3C1C00;
border-left-color: #FFFFFF;
background-color: #FFFFFF;
color: #3C1C00;
font-size: 12px;
font-weight: normal;
}

Please and help is

swa66

2:14 am on Dec 24, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I don't think your problem is the CSS, esp. not since you seem to be using nested tables to do the positioning...

More modern layout is to use CSS to do positioning, no more nested tables.