Support » Themes and Templates » Footer border help, in IE.

  • Hola all. I’m trying to tweak the footer which came with the theme I’m using. Original code looks like so (note, I’ve substituted square brackets around the anchor tags, otherwise the code goes funny in this forum):

    —————-
    <hr />
    <div id=”footer”>
    <p align=”left” style=”margin-bottom: -20px; font-size: 12px; font-weight:bold;”>| Copyright © <?php echo date(“Y”).” “; ?>[a href=”<?php bloginfo(‘url’); ?>”]<?php bloginfo(‘name’); ?>[/a] |

    <p align=”right” style=”margin-bottom: -10px; margin-top: -20px;”>Theme by [a href=”http://www.sr-ultimate.com/” title=”<?php _e(‘Sreejith R Krishnan’); ?>”]Sreejith[/a], [a href=”http://www.gfxedit.com/” title=”<?php _e(‘Theme by GFXedit.com’); ?>”]GFXedit.com[/a] | Powered by [a href=”http://wordpress.org/” target=”_blank” title=”<?php _e(‘Powered by WordPress, state-of-the-art semantic personal publishing platform.’); ?>”]WordPress[/a] |</div>
    ————–

    I’d like to add a line break ([br /]) right before the words “Powered by” — so the text on the left half of the div goes for one line, and the text on the right goes for two (“Powered by WordPress” appearing on the second line). But when I add a break, two top borders appear in IE (one border above the top line, and another border above the second line). I have a feeling the problem lies with the margin settings, but I could be wrong. Anyway, the CSS is as follows:

    ———
    #footer {
    margin:0;
    padding: 1px 20px 15px;
    border-top: 1px solid #ff0000;
    clear: both;
    font-size: 0.8em;
    color: #ffffff;
    background: #cc9966;
    text-align:center;
    }
    #footer a {
    border:none;
    color:#7A7636;
    }
    ——————

    I’ve tried messing around with the margins, but no joy so far. (Works fine in Firefox, however.) Any thoughts? The site’s here, if you want to see what I mean: http://www.beingcharliekaufman.com/wordpress

    –Mick
    (PS–I realise the link colours are hard to see; haven’t finished designing the site)

Viewing 4 replies - 1 through 4 (of 4 total)
  • I noticed in the source for the page that the P element has a style attribute:

    <p align="right" style="margin-bottom: -10px">

    What happens if you remove that?

    Removing “margin-bottom: -10px”, the extra border remains, and the footer becomes slightly taller.

    Hmm, ok, I’ve seen a bug about something like this…

    From what I can tell its working on the P element like it is an inline element, so try making it block:

    #footer p {
    display : block;
    }

    Hmm, “display: block” doesn’t seem to make a difference.

    This isn’t a major drama — I could stick the footer on a single line and it wouldn’t really bug me. But since my original intent doesn’t seem to be working, it’s become a challenge: Man vs. Bill Gates and co.

    🙂

    –Mick

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Footer border help, in IE.’ is closed to new replies.