By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,867 Members | 1,964 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,867 IT Pros & Developers. It's quick & easy.

Correctly define WIDTH in css for inline elements

P: n/a
I'm trying to use CSS for menu buttons, but am unsure how to specify
the width of blocks when displaying them inline.

At the moment I am using SPAN tags, and IE renders the WIDTH property,
but I understand that this is not standard CSS, and Mozilla ignores
width on these inline tags.

I've tried various alternatives with DIVs etc, but that always seems
to render with line breaks after each one - what I want is to show the
menu as it currently displays in IE, but for it to work in Mozilla
too.

This is the example code I am working with - it displays all the
buttons with equal WIDTH in IE (which is what I want), but not in
Mozilla:

--
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Test Website</title>
<style>
.navbutton {
font-weight: bold;
text-align: center;
margin-bottom: 3px;
margin-top: 3px;
}

.navbutton a {
padding: 4px;
text-decoration: none;
width: 8em;
color: #224059;
background-color: #b5c9e2;
border-top: 2px #cce3ff solid;
border-left: 2px #cce3ff solid;
border-bottom: 2px #31557f solid;
border-right: 2px #31557f solid;
}

.navbutton a:hover {
background-color: #99aabf;
border-top: 2px #31557f solid;
border-left: 2px #31557f solid;
border-bottom: 2px #cce3ff solid;
border-right: 2px #cce3ff solid;
}
</style>
</head>

<body>

<span class="navbutton"><a href="buttons.htm">News</a></span>
<span class="navbutton"><a href="buttons.htm">Diary</a></span>
<span class="navbutton"><a href="buttons.htm">Library</a></span>
<span class="navbutton"><a href="buttons.htm">Join Us</a></span>
<span class="navbutton"><a href="buttons.htm">Contacts</a></span>

</body>
</html>
Jul 20 '05 #1
Share this Question
Share on Google+
5 Replies


P: n/a
Colin Jones wrote:
I'm trying to use CSS for menu buttons, but am unsure how to specify
the width of blocks when displaying them inline.
As you learned, you cannot specify width of inline elements.
At the moment I am using SPAN tags, and IE renders the WIDTH property,


Again, as you know, IE is wrong with regard to the spec. Would
floating div elements work?

--
Brian
follow the directions in my address to email me

Jul 20 '05 #2

P: n/a
Colin Jones wrote:
I'm trying to use CSS for menu buttons, but am unsure how to specify
the width of blocks when displaying them inline.
In current versions of CSS - you can't. I believe that inline-blocks appear
in CSS 2.1
At the moment I am using SPAN tags, and IE renders the WIDTH property,
This is a mistake
but I understand that this is not standard CSS, and Mozilla ignores correctly ^ width on these inline tags.

I've tried various alternatives with DIVs etc, but that always seems
to render with line breaks after each one - what I want is to show the
This is why we have the magic of float.
menu as it currently displays in IE, but for it to work in Mozilla
too.


http://css.maxdesign.com.au/listamatic/ - look at the horizontal section.

--
David Dorward http://dorward.me.uk/
Jul 20 '05 #3

P: n/a
se*****@hotmail.com (Colin Jones) wrote in message news:<5e*************************@posting.google.c om>...
I'm trying to use CSS for menu buttons, but am unsure how to specify
the width of blocks when displaying them inline.


Use a table.
Jul 20 '05 #4

P: n/a

"Colin Jones" <se*****@hotmail.com> wrote in message
news:5e*************************@posting.google.co m...
I'm trying to use CSS for menu buttons, but am unsure how to specify
the width of blocks when displaying them inline.

At the moment I am using SPAN tags, and IE renders the WIDTH property,
but I understand that this is not standard CSS, and Mozilla ignores
width on these inline tags.

I've tried various alternatives with DIVs etc, but that always seems
to render with line breaks after each one - what I want is to show the
menu as it currently displays in IE, but for it to work in Mozilla
too.

This is the example code I am working with - it displays all the
buttons with equal WIDTH in IE (which is what I want), but not in
Mozilla:

--
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Test Website</title>
<style>
.navbutton {
font-weight: bold;
text-align: center;
margin-bottom: 3px;
margin-top: 3px;
}

.navbutton a {
padding: 4px;
text-decoration: none;
width: 8em;
color: #224059;
background-color: #b5c9e2;
border-top: 2px #cce3ff solid;
border-left: 2px #cce3ff solid;
border-bottom: 2px #31557f solid;
border-right: 2px #31557f solid;
}

.navbutton a:hover {
background-color: #99aabf;
border-top: 2px #31557f solid;
border-left: 2px #31557f solid;
border-bottom: 2px #cce3ff solid;
border-right: 2px #cce3ff solid;
}
</style>
</head>

<body>

<span class="navbutton"><a href="buttons.htm">News</a></span>
<span class="navbutton"><a href="buttons.htm">Diary</a></span>
<span class="navbutton"><a href="buttons.htm">Library</a></span>
<span class="navbutton"><a href="buttons.htm">Join Us</a></span>
<span class="navbutton"><a href="buttons.htm">Contacts</a></span>

</body>
</html>


Try using a list. Have a look at how I did it on www.cloughtonpc.org.uk

Jools
Jul 20 '05 #5

P: n/a
David Dorward <do*****@yahoo.com> wrote in message news:<bn*******************@news.demon.co.uk>...
Colin Jones wrote:
I'm trying to use CSS for menu buttons, but am unsure how to specify
the width of blocks when displaying them inline. .... menu as it currently displays in IE, but for it to work in Mozilla
too.


http://css.maxdesign.com.au/listamatic/ - look at the horizontal section.


Thanks - that site is really great, I'm sure I'll be able to work it
out from the examples on there.

Cheers!
Colin.
Jul 20 '05 #6

This discussion thread is closed

Replies have been disabled for this discussion.