i understand how to create CSS3 round corners in FF & webkit however how would one create them in opera purely with CSS3.
Just use
border-radius: 5px;
/* or if you need to specify individual corners */
border-radius: 1px 2px 3px 4px;
Cheers, Turns out that Webkit(Chrome) beta now uses
border-radius:5px;
as well no need to use
-webkit-border-radius:5px;
neat. Mozilla will soon support this is guess.
Related
I've got an element it's position: absolute, and left:0;
As soon as I put in top:0; it disappears. I know it's there somewhere but I can't work out where. I tried increasing top by 10px at a time and decreasing by -10px at a time but it doesn't show up.
Is there any way I can see where it is positioned on the page easily so I can work out what I am doing wrong and bring it into view?
I don't know why left: 0; worked and top: 0; caused a problem but I added position: relative; to the parent which allowed me to see my element and position it.
Slimbox is working perfectly for me with one exception... my slideshows often open way to low. The positioning is effected by any scrolling already done on the page. Every time the page is scrolled a bit, the slideshow opens lower than it had previously for the same page. Scroll down the page much and the show can be completely out of sight.
lbCenter and lbBottomContainer in the CSS control the positioning, but I can't find how to adjust them accurately. The default is:
#lbCenter,
#lbBottomContainer {
position: absolute;
z-index: 9999;
overflow: hidden;
background-color: #fff;
}
In an old thread here, I found suggestion for adding:
top: 30px !important;
As long as !important is included, this does work but with a significant caveat; the caption is moved from below to above the image and covers some of it. ( And !Important doesn't seem like an ideal solution )
How can I adjust the positioning of both while keeping the caption below the image?
This one was on me. My links included href="#" as some others required. The # caused the page to scroll to the top even as the slide show opened where the link was located.
<a href="#" onclick="show('homes')">
Eliminating the hash tag resolved it.
I've got an issue with visibility of HTML elements in Safari (Mobile and Desktop) not rendering in the foreground that I've spent at least 8 hours of dedicated troubleshooting on trying to address.
The concept I'm after seems very simple; I'm trying to display a couple of labels (<p>'s and <a>'s within a <div> that is position:absolute;. I'm leveraging a 3rd party Javascript coverflow that is forcing the absolute positioning but I'm willing to make any modifications needed to get this working.
I naturally assumed this was a z-index issue that was only effecting Safari but there are no rendering issues in Chrome, IE, Edge, and Firefox including Android mobile devices.
The issue can easily be reproduced on www.bibleanthem.com when looking at the media coverflow from iOS/Safari and likely macOS; for a brief second while it is initially loading, the elements are visible and then the album artwork moves to the foreground. You can also see a slight hint of the '+1' badge on the corner at the lower edge of the album artwork. You can even click where the two invisible buttons are and interact with the document (e.g. play song immediately or add to playlist).
What I've Tried
Changing (and IIRC dropping entirely) transform usage from each Coverflow item (see "Additional Detail" section below for an important note)
z-index changes (including absurdly large values like 10000000000000)
Changing position to fixed, relative, sticky for the parent div
Changing position to fixed, relative, sticky for child elements
Changing display between block and inline-block
Changing overflow on most elements in the hierarchy
Additional Detail
I've seen issues in the past with Safari not playing nicely with transform; that could be the issue here and the symptoms are very similar to my past experiences but I haven't been able to fix the issue. This is where I'd guess the problem actually resides.
Rendered HTML for each Coverflow item
<div style="position: absolute; display: block; overflow: visible; left: 0px; top: 0px; margin: 0px; padding: 0px; max-width: none; max-height: none; border: none; line-height: 1; background-color: transparent; backface-visibility: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; width: 95px; transform: translate(142px, 119px); opacity: 1;"><p class="largeLabel"><i class="fa fa-list-ol"></i><span class="badge">+1</span><i class="fa fa-play play-btn-adjust"></i></p><p class="smallLabel"><span class="title-cf-main">Song Title</span><br><span class="title-cf-artist">Artist Title</span><br><span class="title-cf-verse">Acts 17</span></p></div>
How To Reproduce
Visit www.bibleanthem.com from desktop or mobile Safari and notice how the album artwork takes foreground positioning over the label/text.
Desired End State
The blue background label, song title, artist title, and verse title should be visible above the album artwork in the coverflow (as seen in non-Safari browsers)
Thank you in advance for any assistance you can provide. I can't tell you how much I'd appreciate addressing this issue!
Try setting the z-index on the div instead of the label. If you create a fiddle I'll play around with it a little more.
Is there a way to set a UIButton's border widths to different values, similar to CSS like border-width: 0 1px 0 0 or border-right-width: 1px?
Not with a standard UIButton, no. You'll have to use a custom button and create images that match your desired design.
No, it's not possible using APIs
This issue is about the CSS3 border-radius property (http://www.css3.info/border-radius-apple-vs-mozilla/)
An example of this problem is here:
http://jamtodaycdn.appspot.com/bin/rounded.html
In this URL, I have rounded divs that appear to be rounded in FF3, but on Safari and Chrome the rounded corners are not there.
The style is as follows:
-moz-border-radius-bottomleft:2px;
-moz-border-radius-bottomright:92px;
-moz-border-radius-topleft:92px;
-moz-border-radius-topright:2px;
-webkit-border-bottom-left-radius: 2px;
-webkit-border-bottom-right-radius: 92px;
-webkit-border-top-left-radius: 92px;
-webkit-border-top-right-radius: 2px;
I'm fairly sure that this CSS is formatted correctly, so I'm clueless as to what the problem is.
The problem appears to be in the 92px radia. It looks like the maximum radius that the 20-pixel-high div can handle is 18px. It's not necessarily obvious what a 92 pixel radius means in that case. However, you can specify both an X and Y radius using something like this:
-webkit-border-bottom-right-radius: 92px 18px;
(side note, you shouldn't use the same ID for multiple HTML elements. You should use class instead, and adjust your CSS selector so it says .round instead of #round.)
For anyone referring to this for help with rounded corners, I agree with Jacob's answer regarding Webkit, but the question also mentioned Chrome not working. Chrome uses standard CSS3 rounded corners which are exactly like Webkit's, but without the preceding '-webkit-' on the rule. These are as follows:
border-bottom-right-radius:2px;
To take into account Firefox, Webkit and Chrome, you'd need to do something like this:
-moz-border-radius-topright:3px;
-moz-border-radius-bottomright:3px;
-webkit-border-top-right-radius:3px;
-webkit-border-bottom-right-radius:3px;
border-top-right-radius:3px;
border-bottom-right-radius:3px;
The third set of rules are CSS3 rules and are supported by Chrome. This is a good way to also get rounded corners in IE using something like CSS3Pie: http://css3pie.com/
Don't you need to apply a border or border-width property as well as the various border-radius properties?
Also, I've noticed Safari dropping the radius above certain radius values - try reducing the pixel values & see what happens.
simple type just use:
border-radius:92px 92px 2px 2px;
where:
border-radius:top right bottom left;