Ad: Manage updates with the Download App
ie8 fix

Coding & scripting forum: Table not viewing properly in IE on PC

by: nattergab March 16, 2011 2:39 PM PDT

Like this

0 people like this thread

Staff pick

Table not viewing properly in IE on PC

by nattergab - 3/16/11 2:39 PM

Below is the code for my site. I can't figure out why my table of crochet links stretches beyond the background image (it should fit nicely in it). I think I'm missing a table or cell end tag. Any help is greatly appreciated. Thanks!


<!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"><!-- InstanceBegin template="/Templates/nattypatcrochet.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Crochet Resources: Crochet Links | nattypatcrochet</title>
<!-- InstanceEndEditable -->
<link href="css/container.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
a:link {
text-decoration: none;
color: #000000;
}
a:visited {
text-decoration: none;
color: #000000;
}
a:hover {
text-decoration: none;
color: #000000;
}
a:active {
text-decoration: none;
color: #000000;
}
a img {
border: none;
}
.container {margin:0 auto;}
#topspace {
height: 30px;
width: 980px;
}
#menubar {
height: 25px;
width: 610px;
float: right;
}
#deadspaceundermenu {
height: 125px;
width: 610px;
float: left;
}
#leftcol {
height: 534px;
width: 980px;
float: left;
}
#midcol {
height: 534px;
width: 444px;
float: left;
}
#rightspace {
height: 534px;
width: 38px;
float: left;
}
#rightcol {
height: 534px;
width: 240px;
float: left;
}
#leftspace {
height: 534px;
width: 38px;
float: left;
}

-->
</style>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>

<script src="http://carts.ravelry.com/javascripts/store_connector_5178.js" type="text/javascript"></script>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.style3 {font-size: 13px}
.style4 {font-style: italic}
-->
</style>
<!-- InstanceBeginEditable name="head" -->
<style type="text/css">
<!--
.style5 {
font-size: 24px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}
.style7 {font-family: Arial, Helvetica, sans-serif}
.style10 {font-size: 12px}
.style11 {font-family: Arial, Helvetica, sans-serif; font-size: 12px; }
-->
</style>
<script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
function MM_effectAppearFade(targetElement, duration, from, to, toggle)
{
Spry.Effect.DoFade(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
}
//-->
</script>
<!-- InstanceEndEditable -->
</head>

<body>
<!-- InstanceBeginEditable name="EditRegion3" -->
<div class="container" id=".container">
<div id="topspace"></div>
<div id="GoHome">
<div id="gohomespace"></div>
<div id="gohomespace2"><a href="index.html"><img src="images/transparent.gif" alt="Hompage" width="260" height="100" longdesc="../images/transparent.gif" /></a></div>
</div>
<div id="menubar">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="Info.html" target="_self">Info</a> </li>
<li class="style3"><a href="PatternShop.html" target="_self">Pattern Shop</a> </li>
<li><a href="CrochetResources.html" target="_self">Crochet Resources</a> </li>
<li><a href="SocialMedia.html" target="_self">Community</a> </li>
<li> <a href="#" <nclick="R.cart.show(12092); return false;">Shopping Cart</a> </li>
</ul>
</div>
<div id="deadspaceundermenu"></div>
<div id="leftcol"><table width="756" border="0" align="center" cellpadding="5">
<tr>
<td colspan="6"><span class="style5">Crochet Links</span></td>
</tr>
<tr>
<td width="72" height="72" valign="top"><a href="http://www.youtube.com/results?search_query=crochet+stitch&aq=f" target="_blank"><img src="images/crochetlinksimages/youtube.gif" alt="YouTube Tutorials" width="72" height="72" longdesc="images/crochetlinksimages/yarndex.gif" onmouseover="MM_effectAppearFade(this, 500, 75, 100, false)" /></a></td>
<td colspan="3" valign="top"><span class="style11"><strong><a href="http://www.youtube.com/results?search_query=crochet+stitch&aq=f" target="_blank">YouTube</a></strong> is the place to go when you need a refresher or instruction on any crochet stitch, join or technique. There are countless videos to choose from and many highly skilled crocheters that graciously let you watch their skills in action. Just add your own specific search word and tune in. This is a must to check out!</span></td>
<td width="72" height="72" valign="top"><a href="http://www.crochetville.org/forum/" target="_blank"><img src="images/crochetlinksimages/crochetville.gif" alt="Crochetville.org" width="72" height="72" longdesc="images/crochetlinksimages/yarndex.gif" onmouseover="MM_effectAppearFade(this, 500, 75, 100, false)" /></a></td>
<td width="166" height="72" valign="top"><span class="style11"><strong><a href="http://www.crochetville.org/forum/" target="_blank">Crochetville</a></strong> is an online crochet community where crochet enthusiasts come to share their love of crochet and to participate in forums.</span></td>
</tr>
<tr>
<td valign="top"><a href="http://www.ravelry.com/" target="_blank"><img src="images/crochetlinksimages/ravelry.gif" alt="Raverly" width="72" height="72" longdesc="images/crochetlinksimages/yarndex.gif" onmouseover="MM_effectAppearFade(this, 500, 75, 100, false)" /></a></td>
<td colspan="3" valign="top"><span class="style11"><strong><a href="http://www.ravelry.com/" target="_blank">Ravelry</a></strong> is a place for crocheters, knitters, and fibre artists to keep track of their yarn, tools, project and pattern information. You can also look to others for ideas and inspiration. The content is all user-driven, and you can keep notes about your projects, see what other people are making, find the perfect pattern, and connect with other yarn enthusiasts. </span></td>
<td valign="top"><a href="http://crochet.meetup.com/" target="_blank"><img src="images/crochetlinksimages/meetup.gif" alt="Crochet Meetup Groups" width="72" height="72" longdesc="images/crochetlinksimages/yarndex.gif" onmouseover="MM_effectAppearFade(this, 500, 75, 100, false)" /></a></td>
<td valign="top"><span class="style11"><strong><a href="http://crochet.meetup.com/" target="_blank">Meetup.com</a></strong> find a crochet meetup group in your area to discuss anything crochet or start a crochet club in your own neighbourhood.</span></td>
</tr>
<tr>
<td valign="top"><a href="http://www.yarndex.com/home.cfm" target="_blank"><img src="images/crochetlinksimages/yarndex.gif" alt="YarmDex" width="72" height="72" longdesc="images/crochetlinksimages/yarndex.gif" onmouseover="MM_effectAppearFade(this, 500, 75, 100, false)" /></a></td>
<td width="150" valign="top"><span class="style11"><strong><a href="http://www.yarndex.com/home.cfm" target="_blank">Yarndex</a> </strong>is the ultimate yarn resource. It features profiles of over 5,000 yarns so you can find a yarn substitute for any fibre. </span></td>
<td width="72" valign="top"><a href="http://www.crochet.org/index.html" target="_blank"><img src="images/crochetlinksimages/guildofamerica.gif" alt="Crochet Guild of America" width="72" height="72" longdesc="images/crochetlinksimages/yarndex.gif" onmouseover="MM_effectAppearFade(this, 500, 75, 100, false)" /></a></td>
<td width="150" valign="top"><span class="style11"><strong><a href="http://www.crochet.org/index.html" target="_blank">Crochet Guild of America</a></strong> is a non-profit educational organisation dedicated to preserving and advancing the art of crochet.</span></td>
<td valign="top"><a href="http://www.snugglesproject.org/project-overview/" target="_blank"><img src="images/crochetlinksimages/snuggles.gif" alt="Snuggles Project" width="72" height="72" longdesc="images/crochetlinksimages/yarndex.gif" onmouseover="MM_effectAppearFade(this, 500, 75, 100, false)" /></a></td>
<td valign="top"><span class="style11"><strong><a href="http://www.snugglesproject.org/project-overview/" target="_blank">Snuggles Project</a></strong> facilitates hugs for homeless animals. Donate a crocheted blanket to a local animal shelter and give a little creature comfort. </span></td>
</tr>
<tr>
<td valign="top"><a href="http://www.crochetme.com/" target="_blank"><img src="images/crochetlinksimages/crochetme.gif" alt="Crochet Me" width="72" height="72" longdesc="images/crochetlinksimages/yarndex.gif" onmouseover="MM_effectAppearFade(this, 500, 75, 100, false)" /></a></td>
<td width="150" valign="top"><span class="style11"><strong><a href="http://www.crochetme.com/" target="_blank">Crochet Me</a></strong> is a crochet community from Interweave. Browse blogs, forums, project galleries and tips. </span></td>
<td width="72" valign="top"><a href="http://www.crochettoday.com/" target="_blank"><img src="images/crochetlinksimages/crochettoday.gif" alt="Crochet Today" width="72" height="72" longdesc="images/crochetlinksimages/yarndex.gif" onmouseover="MM_effectAppearFade(this, 500, 75, 100, false)" /></a></td>
<td width="150" valign="top"><span class="style11"><strong><a href="http://www.crochettoday.com/" target="_blank">Crochet Today Magazine</a></strong> is for crocheters who want chich fashion with easy styling. Also great for crochet insights and tips.</span></td>
<td valign="top"><a href="http://www.motherbearproject.org/" target="_blank"><img src="images/crochetlinksimages/motherbear.gif" alt="Mother Bear Project" width="72" height="72" longdesc="images/crochetlinksimages/yarndex.gif" onmouseover="MM_effectAppearFade(this, 500, 75, 100, false)" /></a></td>
<td valign="top"><span class="style11"><strong><a href="http://www.motherbearproject.org/" target="_blank">Mother Bear Project</a> </strong>gives gifts of love in the form of teddy bears to children with HIV/AIDS in emerging nations. 50,000 bears donated to date.</span></td>
</tr>
<tr>
<td valign="top"><a href="http://www.tnna.org/NeedleArts/Crochet/tabid/105/Default.aspx" target="_blank"><img src="images/crochetlinksimages/needleartsassoc.gif" alt="The NeedleArts Association" width="72" height="72" longdesc="images/crochetlinksimages/yarndex.gif" onmouseover="MM_effectAppearFade(this, 500, 75, 100, false)" /></a></td>
<td width="150" valign="top"><span class="style11"><strong><a href="http://www.tnna.org/NeedleArts/Crochet/tabid/105/Default.aspx" target="_blank">The National NeedleArts Association</a></strong> is an international trade association for the needle arts industry.</span></td>
<td width="72" valign="top"><a href="http://www.crochet-world.com/" target="_blank"><img src="images/crochetlinksimages/CrochetWorld.gif" alt="Crochet World Magazine" width="72" height="72" longdesc="images/crochetlinksimages/yarndex.gif" onmouseover="MM_effectAppearFade(this, 500, 75, 100, false)" /></a></td>
<td width="150" valign="top"><span class="style11"><strong><a href="http://www.crochet-world.com/" target="_blank">Crochet World Magazine</a></strong> offers techniqes and patterns with complete directions for all types of crochet by DRG Publishing.</span></td>
<td valign="top"><a href="http://www.craftyarncouncil.com/" target="_blank"><img src="images/crochetlinksimages/yarncouncil.gif" alt="Craft Yarn Council of America" width="72" height="72" longdesc="images/crochetlinksimages/yarndex.gif" onmouseover="MM_effectAppearFade(this, 500, 75, 100, false)" /></a></td>
<td valign="top"><span class="style11"><strong><a href="http://www.craftyarncouncil.com/" target="_blank">Craft Yarn Council of America</a> </strong>represents industry yarn companies, accessory manufacturers, publishers <br />
and consultants.</span></td>
</tr>
<tr>
<td colspan="2" valign="top"><a href="CrochetResources.html"><img src="images/resourceshome.gif" alt="Resources Home" width="132" height="25" longdesc="images/resourceshome.gif" onmouseover="MM_effectAppearFade(this, 500, 75, 100, false)" /></a></td>
<td valign="top"> </td>
<td valign="top"> </td>
<td valign="top"> </td>
<td valign="top"> </td>
</tr>
</table>
</div>
</div>
<!-- InstanceEndEditable -->
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
<!-- InstanceEnd --></html>

Note: This post was edited by forum moderator on 03/17/2011 on 6:01 AM PT


Reply
Report offensive post
Email to friend

Re: table

by Kees_B Moderator - 3/16/11 3:21 PM

In Reply to: Table not viewing properly in IE on PC by nattergab

I didn't fully research it, but Firebug (in Firefox) and the IE Developer Toolbar (F12 in IE8) showed the problem.

The cells in upper row are 82, 406, 82, 176 pixels wide in Firefox (including the padding).
In IE the big cell (spanning 3 columns) is 474 pixels wide, leaving only 108 for the last cell. So that's not wide enough for the text, so the row becomes higher. So the total table becomes higher and falls out of the assigned space.

So the problem is with the colspan. And that can be traced back to the 3 bottom lines, where the 3 middle pictures are in a cell that is too wide for some reason. You clearly see the problem if you move the mouse across the pics in the IE Development Toolbar.

Using these tools you'll find it, I'm sure.

Kees


Was this reply helpful? (0)   (0)

Staff pick

Reply
Report offensive post
Email to friend

Re: table - New!

by nattergab - 3/17/11 11:21 PM

In Reply to: Re: table by Kees_B Moderator

Thanks Kees. I've tried a couple things with this advice (albeit limited due to a lack of time at the moment). I'll retry again tomorrow. I think I'm going to build the table again from scratch, paying close attention to specified cell and table widths. Thanks for the advice.


Was this reply helpful? (0)   (0)

Staff pick

Reply
Report offensive post
Email to friend

Don't use tables

by Crailsheim7180 - 3/22/11 3:00 AM

In Reply to: Re: table - New! by nattergab

They are meant to display tabular data, not to be used for layout -instead, use an external stylesheet to format and position your site.


Was this reply helpful? (0)   (0)

Staff pick

Reply
Report offensive post
Email to friend

my reply

by Patronage187 - 6/8/11 12:34 AM

In Reply to: Table not viewing properly in IE on PC by nattergab

ok men, you code seem ok, the problem tho men is that each individual browser has specific settings on displays ok men. So try loading you table in a different browser and see if that works ok men then if you still has problem there must be something wrong with you code men. i am not expert i just have taken two classes in web development men, and i have a general idea so dont go holding me to any idea ok men. so liek that was my reply answer to you question men. you can choose to use my advice the way you liek mkay men. so just make sure that whatever you decide to do is all up to you i jes made a forum post ok men. just like typing stuff in this posting box thing..a...mah..jig. so liek have fun and good luck men, you keep up coding dont get discouraged over this one little thing men, and remember whatever you decided is your decision men. with no outside influence what so ever ok men. liek i dont really have that much experience in coding with html ive just taken two classes over it ok men, but you already know that about me men since i told you already men. so have nice day men.


Was this reply helpful? (0)   (0)

Staff pick

Reply
Report offensive post
Email to friend

Forum Icon Legend

  • UnreadUnread
  • ReadRead
  • Locked threadLocked thread
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  • ModeratorModerator
  • CNET StaffCNET Staff
  • Samsung StaffSamsung Staff
  • Norton Authorized Support TeamNorton Authorized Support Team
  • AVG StaffAVG Staff
  • avast! Staffavast! Staff
  • Webroot Support TeamWebroot Support Team
  • Acer Customer Experience TeamAcer Customer Experience Team
  • Windows Outreach TeamWindows Outreach Team
  • DISH staffDISH staff
  • Dell StaffDell Staff
  • Intel StaffIntel Staff
  • QuestionQuestion
  • Resolved questionResolved question
  • General discussionGeneral discussion
  • TipTip
  • Alert or warningAlert or warning
  • PraisePraise
  • RantRant

You are e-mailing the following post: Post Subject

Your e-mail address is used only to let the recipient know who sent the e-mail and in case of transmission error. Neither your address nor the recipient's address will be used for any other purpose.

Sorry, there was a problem emailing this post. Please try again.

Submit Email Cancel

Thank you. Sent email to

Close

Thank you. Sent email to

Close

You are reporting the following post: Post Subject

If you believe this post is offensive or violates the CNET Forums' Usage policies, you can report it below (this will not automatically remove the post). Once reported, our moderators will be notified and the post will be reviewed.

Offensive: Sexually explicit or offensive language

Spam: Advertisements or commercial links

Disruptive posting: Flaming or offending other users

Illegal activities: Promote cracked software, or other illegal content

Sorry, there was a problem submitting your post. Please try again.

Submit Report Cancel

Your message has been submitted and will be reviewed by our staff. Thank you for helping us maintain CNET's great community.

Close

Your message has been submitted and will be reviewed by our staff. Thank you for helping us maintain CNET's great community.

Close

You are posting a reply to: Post Subject

The posting of advertisements, profanity, or personal attacks is prohibited. Please refer to the CNET Forums policies for details. All submitted content is subject to CBS Interactive Site Terms of Use.

You are currently tracking this discussion. Click here to manage your tracked discussions.

If you're asking for technical help, please be sure to include all your system info, including operating system, model number, and any other specifics related to the problem. Also please exercise your best judgment when posting in the forums--revealing personal information such as your e-mail address, telephone number, and address is not recommended.

Sorry, there was a problem submitting your post. Please try again.

Sorry, there was a problem generating the preview. Please try again.

Duplicate posts are not allowed in the forums. Please edit your post and submit again.

Submit Reply Preview Cancel

Thank you, , your post has been submitted.

> Click here to view your post. > Manage your tracked discussions. > Track this discussion. Close

Thank you, , your post has been submitted and will appear on our site shortly.

Close