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.
Related
Basically i just want to put a button around a link and this is my code:
.btn {
display: inline-block;
background: #ff523b;
color: black;
padding: 8px 30px;
margin: 30px 0;
border-radius: 40px;
}
Explore Now
Unfortunately, nothing happens when i add the CSS part. The link gets added in right part, but doing anything in CSS won't change the look of it. Where is my error please?
Your CSS must be inside the <style> tag, like this:
<!DOCTYPE html>
<html>
<head>
<style>
.btn{
display: inline-block;
background: #ff523b;
color: black;
padding: 8px 30px;
margin: 30px 0;
border-radius: 40px;
}
</style>
</head>
<body>
Explore Now
</body>
</html>
... or referenced with a link to a stylesheet (e.g styles.css) with your css styles
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
Explore Now
</body>
</html>
Note: In this example, the stylesheet is supposed to live in the same directory of your html file.
I have this really weird problem. I just want to draw two simple lines that are a little bit spaced out between one another.
Here's the html:
<div class="hline">
</div>
<div class="hline">
</div>
And the CSS:
html, body {
background-color: white;
}
.hline {
background-color: black;
height: 2px;
margin: 50px;
}
When the background color is of the body is white, it works flawlessly, but when it's black, and the background color of my divs is white, there just seems to be one big white line in the black background. Why is that?
Thanks a lot in advance,
Luke :D
it's working for me
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
html,
body {
background-color: black;
}
.hline {
background-color: white;
height: 2px;
margin: 50px;
}
</style>
</head>
<body>
<div class="hline">
</div>
<div class="hline">
</div>
</body>
</html>
I tried your code and this is what I got for a black background and a white line
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body { background-color: black; }
.hline {
background-color: white;
height: 2px;
margin: 50px;
}
</style>
</head>
<body>
<div class="hline"></div><div class="hline"></div>
</body>
</html>
The :active code works in all browsers, except IE8 (not 9). I've looked at other similar questions to this and have tried different methods. This is the code:
HTML:
<div id="main" style="color:white;font-family:Georgia">
<div id="button" onmouseup="someFunction()"></div>
<!-- other things -->
</div>
CSS:
#button
{
position: relative;
width: 241px;
height: 41px;
background-image:url("images/buttonStatic.png");
display: none;
}
#button:hover
{
background-image:url("images/buttonHover.png");
}
#button:active
{
background-image:url("images/buttonActive.png");
}
The button displays proper, changes to the second button when I hover over it properly, but doesn't change to the third button when I click on it.
I just tried this out in IE8 and it works fine. Make sure your DOCTYPE specification is declared correctly <!doctype html> and maybe try putting in the IE compatibility meta tag which is something like <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>.
On a side note, you shouldn't be using a <DIV> element as a button like that. You should use <button> or <a> with suppressed behaviour.
Edit
Here's my code...
<!doctype html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<title>Active Button</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?3.5.0/build/cssreset/cssreset-min.css&3.5.0/build/cssfonts/cssfonts-min.css"/>
<style type="text/css">
.button {
padding: 4px 12px;
border: solid #555 1px;
background-color: #ddd;
}
.button:hover {
background-color: #eee;
}
.button:active {
background-color: #09c;
color: #fff;
}
.frame {
padding: 2em;
}
</style>
</head>
<body>
<div class="frame">
<button class="button">I'm a Button</button>
</div>
</body>
</html>
Your code is fine, it's a known bug (sorry, discrepancy) in IE8.
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*/
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.