Problems using 2 images next to each other horizontally

Soldato
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:

problem7po.jpg


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? :(
 
Soldato
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:
Soldato
OP
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
 
Soldato
Joined
3 Aug 2005
Posts
4,534
Location
UK
According to this document, the display attribute value inline-block is as follows:
This value causes an element to generate a block box, which itself is flowed as a single inline box, similar to a replaced element. The inside of an inline-block is formatted as a block box, and the element itself is formatted as a replaced element on the line.
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:
Soldato
OP
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! :)
 
Back
Top Bottom