1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Problems using 2 images next to each other horizontally

Discussion in 'HTML, Graphics & Programming' started by Cybertronic, 13 Apr 2006.

  1. Cybertronic

    Mobster

    Joined: 16 Dec 2003

    Posts: 2,697

    I'm having problems with putting my CSS and XHTML valid images on my website, it appears like this:

    [​IMG]

    This is my XHTML code:

    <div class="center_bottom_column_float_rigid">
    <hr/>
    <a class="css" href="http://jigsaw.w3.org/css-validator/" title="Valid CSS!"></a>
    <a class="xhtml" href="http://validator.w3.org/check?uri=referer" title="Valid XHTML 1.0 Transitional"></a>
    </div>


    and here's my CSS code:

    a.css
    {
    background: url("vcss.png") 0 0 no-repeat;
    display: block;
    margin-left: 300px;
    margin-right: auto;
    height: 31px;
    width: 88px;
    }

    a.xhtml
    {
    background: url("valid-xhtml10.png") 0 0 no-repeat;
    display: block;
    margin-left: 400px;
    margin-right: auto;
    height: 31px;
    width: 88px;
    }


    What am I doing wrong? :(
     
  2. Al Vallario

    Mobster

    Joined: 3 Aug 2005

    Posts: 4,534

    Location: UK

    Goodness knows why you've got a huge left margin, but the margin-left on a.xhtml is the problem. A tad difficult to explain, but margins don't overlap like that. If you set the margin to something more sane (10px maybe), it should be 10px to the right of a.css.

    As an extra note, you should really be putting text inside those anchor tags; it's more semantically correct and - although validation links are relatively unimportant - it's still good to have a fallback option if someone with an older browser stumbles across your site. I personally peddle the Phark Image Replacement technique for this purpose :)

    Edit: Er, can't be bothered to set up my own test enviornment to see if this is correct, but it's possible that I'm talking out of my bottom and it's actually the line display:block; which is causing the problem. Try changing that line to display: inline-block; if the above doesn't work ;)
     
    Last edited: 13 Apr 2006
  3. Cybertronic

    Mobster

    Joined: 16 Dec 2003

    Posts: 2,697

    Oops :o, I've positioned the pictures by using margin-right now. I've tried the link you provided, it doesn't seem to do anything for me :(

    I looked up the CSS properties of display and used display: inline; not display: inline-block; which it doesn't seem to exist :confused:. Using the inline statment, the image doesn't display at all :confused:. I'm new to XHTML and CSS as this is my first website :o
     
  4. Al Vallario

    Mobster

    Joined: 3 Aug 2005

    Posts: 4,534

    Location: UK

    According to this document, the display attribute value inline-block is as follows:
    Going on the basis that this value is the problem, I assume (Oh boy, do I sound uncertain or what? :p) it's the problem because block-level elements can't be placed alongside each other; that's what inline elements are for. However, inline elements can't be given fixed widths/heights (that's why it doesn't display). The value inline-block is a mix of both, giving the ability to use heights/widths and have elements placed alongisde each other. I'm not sure why so few people are familiar with it (you're not the only one!), but I've used it before and found it works in IE/Firefox/Opera etc. and complies with the XHTML Strict guidelines.

    Edit: Once you've changed that, it will reveal any possible margin conflicts. I'm beginning to doubt myself over whether they can be overlapped, but have a play around with that anyway!
     
    Last edited: 13 Apr 2006
  5. Beansprout

    Man of Honour

    Joined: 31 Jan 2004

    Posts: 16,316

    Location: Plymouth

    Why not just use the wonderful <img> tag :/
     
  6. Al Vallario

    Mobster

    Joined: 3 Aug 2005

    Posts: 4,534

    Location: UK

    That would be too easy ;)

    Plus the images are non-contextual, so it would be dirty to have them inline!
     
  7. xiphrex

    Wise Guy

    Joined: 21 Sep 2003

    Posts: 1,253

    Location: Leicester

    Are you not allowed to use a float?
     
  8. Cybertronic

    Mobster

    Joined: 16 Dec 2003

    Posts: 2,697

    I fixed it using float as suggested by xiphrex:

    a.css_valid
    {
    background: url("vcss.png") 0 0 no-repeat;
    display: inline;
    float: right;
    margin-right: 40px;
    height: 31px;
    width: 88px;
    }

    a.xhtml_valid
    {
    background: url("valid-xhtml10.png") 0 0 no-repeat;
    display: inline;
    float: right;
    margin-right: 5px;
    height: 31px;
    width: 88px;
    }


    It's a bit of a ghetto fix really as the a.xhtml_valid margin-right is also including the margin-right from a.css_valid unless there's a better way of doing it? :o

    It does work using <img> tags however I wanted to do it in CSS. The W3C CSS validator didn't like inline-block, using inline fixed that. It must be outdated :confused:.

    Thanks for all your help! :)