CSS - Link Text Inside Li Element - Opacity Issue

Hey guys,
Just seeing if this is possible. By the way this is for a myspace page. Looking to have a link to change opacity on current page.

table table table, div table table{
border-color:rgb(0,0,0);
border-style:solid;
border-width:2px;
background-color:rgb(55,55,5);
opacity:0.8;
-moz-opacity:0.7;
filter:alpha(opacity=50);
}

This is the code currently. Is it possible (without java) to have a link that would set "opacity:0"

Thanks!

I am trying to learn CSS and am currently trying to mirror a website to practice. I would post the website I am mirroring but due to the forum rules, I cannot.

I am trying to replicate the black background with opacity for the a:link and the white background with opacity for the a: hover. My browser is IE and I have tried the filter:alpha(opacity=1-100) but to no avail.

Here is the HTML I am using for this particular container:

<div id="fivels">

<div id="classone">
<a class="home" href="#">Home</a>
<a class="gallery" href="#">Gallery</a>
<a class="about" href="#">About</a>
<a class="help" href="#">Help</a>
<a class="partner" href="#">Partner</a>

</div>

</div>

And here is my CSS:

#fivels {
margin-left: auto;
margin-right: auto;
height: 150px;
width: 800px;
background-image: /* the forum will not let me post URLs, gut a jpg of grass goes here */
}



#classone {
margin-left: auto;
margin-right: auto;
width: 800px;
text-align: center;
}

#classone a:link {
color: white;
text-decoration: none;
background-color: black;
filter: alpha(opacity=20);
}

#classone a:visited {
color: white;
text-decoration: none;
background color: black;
filter: alpha(opacity=20);
}

#classone a:hover {
color: white;
text-decoration: none;
background-color: white;
filter: alpha(opacity=20);
}

.home {
padding: 3.2em;
}
.gallery {
padding: 3.2em;
}
.about {
padding: 3.2em;
}
.help {
padding: 3.2em;
}
.partner {
padding: 3.2em;
}

Also, on a side note, is using the padding attribute the most efficient way of seperating the links?

Hello here,
I am trying to make an opacity effect on my working site and I want to have the same effect in Internet Explorer as well in Mozilla browsers.

I have been able to implement the correct code for both browser in the following page:

http://www.looksheetmusic.com/test.html

but for an "unknown" cause the same effect doesn't work in the complete page below:

http://www.looksheetmusic.com/test2.html

As you can notice, in Internet Explorer the opacity is not linear through the whole page. I left the CSS embedded in both pages for your review.

Any idea or advice is very welcome!

Thank you in advance.

Sincerely,
Fabrizio

Hi

I was wondering why only IE7 makes relatively positioned elements disappear into the right hand column on my site. It only happens when displayed in IE7, remaining browsers are ok (FF, Opera, even IE6). Being a newbie with IE7 bugs and workarounds, I ask you for advice.

This is the page

look at ghost images on RH column - IE7 only bug

Please note the quircky behavior when you hover on any backgrounded area within the RH column: images within "LO MAS COMPRADO" and "RECIEN LLEGADOS" appear and disappear as lights turn on and off on a Christmas tree. All the areas that trigger this bug have in common to shift its background on hover.

It's really funny, you hover on any area below those two blocks and all images dissapear, hover on any area above those blocks and images reappear, hover on areas within the blocks and image will appear only on the corresponding block.

Is this an IE6 peekaboo variant?

I've tried to isolate the problem, adding and deleting blocks inside the column, but it is a strange combination I can't realize. It happens just within the two blocks mentioned above, as you can see here. Images first appear ok, but they dissapear every time you hover over the "buttons" (wich are really block displayed <a>'s with shifting bg img. on hover), wich is almost the same that occurs in the complete Rh column version.

Any thoughts?

Thank you

Hi,

Ive coded a page so that there is a coloured div with 30% opacity and then added another div inside it for text but the text also has the 30% opacity... how do i get it to display the text correctly?

Here is my example

Thanks for any help,
Mike

What I'm after happening is for the background to have opacity but not the text.

I can make the background have opacity but I don't know how to stop the text being changed by it.

Here's the code that I'm using for this bit.
CSS
Code:

a:link{ font-size: 11pt; font-family: Verdana; text-decoration: none; color:#000000}
.back{background-color: #cd5b00; filter:alpha(opacity=50); -moz-opacity:0.5; opacity: .5;}

html
Code:

							<tr>
								<td width="100%" class="back">
								<ul>
									<li><a href="link.htm">link</a></li>
									<li><a href="link.htm">link</a></li>
									<li><a href="link.htm">link</a></li>
									<li><a href="link.htm">link</a></li>
								</ul>
								</td>
							</tr>

The html code is on a div with a background image.

In the above code the background of the table has opacity but so does the text, is there anyway to stop the text having opacity as well?

Hope that makes sense, thanks for reading, if it's not clear let me know.

any recommendations on a way to make my h2 text change opacity when the containing div is hovered?

Better explanation:

I have an accordion style page with click-able divs that contain the title of that div in a h2 tag. The div is much larger than the text in the h2 tag.
I am able to make the text itself change opacity when it its hovered but I would like the text to change when the div is hovered.

I do not want to make the div itself change opacity because it overlaps the div behind it.

(I understand that I need have to add some filters and such, I am not worried about that at this point)

html code:
Code:

<div class="previous_tab">
          <a href="movement.html" class="clickable_tab">
              <h2>The Movement</h2>
          </a>
</div>

css code:
Code:

.previous_tab
      {
	width:100px;
	height:500px;
	margin-left:-5px;
	background-color: #CCCCCC;
     {

.clickable_tab
     {
	display:block;
	width:100px;
	height:500px;
	text-decoration: none;	
     }

h2
     {
	opacity:.6;
	font-size: 1em;
	color: #333333;   
     }

h2:hover
     {
	opacity:1;
     }

Hello,

I know that putting a block level element (such as <p> or <div>) inside an inline element (such as <a>) is against "xhtml 1.0 strict" rules, so I'm putting a <span> (inline) within an <a> (also inline).

I've made my <span> "display: block;", and it works in all browsers and validates fine, but I feel like I'm cheating the system a bit?

The thing is, I need to put a margin under a piece of text without using <br /> (as when a browser forces a line break, it will use that rule and make different pieces of text look odd), but all the text is within an anchor tag, so I can't use <p> or <div>.



Would appreciate any thoughts on the matter,

Cheers!

hi

my page involves having a form element inside of a div. the div is floated left. relevant (seemingly) css from my stylesheet & html code (all simplified for readability)

form
{
margin: 0px;
padding: 0px;
}
.mydiv
{
float: left;
}

html looks vaguely like:

<div class="mydiv"><form name="blah" action="blahblah">
.... all form controls
</form></div>

PROBLEM!!!!

in mozilla, none of the form elements display.
in ie, everything displays as expected.

PLEASE HELP ME BEFORE I GO INSANE AND START KILLING INNOCENT PEOPLE.

thanks in advance.
d

I have a "see details" link over in the bottom right of a table cell - exactly were I want it. But when I resize the browser window to make it smaller and squish it together the link does not stay in its cell but goes left crashing into content.

How do I keep it wrapping but still hugging the right wall of the rightmost cell? Using Mozilla. I have the code below - you'll see.

Thanks

<html>
<table border 1px>
<tr>
<td>Configuration Management System</td>
<td><ahref=http://ms.fc.na.bz/>http://ms.fc.na.bz/</a></td>
<td>Source for configuration management documents and drawings from many projects. These are primarily engineering design documents. Each Directorate must be searched separately... <a STYLE="position: absolute; right: 20px; color:red;" href=details. php?id=3&Type_view= detail&Type_Submit=&key_word= > see details</a>
</td>
</tr>
</table>
<html>

I have a table inside of a div, and I need to push the table down a little bit but can't get it to without using line breaks, which push it down too far.

I have a background image that I'm using to emulate a shadow and need the table to just be a little bit lower so that the upper right hand corner image blends in with it.

Here is my CSS:

Code:

#header {
  width: 100%;
  height: 90px;
  padding-bottom:5px;
  padding-right: 10px;
  margin-bottom: 5px;
  vertical-align: bottom;
  background: url(img/hd_shw.gif) no-repeat right;
}
.top {
  width: 16px;
  height: 16px;
  vertical-align: top;
}

.bottom {
  height: 16px;
  width: 16px;
  vertical-align: bottom;
}

.blue_fill{
  background-color: #4095BF;
}

My HTML:

Code:

<div id="header">
     <table class="hdr_bk" align="center" width="100%" style="height: 92%;" cellpadding="0" cellspacing="0">
       <tr>
         <td class="top" style="background: url(img/b_tl.jpg) no-repeat top left #4095BF;"></td>
         <td class="blue_fill"></td>
         <td class="top" style="background: url(img/b_tr.gif) no-repeat top right;"></td>
       </tr>
       <tr class="blue_fill">
         <td></td>
         <td>Header</td>
         <td></td>
       </tr>
       <tr>
         <td class="bottom" style="background: url(img/b_bl.jpg) no-repeat bottom left #4095BF;"></td>
         <td class="blue_fill"></td>
         <td class="bottom" style="background: url(img/b_br.jpg) no-repeat bottom right #4095BF;"></td>
       </tr>
     </table>
  </div>

I realize that there is a gap, which will be fixed when I figure out how to push down the table.

On the sidebar of this page http://www.laurieannre.com/real-estate-agent.asp the UL titled Neighborhoods has a different padding on FF than in IE and I can not understand why?

Hi,

I am using linked-in stylesheets for my webpage and have an unordered list, which is inside a div, for the phone number and email address (which is an email link) which are in the top right corner of the page. The whole page is in a container div.

I am trying to 'text-align' these two <li> elements to the right, the phone number does this but the email link just won't move to the right and is staying on the left! I have put the 'text-align: right' attribute for the 'ul' and the 'li' and the 'a' but to no avail.

The weird thing is, I also have an undordered list for my navigation which is also on the same page, running horizontal on the left side of the page, but these seem to work fine for the alignment (each link is centered nicely in their boxes).

Why won't the email link align right?!

My stylesheet code:

#garden-designer-contactbar ul {
display: block;
position:absolute;
text-align: right;
font-size: 20px;
font-family: verdana, arial, helvetica, sans-serif;
color: #666666;
left:541px;
top:0px;
width:179px;
height:51px;
margin: 0;
padding: 0;
list-style-type: none;
z-index:6;
}

#garden-designer-contactbar li {
display: block;
text-align: right;
}

#garden-designer-contactbar a {
display: block;
position:absolute;
text-align: right;
font-size: 12px;
font-family: verdana, arial, helvetica, sans-serif;
color: #666666;
font-weight: normal;
}


My page code:

<div id="garden-designer-contactbar">
<ul>
<li>020 0000 000</li>
<li><a href="mailto:email@email.co.uk?subject=Garden Design" title="email Garden Design" align="right">email@email.co.uk</a></li>
</ul>
</div>

Does anyone know what might be going on? My container div for the whole page is set to 'text-align: left' but I tried removing that attribute and it just made other text on the page that wasn't specifically aligned, centre. And the email link seemed to stay where it was.

Any help much appreciated!

Please look at this page -
http://www.soarminden.com/glider-soaring-gallery.asp

I put a red border on parent element. The children divs appear outside the parent at page bottom? Can someone shed some light please? I think the issue is with the styling of the div(s)

innerLeftColumn

or LeftColumn


Code:

<div style='width:670px;margin:0;border:1px solid red;min-height:500px;position:relative;'>


<div style='width:175px;height:150px;float:left;margin:20px 0 20px 10px;clear:left;'>
<img src='images/gallery/1/tom6.jpg' style='width:175px;height:150px;margin-bottom:3px;'/><br />
<h4 style='text-align:center;font-size:12px;margin:0;padding-bottom:10px'><a href='glider-soaring-gallery2.asp?subject=1' style='color:#00f;line-height:1;text-decoration:undeline !important;'>Tom Hall Soaring</a></h4>
</div>


<div style='width:175px;height:150px;float:left;margin:20px 0 20px 10px;'>
<img src='images/gallery/12/phil-jones2.jpg' style='width:175px;height:150px;margin-bottom:3px;'/><br />
<h4 style='text-align:center;font-size:12px;margin:0;padding-bottom:10px'><a href='glider-soaring-gallery2.asp?subject=12' style='color:#00f;line-height:1;text-decoration:undeline !important;'>Phil Jones Goes Gold & Diamond!</a></h4>
</div>

<div style='width:175px;height:150px;float:left;margin:20px 0 20px 10px;'>
<img src='images/gallery/13/wedding1.jpg' style='width:175px;height:150px;margin-bottom:3px;'/><br />
<h4 style='text-align:center;font-size:12px;margin:0;padding-bottom:10px'><a href='glider-soaring-gallery2.asp?subject=13' style='color:#00f;line-height:1;text-decoration:undeline !important;'>Wolfram and Lydia's Wedding</a></h4>
</div>


<div style='width:175px;height:150px;float:left;margin:20px 0 20px 10px;clear:left;'>
<img src='images/gallery/15/DSC_6547.jpg' style='width:175px;height:150px;margin-bottom:3px;'/><br />
<h4 style='text-align:center;font-size:12px;margin:0;padding-bottom:10px'><a href='glider-soaring-gallery2.asp?subject=15' style='color:#00f;line-height:1;text-decoration:undeline !important;'>Brennan Hall Soaring Lake Tahoe</a></h4>
</div>


<div style='width:175px;height:150px;float:left;margin:20px 0 20px 10px;'>
<img src='images/gallery/16/teresa.jpg' style='width:175px;height:150px;margin-bottom:3px;'/><br />
<h4 style='text-align:center;font-size:12px;margin:0;padding-bottom:10px'><a href='glider-soaring-gallery2.asp?subject=16' style='color:#00f;line-height:1;text-decoration:undeline !important;'>Teresa Luther</a></h4>
</div>


</div>

PROBLEM: I create a nice button using the sliding doors technique for rounded corners. But the button displays with 100% width unless I float it. My layout requires that the buttons be inline with the text, so floating won't work. Anyone know an alternative?

I wouldn't mind floating but I want the button to show inline with the text. When I use float:left, it removes it from the inline flow.

Basically, I want a very modular button that can be used in several different places on a page. In many cases, floating is fine because the mockup has it out of the inline text, but I want to use it there, too.

Here's the HTML:

<a class="button" href="#"><span>Update Profile</span></a>

Here's the css:

a.button:link, a.button:visited {
background:url(button_right.gif) no-repeat right top;
}
a.button span:hover, a.button span:active {
background:url(button_left_hover.gif) no-repeat right top;
}
a.button span {
background:url(button_left.gif) no-repeat left top;
color:#fff;
cursorointer;
display:block;
height:20px;
line-height:20px;
margin:0 2px 0 0;
padding:0 10px;
position:relative;
white-space:nowrap;
}