I am trying to implement a rounded corner to a box in my html code.
When I run the file on Chrome, I have the box and all the attribute but the corners won't round.
I am using Komodo Edit on MAC OSX Lion.
What's the solution?
Thanks
<!doctype html>
<html lang="en">
<head>
<meta charset=="utf-8" />
<link rel="stylesheet" href="new.css" />
</head>
<body>
<div id="box">
<p id="text"> Hello </p>
</div>
</body>
</html>
CSS3:
body {
text-align:center;
}
#box {
display: block;
width: 500px;
margin:50px auto ;
padding:15px ;
text-align:center;
border: 1px solid blue;
background: red;
-webkit-border-radius: 25p;
}
#text {
font:bold 100px Century Gothic;
}
The problem is probably that it should be 25px instead of 25p.
But depending on you Chrome version, you should drop the -webkit- and just use border-radius;
You don't need -webkit- on there. Just use border-radius.
The main problem is that you missed the x on 25px.
Looks like a typo
-webkit-border-radius: 25p;
Should be
-webkit-border-radius: 25px;
You missed an x on the end. For cross browser compliancey, you should really use several prefixes.
-moz-border-radius: 25px; /*Firefox*/
-webkit-border-radius: 25px; /*Safari/Chrome/Konqueror*/
-khtml-border-radius: 25px; /*Konqueror*/
border-radius: 25px; /*Chrome*/
Related
I have to create a format for my web application which is the given in the image below.Using CSS only, I styled my-ad div as shown in the picture.
There is a 10px padding from the border for the word "Hello Coder" and the font of which has to be in "Tahoma"
Here is my code which I tried but was getting an error with the font family tahoma and the border width.
#my-div{
margin-top: 20px;
margin-left: 10px;
margin-bottom: 5px;
padding-left: 10px;
border-style:solid;
border-width: 20px;
font-family:tahoma;
font-weight:bold;
}
<html>
<head>
</head>
<body>
<div id="my-div"> Hello Coders
</div>
</body>
</html>
Im creating a simple webpage. My CSS is only working in Chrome. It doesnt work in both Firefox and IE11.
Here's my HTML
<html>
<head>
<title>text</title>
<link href="css/stylesheet.css" type="css/stylesheet" rel="stylesheet" media="all"/>
</head>
<body>
<h1><b><u>Adding a new Visitor</u></b></h1><br/></br>
<div class="wrapper">
<figure>
<img src="images/advis1.png"/>
<figcaption style="padding-top: 12px;">text</figcaption>
</figure>
<hr/>
<figure>
<img src="images/advis2.png"/>
<figcaption style="padding-top: 12px;">text</figcaption>
</figure>
<hr/>
<figure>
<img src="images/advis3.png"/>
<figcaption style="padding-top: 12px;">text.</figcaption>
</figure>
<hr/>
<h3><u>Result</u></h3>
<img src="images/advis4.png"/>
<br/>
<img src="images/advis5.png"/>
</div>
<footer>
Author: Malcolm Tanti | Contact information: xxxxm
</footer>
</body>
And here is my CSS
h1 {
text-align: center;
border-bottom: double;
border-left: double;
border-right: double;
width: 75%;
margin: 0 auto;
padding-top: 25px;
padding-bottom: 25px;
background-color: #C4CEDD;
box-shadow: inset 0 20px 20px -20px #000000;
}
body {
padding:0px;
margin:0px;
border:none;
background-color: #7ea2d6;
font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
}
.wrapper {
box-shadow: inset 0 20px 20px -20px #000000;
border: double;
padding-top: 50px;
padding-bottom:50px;
width: 75%;
margin: 0 auto;
text-align: center;
font-size: 20px;
background-color: #C4CEDD;
}
img {
border:3px double;
display: block;
margin: 0 auto;
}
footer {
padding-top: 10px;
text-align: center;
font-size: 14px;
}
I am quite new to CSS but and HTML. It works prefectly fine in Chrome which leads me to wonder what the problem is. My Problem is that none of the css loads and that all images and text are not aligned. I do not even have anycolours
I tested your code and found that if you remove type="css/stylesheet" from:
<link href="css/stylesheet.css" type="css/stylesheet" rel="stylesheet" media="all"/>
so it looks like:
<link href="css/stylesheet.css" rel="stylesheet" media="all">
You also don't need the closing / at the end.
It fixes the issue. (Tested on standards mode not quirks)
And you shouldn't need to do this:
<h1><b><u>Adding a new Visitor</u></b></h1><br/></br>
The underline, font-weight and spacing (margin/padding) should be done in your CSS:
<h1>Adding a new Visitor</h1>
h1 {
text-align: center;
border-bottom: double;
border-left: double;
border-right: double;
width: 75%;
margin: 0 auto;
padding-top: 25px;
padding-bottom: 25px;
background-color: #C4CEDD;
box-shadow: inset 0 20px 20px -20px #000000;
text-decoration: underline;
font-weight: bold;
}
Hope that helps.
Solved by using type="text/css" instead of type="css/stylesheet" when importing the stylesheet.
for internet explorer add this
<!--[if lt IE 9]
< script src = "//html5shiv.googlecode.com/svn/trunk/html5.js" > < /script>
<![endif]-->
It can be because of browser cache. Please clear browser cache by CTRL + F5
I had the same problem and none of the above fixed my issue. In my case, in the end, the solution was simple:
Somehow IE doesn't load the CSS if you are running the page locally (as in stand-alone in your browser). I uploaded the exact same script to a webserver and it works like a charm!
msvk_23 is right.
I had a local html page, instead of post-it.
After I have installed Notepad++ it was all messed up in Internet Explorer and Edge, but not in Google Chrome.
When checking registry it said: text/xml
After changing this to text/css as suggested, it worked immediately in both Internet Explorer and Edge.
Thanks msvk_23 :)
pic of regedit
Try this option:
Please run regedit.exe and navigate to the key HKEY_LOCAL_MACHINE\SOFTWARE\Classes.css
Modify: "Content Type" from "text/plain" to "text/css"
For me the css was not at all recognizing in IE 11. By changing this entry in regedit. It perfectly worked in my PC.
I am using border-radius for buttons throughout a page that I am developing. In IE8 since the border radius isn't supported, the buttons show up as rectangles instead of rounded rectangles. To help rectify this, I've added a background image in hopes for it to fallback to it in the case of when it is IE8. This seems to pose two problems:
1) It doesn't fall back to the image, the background-color seems to still override the image
2) In newer browser versions of Chrome, etc, it doesn't show the border-radius, it defaults to the background image.
See this fiddle for CSS for Chrome/Safari/Firefox: http://jsfiddle.net/s33Mb/
<a href="download.html" class="download-button">
<div class="now">DOWNLOAD NOW</div>
<div class="arrow-right"></div>
</a>
.download-button {
background-color:#1c9aca;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
position: absolute;
width: 133px;
height: 25px;
text-decoration:none;
}
.now {
width:109px;
position:absolute;
font-family:Arial;
font-size:12px;
font-weight:bold;
position:absolute;
bottom: 5px;
left: 18px;
color:#ffffff;
}
.arrow-right {
width: 0px;
height: 0px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid #fff;
position: absolute;
bottom: 7px;
left: 8px;
}
Fiddle attempt for IE: http://jsfiddle.net/MZ72w/ - which you can see in chrome/safari/firefox it is only showing the background image now, but in IE it shows a square rectangle.
In my header I also have:
<!--[if IE 9]> <link href="css/ie9.css" rel="stylesheet" type="text/css" /> <![endif]-->
<!--[if IE 8]> <link href="css/ie8.css" rel="stylesheet" type="text/css" /> <![endif]-->
<!--[if IE 7]> <link href="css/ie7.css" rel="stylesheet" type="text/css" /> <![endif]-->
I have tried to add the download-now selector to these style sheets, but IE doesn't seem to list. Any light on either of these subjects would be great!
I noticed when I use border-radius with padding and the direction of HTML is RTL it is not working as expected. It works fine if remove the direction part dir="rtl". The following codes will show how it works without and with dir="rtl"
without dir="rtl":
<!DOCTYPE html>
<html >
<head>
<title>test</title>
</head>
<body>
<style type="text/css">
.main {
padding:5px;
}
.tag{
background-color: #0473c0;
border-radius: 3px 3px 3px 3px;
padding:5px;
}
</style>
<div class="main">
<span class="tag">test</span>
</div>
</body>
</html>
Result:
with dir="rtl":
<!DOCTYPE html>
<html dir="rtl">
<head>
<title>test</title>
</head>
<body>
<style type="text/css">
.main {
padding:5px;
}
.tag{
background-color: #0473c0;
border-radius: 3px 3px 3px 3px;
padding:5px;
}
</style>
<div class="main">
<span class="tag">test</span>
</div>
</body>
</html>
Result:
As you can see the text moved to the left and background moved to the right. I tested it on IE10 and IE9. Is there any fix for this problem or any work around?
Making the .tag display as an inline-block seems to resolve this:
.tag {
background-color: #0473c0;
border-radius: 3px 3px 3px 3px;
padding:5px;
display: inline-block;
}
See also this jsfiddle for a working demo. (Tested in IE10, Win8).
However, I'm not sure whether this messes with the flow of text in RTL documents in any way.
I have this html and css code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<style>
div.container{
border: 1px solid #F00;
}
a.padded
{
font-size: 14px;
font-weight: bold;
text-decoration: none;
background-color: #F0F0F0;
border: 1px solid #666666;
padding: 15px;
margin: 10px;
border-radius: 5px;
box-shadow: #CCC 2px 2px 2px;
color: #333333;
}
</style>
</head>
<body>
<div class="container">
my padded link
</div>
<div>Some other content</div>
</body>
</html>
I was expecting the padded link to be contained in it's parent DIV block where the DIV would expand to whatever height of the padded link. However it seems the link padding is ignored by the DIV and everything else on the page.
Why does this happen and how do I properly pad a link?
What you need to do is, give your anchor tag an display:block property.
a.padded {
display: block;
/* display:inline-block; should
work too but is not supported in some version of IE */
}
Anchor tags are inline objects.
Add display: inline-block; to .padded. and it should work.
http://jsfiddle.net/6h7MY/
Because I've asked myself this question recently, this article is a big help as to why this is happening. The relevant bit is:
The W3C’s CSS2 spec states that for Inline, non-replaced elements,
the ‘height’ property doesn’t apply, but the height of the box is given
by the ‘line-height’ property.