CSS Forum

**vio1** · 11-10-2008, 08:29 PM

Hi,
Im designing my website and hit a road block. Im using Dreamweaver and want to retain the shape of the website as it is, so i want my body text to stay within a fixed cell. I created a css rule for my cell and set the overflow to auto. In firefox the page loads up properly. In IE it does not. It actually doesnt create a scroll at all. Take a look: Firefox OK:

IE Not OK:

What is wrong?
any way to make the scroll bar more attractive? if not, are there any alternatives?

**serandfae** · 11-10-2008, 10:02 PM

From a first glance it looks like you have a few more IE issues than just the scrollbar. But we need a link to the page or at least the code to really help you with this.

tim

**vio1** · 11-10-2008, 10:18 PM

The website isnt loaded onto the net yet, so here is the code:

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>main_page_x1.jpg</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script language="JavaScript1.2" type="text/javascript">

</script>
<script language="JavaScript1.2" type="text/javascript" src="mm_css_menu.js"></script>
<style type="text/css" media="screen">
@import url("styles/mainpage_x1.css");
</style>

<script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>
<script type="text/javascript">

</script>
</head>
<body onload="MM_preloadImages('assets/images/btn_buying_f2.jpg','assets/images/btn_selling_f2.jpg','assets/images/btn_leasing_f2.jpg','assets/images/btn_listings_f2.jpg','assets/images/btn_contact_f2.jpg')">
<div id="FWTableContainer2144292365">
<table border="0" cellpadding="0" cellspacing="0" width="880">

<tr>
<td><img src="assets/images/spacer.gif" width="10" height="1" border="0" alt="" /></td>
<td><img src="assets/images/spacer.gif" width="118" height="1" border="0" alt="" /></td>
<td><img src="assets/images/spacer.gif" width="32" height="1" border="0" alt="" /></td>
<td><img src="assets/images/spacer.gif" width="365" height="1" border="0" alt="" /></td>
<td><img src="assets/images/spacer.gif" width="58" height="1" border="0" alt="" /></td>
<td><img src="assets/images/spacer.gif" width="79" height="1" border="0" alt="" /></td>
<td><img src="assets/images/spacer.gif" width="31" height="1" border="0" alt="" /></td>
<td><img src="assets/images/spacer.gif" width="150" height="1" border="0" alt="" /></td>
<td><img src="assets/images/spacer.gif" width="37" height="1" border="0" alt="" /></td>
<td><img src="assets/images/spacer.gif" width="1" height="1" border="0" alt="" /></td>
</tr>

<tr>
<td rowspan="12" bgcolor="#262624"><p style="margin:0px"> </p></td>
<td colspan="4" bgcolor="#262624"><p style="margin:0px"> </p></td>
<td colspan="4"><img name="cc_logo" src="assets/images/sutton_logo.jpg" width="297" height="101" border="0" id="cc_logo" alt="" /></td>
<td><img src="assets/images/spacer.gif" width="1" height="101" border="0" alt="" /></td>
</tr>
<tr>
<td rowspan="2"><a href="main_page.htm"><img name="btn_home" src="assets/images/btn_home.jpg" width="118" height="56" border="0" id="btn_home" alt="" /></a></td>
<td colspan="7"><img name="top_bar" src="assets/images/top_bar.jpg" width="752" height="44" border="0" id="top_bar" alt="" /></td>
<td><img src="assets/images/spacer.gif" width="1" height="44" border="0" alt="" /></td>
</tr>
<tr>
<td rowspan="10"><img name="middle1_column" src="assets/images/middle1_column.jpg" width="32" height="435" border="0" id="middle1_column" alt="" /></td>
<td rowspan="3" colspan="3" align="center" valign="middle" bgcolor="#2F2F2E" class="title_bar"><img src="assets/images/top_bar_buying_things_to_know.jpg" width="480" height="65" class="center_it" onload="MM_effectAppearFade(this, 2000, 0, 100, false)" /></td>
<td rowspan="8" bgcolor="#363634"><p style="margin:0px"> </p></td>
<td rowspan="2"><img name="side_content_crown" src="assets/images/side_content_crown.gif" width="150" height="15" border="0" id="side_content_crown" alt="" /></td>
<td rowspan="8"><img name="right_column" src="assets/images/right_column.jpg" width="37" height="356" border="0" id="right_column" alt="" /></td>
<td><img src="assets/images/spacer.gif" width="1" height="12" border="0" alt="" /></td>
</tr>
<tr>
<td rowspan="3"><a href="buying_toronto.htm" onmouseout="MM_swapImgRestore();MM_menuStartTimeou t(1000)" onmouseover="MM_menuShowMenu('MMMenuContainer10171 05428_0', 'MMMenu1017105428_0',118,0,'btn_buying');MM_swapIm age('btn_buying','','assets/images/btn_buying_f2.jpg',1)"><img name="btn_buying" src="assets/images/btn_buying.jpg" width="118" height="83" border="0" id="btn_buying" alt="" /></a></td>
<td><img src="assets/images/spacer.gif" width="1" height="3" border="0" alt="" /></td>
</tr>
<tr>
<td rowspan="6" valign="top" bgcolor="#262625"> <p style="margin:0px"></p></td>
<td><img src="assets/images/spacer.gif" width="1" height="65" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="3" rowspan="5" valign="top" bgcolor="#2F2F2E" class="body_padding">
<h1 style="margin:0px">Things to Know - Buying Real Estate</h1>
<p style="margin:0px"> </p>
<h2 style="margin:0px"> </h2>
<h4 style="margin:0px">1st Time Buyer?</h4>
<ul>
<li>If this is the first time you are working with a real estate agent, you may not be aware that as a <em><u>BUYER, you do NOT pay for my services</u></em>. Real estate agents get paid by the seller, and therefore my services to you are free. </li>
</ul>
<p style="margin:0px"> </p>
<h4 style="margin:0px">I'm Ready to Buy... What is My First Step?</h4>

<ul>
<li> The first step is to talk to a mortgage broker or lending institution to figure out exactly how much you can afford<br />
</li>
<li> I believe a mortgage broker is your best bet as he/she can shop around for you and find the best rate possible. Since they get paid by the bank or lending institution they make deals with, there is no need to worry about extra out of pocket expenses. </li>
<li>Usually mortgage brokers get better deals from banks and lending institutions then you would had you gone straight to the bank/lending institution. <br />
</li>
<li>One issue in regards to going from bank to bank yourself (without a mortgage broker) is that every time you request a mortgage quote, your credit is checked and recorded. Repeated credit checks is something you definitely want to avoid. *If you go to 5 banks your credit will be checked 5 times.... while if you go to a mortgage broker he/she will check all the different banks and lending institutions with 1 credit check.</li>
<li>Before doing anything I would advise you to contact a mortgage broker to discuss what you can afford. Once you have been officially <br />
pre-approved for a set amount, then we can go and look at properties with confidence knowing that you are able to get financing. <br />
</li>
</ul></td>
<td><img src="assets/images/spacer.gif" width="1" height="15" border="0" alt="" /></td>
</tr>
<tr>
<td><a href="selling_toronto.htm" onmouseout="MM_swapImgRestore();MM_menuStartTimeou t(1000)" onmouseover="MM_menuShowMenu('MMMenuContainer10171 05428_1', 'MMMenu1017105428_1',118,39,'btn_selling');MM_swap Image('btn_selling','','assets/images/btn_selling_f2.jpg',1)"><img name="btn_selling" src="assets/images/btn_selling.jpg" width="118" height="83" border="0" id="btn_selling" alt="" /></a></td>
<td><img src="assets/images/spacer.gif" width="1" height="83" border="0" alt="" /></td>
</tr>
<tr>
<td><a href="leasing_toronto.htm" onmouseout="MM_swapImgRestore();MM_menuStartTimeou t(1000)" onmouseover="MM_menuShowMenu('MMMenuContainer10171 05428_2', 'MMMenu1017105428_2',118,39,'btn_leasing');MM_swap Image('btn_leasing','','assets/images/btn_leasing_f2.jpg',1)"><img name="btn_leasing" src="assets/images/btn_leasing.jpg" width="118" height="83" border="0" id="btn_leasing" alt="" /></a></td>
<td><img src="assets/images/spacer.gif" width="1" height="83" border="0" alt="" /></td>
</tr>
<tr>
<td><a href="listings_toronto.htm" onmouseout="MM_swapImgRestore();MM_menuStartTimeou t(1000)" onmouseover="MM_menuShowMenu('MMMenuContainer10171 05428_3', 'MMMenu1017105428_3',118,17,'btn_listings');MM_swa pImage('btn_listings','','assets/images/btn_listings_f2.jpg',1)"><img name="btn_listings" src="assets/images/btn_listings.jpg" width="118" height="83" border="0" id="btn_listings" alt="" /></a></td>
<td><img src="assets/images/spacer.gif" width="1" height="83" border="0" alt="" /></td>
</tr>
<tr>
<td rowspan="2"><a href="contact_me.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('btn_contact','','assets/images/btn_contact_f2.jpg',1)"><img name="btn_contact" src="assets/images/btn_contact.jpg" width="118" height="79" border="0" id="btn_contact" alt="" /></a></td>
<td><img src="assets/images/spacer.gif" width="1" height="12" border="0" alt="" /></td>
</tr>
<tr>
<td rowspan="2" valign="top"><img src="assets/images/conrad.gif" width="365" height="79" /></td>
<td rowspan="2" colspan="5"><a href="file:///C|/Users/Conrad/Desktop/main_page.htm"><img name="living_logo" src="assets/images/living_logo.jpg" width="355" height="79" border="0" id="living_logo" alt="" /></a></td>
<td><img src="assets/images/spacer.gif" width="1" height="67" border="0" alt="" /></td>
</tr>
<tr>
<td><img name="below_contact" src="assets/images/below_contact.gif" width="118" height="12" border="0" id="below_contact" alt="" /></td>
<td><img src="assets/images/spacer.gif" width="1" height="12" border="0" alt="" /></td>
</tr>
</table>
<div id="MMMenuContainer1017105428_0">
<div id="MMMenu1017105428_0" onmouseout="MM_menuStartTimeout(1000);" onmouseover="MM_menuResetTimeout();">
<a href="buying_toronto.htm" id="MMMenu1017105428_0_Item_0" class="MMMIFVStyleMMMenu1017105428_0" onmouseover="MM_menuOverMenuItem('MMMenu1017105428 _0');">
 MAIN PAGE - BUYING    </a>
<a href="things_to_know_real_estate_toronto.htm" id="MMMenu1017105428_0_Item_1" class="MMMIVStyleMMMenu1017105428_0" onmouseover="MM_menuOverMenuItem('MMMenu1017105428 _0');">
     THINGS TO  KNOW    </a>
<a href="toronto_condos.htm" id="MMMenu1017105428_0_Item_2" class="MMMIVStyleMMMenu1017105428_0" onmouseover="MM_menuOverMenuItem('MMMenu1017105428 _0');">
     CONDO LIST&nbsp ;   </a>
<a href="buying_condos_toronto.htm" id="MMMenu1017105428_0_Item_3" class="MMMIVStyleMMMenu1017105428_0" onmouseover="MM_menuOverMenuItem('MMMenu1017105428 _0');">
     BUYING A C ONDO    </a>
<a href="buying_freehold_toronto.htm" id="MMMenu1017105428_0_Item_4" class="MMMIVStyleMMMenu1017105428_0" onmouseover="MM_menuOverMenuItem('MMMenu1017105428 _0');">
     BUYING A H OUSE    </a> </div>
</div>
<div id="MMMenuContainer1017105428_1">
<div id="MMMenu1017105428_1" onmouseout="MM_menuStartTimeout(1000);" onmouseover="MM_menuResetTimeout();">
<a href="selling_toronto.htm" id="MMMenu1017105428_1_Item_0" class="MMMIFVStyleMMMenu1017105428_1" onmouseover="MM_menuOverMenuItem('MMMenu1017105428 _1');">
 MAIN PAGE - SELLING    </a>
<a href="what_i_do.htm" id="MMMenu1017105428_1_Item_1" class="MMMIVStyleMMMenu1017105428_1" onmouseover="MM_menuOverMenuItem('MMMenu1017105428 _1');">
     WHAT I DO& nbsp;FOR YOU    </a> </div>
</div>
<div id="MMMenuContainer1017105428_2">
<div id="MMMenu1017105428_2" onmouseout="MM_menuStartTimeout(1000);" onmouseover="MM_menuResetTimeout();">
<a href="leasing_toronto.htm" id="MMMenu1017105428_2_Item_0" class="MMMIFVStyleMMMenu1017105428_2" onmouseover="MM_menuOverMenuItem('MMMenu1017105428 _2');">
 MAIN PAGE - LEASING    </a>
<a href="things_to_know.htm" id="MMMenu1017105428_2_Item_1" class="MMMIVStyleMMMenu1017105428_2" onmouseover="MM_menuOverMenuItem('MMMenu1017105428 _2');">
     THINGS TO  KNOW    </a> </div>
</div>
<div id="MMMenuContainer1017105428_3">
<div id="MMMenu1017105428_3" onmouseout="MM_menuStartTimeout(1000);" onmouseover="MM_menuResetTimeout();">
<a href="listings_toronto.htm" id="MMMenu1017105428_3_Item_0" class="MMMIFVStyleMMMenu1017105428_3" onmouseover="MM_menuOverMenuItem('MMMenu1017105428 _3');">
 MAIN PAGE - LISTINGS </a>
<a href="listings_for_sale_toronto.htm" id="MMMenu1017105428_3_Item_1" class="MMMIVStyleMMMenu1017105428_3" onmouseover="MM_menuOverMenuItem('MMMenu1017105428 _3');">
     LISTINGS FOR&nb sp;SALE    </a>
<a href="listings_sold.htm" id="MMMenu1017105428_3_Item_2" class="MMMIVStyleMMMenu1017105428_3" onmouseover="MM_menuOverMenuItem('MMMenu1017105428 _3');">
     PAST LISTINGS&n bsp;   </a> </div>
</div>
</div>
</body>
</html>

**serandfae** · 10:44 PM

Let me look this over, but the first thing i see is this:

<html xmlns="http://www.w3.org/1999/xhtml">

Take out the xmlns="http://www.w3.org/1999/xhtml"; it throws IE into quirks mode. Let me know what that does while I look over the rest.

Edit: Ugh. Table cells and spacer gifs. This is why Dreamweaver in WYSIWYG only mode is really bad. Moving on, though, I have to have the CSS, too, to see what's going on.

tim

**vio1** · 10:50 PM

removed the <html xmlns="http://www.w3.org/1999/xhtml"> nothing changed.

css:

td img {
/* Another Mozilla/Netscape bug with making sure our images display correctly */
display: block;
}

#FWTableContainer2144292365 {
/* The master div to make sure that our popup menus get aligned correctly. Be careful when playing with this one. */
position:relative;
width:880px;
height:580px;
text-align:left;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}

#MMMenuContainer1017105428_0 {
/* This ID is related to the master menu div for menu MMMenuContainer1017105428_0 and contains the important positioning information for the menu as a whole */
position:absolute;
left:128px;
top:157px;
visibility:hidden;
z-index:300;
}

#MMMenu1017105428_0 {
/* This class defines things about menu MMMenu1017105428_0's div. */
position:absolute;
left:0px;
top:0px;
visibility:hidden;
background-color:transparent;
width:147px;
height:118px;
}

.MMMIFVStyleMMMenu1017105428_0 {
/* This class determines the general characteristics of the menu items in menu MMMenu1017105428_0 */
border-top:0px solid #ffffff;
border-left:0px solid #ffffff;
border-bottom:0px solid #555555;
border-right:0px solid #555555;
width:147px;
height:22px;
voice-family: "\"}\"";
voice-family:inherit;
width:139px;
height:14px;
}

.MMMIVStyleMMMenu1017105428_0 {
/* This class determines the general characteristics of the menu items in menu MMMenu1017105428_0 */
border-top:0px;
border-left:0px solid #ffffff;
border-bottom:0px solid #555555;
border-right:0px solid #555555;
width:147px;
height:22px;
voice-family: "\"}\"";
voice-family:inherit;
width:139px;
height:14px;
}

#MMMenu1017105428_0_Item_0 {
/* Unique ID for item 0 of menu MMMenu1017105428_0 so we can set its position */
left:0px;
top:0px;
}

#MMMenu1017105428_0_Item_1 {
/* Unique ID for item 1 of menu MMMenu1017105428_0 so we can set its position */
left:0px;
top:24px;
}

#MMMenu1017105428_0_Item_2 {
/* Unique ID for item 2 of menu MMMenu1017105428_0 so we can set its position */
left:0px;
top:48px;
}

#MMMenu1017105428_0_Item_3 {
/* Unique ID for item 3 of menu MMMenu1017105428_0 so we can set its position */
left:0px;
top:72px;
}

#MMMenu1017105428_0_Item_4 {
/* Unique ID for item 4 of menu MMMenu1017105428_0 so we can set its position */
left:0px;
top:96px;
}

#MMMenuContainer1017105428_0 img {
/* needed for Mozilla/Camino/Netscape */
border:0px;
}

#MMMenuContainer1017105428_0 a {
/* Controls the general apperance for menu MMMenuContainer1017105428_0's items, including color and font */
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#ffffff;
text-align:left;
vertical-align:middle;
padding:4px;
background-color:#000000;
font-weight:bold;
font-style:normal;
display:block;
position:absolute;
}

#MMMenuContainer1017105428_0 a:hover {
/* Controls the mouse over effects for menu MMMenuContainer1017105428_0 */
color:#000000;
background-color:#999999;
}
#MMMenuContainer1017105428_1 {
/* This ID is related to the master menu div for menu MMMenuContainer1017105428_1 and contains the important positioning information for the menu as a whole */
position:absolute;
left:128px;
top:279px;
visibility:hidden;
z-index:300;
}

#MMMenu1017105428_1 {
/* This class defines things about menu MMMenu1017105428_1's div. */
position:absolute;
left:0px;
top:0px;
visibility:hidden;
background-color:transparent;
width:155px;
height:46px;
}

.MMMIFVStyleMMMenu1017105428_1 {
/* This class determines the general characteristics of the menu items in menu MMMenu1017105428_1 */
border-top:0px solid #ffffff;
border-left:0px solid #ffffff;
border-bottom:0px solid #555555;
border-right:0px solid #555555;
width:155px;
height:22px;
voice-family: "\"}\"";
voice-family:inherit;
width:147px;
height:14px;
}

.MMMIVStyleMMMenu1017105428_1 {
/* This class determines the general characteristics of the menu items in menu MMMenu1017105428_1 */
border-top:0px;
border-left:0px solid #ffffff;
border-bottom:0px solid #555555;
border-right:0px solid #555555;
width:155px;
height:22px;
voice-family: "\"}\"";
voice-family:inherit;
width:147px;
height:14px;
}

#MMMenu1017105428_1_Item_0 {
/* Unique ID for item 0 of menu MMMenu1017105428_1 so we can set its position */
left:0px;
top:0px;
}

#MMMenu1017105428_1_Item_1 {
/* Unique ID for item 1 of menu MMMenu1017105428_1 so we can set its position */
left:0px;
top:24px;
}

#MMMenuContainer1017105428_1 img {
/* needed for Mozilla/Camino/Netscape */
border:0px;
}

#MMMenuContainer1017105428_1 a {
/* Controls the general apperance for menu MMMenuContainer1017105428_1's items, including color and font */
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#ffffff;
text-align:left;
vertical-align:middle;
padding:4px;
background-color:#000000;
font-weight:bold;
font-style:normal;
display:block;
position:absolute;
}

#MMMenuContainer1017105428_1 a:hover {
/* Controls the mouse over effects for menu MMMenuContainer1017105428_1 */
color:#000000;
background-color:#999999;
}
#MMMenuContainer1017105428_2 {
/* This ID is related to the master menu div for menu MMMenuContainer1017105428_2 and contains the important positioning information for the menu as a whole */
position:absolute;
left:128px;
top:362px;
visibility:hidden;
z-index:300;
}

#MMMenu1017105428_2 {
/* This class defines things about menu MMMenu1017105428_2's div. */
position:absolute;
left:0px;
top:0px;
visibility:hidden;
background-color:transparent;
width:152px;
height:46px;
}

.MMMIFVStyleMMMenu1017105428_2 {
/* This class determines the general characteristics of the menu items in menu MMMenu1017105428_2 */
border-top:0px solid #ffffff;
border-left:0px solid #ffffff;
border-bottom:0px solid #555555;
border-right:0px solid #555555;
width:152px;
height:22px;
voice-family: "\"}\"";
voice-family:inherit;
width:144px;
height:14px;
}

.MMMIVStyleMMMenu1017105428_2 {
/* This class determines the general characteristics of the menu items in menu MMMenu1017105428_2 */
border-top:0px;
border-left:0px solid #ffffff;
border-bottom:0px solid #555555;
border-right:0px solid #555555;
width:152px;
height:22px;
voice-family: "\"}\"";
voice-family:inherit;
width:144px;
height:14px;
}

#MMMenu1017105428_2_Item_0 {
/* Unique ID for item 0 of menu MMMenu1017105428_2 so we can set its position */
left:0px;
top:0px;
}

#MMMenu1017105428_2_Item_1 {
/* Unique ID for item 1 of menu MMMenu1017105428_2 so we can set its position */
left:0px;
top:24px;
}

#MMMenuContainer1017105428_2 img {
/* needed for Mozilla/Camino/Netscape */
border:0px;
}

#MMMenuContainer1017105428_2 a {
/* Controls the general apperance for menu MMMenuContainer1017105428_2's items, including color and font */
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#ffffff;
text-align:left;
vertical-align:middle;
padding:4px;
background-color:#000000;
font-weight:bold;
font-style:normal;
display:block;
position:absolute;
}

#MMMenuContainer1017105428_2 a:hover {
/* Controls the mouse over effects for menu MMMenuContainer1017105428_2 */
color:#000000;
background-color:#999999;
}
#MMMenuContainer1017105428_3 {
/* This ID is related to the master menu div for menu MMMenuContainer1017105428_3 and contains the important positioning information for the menu as a whole */
position:absolute;
left:128px;
top:423px;
visibility:hidden;
z-index:300;
}

#MMMenu1017105428_3 {
/* This class defines things about menu MMMenu1017105428_3's div. */
position:absolute;
left:0px;
top:0px;
visibility:hidden;
background-color:transparent;
width:148px;
height:70px;
}

.MMMIFVStyleMMMenu1017105428_3 {
/* This class determines the general characteristics of the menu items in menu MMMenu1017105428_3 */
border-top:0px solid #ffffff;
border-left:0px solid #ffffff;
border-bottom:0px solid #555555;
border-right:0px solid #555555;
width:148px;
height:22px;
voice-family: "\"}\"";
voice-family:inherit;
width:140px;
height:14px;
}

.MMMIVStyleMMMenu1017105428_3 {
/* This class determines the general characteristics of the menu items in menu MMMenu1017105428_3 */
border-top:0px;
border-left:0px solid #ffffff;
border-bottom:0px solid #555555;
border-right:0px solid #555555;
width:148px;
height:22px;
voice-family: "\"}\"";
voice-family:inherit;
width:140px;
height:14px;
}

#MMMenu1017105428_3_Item_0 {
/* Unique ID for item 0 of menu MMMenu1017105428_3 so we can set its position */
left:0px;
top:0px;
}

#MMMenu1017105428_3_Item_1 {
/* Unique ID for item 1 of menu MMMenu1017105428_3 so we can set its position */
left:0px;
top:24px;
}

#MMMenu1017105428_3_Item_2 {
/* Unique ID for item 2 of menu MMMenu1017105428_3 so we can set its position */
left:0px;
top:48px;
}

#MMMenuContainer1017105428_3 img {
/* needed for Mozilla/Camino/Netscape */
border:0px;
}

#MMMenuContainer1017105428_3 a {
/* Controls the general apperance for menu MMMenuContainer1017105428_3's items, including color and font */
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#ffffff;
text-align:left;
vertical-align:middle;
padding:4px;
background-color:#000000;
font-weight:bold;
font-style:normal;
display:block;
position:absolute;
}

#MMMenuContainer1017105428_3 a:hover {
/* Controls the mouse over effects for menu MMMenuContainer1017105428_3 */
color:#000000;
background-color:#999999;
}
body {
background-color: #262624;
}
h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
color: #596E99;
font-weight: bold;
height: 10px;
text-align: center;
}
h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #D8DFE5;
margin-bottom: 0px;
letter-spacing: 0em;
}
blockquote {
margin-top: 0px;
}

a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #339900;
text-decoration: none;
margin-bottom: 0px;
}
a:visited {
color: #339900;
text-decoration: none;
font-size: 12px;
}
a:hover {
font-weight: bold;
color: #339900;
font-size: 12px;
}

p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #999999;
text-align: left;
line-height: normal;
margin-top: 5px;
letter-spacing: normal;
font-style: normal;
font-weight: normal;
}
li {
color: #999999;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}

.body_padding {
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 10px;
height: 276px;
width: 482px;
position: fixed;
overflow: auto;
}
h3 {
font-size: 14px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
}
h4 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #B1BCD1;
}

**serandfae** · 11-10-2008, 11:06 PM

Quote:

Originally Posted by vio1

removed the <html xmlns="http://www.w3.org/1999/xhtml"> nothing changed.

Make sure you keep the <html> part of that in....

Most of your IE woes are going to be due to all that absolutely positioned stuff. I have to ask, though, how much coding experience you have, because what changes I recommend are probably going to involve using and clearing floats and using conditional comments for IE. Most of the time the issues with DW generated pages involve all that absolute positioning. IE tends to choke on that especially. Never mind that it generates tables for layout, as well....

tim

**vio1** · 11-10-2008, 11:41 PM

what do you mean "keep the <html> part of that in...."?
What should i delete, what should i keep?

My coding experience is limited and rather basic, but i learn quickly. How do i fix my problem with my page? to what do i change all the absolutely positioned stuff. How do i retain things where they are without cells getting larger and pushing things around as they seem to often do?

**serandfae** · 11-11-2008, 11:59 AM

I mean put <html> in place of <html xmlns="http://www.w3.org/1999/xhtml">. The <html> part is a vital element.

I got the impression that your coding experience was basic, so let me tell you first that because that is the case this is not a quick fix.

If getting this site up and running is of immediate importance, I'd recommend hiring a coder. I do not say that to be harsh, but being a real estate site, an experienced coder will know how to integrate MLS into your site, for instance. That alone will make you pull your hair out if you've never done anything similar.

If it is not of immediate importance, and you are a quick study, I'd recommend checking out w3cschools.com and reading up on HTML and CSS to start. The fix is going to involve:

1) Zero out all margins and padding on the body (using CSS) then add them in on elements you want to have them.
2) Don't use tables. I know DW generates them, but that's one reason why I've long said that using DW without real coding knowledge is a bad idea. I wasn't even allowed to use it until late in my coursework, then I saw why. Learn how to use the document flow to position elements, using and clearing floats. It would be just as quick for you to learn to do that than to learn how to do it right with tables, and all that deprecated code, which has now become pretty nonstandard.

But to answer your question about why the cells get larger on your tables, it's because tables expand all the rows/columns to match the largest element within them unless you constrain the proportions of them with a rule regarding overflow. The old way of doing it was to nest tables.

To answer your question about absolute positioning, what you do is take that position:absolute; out of the rule, float the element left or right, let the other elements follow it, then after those elements follow clear the float.

I know this isn't exactly what you want to hear, but I think you can still do this pretty quickly if you follow this advice.

tim

**LadynRed** · 11-11-2008, 02:22 PM

Quote:

Uh.. this name space statement doesn't put IE into quirks mode, it's the goofy xml statement that some people put in ABOVE the doctype declaration that puts IE into quirks mode.

**vio1** · 11-11-2008, 03:36 PM

How do i remove the padding for the cells using CSS?
Removing tables now will result in me starting from scratch?

Are there any good tutorials, or videos, or books to learn all about creating web pages without tables as you have mentioned?

**xpguy** · 11-11-2008, 04:04 PM

In CSS to remove the padding do: style="padding: 0px"
to remove the margin do: style="margin: 0px"
to do both do: style="padding: 0px; margin: 0px"
I see you have used a lot of tables which is not a good idea and will affect your page loading time for you and your users.
To do it without tables use: <div> instead of <table cellpadding="0" cellspacing="0" border="0"><tr><td>

and instead of </td></tr></table> do </div>

you can also use <span></span> but div's go on a new line unless floated with a float attribute such as "float: left", will float put the div's into columns but remember add the width too 'width: 50%'
and to then stop from making columns do: "clear: both" for example:

<p>lets add some columns</p>
<div style="float: left; width: 20%">1</div>
<div style="float: left; width: 20%">2</div>
<div style="float: left; width: 20%">3</div>
<div style="clear: both"></div>
<p>hello world</p>

you can also float: right too. and for better coding practises put any styles into classes and id's in the css like:

.columns { float: left; width: 20% } - these are classes (note the '.')
.clr { clear: both } - these are classes (note the '.')
#once - these is an id and can only be used once. (note the '#')

to do global attributes which affect every tag in css do:

p { padding: 10px; } - this will give every p tag a padding of 10px
td { border: 2px solid #d1317f; } - this gives every td a border
table { margin: 2px; } - this gives every table a margin of 2px
tr { text-decoration: underline; } - this gives all text in a tr underlined

a good book you should use is: The CSS Anthology - author: sitepoint - isbn-10: 0-958419-8-x or ISBN-13: 978-0-9758419-8-3

I hope this helps.

**vio1** · 11-11-2008, 07:41 PM

Quote:

Originally Posted by xpguy

In CSS to remove the padding do: style="padding: 0px"
to remove the margin do: style="margin: 0px"
to do both do: style="padding: 0px; margin: 0px"
I see you have used a lot of tables which is not a good idea and will affect your page loading time for you and your users.
To do it without tables use: <div> instead of <table cellpadding="0" cellspacing="0" border="0"><tr><td>

and instead of </td></tr></table> do </div>

you can also use <span></span> but div's go on a new line unless floated with a float attribute such as "float: left", will float put the div's into columns but remember add the width too 'width: 50%'
and to then stop from making columns do: "clear: both" for example:

<p>lets add some columns</p>
<div style="float: left; width: 20%">1</div>
<div style="float: left; width: 20%">2</div>
<div style="float: left; width: 20%">3</div>
<div style="clear: both"></div>
<p>hello world</p>

you can also float: right too. and for better coding practises put any styles into classes and id's in the css like:

.columns { float: left; width: 20% } - these are classes (note the '.')
.clr { clear: both } - these are classes (note the '.')
#once - these is an id and can only be used once. (note the '#')

to do global attributes which affect every tag in css do:

p { padding: 10px; } - this will give every p tag a padding of 10px
td { border: 2px solid #d1317f; } - this gives every td a border
table { margin: 2px; } - this gives every table a margin of 2px
tr { text-decoration: underline; } - this gives all text in a tr underlined

a good book you should use is: The CSS Anthology - author: sitepoint - isbn-10: 0-958419-8-x or ISBN-13: 978-0-9758419-8-3

I hope this helps.

Thanks it does.
Recommend any html editors? any that will preview what im typing?

**serandfae** · 11-11-2008, 08:17 PM

Quote:

Originally Posted by LadynRed

Uh.. this name space statement doesn't put IE into quirks mode, it's the goofy xml statement that some people put in ABOVE the doctype declaration that puts IE into quirks mode.

So it is. Sorry, I misspoke there. Thanks for catching that.

tim

**serandfae** · 11-11-2008, 08:43 PM

Quote:

Originally Posted by vio1

Removing tables now will result in me starting from scratch?

Not necessarily. I have converted sites from tables to to CSS-based layout by switching the the table cells to divs and modifying the CSS accordingly, without redoing the content. But trust me when I say that in the time it would take to redo the tables here you can learn to do it with divs, with far less unnecessary markup. It didn't take me all that long.

Quote:

Originally Posted by vio1

Are there any good tutorials, or videos, or books to learn all about creating web pages without tables as you have mentioned?

http://www.w3schools.com/

Quote:

Originally Posted by vio1

Recommend any html editors? any that will preview what im typing?

Since you're already using Dreamweaver, stick with it. It's a good tool, and it will display changes in the code as you make them (you do have to refresh the page to show the changes periodically). Personally, I use HTMLKit with several browser windows opened that I refresh with changes (FF, IE7, IE6 and Opera, usually). Keyboard on one hand, Graphire pad and mouse on the other, all on fire.

tim

**vio1** · 11-19-2008, 12:40 AM

serandfae,
ive read through a lot of w3schools, but still dont understand the use of div. Could someone walk me through how do i use div? any tutorials?

How do i convert a table into div? cut and past or edit? im feeling overwhelmed.

**xpguy** · 11-19-2008, 11:30 AM

Well w3c is a standard and how to write the code not why to write the code, its pretty simple though:

<table cellpadding="0" cellspacing="0" width="100%" border="0"><tr><td> can be written as <div> and to close it you would usually use this code in a table: </td></tr></table> but in xhtml you use: </div>

Here is a concept i used to go by when i was younger, do you want to spend more time writing out the table or write less and you can focus on other things by writing in xhtml and using div's.

**serandfae** · 11-19-2008, 03:56 PM

Quote:

Originally Posted by vio1

serandfae,
ive read through a lot of w3schools, but still dont understand the use of div. Could someone walk me through how do i use div? any tutorials?

How do i convert a table into div? cut and past or edit? im feeling overwhelmed.

It would be a lot quicker to show you. If you look at the source code of my portfolio site (click the link in my sig), the whole site is one that has been converted from tables to divs. It should be pretty straightforward when you look at it how it was done, but I'll answer any questions you have. The biggest difference is that divs are positioned with floats, then clearing after them. All the positioning is done in the CSS.

tim

**xpguy** · 11-19-2008, 04:04 PM

I managed to look at your portfolio and all though the work is good work, i question some of the code as you have alot of <br /> and         tags which can be reduced by: padding: 10px 0px 0px; for example using short form css enhancing your page load time and you have <span><b><i>

why not have in your css:

#flashcontent {
border: none;
}
#flashcontent span {
font-weight: bold;
font-style: italic
}

you can condense it further too but would be a good step in the right direction. W3C where talking about removing the <br /> tag in xhtml 2.0 and replacing it with <line>.

**vio1** · 11-19-2008, 05:59 PM

Quote:

Originally Posted by serandfae

It would be a lot quicker to show you. If you look at the source code of my portfolio site (click the link in my sig), the whole site is one that has been converted from tables to divs. It should be pretty straightforward when you look at it how it was done, but I'll answer any questions you have. The biggest difference is that divs are positioned with floats, then clearing after them. All the positioning is done in the CSS.

tim

Could you send me the css file that shows how to position your div tags? I see the div tag in your code, but it doesnt show the actual instructions... thats in your css.

**xpguy** · 11-19-2008, 06:10 PM

Hi although tim is the one to reply to this one you can float your divs by doing this:

.leftcolumn {
float: left;
width: 25%
}

<div class="leftcolumn">column 1</div>
<div class="leftcolumn">column 2</div>
<div class="leftcolumn">column 3</div>
<div class="leftcolumn">column 4</div>

this will put your content into columns, toggle with the width to suit your needs .
I hope it helps