WordPress.org

Ready to get started?Download WordPress

Forums

Image won't show ` (6 posts)

  1. mafiakitty
    Member
    Posted 7 years ago #

    Hi,

    I've been trying to fix this for quite sometime and I'm really hoping someone may be able to help me finally get it ...

    Bottom right, just below the footer strip I've an aimeg I'd like displayed but I can't get it to show at all~

    Link is here: http://filthygorgeousthings.com/index.php

    Css I'm using for that section is here:

    #curly {
    border: 0;
    background: url(images/footer-13.gif) bottom right no-repeat;
    text-align: right;
    clear: both;}

    Thanks in advance :)

  2. Samuel Wood (Otto)
    Tech Ninja
    Posted 7 years ago #

    Looking at the source code, I see several problems with the XHTML:

    The big one is a broken doctype at the top of the file. There's some kind of weird characters in it. It prevents validation and probably is the main cause of your problems.

    A whole lot of your attributes throughout the page are not in quotes. Like these:
    <html xmlns=http://www.w3.org/1999/xhtml>
    <link rel=stylesheet href=http://filthygorgeousthings.com/wp-content/themes/FGT/style.css type=text/css media=screen />
    <div id=content>
    And so on. This is unacceptable, *all* attributes must be quoted in XHTML.

    First, fix the doctype. Then fix the quotes. Then, after every change you make, be sure to validate your XHTML at http://validator.w3.org/ . It's amazing how many problems this solves with regards to page display issues.

  3. mafiakitty
    Member
    Posted 7 years ago #

    Thanks Otto42,

    All is validated now but I still can't seem to get that image to show ~` anything else I may try?

    Going to post my css below just in case ...

    Thanks again!

    body { text-align: center; font: normal 76% Verdana, Helvetica, sans-serif; background-color: #262626;}
    #container { width: 890px; text-align: left; margin: 0 auto; }
    #header { top:0px;}
    #top { width: 890px; height: 35px; border: 1px solid #000000; background-color: #333333;}
    #content { width: 517px; float: left; margin: 0px; background-color: #565656; border-left: 1px solid #000000; border-right: 1px solid #000000;}
    #sidebar { width: 370px; float: left; border-right: 1px solid #000000; border-bottom: 1px solid #000000; }
    #footer { width: 890px; height: 35px; border: 1px solid #000000; background-color: #333333; clear:both;}
    #curly {
    border: 0;
    background: url(images/footer-13.gif) bottom right no-repeat;
    padding-bottom: 30px;
    text-align: left;
    clear: both;
    font-family: arial, helvetica, sans-serif;
    font-size: 12px;}

  4. Samuel Wood (Otto)
    Tech Ninja
    Posted 7 years ago #

    Change this:
    background: url(images/footer-13.gif)

    to this:
    background: url('/images/footer-13.gif')

    That should fix it.

  5. mafiakitty
    Member
    Posted 7 years ago #

    Thank you again, it's getting there! :)

    Only problem now is the footer image is suppose to be on the right hand side instead of the left ~`

    This what I'm using for css now:

    #curly {
    border: 0;
    background: url('http://filthygorgeousthings.com/images/footer-13.gif') bottom right no-repeat;
    width: 375px;
    height: 155px;
    clear: both;}

    Thanks for your help ...

    J.

  6. Samuel Wood (Otto)
    Tech Ninja
    Posted 7 years ago #

    You're setting the width of the curly div to be 375px, which is the same as the width of the image. So the image *is* in the bottom right, it's just that the div is not where you think it is.

    Change the width: 375px; to width: 100%;

Topic Closed

This topic has been closed to new replies.

About this Topic