Table doesn't fit into content space, over laps into website background

  • Unknown's avatar
    kirstyfolan · Member ·

    I used a html table generator, and pasted it into wordpress, edited it a bit with colspan. The problem is that the table is overlapping on to the background of the actual website. http://www.kirstyfolan.wordpress.com you can see what I mean from that. Does anyone know how to fix it?
    Thanks
    Kirsty

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    timethief · Member ·

    The maximum displayed image width for the Quintus theme is 640 pixels. http://wpbtips.wordpress.com/2009/07/23/maximum-image-width/

  • Unknown's avatar
    thesacredpath · Member ·

    You are using a reactive designed theme which means the elements within the theme will react and change width and stuff depending on the width of the display they are being viewed on. Your table has a “static” width. Oil and water.

    Tables to not work well with reactive designed themes. If someone views your site on a smartphone, they whole thing will blow up. To see that all you have to do is grab the browser window and narrow it down and watch as you do.

    I can fix things, sort of, but it will always “blow up” if someone views it in a browser that is set under 640px in width, because none of the elements within the table, except for the text, will flow/wrap or resize with the changes in browser window width.

  • Unknown's avatar
    thesacredpath · Member ·

    Actually wait, no I can’t, because you do not have the custom design upgrade and therefore access to the CSS.

  • Unknown's avatar
    1tess · Moderator Emeritus ·

    This may be off, but I remember helping someone long ago with image widths (or was it divs???) defined as % rather than specific px—for variable width themes. Are those different from “reactive designed themes”? Also I don’t know if you can define table or td as %??

    Just a thought, and sorry that I can’t experiment with the idea: my laptop died and will be repaired (I hope) so I’m using borrowed access for a while here…

  • Unknown's avatar
    panaghiotisadam · Member ·

    @Kirsty: You need to do some serious pruning, because you’ve got various mistakes in the code, plus the whole thing is unnecessarily complicated.

    1)
    • background-color:ebe9d9 won’t work: should be background-color:#ebe9d9
    • width=”640″ border=”0″ cellspacing=”3″ cellpadding=”3″ are deprecated and don’t work.
    • You’ve got a stray closing p tag after the four badges, and a stray opening p tag before the audio player.
    • The italics close and reopen inside the word “pleasant”.
    • You’ve got a useless pair of strong tags before the player.
    • You’ve got this useless thing after the four badges: 

    <h2><span class="Apple-style-span" style="font-size:11px;font-weight:normal;"><br />
</span></h2>

    2)
    You don’t need a table inside a td tag for the four badges, and you don’t need a table at all for the whole thing. All you need is to enclose everything in a div with centering and bg color, and a table only for the section with the image. The coding of the whole page should be like that:

    <div style="text-align:center;background-color:#ebe9d9;padding:16px 10px;">

CODE FOR THE FOUR BADGES (ENCLOSED IN NOTHING)

<h2><em>QUOTE HERE</em></h2>

<table>
ETC ETC ETC (THE DATA / IMAGE / CONTACT TABLE)
</table>

<strong>The Train Song ETC ETC</strong>

SOUNDCLOUD SHORTCODE

<em>Next show ETC ETC</em>

</div>

    3)
    You can change the width of the soundcloud player, by writing the shortcode like that:
    [soundcloud height="60" width="400" url="URL HERE"]

    But there’s a problem with the contact form: as far as I can tell, you can’t limit the width of the e-mail field, so you’ll probably need to reconsider the total layout of things.

  • The topic ‘Table doesn't fit into content space, over laps into website background’ is closed to new replies.