Imagine Links

[JoeForts]

I'm trying to make your typical header with buttons. Thing is I want my images to be together, and I'm getting a space in between each links. How would I bring these together?

Here is the code I have.

<div class="menu">
<a href="home.html" />
<img src="../../images/1home.gif" width="104" height="42" border="0" />
</a>
</div>

[markbrown4]

It sounds like default margin and padding,

try adding the following to your CSS

a img { margin: 0; padding: 0; }

This will remove all the padding and margin from all linked images on your page.

[JoeForts]

Stil not working when I put it in the CSS.

[JoeForts]

.header
{
position:absolute;
top:0px;
left:138px;
width:747px;
height:77px;
background-image:url('header.gif');
}

.left
{
position:absolute;
top:77px;
left:138px;
width:111px;
height:42px;
background-image:url('left.gif');
}

.right
{
position:absolute;
top:77px;
left:771px;
width:114px;
height:42px;
background-image:url('/right.gif');
}

.menu
{
position:absolute;
top:77px;
left:249px;
width:522px;
height:42px;
}

.main
{
position:absolute;
top:119px;
left:138px;
width:747px;
height:374px;
background-image:url('/main.gif');
}



.footer
{
position:absolute;
top:493px;
left:138px;
width:747px;
height:58px;
background-image:url(/footer.gif');
}

That's the CSS an the bold part is where my buttons are.

[markbrown4]

Is there any chance of linking to your site?
I don't like the look of everything being absolutely positioned, I personally never use absolute positioning, saying that it does have it's uses though.
Perhaps we would be able to suggest an more easily maintainable solution.

Cheers,

[JoeForts]

I'm doing this site as a project for class and I'd have to give u my password to see it. It's basicaly done, all I need to do is put in content wich shoudn't be too hard. My only problem are the link images for navigation not sticking together.


What would you put instead of the absolute?

[markbrown4]

Regarding positioning, anything but.
I usually use the normal document flow with block level elements adding padding/margins to move the content to the correct position. When you need columns you simply float that column left or right and give it a set width or a percentage.

Actually you know what the problem is.. <a href="home.html" /> You don't need that closing / there.

If this doesn't fix it try setting the img to display: block;

[Raffles]

The problem is because there is whitespace between your <a> and <img> tags and between each <a> as well. The browser sees this whitespace and prints it. Even carriage returns count. I do this:

<div><!--
  --><a><img></a><!--
  --><a><img></a><!--
  -->and so on<!--
--></div>

[markbrown4]

I thought the white space issue was an Internet Explorer only bug, does this effect standards compliant browsers like Firefox?

[Raffles]

I believe so because it isn't a bug. The browser sees whitespace between inline-level elements and it (correctly) prints it. If you give display:block to the anchors and float them left, it won't be a problem either in FF or IE.

[Tyssen]

If you give display:block to the anchors and float them left, it won't be a problem either in FF or IE.

Better still, put all the anchors in a list.

[Kravvitz]

Yes, white-space between inline elements is handled differently from when it's between block-level elements. (The display property affects this.)

Tyssen is correct. You should use an unordered list (<ul>).

These three articles explain how to style lists.
http://www.alistapart.com/articles/taminglists/
http://css.maxdesign.com.au/listutorial/
http://www.webreference.com/programming/css_lists/

And this one explains a fix for a common IE bug:
White space bug revisited--the definitive fix