Rounded corners without position relative - html

I want exact piece of code to get rounded corners for this page http://www.freecsstemplates.org/preview/fotofolium/. When I use PIE.htc file, it's working only when I declare position:relative; everywhere I used it & that's disturbing the layout. Can someone suggest code that works without position attribute for that template.
I didn't give moz & webkit but,it's working in others like safari,chrome. I gave only
border-radius:5px;
behavior: url("PIE.htc");
position: relative;
to make it work in every browser. It's not working only in IE if I remove position attribute even with PIE.htc.I used moz, webkit for border box, maybe so workin with FF, Opera etc.

Use border-radius
Because IE doesn't support border-radius, you can use CSS3 PIE. Thats where the PIE.htc came from.

You can set the CSS declaration for the rounded corners for all browsers, and use an HTC for old versions of Internet Explorer.
Working example for the div with rounded corners with no position set!
CSS
.curved {
-moz-border-radius:10px; /* Firefox */
-webkit-border-radius:10px; /* Safari and chrome */
-khtml-border-radius:10px; /* Linux browsers */
border-radius:10px; /* CSS3 */
behavior:url(border-radius.htc) /* Internet Explorer */
}
.menu_buttons {
margin: 40px;
width: 100px;
line-height: 1.1em;
float: left;
vertical-align: middle;
cursor: pointer;
text-align: center;
font: 0.9em Arial, Helvetica, sans-serif;
color: #fff;
background-color: pink;
border: 1px solid red;
}
EXAMPLE HTML
<div class="menu_buttons curved">.menu_buttons element</div>
Download the border-radius.htc, and check out the CSS curved corner Demos and Page .
TESTED ON
Windows XP Profissional versão 2002 Service Pack 3
Internet Explorer 8.0.6001.18702
Opera 11.62
Firefox 3.6.16
Safari 5.1.2
Google Chrome 18.0.1025.168 m
K-Meleon 1.5.4
Windows 7 Home Edition Service Pack 1
Internet Explorer 9.0.8112.164211C
Opera 11.62
Firefox 12.0
Safari 5.1.4
Google Chrome 18.0.1025.168 m
Linux Ubuntu 12.04
Firefox 12.0
Chromium 18.0.1025.151 (Developer Build 130497 Linux)

Related

Responsive Web design In All Browsers using HTML and CSS

Hey i was using google chrome to write html, css, JS. CSS frame work i will use Bootstrap.
so i was tested on Chrome my code design how i am expect it works perfect and fine, when it comes to another browsers like Firefox and Opera, Internet Explorer, Safari it was not much expectedly work.
Like Box shadow and linear gradient some other.
i saw some CSS have -webkit, -o, -moz etc...
What are those means? and how i can learn them?
Kindly please tell how i can able to target css for particular browser like Opera and Firefox and safari.
-moz #media(min-width: 320px) and (max-width: 767px) {
/*
Here i would like to target only firefox
*/
}
Some css properties are named depending on which browser is being used so we add what is called a prefix so its compatible with all of them. Let's see box shadow:
.shadow {
-webkit-box-shadow: 3px 3px 5px 6px #ccc; /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
-moz-box-shadow: 3px 3px 5px 6px #ccc; /* Firefox 3.5 - 3.6 */
box-shadow: 3px 3px 5px 6px #ccc; /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}
There are autoprefixers also!

Alignment of input's placeholder issue

I've faced an issue with input (type search) in Google Chrome and other browsers. Please take a look on the basic HTML code:
<input type="search" placeholder="Search">
and CSS:
input {
height: 30px;
font-size: 16px;
}
JSFiddle Example. The problem is that the placeholder is not aligned well vertically in some browsers:
Google Chrome (v. 55.0.2883.87 m):
Mozilla Firefox (v. 45.0.2):
Internet Explorer (v. 11.576.14393.0):
Opera (v. 42.0.2393.94):
But it's displaying correctly (as I want it to be displayed) in:
Edge (v. 38.14393.0.0):
Safari (for Windows v. 5.1.7 7534.57.2):
I would be happy to place it precisely at the middle, please help to achieve this. Thank you!
UPD:
I've tried:
Resetting CSS;
Setting line-height;
Set paddings;
::-webkit-input-placeholder selector to set height / line-height;
It maybe problem with font-family. Today I've spent 6 hours to fix the same problem on Android. Eventually this was font "HelveticaNeueCyr" problem. The font has a gap on Android devices only which impossible to fix with css.
I changed to Arial and fixed it.
Add line-height to CSS:
input {
line-height:30px;
height: 30px;
font-size: 16px;
padding: 1px 0;
}
Modify line height because you use padding.

CSS letter-spacing SAFARI

I have my site how I like it, cross browser, although I have letter-spacing in CSS, but in safari it does not understand what I have, it ruins the design - any advice? Here is the CSS:
body
{
margin: auto;
font-family: 'Lato';
letter-spacing:0.50px;
font-size: 14px;
color: #999;
font-weight: normal;
}
It seems it doesn't give it any. It works fine in Mozilla Firefox
Webkit browsers (Safari, Chrome) round differently than Gecko (Mozilla). Thus, use 1px instead of 0.5px, as Webkit will round down to 0 while Mozilla will round up.
Chrome/Blink has fixed this issue some time ago so this should work on current stable version: http://src.chromium.org/viewvc/blink?view=revision&revision=153727
Webkit just fixed this, so you will have to wait a little to have it working on safari and other webkit based browsers:
http://trac.webkit.org/changeset/161521

Image to be displayed as a circled Image using css

Here's my code - This works in chrome, firefox and safari .. I have tested it on Windows 7
However in IE 8 and Opera browser the following code is not working and instead of showing a circled image I am getting Image in square form
<div id="hotspot-img1-0">
<ul>
<img class="proimg" src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/276311_100002617687873_1118195351_n.jpg" title="web" style="width:100px;height:100px;background:#fff;border:2px solid #ccc;-moz-border-radius:52px;-webkit-border-radius:52px;">
</ul>
</div>
CSS
#hotspot-img1-0{
top: 570px;
left: 67px;
height: 104px;
width: 104px;
border-top-left-radius: 52px;
border-top-right-radius: 52px;
border-bottom-right-radius: 52px;
border-bottom-left-radius: 52px;
box-shadow: 0px 2px 5px 0px;
border-top-color: rgb(255, 255, 255);
border-left-color: rgb(255, 255, 255);
border-right-color: rgb(255, 255, 255);
border-bottom-color: rgb(255, 255, 255);
border-top-width: 2px;
border-left-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-top-style: solid;
border-left-style: solid;
border-right-style: solid;
border-bottom-style: solid
}
#Sandhurst; first thing bad markup write like this:
<div>
<ul>
<li>
<img class="proimg" src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/276311_100002617687873_1118195351_n.jpg" title="web">
</li>
</ul>
</div>
& Answer for the question use background-image instead of img :
li{
background:url(image.jpg) no-repeat;
-moz-border-radius:52px;
-webkit-border-radius:52px;
border-radius:52px;
width:200px;
height:200px;
}
The border-radius CSS3 declaration is unsupported in Internet Explorer 8 and below. You can use the -o-border-radius declaration to get rounded borders in Opera.
CSS3 Pie may help with getting rounded borders in older versions of Internet Explorer, but I'd recommend just leaving them as square images (following the principles of graceful degradation and progressive enhancement).
It's a CSS3 issue. IE and Opera don't handle it well. You can use a solution like http://fetchak.com/ie-css3/ to resolve it if you would like.
Good luck!
At present Opera (version 10.5 onward), Safari (version 5 onward) and Chrome (version 5 onward) all support the individual border-*-radius properties and the border-radius shorthand property as natively defined in the current W3C Specification (although there are still outstanding bugs on issues such as border style transitions, using percentages for lengths, etc.).
Mozilla Firefox (version 1.0 onward) supports border-radius with the -moz- prefix, although there are some discrepancies between the Mozilla implementation and the current W3C specification (see below).
Update:Recent Firefox nightly versions support border-radius without the -moz- prefix.
Safari and Chrome (and other webkit based browsers) have supported border-radius with the -webkit- prefix since version 3 (no longer needed from version 5 onward), although again with some discrepancies from the current specification (see this article for further details of how older versions of Webkit handle border-radius).
Even Microsoft have promised, and demonstrated in their recent preview release, support for border-radius from Internet Explorer 9 onward (without prefix).
http://www.css3.info/preview/rounded-border/
Here is a website http://www.danielmall.com/ where the images are being displayed in circle. The author of the website has used jquery and css to get it working with both IE and firefox. Check out the page source and you will get some interesting info on how to use it.
Image maps could do it for you.
Clicking content below image with higher z-index
http://jsfiddle.net/u9cYZ/
http://jsfiddle.net/u9cYZ/3/
To my knowledge, there is no way to get Opera or IE to clip an <img> to a circle using CSS. border-radius will clip background images set in element styles though.
You might be able to clip things using SVG, but I wasn't able to get any of the examples on that page to work in Opera.

How to create background css div/rounded corners?

How can I create the following html/css style (rounded corners, basic background-color) highlighted in red box:
Use the border-radius CSS property to create rounded borders:
-moz-border-radius: 5px; /* Firefox 3.6-, removed in Firefox 13 */
-webkit-border-radius: 5px; /* Safari 4-, Chrome 3- */
border-radius: 5px; /* Firefox 4+, Safari 5+, Chrome 4+, Opera 10.5+, IE9+ */
You can leave out the prefixes, because Firefox 3.6 or old webkit browsers are almost extinct.
Although it's possible to get rounded corners in OldIE (IE8-) using divs+images or PIE.htc, I recommend against it: PIE is not very reliable, and adding several HTML hacks just to get something to work in old IE is a waste.
See also: MDN: border-radius.