I have an item in my page thus:
<div class="rounded">
<h2>Heading Text</h2>
<ul>
<li>Summary link</li>
<li>Summary link</li>
<li>Summary link</li>
</ul>
<p>or... some text or whatever</p>
</div>
the styles associated with this block are:
.rounded{
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
background:url("10x10.50percentalpha_white.png") repeat scroll left top transparent;
height:270px;
overflow:hidden;
padding:0 0 5px;
}
.rounded h2{
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-top-left-radius:5px;
border-top-right-radius:5px;
border-top-left-radius:5px;
background:url("wide_rl_fade.png") repeat-y scroll right top transparent;
color:#C4161C;
font-size:130%;
padding:10px 20px;
text-align:left;
text-transform:uppercase;
}
of course this works a treat in FF and safari (and opera).. but IE doesnt do anything (how i hate IE)
i have done a bit of searching around and found the DD_roundies solution..
http://www.filamentgroup.com/lab/achieving_rounded_corners_in_internet_explorer_for_jquery_ui_with_dd_roundi/
but sadly this just drops the backgrounds and thus renders the list and heading text with a transparent background - works fine when opacity or bg images are not used, but that doesnt suit my problem obviously...
does anyone know of a solution to this?
i could of course ditch the bg image, but this seemed to be the most reliable way to get the opacity working across browsers..
thanks
nat
The style you use for rounded corners is only recognised by Firefox and Webkit browsers. The only other solution you have really is the use of background images. There is a jQuery plugin I used that was quite nice but again, for Internet Explorer it just places images over the corners to achieve a rounded illusion. Here it is: http://jquery.malsup.com/corner/
EDIT: CSS3 will have a tag that achieves this, but it still is not supported by any current IE version: http://www.w3.org/TR/css3-background/#the-border-radius
Look up http://css3pie.com/ it uses attached behaviors to give IE some css3 capabilities.
not actually an answer.. dont shoot me but needed more chars than the comments would allow
thanks for the replys..
again though this does not seem to work with the backgrounds being alpha'd png's
which is a shame as that appeared to be just what i needed..
tried
.rounded{
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
background:url("10x10.50percentalpha_white.png") repeat scroll left top transparent;
height:270px;
overflow:hidden;
padding:0 0 5px;
behaviour: url(path/to/PIE.htc)
}
I am using an alpha'd background image as putting opcatiy or whatever on the div, then alphas the content too.. dont want that..
any other suggestions?
unless someone can explain a way to get the background nicely alpha'd without affecting the alphaness of the contained text/content.
with all the funding that M$ have why cant they get rounded corners working like everyoe else has.. eh?
tossers - always spend so much time getting things to work in IE that work fine everywhere else..
Related
I have an on boarding tour in at my.bonify.de. It offers a similar experience to introjs.
We implemented this in a very ugly way using a cutout div with a very large box-shadow. We would like to improve upon this and use an overlay like introjs since it seems to have much better performance than our dirty hack.
Having read this, I do not understand how introjs works since the element to be highlighted should definitely be in a lower stacking context.
I have tried replicating the behaviour with our own onboarding but I can not get the element in the page to rise above the overlay.
I would like to know how introjs achieves this, I thought that this block of code was the secret but when I put a debugger the class is not added.
Easy, you just put a relative element with higher z-index on top of a fixed element. Sample classes:
.fixed-elem {
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
z-index:2;
background: rgba(0,0,0,0.75);
}
.relative-elem {
position:relative;
z-index:10;
}
Here is a working fiddle:
https://jsfiddle.net/7ergcfvq/1/
Look at demo step 1 of intro.js, the <h1>Intro.js</h1> element has .introjs-relativePosition and .introjs-showElement, so it got position:relative and z-index:9999999!important.
And the <div class="intros-overlay">'s z-index 999999, smaller than <h1> & <div class="introjs-helperLayer">
I have a link that, once clicked, reveals a menu. It is designed for smaller browser windows at a convenient breakpoint in the website design (965px). Here is how it is behaving in different browsers:
Firefox (desktop), Opera (desktop), Puffin (mobile):
Works perfectly.
Safari (desktop & mobile), Opera Mini, Google Chrome (mobile), Dolphin (mobile), Mercury (mobile), Coast by Opera (mobile):
Doesn't show at all - however, if I click (or tap) the menu and then click where the dropdown should be, it triggers the links - so the menu is there, just completely transparent!
Google Chrome (desktop):
Exact same transparent-but-still-functioning behavior as above but only when it is sitting over the image gallery I have at the top of the page; when I scroll past the gallery it appears and functions normally.
I'm a little perplexed as to why this would be. So far seems to be a CSS issue but I can't seem to nail it down; I'm adding notes to go along with the code below.
I also have tried enabling/disabling the entire image gallery but again, it had no effect.
Here is a link to the site thusfar:
http://www.evinulrichpohl.com/trenholmetest
And here's some snippets of the code relevant to the click menu:
HTML:
<div id="hammenushowbio" class="viewmenu">MENU</div>
<div id="hammenu">
<div class="hammenulinks">
<ul>
<li data-slide="2" onclick="document.getElementById('hammenu').style.display='none';"><div class="hamtext">FIRM PROFILE</div></li>
<li data-slide="3" onclick="document.getElementById('hammenu').style.display='none';"><div class="hamtext">CLIENT SERVICES</div></li>
<li data-slide="4" onclick="document.getElementById('hammenu').style.display='none';"><div class="hamtext">OUR TEAM</div></li>
<li data-slide="5" onclick="document.getElementById('hammenu').style.display='none';"><div class="hamtext">CONTACT US</div></li>
</ul>
</div>
</div>
</div>
CSS:
.viewmenu{
display:none;
float:right;
font-size:13px;
font-weight:600;
text-align:right;
margin-right:30px;
color:#FFFFFF;
letter-spacing:1.5px;
cursor:pointer;
}
#hammenu{
position:fixed;
z-index:99; //enabling/disabling has no effect
width:100%; //enabling/disabling has no effect
margin-top:55px;
left:0; //enabling/disabling has no effect
}
//enabling/disabling from here downward has no effect
#hammenu:after{
content:"";
position:absolute;
display:block;
width:0;
height:0;
}
.hammenulinks{
display:inline-block;
float:left;
width:100%;
font-size:16px;
}
.hamtext{
margin-left:30px;
letter-spacing:1.5px;
}
.hammenulinks li{
background-color:#FFFFFF;
color:#1E2129;
display:block;
text-align:left;
padding-top:20px;
padding-bottom:20px;
border-bottom:1px #eeeeee solid;
}
.hammenulinks li:hover{
cursor:pointer;
background-color:#eeeeee;
}
Jquery (It doesn't appear to be a JS issue as I have utilized the exact same click functions more than a dozen other times on the site and they are all working correctly in all desktop and mobile browsers. However, my knowledge of JS is quite limited at this point so I can't rule it out for sure):
$(document).ready(function () {
var $slides = $('#hammenu').hide();
$('div#hammenushowbio').show().click(function () {
var $slider = $(this).next("#hammenu");
if (!$slider.length){
$slider = $(this).closest("#hammenu");
}
$slides.not($slider).stop(true, true).slideUp();
$slider.stop(true, true).slideToggle(0);
});
});
Mediaq (enabling or disabling has no effect):
#media (max-width : 965px){
.viewmenu {
display:inline-block;
}
#hammenu {
display:inline-block;
}
}
#media (min-width : 966px){
#hammenu {
display:none !important;
}
.viewmenu {
display:none !important;
}
}
I'm pretty sure that the "click" event is a "mouse" left-click event only. Tablets and smartphones and other touch-based devices won't trigger it. They will, however, trigger javascript that's coded in the href of an anchor tag. Ex:
<div class="viewmenu">MENU</div>
A much more elegant alternative IMO would be to use the jQuery Mobile plugin to support both desktop AND mobile devices. Get rid of the anchor tag around the MENU div and bind the TAP event directly to the DIV itself:
$('div.viewmenu').on('tap', function() {
var $slider = $(this).next("#hammenu");
if (!$slider.length){
$slider = $(this).closest("#hammenu");
}
$slides.not($slider).stop(true, true).slideUp();
$slider.stop(true, true).slideToggle(0);
});
Just a quick word of caution though. Mobile devices tend to have far more limited amount of resources than desktops (CPU, Memory, etc), so when using the jQuery mobile plugin, just download the components you need to keep the javascript file as small as possible. They provide a great resource for this in the downloads section. Take advantage of it. :)
Figured it out! It's now working across the board.
Thanks to fastsol over at codingforums.com
I had overflow:hidden; as a property of my .navigation div... yeah...
A left-over bit of code from an earlier experiment for the drop-down menu.
Serves me right for not tidying up properly!
I tried searching for an answer first, but this seems to be an edge case.
I'm adding a class to a link via JavaScript (well jQuery actually but I don't think it matters in this case). The class adds an icon as a background image and some padding. The padding and background image fail to appear on certain links. The problem shows up in IE8, but surprisingly works fine in IE7. I can't test IE9/10. Works fine in Firefox.
I reduced the code down to a bare minimum and created a jsFiddle that illustrates the problem. http://jsfiddle.net/toxalot/fsdcu/
I'll try adding the code here.
<style type="text/css">
body { background-color: #fff }
a:hover { background-color: transparent; color: #c30 }
ul { padding-left: 40px }
.iconNewWindowLeave { padding-right: 15px; background-color: #ccc }
</style>
<ul>
<li style="float: left"><a class="iconNewWindowLeave" href="#">left link</a></li>
<li style="text-align: right">some stuff on the right</li>
</ul>
<ul>
<li style="float: left"><a class="linkExternal" href="#">left link</a></li>
<li style="text-align: right">some stuff on the right</li>
</ul>
<script type="text/javascript">
$('.linkExternal').each(function() {
$(this).addClass('iconNewWindowLeave');
});
</script>
I've removed the image from the example and added a background color for illustration. In IE 8, the second link doesn't have right padding. Hovering over the link, adds the padding. If I remove the a:hover CSS, hovering doesn't correct the problem. If I remove the float, the problem goes away. If I remove any of the other CSS, the problem goes away.
So I've narrowed down the cause(s), but I don't know what to do about it. I don't want to remove or change the existing code. It's all required for the site layout. If possible, I'd like to add some CSS or JavaScript to fix it. It's a minor issue, but it's bugging me. I'm also curious as to whether or not the problem appears in newer versions of IE.
try to add : a display:inline-block; or display:block; to .iconNewWindowLeave
.iconNewWindowLeave { padding-right: 15px; background-color: #ccc; display:inline-block; }
(not tested)
Whenever you have some floating containers on the page, always clear the parent container.
In your case add a style clear:left on the ul. That should work.
And in case you are using many float throughout your application, better add a clearfix class on the parent container.
I have a background image for an input box..It works fine in IE/FF, but for some reasons it is not visible in iPad Safari..Below is the CSS for the same;
#rightContent .inputBox{
background:transparent url(images/keyback.gif) no-repeat scroll center 6px;
border:0pt none;
float:left;
height:40px;
#height:37px;
margin-left:10px;
width:450px;
overflow: hidden;
}
Please help. Thank you.
I would suggest splitting out the background style into seperate parts. Not all browsers support transparent (and possibly other parts of that style).
When a browser sees a style they don't know what to do with, they usually ignore the whole style. Putting the background-image onto it's own line (eg. it's own style) will let that property get picked up by browsers that can deal with it, rather than getting missed because it is lumped in with things the browser doesn't know about.
I believe the default value of background-color is transparent. Have you tried not setting a color? Also, since you have a set image with no-repeat, why not make the image a jpg/png and set a color to match the background-color you want.
I've had the same problem and have managed to get a working solution using jQuery
$(document).ready(function () {
var buttonsFilename = '<%=ResolveUrl("~/Content/Images/Buttons.png") %>';
$('.commands .command').css({
background: 'url(' + buttonsFilename + ')',
width: '55px',
height: '55px',
display: 'inline-block'
});
});
I'm using this within an ASP.NET MVC website, hence the <% %> tag.
I could only get it to work using the background shortcut css property. I couldn't get any of the following to work ...
background-image
backgroundImage
'background-image'
... when using the object notation. Unfortunately that wipes out any other background settings you may have. But I got around that by using another piece of jQuery to set my background-position property.
I am having the same problem, but I found that the image slice I was using was too thin to display on iPad. It is a texture, so I was using a 15px slice and an x-repeat, which is fine in all browsers but not iPad. After some experimenting I found that the threshold for iPad seems to be 130px.
I try to achieve the following output:
i want to achieve this with HTML and CSS. I do not want to use CSS3(as my client do not want me to!). I try the following code:
HTML:
<div class="menu">
<ul>
<li>registration</li>
<li>Contact</li>
<li>Sch's direc</li>
<li>faculty & staff</li>
<li>Campuses</li>
<li>History</li>
<li><a href="" >Mission</a><img src="images/right_menu.png" /></li>
<li style="margin:0;padding:0;"><img src="images/left_menu.png" /></li>
</ul>
</div>
CSS:
.menu ul{
list-style:none;
}
.menu li{
float:right;
background:url('images/menuBGrepX.png') repeat-x ;
margin-right:10px;
text-transform:uppercase;
}
.menu a{
display:block;
text-decoration:none;
color:#fff;
padding:5px 2px;
float:left;
}
.menu li.selected{
background:#A07E4E;
}
.menu li:hover{
background:#A07E4E;
color:#313131;
}
As you can expect the background color of li is changing when some one hover over it but the left and right image which I use for give a rounded border feel, it remain same. Please help me. You can check temporary work here : http://www.examplecode.info/enam/pleasehelp/.Thanks in advance.
Use jQuery round corner plugin for cross browser round corners.
http://jquery.malsup.com/corner/
It's supported in all browsers including IE. It draws corners in IE using nested divs (no images). It also has native border-radius rounding in browsers that support it (Opera 10.5+, Firefox, Safari, and Chrome). So in those browsers the plugin simply sets a css property instead.
Here's How to use it
You need to include the jQuery and the Corner js script before </body>. Then write your jQuery like $('div, p').corner('10px'); and place before ''. So your html will look like the below code. Here i'm making round corners for all div and p tags. If you want to do it for specific id or class then you can do something like $('#myid').corner();
<body>
<div class="x"></div>
<p class="y"></p>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://github.com/malsup/corner/raw/master/jquery.corner.js?v2.11"></script>
<script>$('div, p').corner();</script>
</body>
Check working example at http://jsfiddle.net/VLPpk/1
I'd love to know why your client asked you not to use CSS3 rounded corners? It sounds like a very short-sighted request. The only possible reason for specifying that is because certain browsers (IE6/7/8) do not support it.
In all other browsers, CSS border-radius is by far the best solution for rounded corners. All other solutions have major issues. There's a reason why the CSS3 solution is suddenly very popular, and it's because it solves all the problems that people were struggling with previously.
There are a number of solutions which allow CSS3 border-radius to be used by browsers which support it, and fall-back to Javascript for IE6/7/8. I would seriously recommend one of these solutions. The best one that I know of is CSS3Pie, but there are a number of others.
Is JavaScript allowed?
give all the elements an id, and add to the link an onMouseOver() and onMouseOut() event, where you call getElementById() on each of your borders and change them with a src="images/newimage.jpg".
In your css for hovered list element you must change the image too. For example :
.menu li:hover {
background:url('images/menuBGrepX_hover.png') repeat-x ;
color:#313131;
}
You can't change the color of the image only with CSS, you must change the image entirely.