• I am experiencing a table cell alignment problem in Mozilla that I am not seeing in MSIE.

    I tested a copy of index.php from my theme by viewing it as a local file on my computer in Mozilla but I was unable to reproduce the errors on my local PC. I also linked it to a local copy of style.css, so it can’t be the styles that’s causing the problem. It’s a real mystery why it’s only effecting Mozilla and not MSIE. I am having this problem with 2 different blogs where I am using embedded table codes.

    http://www.powerscanpc.com/blog

    http://www.clean-credit.org/blog

Viewing 12 replies - 1 through 12 (of 12 total)
  • Have you removed all margin and padding values for those images?

    Thread Starter netdetective

    (@netdetective)

    vkaryl,
    What if they are set to “0” ?

    <table border=”0″ cellpadding=”0″ cellspacing=”0″ width=”100%”>

    I had a similar problem with table cells on a website I was prototyping for my company.

    It turned out that on Firefox this kind of tag ‘<td height=”7″ ‘, left a minutely small gap in the table rows (making the assembled picture fragment) when compared to IE6, which left no gap.

    I reduced the number slightly, IE6 didn’t seem to care and Firefox was happy, but I am not sure if that has anything to do with your problem or not….

    That’s on the table. I said “images”. In other words the tags labeled “img” – the images in the table cells in other words.

    Thread Starter netdetective

    (@netdetective)

    Opps – images.

    You mean like header.jpg” border=”0″ height=”151″ width=”780″> I don’t see any margin and padding values for the images. Maybe I’m looking in the wrong place.

    Here’s an actual snippet from my code:

    <table border=”0″ cellpadding=”0″ cellspacing=”0″
    width=”780″>
    <tbody>
    </tbody><tbody>
    <tr>
    <td width=”100%”><img src=”index_files/header.jpg”
    border=”0″ height=”151″ width=”780″></td>
    </tr>

    No, I mean in your stylesheet, you may have some margin and padding set on “img” selectors. Look for an element similar to this:

    img {
    margin:*px;
    padding:*px;
    }

    where * equals some integer. Those margin and padding lines may have more than one number listed. For troubleshooting, you might want to change them to:

    margin:0;
    padding:0;

    to see if that will fix your lines.

    Other than that, I really can’t help you – I don’t DO tables for layout like that….

    Thread Starter netdetective

    (@netdetective)

    I found this:

    img.alignright
    {
    padding: 4px;
    margin: 0 0 2px 7px;
    display: inline;
    }

    img.alignleft
    {
    padding: 4px;
    margin: 0 7px 2px 0;
    display: inline;
    }

    If you don’t use table layouts to put in complex page designs, how do you achieve this? Do you use CSS layers instead of tables?

    The only reason I used an embedded table layout is because I thought that would be an easy quick way to achieve what I want, but that assumption is sure proving wrong.

    I use css and divs to lay out pages. In fact, 99% of the themes you find for wp aren’t based on tables. I don’t use tables for anything but tabular data…. but that’s just moi, you know.

    Since I haven’t used tables for layout for several years now, it’s really difficult for me to sort out what you need to tweak.

    In the table cells with the images, where the problems appear to be, do you use those “alignleft” and “alignright” calls? If not, then those aren’t your problem.

    Hmmm. Now that I looked back at your post above with some of the table code, you have this in there, which might cause some of the problem:

    <tbody>
    </tbody><tbody>

    Empty tagsets can sometimes be problematic…. try chasing the empties, delete, and see if that helps. That set should probably show another </tbody> after some of the input….

    So you should try deleting (in the listed example – don’t know how they might look if there are other ones):

    <tbody>
    </tbody>

    and leave the <tbody> opening tag on the second line.

    Thread Starter netdetective

    (@netdetective)

    I was completely unaware of the empty <tbody> tags. I removed them but that didn’t fix the problem.

    Maybe I could try converting the table code into a css layer code in Dreamweaver. Table codes appear to be problematic in WordPress. It’s probably a compatibility problem.

    Thread Starter netdetective

    (@netdetective)

    I converted the entire table code into <div css layers using Dreamweaver then copied that code into index.php at the Theme Editor, and while that finally solved the spacing problem, there is however now a new problem that’s even worse. It seems my new layer code is completely covering over – hiding the entire top portion of the page including the blog heading, search box and links.

    http://www.powerscanpc.com/blog

    Isn’t there a special code that prevents the overlapping of css layers on top of other content on the page? If I can just solve that, my problem is cured.

    Thread Starter netdetective

    (@netdetective)

    Somebody in another forum thread explained to me in detail how to fix my problem. The solution worked great. Here’s the link to the entire thread:

    http://forums.about.com/n/pfx/forum.aspx?nav=messages&tsn=1&tid=8309&webtag=ab-webdesign

    Fred

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Baffling table cell alignment problems with Mozilla browser’ is closed to new replies.