CSS - Hiding Text With A Set Width For Ajax Menu

in my site text is appearing correctly in IE but it is hiding in the right site. the site is in N E P A L I language and english. Just below the poll in the site i could not arrange the table the content of table is also hidden in right side. I've tried by reducing the width of the table in the content but could not succeed. the url is janapukar . com.

Please suggest.

Hi all,

Simple issue - got a form with textboxes whose screen width will be less than the max width (for design and spacing purposes). However, I'd like the print stylesheet to make the entire contents of the textbox visible when they print.

A year or two ago, setting input{width: auto;} in the print stylesheet worked fine, but it seems the newer browsers (IE 6+. latest FF) do not support this method.

Any thoughts on how to do this?

Thanks,
AJ

Good Morning All,

Been having a slight problem with the visual in the screenshot below.

The blue line is our H2, and the purple one is our H3, however, as you can see, the underline spans the entire width of the column, not just underneith the text, which is our requirement.

***As i am not allowed to upload a url as a new user, the underline is as follows. With the text centre aligned.

text
-----------------------------------------------------------

rather than

text
------

and obviously by the css, the underline on the headers is a small image, repeated - x.


Please see relevant css information.

* (line 23)

{

margin-top: 0pt;

margin-right: 0pt;

margin-bottom: 0pt;

margin-left: 0pt;

padding-top: 0pt;

padding-right: 0pt;

padding-bottom: 0pt;

padding-left: 0pt;

}

h2, h3, h4, h5, h6 (line 101)

{

font-size: 1.2em;

font-weight: normal;

padding-bottom: 4px;

margin-top: 0.6em;

margin-right: 0pt;

margin-bottom: 0.8em;

margin-left: 0pt;

text-align: center;

}

.contentArea h2, #secondaryNavigation h2 (line 114)

{

background-color: transparent;

background-image: url("../images/h2_gradient_bg.gif");

background-repeat: repeat-x;

background-attachment: scroll;

background-position: left bottom;

color: #0066cc;

}


Many Thanks in advance.

Marc.

Problem solved.

Howdy,
k, the issue i'm having seems to be that IE is ignoring the width I have set for the right menu. It looks fine in everything else.

here's the page

here's the stylesheet

any help'd be greatly appreciated!

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.

Hi, I'm having a problem, I'm using the chunk of css code below to make a horizontal menu that I want to run across the 895 px #container that I've created. The menu fits perfectly in IE, but in firefox it overflows the last menu button the next line. How do I get the css menu to be the exact same width in firefox and IE??

Here's the css:

Code:

#snav ul

{
float:left;
width:100%;
padding:0px;
margin:0;

list-style-type:none;
}
a
{
float:left;
width:7.9em;
text-decoration:none;
text-align:center;
color:black;
background-color:#eed9ac;
padding:0.2em 0.6em;
border-right:1px solid black;
}
a:hover {background-color:#e7bb5b; text-decoration:underline; color:#9b2f1e}
li {display:inline}

Thanks for looking!

Hi, I'm very new, so please be gentle.

I don't know much about CSS but have been trying to make a drop down menu for my website. I managed to find the basics of what I wanted on a CSS site and know enough to have been able to tweak it (almost) to my requirements.

My problem is that the dropdown column widths are set and ideally I'd like them to adjust according to the amount of text which is to be displayed (I hope I'm making sense here), but I don't know how. I tried setting the width to automatic, but all that did was give me a huge column the width of my screen!

I've pasted the code and wonder if anyone would be good enough to tell me if it's possible to do what I want and if it is, could you point me in the right direction please?

Many thanks,

Alison

Quote:
.preload1 {background: url(three_1.gif);}
.preload2 {background: url(three_1a.gif);}

#nav {padding:0; margin:0; list-style:none; height:38px; background:#ffffff url(three_0.gif) repeat-x; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}

#nav li.top {display:block; float:left; height:38px;}

#nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#ffffff; text-decoration:none; font-size:15px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(three_0.gif);}

#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(three_0.gif) right top no-repeat;}

#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(three_0a.gif) no-repeat right top;}

#nav li:hover a.top_link {color:#6c3600; background: url(three_1.gif) no-repeat;}

#nav li:hover a.top_link span {background:url(three_1.gif) no-repeat right top;}

#nav li:hover a.top_link span.down {background:url(three_1a.gif) no-repeat right top;}

/* Default list styling */

#nav li:hover {position:relative; z-index:200;}

#nav li:hover ul.sub
{left:1px; top:38px; background: #FE9A2E; padding:5px; border:1px solid #fe9a2e; white-space:nowrap; width:145px; height:auto; z-index:300;}

#nav li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:145px; font-weight:normal;}

#nav li:hover ul.sub li a
{display:block; font-size:12px; height:18px; width:145px; line-height:18px; text-indent:5px; color:#FFFFFF; text-decoration:none;border:1px solid #fe9a2e;}

#nav li ul.sub li a.fly
{background:#FE9A2E url(arrow_over.gif) 135px 6px no-repeat;}

#nav li:hover ul.sub li a:hover
{background:#F5D0A9; color:#6C3600; border-color:#ffffff;}

#nav li:hover ul.sub li a.fly:hover
{background:#F5D0A9 url(arrow_over.gif) 135px 6px no-repeat; color:#6C3600;}

#nav li b {display:block; font-size:15px; height:18px; width:225px; line-height:18px; margin-bottom:3px; text-indent:6px; color:#ff6; border-bottom:1px solid #ff6; cursor:default;}

#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:145px; top:-4px; background: #fe9a2e; padding:3px; border:1px solid #F5D0A9; white-space:nowrap; width:225px; z-index:400; height:auto;}

#nav ul,
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

#nav li:hover li:hover a.fly,
#nav li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover li:hover a.fly
{background:#F5D0A9 url(arrow_over.gif) 130px 6px no-repeat; color:#6c3600; border-color:#fe9a2e;}

#nav li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li:hover li a.fly
{background:#fe9a2e url(arrow_over.gif) 130px 6px no-repeat; color:#FFFFFF; border-color:#fe9a2e;}

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.

I'm using the suckerfish drop down method to get ie6 to work.

For some reason, the drop down portion of the the menu pushes out to the right of its parent by about 26px.

I have #menu li ul {width:213px}

I've noticed that if I delete this width, Firefox and IE7 behave the same way as IE6 pushing the menu outside the parent and moving the elements of the page.

I'm having to use position:relative; left:-36px; padding-left:10px to get the sub menu to line up in the first place.

This all tells me that there is something forcing the sub menu to be wider than it should be, the difference being that in the later browsers, I can tell it to behave.

Here's the menu stylesheet:

Code:

#menu {
	width:860px;
	height:80px;
	position:relative; margin:auto;
	border:solid 1px #000; border-bottom:none;
	list-style:none;
	z-index:6000;
	}
#menu ul {
	list-style:none;
	padding: 0;
	margin: 0;
	float:left;
	}
#menu li.help, #menu li.resources, #menu li.about, #menu li.apply {
	margin: 0;
	height:80px;
	float:left;
	list-style:none;
	}
#menu li.help a, #menu li.resources a, #menu li.about a, #menu li.apply a {
	height:38px;
	width:215px;
	display:block;
	padding:12px 0px 0 0px;
	text-align:center;
	color:#fff;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:18px;
	font-variant:small-caps;
	background:url(../images/navigation.jpg) no-repeat;
	}
#menu li.apply a {
	background:url(../images/navigation.jpg) -645px 0 no-repeat;
	height:0; 
	overflow:hidden;
	padding-top:80px;
	}
#menu li.help a:hover, #menu li.resources a:hover, #menu li.about a:hover, #menu li.apply a:hover {
	text-decoration:none;
	height:38px;
	background:url(../images/navigation-hl.jpg) no-repeat;
	font-variant:small-caps;
	}
#menu li.apply a:hover {
	background:url(../images/navigation-hl.jpg) -645px 0 no-repeat;
	height:0; 
	overflow:hidden;
	padding-top:80px;
	}
body.he #menu li.help a, body.re #menu li.resources a, body.ab #menu li.about a, body.ap #menu li.apply a	{
	background:url(../images/navigation-hl.jpg) no-repeat;
	}
body.ap #menu li.apply a {
	background:url(../images/navigation-hl.jpg) -645px 0 no-repeat;
	}
	


#menu li ul {
	width:213px;
	display: none;
	z-index:7000;
	border:solid 1px #000; border-top:none;
	background:#bbbcef;
	}
#menu li.help ul li a, #menu li.resources ul li a, #menu li.about ul li a, #menu li.apply ul li a{
	background-image:none;
	color:#333;
	border-bottom:solid 1px #999;
	padding:5px 0 5px 10px;
	font-size:12px;
	height:auto;
	margin:0;
	text-align:left;
	position:relative; left:-36px;
	width:203px;
	}
#menu li.help ul li a:hover, #menu li.resources ul li a:hover, #menu li.about ul li a:hover, #menu li.apply ul li a:hover {
	background:#ffeecd; background-image:none;
	color:#000;
	border-bottom:solid 1px #999;
	padding:5px 0 5px 10px;
	font-size:12px;
	height:auto;
	position:relative; left:-36px;
	width:203px;
	}
#menu li.help:hover ul, #menu li.resources:hover ul, #menu li.about:hover ul, #menu li.over ul { 
	display: block; 
	}	

Hello, How can i create a fixed-width menu to the left with content to the right that fills up the rest of the page. ie, no auto-width, it needs to fill up all the way to the right edge.

So if you create a horizontal line <hr> in the content it will draw all the way to the right (except for some padding of course)

Like this pictu tinyurl.com/ydsr2ov

I found this code online and I'm trying to alter it slightly for what I need.

Code:

<html>
<head>
<style type="text/css">

body,html {

	padding: 0;
	margin: 10;
}

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

#navcontainer ul li {
	display: inline;
}

#navcontainer ul li a {
	text-decoration: none;
	padding: .2em 1em;
	color: #fff;
	background-color: #036;
}

#navcontainer ul li a:hover {
	color: #fff;
	background-color: #acf;
}

</style>
</head>
<body>

<div id="navcontainer">

<ul>
<li><a href="#">Content</a></li>
<li><a href="#">Photographs</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Estate</a></li>
</ul>

</div>
</body>

It gives a nice center-aligned horizontal CSS menu. What I'm wondering is: How do I make it so that the width of each of the blue boxes the links are in are the same width?
Say I want them all width: 180px; Where do I put that style so that it applies to all the links?

[On a related issue, the style sheet has 4 things related to #navcontainer. How does one know which one of these to put additional styles in?]

Thanks Much.
j 9

I tried to do this CSS drop down menu with 2 methods, but none of them work perfect.
The first method is this:
PHP Code:
#menu1main { /* Top drop down menu styles */
height : 31px;
display : block;
}

#menu1main a { /* Top drop down menu hover styles */
display : block;
color : #000000;
text-decoration : none; 
border : none;
background-repeat : no-repeat;
}

.menu1 .menu1list { /* Hide top drop down menu submenu */
display : none;
}

.menu1, .display { /* Top drop down menu top level styles */
float : left;
width : 110px;
text-align : center;
vertical-align : middle;
font-family : Comic Sans MS;
font-size : 10pt;
line-height : 31px;}

/* Top drop down menu submenu hover styles */
a.menu1b1lv1, a.menu1b1lv1:hover, a.menu1b1lv1:active { 
background-image : url('image/menu_banner_1.jpg');
background-position : 12px 50% ;
}

a.menu1b2lv1, a.menu1b2lv1:hover, a.menu1b2lv1:active { 
background-image : url('image/menu_banner_2.jpg');
background-position : 12px 50% ;
}

/* Top drop down menu submenu hover styles */
a.menu1lv2, a.menu1lv2:hover, a.menu1lv2:active { 
display : block;
text-decoration : none; 
border : none;
color : #000000;
text-indent : 16px;
text-align : left;
font-size : 8pt;
line-height : 20px;
width : 130px;
}

a.menu1lv2:hover, a.menu1lv2:active { 
background-image : url('image/menu_cube_1.gif');
background-position : 0% 100% ;
background-repeat : no-repeat;
}

a.menu1lv2:hover, a.menu1lv2:active, a.menu1b1lv1:hover, a.menu1b1lv1:active, a.menu1b2lv1:hover, a.menu1b2lv1:active { 
font-weight : bold;
} 




The HTML for this is:
Code:

<div id="menu1main">

<div class="menu1" 
  onmouseover="this.className='display'"
    onmouseout="this.className='menu1'">
        <a class="menu1b1lv1" href="">Intro</a>
        <div class="menu1list">
        <a class="menu1lv2" href="">Part 1 Title</a>
        <a class="menu1lv2" href="">Part 2 Title</a>
        <a class="menu1lv2" href="">Part 3 Title</a>
        </div></div>
<div class="menu1" 
  onmouseover="this.className='display'"
	  onmouseout="this.className='menu1'">
        <a class="menu1b2lv1" href="">Chapter 1</a>
        <div class="menu1list">
        <a class="menu1lv2" href="">Part 1 Long Title</a>
        <a class="menu1lv2" href="">Part 2 Long Title</a>
        <a class="menu1lv2" href="">Part 3 Long Title</a>
        </div></div>
</div>

The problem with this version is I can't change the width of the submenu, or else the second Chapter title will float to the right. So I tried the second method:
PHP Code:
 ul.top { /* Top drop down menu styles */
    display : block;
    padding : 0;
    margin : 0;
    border : none;
    font-family : Comic Sans MS;
    font-size : 10pt;
    text-align : center;
    vertical-align : middle;
}

#topnav li.topnav0 { /* Top drop down top level menu styles */
    position : relative;
    float : left;
    background-image : url('image/menu_banner_1.jpg');
    background-position : 50% 0% ;
    background-repeat : no-repeat;
    width : 110px;
    line-height : 31px;
}

#topnav li.topnav0 a { /* Top level link styles */
    color : #000000;
    text-decoration : none;
}
     
li.topnav0 a:hover { /* Top level hover styles */
    text-decoration : none;
    font-weight : bold;
}
     
#topnav ul.topnav1 a:hover { /* Drop down hover styles */
    text-decoration : none;
    background-image : url('image/menu_cube_1.gif');
    background-position : 0 50% ;
    background-repeat : no-repeat;
}

li.topnav0 ul.topnav1 {/* Drop down box style */ 
    display : none;
    background : #FFFFFF;
    padding : 0;
    margin : 0;
    position : absolute;
    top : 100%;
    left : 0;
}

#topnav ul.topnav1 a { /* Drop Down Submenu Item Styles */
    display : block;
    padding : 0;
    margin : 0;
    text-indent : 16px;
    text-align : left;
    font-size : 8pt;
    line-height : 20px;
    width : 250px;
}

#topnav li.topnav0:hover ul.topnav1, li.over ul.topnav1, li.over li.topnav1 { /* Makes Drop down work in IE */
    display : block;
} 




And the HTML is as follow:
Code:

<div>
	     <ul class="top" id="topnav">
               <li class="topnav0"><div><a href="#">Home</a></div>
               </li>
               <li class="topnav0"><div><a href="#">Intro</a></div>
                    <ul class="topnav1">
                         <li><a href="#">Part 1 Title</a></li>
                         <li><a href="#">Part 2 Title</a></li>
                         <li><a href="#">Part 3 Title</a></li>
                    </ul>
               </li>               <li class="topnav0"><div><a href="#">Chapter 1</a></div>
                    <ul class="topnav1">
                         <li><a href="#">Part 1 Long Title</a></li>
                         <li><a href="#">Part 2 Long Title</a></li>
                         <li><a href="#">Part 3 Long Title</a></li>
                    </ul>
               </li>
          </ul>
</div>

The problem with this version is that I cannot change the background image for each Chapter on the top level. Also, I cannot make the background of the drop down submenu transparent. If I make it transparent or delete the background line, the Part 2 link will not show up.

Any help of making either method to work is great appreciated! Thank you very much!

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.

I'm having a serious brain fart here...I must have come across this issue a million times before but I guess I haven't thought about it for so long, that I'm at a loss....

Very simply, I want to have a horizontal menu using text (ie not images) that will fill to fit the width of the page. Now I'd want to make there be a min-width and I can do that, but there's got to be a way to have the padding between the items adjust depending on how wide the browser is, right? And I should be able to do this with CSS and not have to use tables right? In other words, the width of the individual menu items will remain the same, but in a browser that's say 800px wide the space between the first item will be very near the left side of the page, and the last item will be very near the right side of the page and the items will be spaced evenly between them. But if the page is 1200px wide, the first and last items will still be very left and very right, but the spacing in between the rest of them will be bigger so that it fills the page width.

?????????/