Solved

unable to increase size of horizontal list item using css

Posted on 2008-10-02
3
323 Views
Last Modified: 2013-11-19
I'm trying to make these hover buttons side by side like in a horizontal menu but the buttons won't seem to get bigger even if I fix their height and width
.button li{
display: inline;
background-repeat: no-repeat;
}
 
.button li a{
background-color: #CCCCCC;
/*background-image: url(normal image path);*/
background-repeat: no-repeat;
width: 100px;
height: 50px;
}
 
.button li a:hover{
background: none;
}
 
 
 
 
<div align="center">
<ul class="button">
<li><a href="#test">My link</a></li>
<li><a href="#test">My link</a></li>
</ul>
</div>

Open in new window

0
Comment
Question by:MeridianManagement
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 5

Expert Comment

by:jericotolentino
ID: 22630996
I'm not really sure what you're trying to do, but you can try:

padding: 10px;

if it works for you.
0
 
LVL 2

Author Comment

by:MeridianManagement
ID: 22631041
I want to make horizontal hover buttons. Padding 10 doesn't work because it makes the LI bigger but the gray part where the links are still looks small.
0
 
LVL 1

Accepted Solution

by:
santoshrajan earned 500 total points
ID: 22631113
Set the width and height for 'li' css and remove it fro where it is now.
.button li{
display: inline;
background-repeat: no-repeat;
width: 100px;
height: 50px;
}
 

Open in new window

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
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…

733 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