CSS pointer-events alternative?

[be3le3x1]

Hello I'm new to web design it's literally just started today and I was wondering if there was an alternative to using the point-events command or code whatever you call it.

I'm having some trouble with my website I'm using opacity in some of my div's which is making content within those sections unclickable. I read in a forum to use pointer-events;none to solve the issue but it created another issue .... My content can now be click only by Firefox and Chrome users while IE10 and Opera ignore pointer-events;none. My question is there a way to force these browsers to recognize this command or an alternative method of achieving the desire effect without losing div's opacity's?

Any help with this issue is much appreciated. Thank you. :wink:

 

[essellar]

It might help if you were to explain what you're trying to accomplish. pointer-events is not part of CSS yet outside of SVG (it's no longer part of the CSS3-UI working draft; it may be under consideration for the CSS4 UI module). Normally, the whole point of overlays is to intercept mouse events (in a misguided attempt to provide no-copy "security"), and I can't think of a good reason to obscure underlying elements that you want to be actionable.

 

[be3le3x1]

I'm attempting to create rounded edge bordered sections with a background color that'll have a transparency effect using opacity allowing the background of the site to show through. I figured pointer-events wasn't compatible with all the browsers yet but it does however work for chrome and firefox which I happen to be using. I know I could create this effect using photoshop and uploading the images but since I am new with web design and coding in general I'd like use coding as much as possible instead of using photoshop as a crutch.


here is the css

float:left;
position:absolute;
left:0px;
top:40px;
pointer-events:none;
background-color: #000000;
opacity:0.4;
height: 620px;
width:190px;
-moz-border-radius-bottomright: 25px 50px;
border-bottom-right-radius: 25px 50px;
border-top-right-radius: 25px 50px;
border: 1px solid;

 

[essellar]

Use rgba() colours for transparency. The first three are red, green and blue (as with rgb()); the fourth value is alpha (opacity) rangiing from 0 (transparent) to 1 (fully opaque).

That still doesn't explain why you click targets are living beneath the bordered divs; they should be living on them.

 

[be3le3x1]

good info thank you.
The site is incredibly small maybe you can view its source and tell me why.
http://be3le3.x10.mx/

 

[essellar]

Yeah... what's up with Leftnav? Why does it exist at all? Or, if you're planning to add more than the external links you have now, why isn't the Links div nested within Leftnav? Right now you have Leftnav overlaying your links just to get what should have been the background and border of that container.

Oh, and while we're on the subject -- get out of the habit of capitalizing things. Use all-lower-case with hyphens or underscores (your call) to separate words. (JavaScript has its own conventions; this is aimed at HTML and CSS.) Everything is case-sensitive, and you'll save yourself a LOT of errors if you stick to lower-case.

 

[be3le3x1]

When I first created the files Leftnav contained the example links as I started playing with opacity which I thought was causing the issue of not being able to click on through to the link, I made a new container specifically for the links so I could keep the effect of leftnav.

Now I have no idea what is wrong with it lol after replacing color for rgba values and removing the opacity; all together from each section I was able to click the links but the bg color hadn't changed to black like I had wanted it to be instead it went fully transparent.

I went back to examine it played with the alpha value's and no changes then I noticed I had left pointer-events;none in leftnav and body took those out and refreshed and I was no longer able to click the links. I went wrong some where else so I'll have to figure it out. Thanks for the help though and the advice.

 

[essellar]

There are all kinds of potential and existing problems with the page. The biggest thing you need to fix is to decide which dialect of HTML you're going to use and stick with it. Right now, the site would best be described as "HTML 3.2 with some extra bits". No browser is going to handle it in a consistent and completely predictable manner. The fix is both simple and radical: use a DOCTYPE to tell the browser which rules it's supposed to be playing by, and eliminate anything on the page that isn't allowed within that DOCTYPE.

Unless, for some reason, you really need to support Internet Explorer 7 or earlier, there is no reason (nor, really, is there any excuse) for not using HTML 5. Yes, it is true that IE 8 and 9 suffer from some deficiencies in dealing with HTML 5, but they also have the same difficulties dealing with other DOCTYPES if you use CSS 3. (IE 9 is much better than IE 8, but it's still missing support for a lot of things.) If necessary, you can use a JavaScript shim (for reasons of illiteracy and idiocy, some people refer to it as a "shiv" — which actually means a knife, often homemade and illicit) to "register" new element types in the DOM. You can use Internet Explorer's conditional comments so that only older versions of IE (before IE 10) get the knife in the back.

That means starting the HTML document with a DOCTYPE declaration:

<!DOCTYPE html>
<html>
.
.
.
</html>

Once you've done that, you'll need to get rid of the <font> element — that hasn't been a valid part of HTML for many years, and is only barely tolerated in the "loose" versions of HTML 4.1 and XHTML 1.0. But then having established the rules of the game, the browsers are much more likely to play nice. Again, don't use overlays. If you need to use an element as a decorator, put it in place first so that it appears beneath subsequent elements. It would still be far preferable to nest the content within the container rather than to try to position it over the container. (Oh, and your marquee is scrolling the wrong way. If it scrolls down, people need to read from bottom to top. Avoid lorem ipsum; it makes you see things in a very funny way.)