I've got a table and inside of it I'm trying to give each td element rounded corners through css3. This works in Firefox, Chrome, Safari but not Opera and IE9. I just have to make this work for IE9 maybe someone knows what I'm doing wrong. I'm going to give pieces of the code cause there is a lot.
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); ?>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=1024">
</head>
<div class="timeline_page_wrapper">
<div class="wrap">
<table class="events_table">
<tr>
<th id="oct12">October</th>
<th id="nov12">November</th>
<th id="dec12">December</th>
<th id="jan13">January</th>
</tr>
<td class="event fn_milestone fn_healthcare fn_regulation fn_priority_med priority2 ">
<a class="inline-cBox" href="#milestone_3">
<div class="content">Again, Not Very Important</div>
<div class="lower">
<hr>
<span class="date">10.2012</span>
<span class="type">Regulation</span>
<img src="http://policyapp.beamland.com/img/icon-medical.png" alt="" height="21px" />
</div>
</a>
</td>
And the CSS:
td.event {
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
-ms-border-radius:12px;
-o-border-radius:12px;
border-radius: 12px;
-webkit-box-shadow:
0 1px 2px #fff, /*bottom external highlight*/
1px 1px 1px #666, /*side right external shadow*/
inset 0 -1px 1px rgba(0,0,0,0.5), /*bottom internal shadow*/
inset 0 1px 1px rgba(255,255,255,0.8), /*top internal highlight*/
inset -1px 1px 1px rgba(0,0,0,0.5); /*side right internal highlight*/
box-shadow:
0 1px 2px #fff, /*bottom external highlight*/
1px 1px 1px #666, /*side right external shadow*/
inset 0 -1px 1px rgba(0,0,0,0.5), /*bottom internal shadow*/
inset 0 1px 1px rgba(255,255,255,0.8), /*top internal highlight*/
inset -1px 1px 1px rgba(0,0,0,0.5); /*side right internal highlight*/
behavior: url('../pie/PIE.htc');
}
When I look at the web inspector for IE9 it shows the borders being applied but dosen't show up. Any help would be greatly appreciated.
I will answer my own question because I didn't give enough of the CSS when I asked the question. Apparently IE 9 does not like you to use gradients and rounded corners at the same time. That was the problem I was having but didn't realize it. So I solved this by just using a solid color and voila the rounded borders appear.
just add
border-radius: 12px;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
border-bottom-right-radius: 12px;
border-bottom-left-radius: 12px;
E9 will use the default border-radius, so just make sure you include that in all your styles calling a border radius. Then your site will be ready for IE9.
-moz-border-radius is for Firefox, -webkit-border-radius is for Safari and Chrome.
Furthermore: don't forget to declare your IE coding is ie9:
<meta http-equiv="X-UA-Compatible" content="IE=9" />
It is not planned for IE8. See the CSS Compatibility page.
Related
I'm in the middle of applying inline CSS-styling to HTML for email and I'm encountering a problem that when I send a test mail, the CSS-styling partially works. Does anyone know how I can fix this problem?
Steps to reproduce:
Step 1 - applying CSS-styling to HTML in an inline way (see code below).
<div class=" product-items" style="max-width: 600px;">
<div class="button-div" style="margin-bottom: 45px; text-align: center;">
<a href="#" style="background: #F26E11; padding: 13px 24px 14px; box-shadow: 16px 20px 10px rgba(0, 0, 0, 0.01), 9px 12px 9px rgba(0, 0, 0, 0.05), 4px 5px 6px rgba(0, 0, 0, 0.09), 1px 1px 4px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1); border-radius: 15px; margin: auto; color:#FFF; text-decoration: none;">
<span>Bestelling afmaken</span>
<span class="arrow-icon" style="background: #F9B788; border-radius: 50%; padding: 1px 3px;">
<img src="//app.squeezely.tech/uploads/prod/personalization/63c01436e8098.png">
</span>
</a>
</div>
<table align="center" class="mcnTable product-item" border="0" cellpadding="0" cellspacing="0" width="288" style="margin-top: 10px; background: #F9F9F9; box-shadow: 9px 22px 10px rgb(51 33 42 / 2%), 5px 13px 8px rgb(51 33 42 / 5%), 2px 6px 6px rgb(51 33 42 / 9%), 1px 1px 3px rgb(51 33 42 / 10%), 0px 0px 0px rgb(51 33 42 / 10%); border-radius: 10px;">
Result:
It should look like this
but the actual result is:
When inspecting on chrome-console some inline styling seems to be removed, for example: table-tag:
Does anyone have some advice of how I can able to solve this issue?
Gmail doesn’t support box-shadow (see Can I email for details). It should by default only remove the box-shadow property. But in the case of your <table> tag, you’re using a slash notation (rgb(51 33 42 / 2%)). This makes Gmail’s parser go absolutely berserk and remove the entire corresponding inline style attribute. (You can read more about this specific issue here.) In that case, it’s safer to not use this slash notation (and preferably use an hexadecimal color).
I have this div:
<!------ CONTENT ------>
<div id="content">
<div class="top">
I am cool<br />
I am cool<br />
I am cool<br />
I am cool<br />
</div>
</div>
<!------ /CONTENT ------>
With this CSS:
#content{
height:auto;
width:100%;
background-color:#FF0000;
}
#content .top{
margin:15px 35px 35px 35px;
padding:20px;
width:inherit;
height:inherit;
position:absolute;
-moz-box-shadow: 5px 5px 10px rgba(0,0,0,.8), inset 2px 2px 2px rgba(0,0,0,.2), inset -2px -2px 3px rgba(255,255,255,.85);
-webkit-box-shadow: 5px 5px 10px rgba(0,0,0,.8), inset 2px 2px 2px rgba(0,0,0,.2), inset -2px -2px 3px rgba(255,255,255,.85);
box-shadow: 5px 5px 10px rgba(0,0,0,.8), inset 2px 2px 2px rgba(0,0,0,.2), inset -2px -2px 3px rgba(255,255,255,.85);
-moz-border-radius: 5px;
border-radius: 5px;
background-color:rgba(224,224,224,.92);
}
I thought this would make the content div to be as wide as the browser window, and then resizing the .top div to fit inside of that while also having padding and margin (No idea how to explain that well enough), but it does not. Instead .top is just as wide as the screen, but because of the margin it extends to somewhere outside the window and then adds another margin causing it to have a horizontal scrolling bar, like this:
As you can see it should way more to the left, having a margin of 35 and the end of the page should be where the header ends.
I hope this is clear, I have never explained anything like this but I hope someone can help me out here, this is really bugging me.
If you disregard floats, position absolute and its ilk:
the width:100% refers to the closest enclosing box.
My guess would be that you have an element around your content that is not as wide as you think.
( planting *{border: 1px solid red} somewhere in your css for debugging never hurts ;) )
Your problem is that width specifies the inner container width, and that margin and padding are added on.
I don't understand why you're using position: absolute here.
Is this behaving as expected?
I am trying to link buttons using a button tag that is set to show a button made with CSS3.
The button works and display properly in Chrome and Safari but in FireFox the button shows but it doesn't link, it also messes up the style of the page a bit.
I know you use to not be able to use the
The link to the page is here http://pt11.com/index2.php?x=videos.html
Here is my HTML:
<head>
<link rel="stylesheet" type="text/css" href="videos.css" />
</head>
<br>
<div class="vidholder">
<div class="textbox">
<h2>Eythor Bender at TEDMED 2011</h2>
</div>
<div class="textbox2">
Eythor Bender's Ekso Bionics makes powered, wearable robots known as "exoskeletons" that boost human strength, endurance, and mobility. But can they help a paraplegic walk? Watch this incredible story.
</div>
<div class="img">
<img src="ted.png">
</div>
<button type="button" name="" value="" class="css3button">Watch Video</button>
</div>
<br>
</div>
Then the CSS for the button
button.css3button {
padding
margin:-3px 0px 0px 325px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #ffffff;
padding: 10px 20px;
background: -moz-linear-gradient(
top,
#ff2819 0%,
#ab0000);
background: -webkit-gradient(
linear, left top, left bottom,
from(#ff2819),
to(#ab0000));
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border: 1px solid #7d0000;
-moz-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 2px rgba(255,255,255,0.7);
-webkit-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 2px rgba(255,255,255,0.7);
text-shadow:
0px -1px 0px rgba(000,000,000,0.4),
0px 1px 0px rgba(255,255,255,0.3);
}
Is there a reason that you need the button element? Why not just use
<a class="css3button">
and change your css selector to match. That would apply the styles to the anchor, remove the need for the button element, and it would work in all browsers.
I want to create a content wrapper with a left and right shadow, not a bottom shadow. This is sort of what I'm going for: http://community.mybb.com/ notice the shadow (though this uses an image, not css).
What's the best way to do this with CSS?
Your best bet is to use an image to be compatible with older browsers. For CSS you'll use box-shadow but IE9 is the first IE to support box-shadow.
That being said you'll need to use two box-shadow properties if you want to use CSS. You'll need to do two of them.
Take a look at http://css-tricks.com/snippets/css/css-box-shadow/
Also the generator at http://css3generator.com/
Here is a vague idea of what to do
<div id="leftBorder">
<div id="rightBorder">
<div id="content">Content here</div>
</div>
</div>
#leftBorder {
-webkit-box-shadow: -10px 0px 5px 0px #999999;
-moz-box-shadow: -10px 0px 5px 0px #999999;
box-shadow: -10px 0px 5px 0px #999999;
}
#rightBorder {
-webkit-box-shadow: 10px 0px 5px 0px #999999;
-moz-box-shadow: 10px 0px 5px 0px #999999;
box-shadow: 10px 0px 5px 0px #999999;
}
Alternatively you can potentially set just the border property alone bit it won't give you the nice fuzzy shadow look.
It may be tough to support below IE9 and you may need to throw in some pictures anyway. An old A List Apart article explains how to do this but it's not pretty.
http://www.alistapart.com/articles/cssdrop2/
can anyone provide insight or a sample of how to create a css based bubble container for html to go inside it?
im looking to make a rounded table. that is to say i want the result to look like a table but with rounded edges. and it would be great to have a slight gradient inside as well.
i found one sample on this site: http://www.seekdotnet.com/
see on the right where they have the "We Are Here to Help!" section.
It is generally called rounded corners. You can do that using css only. Here is a great list of techniques. Also if you want to use javascript or jQuery in specific, there is a plugin for that called rounded corners (note: javascript is not a mandatory for doing what you want, but it is definitely a easy way).
The boxes can be given curvy or round corners using the border-radius attribute in CSS.
Example:
#myBtn {
border: none;
outline: none;
background-color: red;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 10px;
box-shadow: 3px 3px 3px black;
}
#myBtn:hover {
background-color: orange;
}
#myBtn2 {
border: none;
outline: none;
background-color: red;
color: white;
cursor: pointer;
padding: 15px;
box-shadow: 3px 3px 3px black;
}
#myBtn2:hover {
background-color: orange;
}
<!DOCTYPE html>
<html>
<head>
<title> Test </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="myBtn">
Button
</div>
The above is a button with curved corners.
<div id ="myBtn2">
Button
</div>
The above is a button with pointed corners.
</body>
</html>
The more the number of pixels in border-radius, the rounder the corners get.
To know more about border-radius, please visit https://www.w3schools.com/css/css3_borders.asp
Hope this helps...
Depends. if you need it to fully compatible with browsers that don't support CSS3, then try Here
if you want css3 rounded corners then try here for:
#example1 {
-moz-border-radius: 15px;
border-radius: 15px;
}
I may have misread the question and, if so, please accept my apologies.
As far as I can tell, the rounded corners in the example you give are, like I previously said in a comment, done by images. You should look into #Teja's answer as he points you in the right direction but, just for you reference, here goes the HTML and CSS used to recreate the layout you mention:
<div id="chat-panel"><h3>We Are Here to Help!</h3>
<p>We are extremely proud of our support and are available to help you at anytime.</p>
<span class="panel-bottom">
<a href="javascript: var e = window.open('http://livechatserver.seekdotnet.com/SightMaxAgentInterface/PreChatSurvey.aspx?accountID=1&siteID=1&queueID=2','chatWindow','width=490,height=404,resizable=0,scrollbars=no,menubar=no,status=no');">
<img alt="Click Here to chat with us" src="/images/button/btn_chat_new.gif">
</a>
</span>
</div>
#chat-panel {
background:url("http://www.seekdotnet.com/images/sidepanel_repeat.png") repeat-y scroll 0 0 transparent;
margin-bottom:1em;
text-align:center;
}
#chat-panel {
background:url("http://www.seekdotnet.com/images/sidepanel_repeat.png") repeat-y scroll 0 0 transparent;
margin-bottom:1em;
text-align:center;
}
#chat-panel p {
padding:0 10px;
}
#chat-panel .panel-bottom, #special-offer .panel-bottom {
background:url("http://www.seekdotnet.com/images/sidepanel_bottom.png") no-repeat scroll left bottom transparent;
display:block;
padding-bottom:10px;
}
after looking over all the notes here and searchign the web high and low i came to the conclusion that this is the best way to get rounded corners...
http://blog.benogle.com/2009/04/29/css-round-corners/
using lines of variable length to create the top and bottom curves.
feedback?
For browsers that support rounded corners, it's dead easy with a simple CSS function:
border-radius:10px;
To support older versions of Firexfox, you will need -moz-border-radius as well.
Internet Explorer doesn't support rounded corners in CSS, but you can use CSS3Pie as a hack to allow it to support them. See the CSS3Pie website for more info on exactly how to use it.
However note that rounded corners on a table element are likely to be problematic. You'll want to wrap your table with a <div> and put the rounded corners on that instead.
A CSS3 rounded corner example to get you started:
<div class="mysexaybox">
<p>Cos boxes were made to be sexay!</p>
</div>
.mysexaybox {
background: #ccc;
background: -moz-linear-gradient(top, #ddd, #bbb);
background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#bbb));
border: 1px solid #bbb;
color: #000;
padding: 4px 8px;
text-shadow:0 -1px 0 rgba(255, 255, 255, 0.4);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
}
DD_roundies is a decent solution if you absolutely must support IE6-8 (IE9 will support the rounded corners above)
This is the best example and explanation I have seen of box with rounded corners.
The All-Expandable Box
There are many ways to do it, use this as some inspiration.