Set Fixed Width Of Inline Element

[yosibeck]

My problem is this: In the program I am working on, I want to put a javascript sliderbar in the horizontal top menu. The top menu is a fixed positioned <div> with the menu items (select boxes, a help etc) contained in it.Problem is: the javascript bar is enclosed in <div>sSince a div by default causes a line break before and after, the sliderbar is not included as part of the other menu items, but is displayed under them.I tried to solve this in either of 2 ways: 1.by changing the divs around the bar into spans2.by adding a display:inline style to the div.In both methods indeed the slider bar is included into the bar as I wanted BUT I run into another problem that I can't find a solution to:The code (very simplified) looks like this:<div> // top menu... menu item...... menu item...<div style="display:inline; width:180px;background-image:url('sliderbox.gif')"> // the background pic with the slider box<img src="sliderbutton.jpg" ... and all kind of javascript to make the thing work ....> // the slider button that moves over the slider box</div></div>Now what happens is this. when the div is a block object, indeed it is displayed with 180px length and the 15px button moves left-right in it.However, when the div is made inline (or when span is used) as in the code above, the div/span with the backgroundpic (that is supposed to be 180 px)collapses to the length of the button that is contained in it (15px) and the "width:180px" is totally ignored.In the documentation it says indeed that an inline tag automatically takes the width of its content. But I don't want that.I can't find a way out. Either the div with the sliderbox background is displayed as it should (180px), but then the whole sliderbar is postioned on a line by itself, or I use an inline method as above, but then the div/span collapses to the size of the button pic that it contains.....QUESTION: Is there any way to make an inline span/div have a fixed width, larger than the object it contains???Thanks

[thescientist]

an inline element will not take a width; unless you make it block, which you have already tried. Maybe you should play more with the positioning instead. Could you supply a link or code?

[yosibeck]

an inline element will not take a width; unless you make it block, which you have already tried. Maybe you should play more with the positioning instead. Could you supply a link or code?

Here is the code from the javascript that displays the slider bar and buttton:

document.write('<div style="width:' + this.n_controlWidth + 'px;height:' + this.n_controlHeight + 'px;border:0; background-image:url(' + this.s_imgControl + ')" id="sl' + this.n_id + 'base">' +  '<img src="' + this.s_imgSlider + '" width="' + this.n_sliderWidth + '" height="' + this.n_sliderHeight + '" border="0" style="position:relative;left:' + this.n_pathLeft + 'px;top:' + this.n_pathTop + 'px;z-index:' + this.n_zIndex + ';cursor:pointer;visibility:hidden;" name="sl' + this.n_id + 'slider" id="sl' + this.n_id + 'slider" onmousedown="return f_sliderMouseDown(' + this.n_id + ')"/></div>');

the width of the div above is the width that the sliderbox should be (in my case 180px)In the html file the code for the top menu (that should include the slider bar inline) goes like this:

print '<div style="z-index:80;position:absolute;padding:2px;background-color:white;width:900px;height:25px;left:10px;top:1px;border:2px black solid">';...... menu item ............menu item.............the javascript reference to the sliderbar:?><script language="JavaScript">	var A_TPL = {		'b_vertical' : false,		'b_watch': true,		'n_controlWidth': 200,		'n_controlHeight': 20,		'n_sliderWidth': 15,		//'n_sliderHeight': 14,		'n_pathLeft' : 1,		'n_pathTop' : 1,		'n_pathLength' : 180,		's_imgControl': 'img/sldr3h_bg.gif',		's_imgSlider': 'img/sldr3h_sl.gif',		'n_zIndex': 1	}	var A_INIT = {				's_name': 'chosensize',		'n_minValue' : 5,		'n_maxValue' : 60,				'n_step' : 5	}	new slider(A_INIT, A_TPL);</script><?phpprint '</div>';

Hope this helps getting me further.Thanks.

[ShadowMage]

What about inline-block? Try setting display: inline-block on your div, see how that works.On second thought maybe you want to use a span instead. Someone (Ingolme?) told me that IE won't render block elements (div, p) as inline-blocks.