CSS - 3 Inline Horizontal Boxes.... Width Question

I'm having trouble getting the following to work

im = image

Code:

im im <div id = "controlText">Variable Length Text</div> im im

my style info

Code:

#controlText{
position:inline;
text-align:center
width:200px
}

I know that once I turn the div into an inline element I throw away the width which is what my problem seems to be.

What is happening is you click forward (these are calendar controls) one month and then the text is short and your mouse is now over the year forward button which you then accidently click. I want the div or whichever tag to alwasy have the same width no matter what the text.

Is there any other way to get this to work than multiple floated divs?

Okay i have been working on this for a while now, and i hate asking for help.. but i have given up on it.

Firstly i started using display:inline-block; which meant i could have a width so my hover over menu effect would work. But this did not work in IE7 which means it is useless to what i am doing.

So i then moved onto Display:inline; This worked fine, in both IE and Firefox, but the width cannot be set with this value. This value just wraps itself around the content. But i need to set a width to the Inline value.

Any help?


CSS:
Code:

#navcontainer ul{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

#navcontainer ul li { 
display: inline;
width: 65px;
height: 21px;
background: url("images/tabbg.gif") 0 0 no-repeat;
text-decoration: none;
text-align:center; 
}

#navcontainer ul li a{
display:inline;
width: 65px;
height: 21px;
background: url("images/tabbg.gif") 0 0 no-repeat;
text-decoration: none;
}

#navcontainer ul li a:hover{
background-position: -65px 0;
color:#FFFFFF;
}

html:
Code:

<div id="navcontainer">
<ul>
<li><a href="#">Milk</a></li>
<li><a href="#">Eggs</a></li>
<li><a href="#">Cheese</a></li>
<li><a href="#">Vegetables</a></li>
<li><a href="#">Fruit</a></li>
</ul>
</div> 

Also a link to the actual page is
http://www.therow2.com/adsense/zzzzzzzzzzzzzzz.php

Hi, can anybody help me stretch green buttons for Firefox just like they appear in IE? I'd greatly appreciate the help.

Please see the attached html.

for some reason when i declare a div as "display: inline", the width is ignored. as soon as i take display: inline out, the width goes to what i set it to.

Code:

#jobs_list{
	background-color: #ffe6c4;
	padding: 5px;
	clear: both;
	overflow: auto;
	width: 600px;
}
#jobs_list .heading{
	width: 200px;
	display: inline;
}
#jobs_list .title{
	font-weight: bold;
	text-align: left;
}
#jobs_list .company{
	text-align: center;
}
#jobs_list .location{
	text-align: right;
}

<div id="jobs_list">
	<div class="heading title">Title</div>
	<div class="heading company">Company</div>
	<div class="heading location">location</div>
</div>

Hi guys,

I am building a page with CSS and I'm running into some problems with the CSS buttons I'm trying to use. Right now I have a large box along the top of the page and want two rows of buttons inside of it. These text on these buttons will likely be changing on a semi-regular basis. So instead of using gif buttons made in a graphics program, I'm using CSS to create the buttons. Since each row will have multiple buttons, I first used the display:inline; item and it worked fine in IE. In FF however, the buttons lost their height and width. If I also used the float:left; it worked right, but the buttons were not centered. In looking for a solution, I discovered that inline items cannot use the height and width properties. Any ideas on how to get what I'm looking for?

I can't post a link, because this is an intranet page, but here is my relevant code...

CSS Code:
Original - CSS Code /*the main box which will contain the buttons*/ div#Main-buttons { width:96%; margin:2%; margin-top:10px; height:100px; padding-top:10px; background-color:#84C394; border:ridge medium #004500; } /*adjustments for FireFox*/ html>body div#Main-buttons { width:90%; margin:5%; margin-top:10px; height:100px; padding-top:0px; background-color:#84C394; border:ridge medium #004500; } /*class for individual buttons*/ div#buttons { width:100px; height:30px; margin:3px; float:left; background-color:#F7F3B5; border-style:solid; border-width:2px; border-color:#ffffff; line-height:1.6; display:inline; } a.buttonLinks:link {color:#000000; text-decoration:none;} a.buttonLinks:active {color:#000000; text-decoration:none;} a.buttonLinks:visited {color:#000000; text-decoration:none;}

  

  


 /*the main box which will contain the buttons*/


 div#Main-buttons {


     width:96%;


     margin:2%;


     margin-top:10px;


     height:100px;


     padding-top:10px;


     background-color:#84C394;


     border:ridge medium #004500;


     }


 /*adjustments for FireFox*/


 html>body div#Main-buttons {


     width:90%;


     margin:5%;


     margin-top:10px;


     height:100px;


     padding-top:0px;


     background-color:#84C394;


     border:ridge medium #004500;


     }


     


 /*class for individual buttons*/


 div#buttons {


     width:100px;


     height:30px;


     margin:3px;


     float:left;


     background-color:#F7F3B5;


     border-style:solid;


     border-width:2px;


     border-color:#ffffff;


     line-height:1.6;


         display:inline;


     }


  


 a.buttonLinks:link {color:#000000; text-decoration:none;}


 a.buttonLinks:active {color:#000000; text-decoration:none;}


 a.buttonLinks:visited {color:#000000; text-decoration:none;} 

HTML Code:
Original - HTML Code <div id="Main-buttons"> <a href="#" class="buttonLinks"><div id="buttons">Testing</div></a><a href="#" class="buttonLinks"><div id="buttons">Testing</div></a></div>

  
<div id="Main-buttons">
      <a href="#" class="buttonLinks"><div id="buttons">Testing</div></a><a href="#" class="buttonLinks"><div id="buttons">Testing</div></a></div>

Thanks in advance guys!

I am sure there is an obvious explanation but why does using display:inline in this class definition stop the height/width working? Remove it and the dimensions are preserved.

PHP Code:
 DIV.special_offer_middle {
    width: 100px;
    height: 20px;
     display: inline;
    border: 1px dashed white;
 } 

Hi there,

Is it possible to set a border's width? when I say width I mean it's horizontal width not height.

Many thanks

Hi

Is there a way to create a 100% width (liquid layout without table) Horizontal menu using <UL><LI>.

I searched Google, but i found only the menus aligned either towards left or middle. Not extending to full width.

When i give "width: auto" for LI then all the links get aligned towards the left. Or if i specify some particular width say 12.5% for each Li then when i make it to 800x600 screen its wrapping to second line.

how can i make list items that are in a horizontal list all the same width. I try adding the width attribute to it but it has no effect

Hi, is there anyway to make the horizontal menu on the top of the webpage fit the entire width of the screen along with the titlebar? I mean, irrespective of the number of menu items, the menu should be exactly as wide as the screen.

Thanks.

Is there any way to have horizontal list items automatically fill any given width?

for example, If I have 5 list items, I can set each width to 20% and the list will fill the width of the container, but if I don't set a width, then they collapse to the left.

the behavior I'm after is like a table. The 'old' way to create a horizontal list would be to create a table with one row and 5 cols. Setting the width of the table to 100% would make each cell 20% automatically. Any way to accomplish this in css without explicitly setting the width?

new to the world of css and now working on a shell for a website I'm doing.

here is the css
PHP Code:
 html, body{ 
 margin:0; 
 padding:0; 
 }
 
h1, h2, h3, h4, h5, h6 {
 color: #bf9060;
}

img {
    padding-bottom: 2px;
}
 
#pagewidth{ 
 width:100%; 
  min-width: 500px; 
  
} 
 
#header{ 
 height:88px; 
 width:100%; 
 background:#ccae8f; 
 background-image: 
 url("/images/pillowback3.jpg");
 background-repeat: repeat-x;
 }
#navcontainer
{
margin: 0;
padding: 0;
height: 25px;
width: 100%;
}

#navcontainer ul
{
border: 0;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;

}

#navcontainer ul li
{
display: block;
float: left;
text-align: center;
padding: 0;
margin: 0;
}

#navcontainer ul li a
{
background: #ffffff;
width: 125px;
height: 18px;
border: 1px solid #ccae8f;
padding: 0;
margin: 0;
color: #000000;
text-decoration: none;
display: block;
text-align: center;
font: normal 14px/22px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
}

#navcontainer ul li a:hover
{
color: #ffffff;
background: #806c59;
}

#navcontainer a:active
{
background: #806c59;
color: #ffffff;
}

#navcontainer li#active a
{
background: #c60;
border: 1px solid #c60;
color: #fff;
} 





and the list
PHP Code:
<div id="navcontainer">
            <ul id="navlist">
            <li><a href="/pillows.php" title="Everything you need for your pillow needs">Home</a></li>
            <li><a href="/build/index.php" title="Start here for the Best Pillows the net has to offer">Build</a></li>
            <li><a href="/samples/index.php" title="Pick up to 8 samples ">Samples</a></li>
            <li><a href="/products/index.php" title="See our full line of Products">Products</a></li>
            <li><a href="/about/index.php" title="Meet our staff. How PillowWorks works.">About</a></li>
            <li><a href="/contact/index.php" title="Contact us for any reason">Contact</a></li>
            </ul>
            </div> 





as you can see i'm using px to style the size of the elements, but that isn't very liquid

Gday CSS PPL,

Im still yet to test on other browers, but im using IE 6.0

while the explorer is full screen the width of my div is 100%

But when i resize the browser on the horizontal untill a horizontal scroll bar appear, and scroll to the right, the div cuts off where the scrolling begins,

div.banner {
background-image: url(../images/banner_repeat.gif);
width:100%;
height:163px;
text-align:center;
}

and yeah, the background image 'banner_repeat' stops repeating at that point.

any help would be great,

Thx in advance,

James

Hi,

Here is my problem: I have a horizontal css menu using a list. It is embedded within a table <td> element. The menu is floating to the left as I suppose is inteneded by the css code, but I want the whole list to be centered with respect to the <td> element. I put <td align=center> but that does not center the whole list. It is still flushed against the left side of the <td> element. Also, I want the entire list to cover the entire width of the <table>. How do I accomplish these tasks? I have searched on google without any success. thank you for your help in advance.

Here is the CSS code and Html code for your reference:

CSS:

Code:

<style type="text/css">

.horizontalcssmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.horizontalcssmenu ul li{
position: relative;
display: inline;
float: left;


}

/*Top level menu link items style*/
.horizontalcssmenu ul li a{
display: block;
width: 80px; /*Width of top level menu link items*/
#width: 95px;
_width: 95px;
padding: 2px 8px;
border: 0px solid #202020;
border-left-width: 0;
border-right-width: 0;
text-decoration: none;
/*background: url(http://asc2009.dreamhosters.com/menubg.gif) center center repeat-x;*/
color: white;
font: bold 13px Tahoma;
}


.horizontalcssmenu ul li a:visited{
color:white;
#color:white;
/*background: url(menubgover.gif) center center repeat-x;*/
}

.horizontalcssmenu ul li a:hover{
background: yellow;
color: blue;
#color: blue;
/*background: url(menubgover.gif) center center repeat-x;*/
}

HTML Code:

Code:

<table width="900" height="20" border="0" cellpadding="0" cellspacing="0" style="border-bottom:1px solid black;">
	<tr>

		<td background="menubg.jpg" align="center">
		
<div class="horizontalcssmenu" align="center">
<ul>

<li><a href="default.htm">Home</a></li> 
<li style="border-left:1px solid black"><a href="default.htm">About Us</a></li> 


<li style="border-left:1px solid black"><a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()">Products</a></li> 

<li style="border-left:1px solid black"><a href="default.htm">Downloads</a></li> 
<li style="border-left:1px solid black"><a href="default.htm">Service</a></li> 
<li style="border-left:1px solid black"><a href="default.htm">Requests</a></li> 
<li style="border-left:1px solid black"><a href="default.htm">References</a></li> 
<li style="border-left:1px solid black"><a href="default.htm">What's New</a></li> 
<li style="border-left:1px solid black"><a href="default.htm">Contact Us</a></li>

</ul>
</div>
		</td>
	</tr>
</table>

Please visit my site where the menu is currently hosted. the url is http://asc2009.dreamhosters.com You will see my problem. You will notice when you hover your mouse over the last item in the menu, you will notice that the hover color does not go the whole way to the end of the td element. the list is flush to the left of the td element I need it to cover the whole width of the table. any help would be very much appreciated.