CSS - Hiding Icons In Open Source Css

This is driving me nuts! I've been trying to do the simplest thing for over 3 hours now. Any help would be greatly appreciated!

It's not allowing me to post a link to the site at hand. [myoviedolawyerDOTcom/index2.php]It seems to be working fine in Firefox and Safari, but IE is giving me troubles (as always).

Here is the CSS (sorry if it's a mess, I'm learning)

ul.MenuBarVertical
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: 298px;
background-image: url(../images/PracticeAreas.gif);
z-index: 2;
}

ul.MenuBarActive
{
z-index: 1000;
}

ul.MenuBarVertical li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 298px;
}

ul.MenuBarVertical ul
{
margin: 0% 0 0 100%;
padding: 0;
list-style-type: none;
font-size: 100%;
position: absolute;
z-index: 1020;
cursor: default;
width: 8.2em;
left: -1000em;
top: 0;
}

ul.MenuBarVertical ul.MenuBarSubmenuVisible
{
left: 0;
}

ul.MenuBarVertical ul li
{
width: 302px;
background-color: #CCC;
border: 1px solid #A32B34;
z-index: 2;
}


ul.MenuBarVertical
{
border: 0px;
}

ul.MenuBarVertical ul
{
border: 0px;
}

ul.MenuBarVertical a
{
display: block;
cursor: pointer;
padding: 0.5em 0.75em;
color: #A32B34;
text-decoration: none;
}

ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
{
color: #FFF;
}

ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
{
color: #FFF;
}


ul.MenuBarVertical a.MenuBarItemSubmenu
{
background-image: url(../images/PracticeAreas.gif);
background-repeat: no-repeat;
background-position: left top;
background-attachment: fixed;
width: 298px;
}


ul.MenuBarVertical a.MenuBarItemSubmenuHover
{
background-repeat: no-repeat;
background-position: left top;
background-image: url(../images/Template_10_ro_10.png);
background-attachment: fixed;
width: 298px;
}


ul.MenuBarVertical iframe
{
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
}

@media screen, projection
{
ul.MenuBarVertical li.MenuBarItemIE
{
display: inline;
f\loat: left;
z-index: 2;
}
}




--------------------------------------------------------------

Any help would be greatly appreciated!

~cheers~

I have a problem... I have text in a div class "schedule" which is dragged in dynamically. Basically all the headers are in span tags with the style "font-weight:bold" on them. I want to hide all the non-bold text, ie all the text in the div class .schedule that doesn't have a <span> tag around it. Any ideas?

Is there a way to hide part of my css from Firefox but show up in IE?

My name is Steven and I wanted to officially introduce myself and see if anyone could help me with a css issue.

I have set the page up and upon checking an item, I want the page to show the form below. I was able to do that but either way it keeps the space where the form is which in fact, it should minimize and maximize the space upon clicking the check item. Instead, the area is still there.

This seems to the only issue that I am unable to resolve and would greatly appreciate it if someone could help.

I have listed the code below as well as attached the css and the page( If images are need, please let me know:

Code:

html, body  {
   padding: 0px;
   margin: 0px;
   background-color: #FFFFFF;
   font-family:Arial, Helvetica, sans-serif;
}


#logo  {
   background: url(profileimages/logo.png) no-repeat;
   
   position: absolute;
   left: 6px;
   top: 3px;
   z-index: 4;
   width: 92px;
   height: 64px;
}

#congratulations  {
   
   position: absolute;
   left: 22px;
   top: 377px;
   z-index: 3;
   width: 914px;
   height: 30px;
   font-size:26px;
   font-weight:bold;
   color:#4fa700;
}

#toptext  {
   
   position: absolute;
   left: 31px;
   top: 85px;
   z-index: 6;
   width: 897px;
   height: 16px;
   font-size:16px;
   font-weight:bold;
   color:#1b1b1b;
}

#cartproduct,
#cartproductcopy  {
   
   position: absolute;
   z-index: 2;
   width: 268px;
   height: 20px;
   font-size:18px;
   color:#272727;
}

#shippinginformation  {
   
   position: absolute;
   left: 226px;
   top: 421px;
   z-index: 2;
   width: 711px;
   height: 31px;
   font-weight:bold;
   font-size:34px;
   color:#272727;
}

#willbesecure  {
   
   position: absolute;
   left: 83px;
   top: 285px;
   z-index: 3;
   width: 315px;
   height: 14px;
   font-size:12px;
   font-weight:bold;
   color:#272727;
}

#foryourarea  {
   
   position: absolute;
   left: 682px;
   top: 257px;
   z-index: 3;
   width: 233px;
   height: 14px;
   font-size:11px;
   color:#272727;
   font-weight:bold;
}

.toplinksbar  {
   color:#006FD6; 
   text-decoration:none;
}

.toplinksites  {
   font: 12px/14px Arial;
   margin: 0px;
   color: #1B1B1B;
   text-align: left;
   text-decoration: underline;
}

#toplinks  {
   
   position: absolute;
   left: 745px;
   top: 25px;
   z-index: 2;
   width: 227px;
}

#item,
#qtyproductback  {
   background: url(profileimages/layer5copy12.gif) no-repeat;
   
   position: absolute;
   left: 11px;
   z-index: 2;
   width: 31px;
   height: 25px;
}

#totalback,
#priceback  {
   background: url(profileimages/layer5copy9.gif) no-repeat;
   
   position: absolute;
   top: 156px;
   z-index: 2;
   width: 124px;
   height: 25px;
}

#cartproductcopy  {
   top: 720px;
   left: 262px;
}

#ourprice  {
   
   position: absolute;
   left: 803px;
   top: 190px;
   z-index: 2;
   width: 117px;
   height: 28px;
   font-size:12px;
   font-weight:bold;
}

.ourpricepercent {
color:#43a000;
}

#securelock  {
   background: url(profileimages/id46vectorsmartobject.gif) no-repeat;
   
   position: absolute;
   left: 525px;
   top: 875px;
   z-index: 2;
   width: 20px;
   height: 27px;
}

#profilevectorsmartobject  {
   background: url(profileimages/vectorsmartobjectsmall.gif) no-repeat;
   
   position: absolute;
   left: 15px;
   top: 259px;
   z-index: 3;
   width: 62px;
   height: 68px;
}

#cartproduct  {
   top: 191px;
   left: 54px;
}

#productdescription  {
   
   position: absolute;
   left: 59px;
   top: 163px;
   z-index: 3;
   width: 140px;
   height: 13px;
   color:#272727;
   font-size:14px;
   font-weight:bold;
}

#retailprice  {
   
   position: absolute;
   left: 669px;
   top: 190px;
   z-index: 2;
   width: 117px;
   height: 13px;
   font-size:13px;
   color:#ff0000;
}

#acceptedpayments  {
   
   position: absolute;
   left: 490px;
   top: 270px;
   z-index: 2;
   width: 121px;
   height: 13px;
   font-size:12px;
   font-weight:bold;
   color:#272727;
}

#enteryourzipcode  {
   
   position: absolute;
   left: 683px;
   top: 279px;
   z-index: 3;
   width: 145px;
   height: 12px;
   font-size:12px;
   font-weight:bold;
   color:#272727;
}

#profilereadmoreaboutit  {
	
	position: absolute;
	left: 87px;
	top: 300px;
	z-index: 3;
	width: 98px;
	height: 9px;
}

.profilereadmoreaboutitlink {
text-decoration:underline;
color:#3170ab;
font-size:10px;

}

#formback  {
   background: url(profileimages/layer5copy13.gif) no-repeat;
   
   position: absolute;
   left: 557px;
   top: 467px;
   z-index: 2;
   width: 380px;
   height: 381px;
}

#formtable {
font-size:14px;
font-weight:bold;
}

#item  {
   top: 187px;
}

#qtyproductback  {
   top: 156px;
}

#checkback  {
   background: url(profileimages/layer5copy10.gif) no-repeat;
   
   position: absolute;
   left: 677px;
   top: 249px;
   z-index: 2;
   width: 249px;
   height: 77px;
}

#lowerbar  {
   background: url(profileimages/layer1copy5.gif) no-repeat;
   
   position: absolute;
   left: 4px;
   top: 342px;
   z-index: 2;
   width: 952px;
   height: 3px;
}

#shippingback  {
   background: url(profileimages/layer5copy7.gif) no-repeat;
   
   position: absolute;
   left: 566px;
   top: 156px;
   z-index: 2;
   width: 90px;
   height: 92px;
}

#zipcodefield {
   
   position: absolute;
   left: 681px;
   top: 296px;
   z-index: 3;
   width: 150px;
   height: 25px;
}

#zipcodefieldform {
border:#aab1b7;
}

#totalback  {
   left: 800px;
}

#priceback  {
   left: 667px;
}

#formarea {
display:none;
overflow:hidden;
width:1px;
height:1px;
}

#congratulationsback  {
   background: url(profileimages/layer24copy.gif) no-repeat;
   
   position: absolute;
   left: 5px;
   top: 368px;
   z-index: 2;
   width: 951px;
   height: 42px;
}

#producttitleback  {
   background: url(profileimages/layer5copy6.gif) no-repeat;
   
   position: absolute;
   left: 48px;
   top: 156px;
   z-index: 2;
   width: 507px;
   height: 25px;
}

#layer1copy  {
   background: url(profileimages/layer1copy.gif) no-repeat;
   
   position: absolute;
   left: 373px;
   top: 68px;
   z-index: 3;
   width: 400px;
   height: 5px;
}

#profilesecurityback  {
   background: url(profileimages/layer5copy.gif) no-repeat;
   
   position: absolute;
   left: 19px;
   top: 278px;
   z-index: 2;
   width: 395px;
   height: 40px;
}

#area  {
   margin: 0px auto 0px auto;
   background: url(profileimages/background.gif) no-repeat;  
   height:100%;
   width: 960px;
   position: relative;
}

#shipping  {
   
   position: absolute;
   left: 583px;
   top: 162px;
   z-index: 3;
   width: 54px;
   height: 14px;
   font-size:14px;
   font-weight:bold;
   color:#272727;
}

#yourcart  {
   
   position: absolute;
   left: 10px;
   top: 132px;
   z-index: 2;
   width: 106px;
   height: 17px;
   font-size:20px;
   font-weight:bold;
   color:#272727;
}

#profileshadow  {
   background: url(profileimages/layer16.gif) no-repeat;
   
   position: absolute;
   left: 29px;
   top: 326px;
   z-index: 2;
   width: 32px;
   height: 4px;
}

#fedex  {
   background: url(profileimages/layer30.gif) no-repeat;
   
   position: absolute;
   left: 579px;
   top: 221px;
   z-index: 4;
   width: 66px;
   height: 18px;
}

#paymenttypes  {
   background: url(profileimages/layer18.gif) no-repeat;
   
   position: absolute;
   left: 490px;
   top: 291px;
   z-index: 2;
   width: 174px;
   height: 27px;
}

#profileproductback  {
   background: url(profileimages/layer24.gif) no-repeat;
   left: 223px;
   top: 467px;
   z-index: 2;
   width: 323px;
   height: 243px;
}

#profileproductimage {
   /*background: url(profileimages/layer25.gif) no-repeat;*/
   
   position: absolute;
   left: 227px;
   top: 491px;
   z-index: 3;
   width: 305px;
   height: 200px;
}

#topbar {
	background: url(profileimages/topbar.png) no-repeat;
	position: absolute;
	left: 15px;
	top: 73px;
	z-index: 5;
	width: 952px;
	height: 41px;
}

#freedivide  {
   background: url(profileimages/layer32.gif) no-repeat;
   
   position: absolute;
   left: 567px;
   top: 213px;
   z-index: 4;
   width: 88px;
   height: 1px;
}

#fedexback  {
   background: url(profileimages/layer31.gif) no-repeat;
   
   position: absolute;
   left: 567px;
   top: 214px;
   z-index: 3;
   width: 88px;
   height: 33px;
}

#checkbackbutton  {
   /*background: url(profileimages/layer21.gif) no-repeat;*/
   
   position: absolute;
   left: 835px;
   top: 293px;
   z-index: 3;
   width: 72px;
   height: 26px;
}

#lowerarrow {
   background: url(profileimages/layer34.gif) no-repeat;
   
   position: absolute;
   left: 862px;
   top: 344px;
   z-index: 3;
   width: 24px;
   height: 6px;
}

#paymentline  {
   background: url(profileimages/layer20.gif) no-repeat;
   
   position: absolute;
   left: 490px;
   top: 285px;
   z-index: 2;
   width: 173px;
   height: 1px;
}

#form  {
   /*background: url(profileimages/layer23.gif) no-repeat;*/
   
   position: absolute;
   left: 571px;
   top: 480px;
   z-index: 3;
   width: 349px;
   height: 354px;
}

#checkoutbuttonback  {
/*background: url(profileimages/layer6.gif) no-repeat;*/
   
   position: absolute;
   left: 556px;
   top: 854px;
   z-index: 2;
   width: 382px;
   height: 50px;
}

#total  {
   
   position: absolute;
   left: 806px;
   top: 163px;
   z-index: 3;
   width: 28px;
   height: 10px;
   font-size:14px;
   font-weight:bold;
   color:#272727;
}

#price  {
   
   position: absolute;
   left: 673px;
   top: 163px;
   z-index: 3;
   width: 30px;
   height: 11px;
   font-size:14px;
   font-weight:bold;
   color:#272727;
}

#free  {
   
   position: absolute;
   left: 598px;
   top: 191px;
   z-index: 3;
   width: 34px;
   height: 10px;
   font-size:14px;
   color:#2e2e2e;
   font-weight:bold;
}

#radiobutton  {
   
   position: absolute;
   left: 571px;
   top: 190px;
   z-index: 3;
   width: 13px;
   height: 13px;
}

#qty  {
   
   position: absolute;
   left: 15px;
   top: 162px;
   z-index: 3;
   width: 25px;
   height: 14px;
   font-size:14px;
   font-weight:bold;
   color:#272727;
}

#itemnumber  {
   
   position: absolute;
   left: 24px;
   top: 190px;
   z-index: 3;
   width: 5px;
   height: 13px;
   font-size:18px;
   color:#272727;
}

#copyright  {
	position: absolute;
	left: 13px;
	top: 971px;
	z-index: 2;
	width: 940px;
	height: 126px;
	font-size:11px;
	
}

.copyrighttext {
text-align:center;
}

.copyrightlinks {
text-decoration:underline;
color:#000000;
} 

Hello,
So I have a page built that displays correctly in all modern browsers. However in IE6 the right floated div does not float right and throws the page off.

If I could just hide the right and left columns from IE6 it would work fine.

I have tried several bug fixes but nothing so far works.
the page is :
woodbuiltright
com/
test2
php

If it would layout correctly in IE6 with a fix/hack that would be great if not could I just make the right and left divs just not display?

I even tried using some php to redirect IE6 to a different page. I guess I did not insert the php correctly because I could never get it to work.

I would not even support IE6 but I know people who still use it...despite my recommendations.

Just so you know, I have spent hours trying stuff before asking.

Thanks!

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.

Here's something strange. I'm seeing a problem in IE on Windows. I've built a progress bar using vbscript and css, but the table doesn't quite display the way I want it to. Here's demo code:
Code:

<html>
<body bgcolor="dddddd">
<center>
<table border="1" cellpadding="0" cellspacing="0" style="border: 1px solid #000; border-collapse: collapse; background-color: #000" width="100">
	<tr><td id="pct_complete" width="50" bgcolor="black">&nbsp;</td><td id="pct_remain" width="*" bgcolor="blue">&nbsp;</td></tr>
</table>
</center>
</body>
</html>

Now I've set the border to collapse, but if you load it up, you'll notice a white line between the two. I think it may be the way ie adds a 3d appearance to the table, but I can't figure out how to overcome it.

Any ideas?

Thanks!

Hi Everyone,

I'm currently doing a job for a client of the company I work for. In this case the client has created an Iframe for us to publish content on their website. They have certain aspects of the content they would like to change. The content we are publishing is coming from an old oracle database and there are no classes or ids. We want to hide one of these images from the database, is it possible to flag and hide the file name using css?

Here is the code Oracle is pushing out... Though I don't know how much it'll help.

<TABLE BORDER="0" WIDTH="95%" CELLPADDING="0" CELLSPACING="0" align="center">
<tr>
<td align=right>
<A HREF="corpworkstestfour.job_posting?pi_job_id=8315038&pi_search_id=596347860&pi_sort=POST_DATE&pi_curjob=2&pi_maxjob=2"><IMG SRC="~/next.gif" ALT="Next Job" BORDER=0 ALIGN=bottom hspace=2></A>
</TD>
</TR>
</TABLE>

next.gif is the image I need to hide.

Thanks in advance to all who read, help and take a shot at this.

Regards,
Tom

Hi, I have a problem with a menu.
I use joomla 1.5 and I create a sprite CSS menu as follow:

Code:

ul.menu-central { 
width: 970px;
display:inline;
}

ul.menu-central li {
display:inline;
}	
ul.menu-central li a {
	display: block; float:left; margin-left:5px; height: 80px; 
	background-image: url((URL address blocked: See forum rules));  text-indent: -9999px;

	
}
	ul.menu-central .item67 a {
		width: 150px; background-position: -10px -9px;
	}
	ul.menu-central .item72 a {
		width: 150px; background-position: -170px -9px;
	}
	ul.menu-central .item97 a {
		width: 150px; background-position: -330px -9px;
	}
	ul.menu-central .item79 a {
		width: 150px; background-position: -490px -9px;		
	}
	ul.menu-central .item98 a {
		width: 150px; background-position: -650px -9px;		
	}
	ul.menu-central .item99 a {
		width: 150px; background-position: -810px -9px;
	}
a { outline: none; }

In IE the bullets of the list are hidden, instead in Firefox are visible.
I try to put:
list-style:none and list-style-type: none in the css code, but nothing has happened.
Someone could you know how can I hide the bullets also in Firefox?
Thank you

I have a very terrible isuue

I am hiding DIV layer which is relatively positioned but it still takes space when hidden.. when i change the positioning to absolute things work ok.. so how could i do same with relative posotion... or any work around?

You help would be appreciated

Adnan Memon

In a basic CSS single column layout with Header, Content, Footer div structure, where the page background image is defined in the Body CSS, is there a way to specify that below the Footer div, the page background does not show?

Hi everyone

I'm not sure weather this is a CSS issue. For that sake I'm not even sure if it's possible, but I'll take a try Is there any way I can totally remove the scrollbars from a textarea?
I've noticed that firefox doesn't show them at all times, but IE seems to show them even when they're not necessary.

I'd like to be able to hide a layer by hoving over a tab, so that the browser background can be seen.
Code:

 ---------------
|   Hide        |
| |------------||
| |            ||
| |    layer   ||
| |            ||
| |------------||
 ---------------

ie. Hovering over the "hide" tag in the outer layer, causes the central layer (containing text, images and tags) to disappear.

However, there should be no change when the cursor is over the central layer itself.

Regards,
Ian Tresman

I wan't to print documents (actually invoices) from my PHP web application, but without the url and date and what ever there is on header and footer. As I understand the header and footer 'visibility' is browser settings and can't be changed with code. Is there any way to go around this with CSS or PHP? How do you guys take prints without header and footer data?

I'm not sure if this is a PHP issue, if so maybe this thread will be moved to PHP forum..

I have recently seen an article from 2005 stating that using CSS to hide text could lead to flagging from Google and other Search Engines as Spam sites.

My question is, if hidden text is used for certain elements of the page such as branding a logo as an h1 tag, will my site be penalized? I don't want to risk being blacklisted from Google, but If all I have is an image header anyways, would it hurt to use a CSS text indentation to hide the h1 text?

I notice that several of the designs on CSS Zen Garden use this techinique for header images, yet the page has a google page rank of 9. Any knowledgeable advice or references to recent articles would be very helpful including personal experience.

Thanks in advance!