views:

298

answers:

3

Hello,

Unfortunaly this site we're developing has to be IE6 compatible. It contains a horizontal block style menu, but there's still one more problem with IE6.

I have the following code:

<html>
<head>
<style type="text/css">
a {
display: block;
width: 0px;
background-color: red;
}
</style>
</head>
<body>
<a href="#">This is a anchor tag</a>
</body>
</html>

Because of the spaces, it wraps every word on a new line. What do I need to do if I want it on a single line only?

Thanks!

A: 

Have you tried popping your anchor into a span or div?

runrunraygun
A: 

Well, don't set its width to 0 would be the cross-browser proper approach.

Use float: left instead, if you want the anchor to be displayed in block mode but not allocate 100% width.

When you use floats like that, you also need to make sure you clear them, to make them occupy space in their container:

<div>
    <a ... />
    <a ... />
    <div style="clear: both;"></div>
</div>
David Hedlund
The anchor tag already has float: left, but if I don't set it's width to 0 it automaticly resizes to 100%. It should, however, have the required with for the text.
Tijs Hendriks
it does not have float left from the code you've shown us, and it doesn't seem like it either, because an element that is floated does not automatically assume 100% width. for reference: http://jsbin.com/ozola/edit (click 'output' to see how that code is rendered)
David Hedlund
A: 

Add this css on the a element:

white-space: nowrap
Alsciende
Works perfectly, thanks!
Tijs Hendriks
that's really quite the hack, tho. setting width to 0 and forcing it to not wrap? i'd definitely go with not setting width *or* wrap and letting the browser allocate the required width to the anchor, based on its content.
David Hedlund