Spaces/Lines showing up on google chrome in my table- Help!

[leelal24652100]

I've been designing my website and just put it into Dreamweaver. It looks fine everywhere except Google Chrome. I've tried deleting my cache (which was messing up the presentation in Chrome before.) I've re-done the navigation three times and looked in Photoshop to make sure there weren't any extra spaces...no luck. I'm feeling pretty frustrated and am not very techie. Any suggestions?

Here is the code for the table

<td><table width="1183" border="0" cellspacing="0" cellpadding="0">

        <tbody>

          <tr>

            <td width="185" valign="top"><img src="images/1.gif" width="185" height="27" alt=""/></td>

            <td width="192" valign="top"><a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('2','','images/2ON.gif',1)"><img src="images/2.gif" alt="" width="192" height="27" id="2"></a></td>

            <td width="87" valign="top"><a href="AboutIsis.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('3','','images/3ON.gif',1)"><img src="images/3.gif" alt="" width="87" height="27" id="3"></a></td>

            <td width="140" valign="top"><a href="CommonQuestions.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('4','','images/4ON.gif',0)"><img src="images/4.gif" alt="" width="140" height="27" id="4"></a></td>

            <td width="168" valign="top"><a href="WhatPeopleAreSaying.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('5','','images/5ON.gif',1)"><img src="images/5.gif" alt="" width="168" height="27" id="5"></a></td>

            <td width="133" valign="top"><a href="PackagesAndPrices.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('6','','images/6ON.gif',1)"><img src="images/6.gif" alt="" width="133" height="27" id="6"></a></td>

            <td width="278" valign="top"><a href="Contact.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('7','','images/7ON.gif',1)"><img src="images/7.gif" alt="" width="278" height="27" id="7"></a></td>

          </tr>

        </tbody>

      </table></td>

[Jon Fritz]

There's nothing in your posted code that would cause "lines and spaces" so I'm thinking the problem lies elsewhere in your source. Without being able to see the entire code of the page, it's all guesswork.

My first guess will be...

Under strict doctypes, and html5, inline images are given a small amount of padding under them so they line up correctly with text. Essentially, allowing lower case letters with descenders (j, g, y, etc) to have some room so the image lines up with the rest of the words/letters (o, a, i, etc).

To fix the this, you can add a small bit of css for your images. Something like...

img {display:block}

...at the top of your css file will do the trick.

If that's not the problem, please post a link to your work in progress on a server that you have control over. Even if you just upload it temporarily, so we can see with our browsers what's happening, it makes troubleshooting your code much simpler.

[leelal24652100]

Thank you! I don't have a css style sheet because I did it all within the page. Here is the website:) Index.html

I'm grateful for your help!

[Nancy OShea]

Did you make this comp in Photoshop and export to HTML?  It sure looks that way.  Tables are rigid and won't work well in mobile & tablet devices.

Photoshop comps are not production-worthy web sites.  They are merely quick prototypes to show the client before you embark on the real challenge of building the site over in DW or Muse with HTML and CSS code.

My guess is you've never built a web site before and you're looking for shortcuts.  It that's the case, you might want to redo this in Muse.  MU is aimed at non-coders who like working in a visual workspace.    Dreamweaver is more advanced & requires fundamental coding skills.

Nancy

[leelal24652100]

Hiya Nancy,

I used to be a webdesigner and have built a fair amount of sites. Granted, it was about ten years ago. I know I'll need to change platforms in the future, and I did create the site in Photoshop. However, right now I just want to get the lines out before I go and learn an entirely new way of doing things:)

[Jon Fritz · Accepted solution]

I'm not seeing any real differences between Firefox and Chrome here...

Chrome:

Firefox:

Are you sure it isn't a sticky cache issue?

[leelal24652100]

That is VERY encouraging! I've deleted my cache and pretty much everything else 5 times now. Is there something else I should be doing? I would love to think I haven't just uploaded a website that looks unprofessional. I would do a little joy dance. Last time, like I said before, that was the problem.

[Jon Fritz]

Like Nancy says, it could be code errors.

Basically all browsers are programmed to essentially guess what you meant when they run into code issues in your html and css. How well they do that depends on the browser, version, device and platform and it can vary widely in just a dot release version difference.

Clean up the code as best you can using the link Nancy gave. Hopefully that will be enough to take care of it for you in whichever version/platform of Chrome you have.

Also, make sure your zoom level in Chrome is set to 100%. Increasing zoom past 100% can cause table based layouts to fly apart.

[leelal24652100]

Ok thank you! It looks like no one else is seeing these lines and I'm being forced into *css with everything. Ah how quickly things change:) Thank you for your help

[Nancy OShea]

Modern browsers are fussy about code errors.  Your page contains a significant number of them. 

Showing results for http://www.wakingtheseed.com/ - Nu Html Checker

No blame on you.   Photoshop generates outdated code.  Another reason to use PS for images only; not HTML.

Nancy

[leelal24652100]

Thank you Nancy:)

[Nancy OShea]

CSS has been around for a long time.   On the web, 10 years is an eon due to rapidly changing web technologies.

See Related Links:

HTML5 Introduction

CSS Introduction

CSS - Online Courses, Classes, Training, Tutorials on Lynda