Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

CSS Inline vs Block Problem

Posted on 2009-05-06
5
Medium Priority
?
105 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 43

Accepted Solution

by:
David S. earned 2000 total points
ID: 24318459
0
 
LVL 43

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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

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 tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

963 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