Solved

CSS Inline vs Block Problem

Posted on 2009-05-06
5
100 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: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering 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

Title # Comments Views Activity
ASP.NET Content Page 3 51
How can I make the first part identical to the second ? 1 34
Google Tag Manager - Add Trigger Using Div class 22 54
HTML question 2 23
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
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 …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

735 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