Solved

CSS Inline vs Block Problem

Posted on 2009-05-06
5
99 Views
Last Modified: 2013-07-30
I cannot get my buttons to display as anything but as a block. Any idea why this won't display as an inline element? Thanks!
#buttonAccounting, #buttonFood, #buttonEquipment, #buttonGalley, #buttonCabinSys,
#buttonPassenger, #buttonDisability, #buttonCoats, #buttonIFE, #buttonConnectingInfo
{
	display:inline;
	height: 175px;
	width: 175px;
}
 
#buttonAccounting
{
	background: url(../images/e4button_money_regular.png) no-repeat;
}
 
#buttonAccounting:active
{
	background: url(../images/e4button_money_pressed.png) no-repeat;
}
 
/************************************************** HTML ****************************************************/
 
<a href="pages/accounting.aspx" id="buttonAccounting" onmousedown="javascript:PageMethods.downClick(5, 0);" onmouseup="javascript:PageMethods.upClick(5, 0);"></a>

Open in new window

0
Comment
Question by:ckehoe
  • 2
5 Comments
 
LVL 13

Expert Comment

by:Brian Withun
ID: 24318442
It's inline for me.  I don't think I did anything particular to it...
<html>
<head>
<style>
 
#buttonAccounting, #buttonFood, #buttonEquipment, #buttonGalley, #buttonCabinSys,
#buttonPassenger, #buttonDisability, #buttonCoats, #buttonIFE, #buttonConnectingInfo
{
	display:inline;
	height: 175px;
	width: 175px;
    border: 1px solid #333;
}
 
#buttonAccounting
{
	background: url(EE_Badge.gif) no-repeat;
}
 
#buttonAccounting:active
{
	background: url(EE_Badge.gif) no-repeat;
}
 
</style>
</head>
<body>
 
<p> this is my 
<a href="pages/accounting.aspx" id="buttonAccounting" onmousedown="javascript:PageMethods.downClick(5, 0);" onmouseup="javascript:PageMethods.upClick(5, 0);">my link</a> button inline </p>
 
</body>
</html>

Open in new window

inline.jpg
0
 
LVL 42

Accepted Solution

by:
David S. earned 500 total points
ID: 24318459
0
 
LVL 42

Expert Comment

by:David S.
ID: 24318468
@bhwithun

In quirks mode, IE wrongly applies the width and height properties to inline elements.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39366294
This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

829 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question