css display: inline not working

Question

I am trying to display the each of the elements of 'headeri' in a horizontal manner, I've attached the js with it, if it's any help. I've tried to add the class and id name (both of them, in turn) to the css file using a tag and img tag (both of them, in turn), but to no avail.

var loaded = false;
function loadImages(){}
function react(img, plain){}

function loadImages()
{
img1plain = new Image(0,0);
img1plain.src = 'plain1.gif';
img1over = new Image(0,0);
img1over.src  = 'over1.gif';

img2plain = new Image(0,0);
img2plain.src = 'plain2.gif';
img2over = new Image(0,0);
img2over.src  = 'over2.gif';

img3plain = new Image(0,0);
img3plain.src = 'plain3.gif';
img3over = new Image(0,0);
img3over.src  = 'over3.gif';

loaded = true;
}

function react(img, plain)
{
	if (loaded)
		{
		if (plain) document[img].src = eval(img + "plain.src");
		else document[img].src = eval(img + "over.src");
		}
}

.headeri{
	
	display: inline-block;
}

<header>
	<A HREF="#top" class="headeri" onMouseOver="react('img1', false);return true" onMouseOut="react('img1', true);return true"><IMG SRC="plain1.gif" NAME="img1" WIDTH=150 HEIGHT=25 BORDER=0></A><BR>
	<A HREF="#top" class="headeri"onMouseOver="react('img2', false);return true" onMouseOut="react('img2', true);return true"><IMG SRC="plain2.gif" NAME="img2" WIDTH=150 HEIGHT=25 BORDER=0></A><BR>
	<A HREF="#top" class="headeri"onMouseOver="react('img3', false);return true" onMouseOut="react('img3', true);return true"><IMG SRC="plain3.gif" NAME="img3" WIDTH=150 HEIGHT=25 BORDER=0></A><BR>
</header>

you have <br> in your code that creates a new line break. Remove them from the code and you wont need display: inline-block; as an <a> is not a block item — Andrew
– Andrew, Commented Aug 4, 2016 at 10:48
Also your code looks strange being some All Caps and some Lower Case you should have all lower case code — Andrew
– Andrew, Commented Aug 4, 2016 at 10:50

Lalji Tadhani · Accepted Answer · 2016-08-04 10:50:20Z

Remove <BR> Tag

var loaded = false;
function loadImages(){}
function react(img, plain){}

function loadImages()
{
img1plain = new Image(0,0);
img1plain.src = 'plain1.gif';
img1over = new Image(0,0);
img1over.src  = 'over1.gif';

img2plain = new Image(0,0);
img2plain.src = 'plain2.gif';
img2over = new Image(0,0);
img2over.src  = 'over2.gif';

img3plain = new Image(0,0);
img3plain.src = 'plain3.gif';
img3over = new Image(0,0);
img3over.src  = 'over3.gif';

loaded = true;
}

function react(img, plain)
{
	if (loaded)
		{
		if (plain) document[img].src = eval(img + "plain.src");
		else document[img].src = eval(img + "over.src");
		}
}

.headeri{
	
	display: inline-block;
}

<header>
	<A HREF="#top" class="headeri" onMouseOver="react('img1', false);return true" onMouseOut="react('img1', true);return true"><IMG SRC="plain1.gif" NAME="img1" WIDTH=150 HEIGHT=25 BORDER=0></A>
	<A HREF="#top" class="headeri"onMouseOver="react('img2', false);return true" onMouseOut="react('img2', true);return true"><IMG SRC="plain2.gif" NAME="img2" WIDTH=150 HEIGHT=25 BORDER=0></A>
	<A HREF="#top" class="headeri"onMouseOver="react('img3', false);return true" onMouseOut="react('img3', true);return true"><IMG SRC="plain3.gif" NAME="img3" WIDTH=150 HEIGHT=25 BORDER=0></A>
</header>

TheThirdMan · Accepted Answer · 2016-08-04 10:49:22Z

0

Remove the <br> behind each of your <a> tags - those are where your line breaks come from, not the CSS.

Also, a elements default to inline display, so unless you need the block rendering (for example for margins), you can just use the default display by not setting it explicitly, and your links will be in one line.

answered Aug 4, 2016 at 10:49

TheThirdMan

1,5221 gold badge16 silver badges31 bronze badges

Comments

TheThirdMan · Accepted Answer · 2016-08-04 10:53:17Z

0

Please remove the br tags and check it again.

<header>
    <A HREF="#top" class="headeri" onMouseOver="react('img1', false);return true" onMouseOut="react('img1', true);return true"><IMG SRC="plain1.gif" NAME="img1" WIDTH=150 HEIGHT=25 BORDER=0></A>
    <A HREF="#top" class="headeri"onMouseOver="react('img2', false);return true" onMouseOut="react('img2', true);return true"><IMG SRC="plain2.gif" NAME="img2" WIDTH=150 HEIGHT=25 BORDER=0></A>
    <A HREF="#top" class="headeri"onMouseOver="react('img3', false);return true" onMouseOut="react('img3', true);return true"><IMG SRC="plain3.gif" NAME="img3" WIDTH=150 HEIGHT=25 BORDER=0></A>
</header>

edited Aug 4, 2016 at 10:53

TheThirdMan

1,5221 gold badge16 silver badges31 bronze badges

answered Aug 4, 2016 at 10:49

Kiran Khatri

928 bronze badges

Collectives™ on Stack Overflow

css display: inline not working

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related