text overflows when div grows past a certain height - html

I have the following div structure.
<!DOCTYPE html>
<html>
<head>
<title>Immigration Reform</title>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
<body>
<link rel="stylesheet" type="Text/css" href="css/test.css" media="screen" />
<div class ="HeaderWrap">
<div class ="Header">
<div Class="HeaderLogo"></div>
</div>
</div>
<div class ="BodyWrap">
<div class="Body clearfix">
<div class ="BodyLeft">
<div class ="HeadingBar1"><h7>You Have Questions?</h7></div>
<div class="list1">
<div class="HeadingBar2"><h7>We Provide Answers!</h7></div>
<div class="List2"></div>
</div>
</div>
<div class ="BodyRight">
<div class ="BodyRightText1"></div>
<div class ="BodyRightText2"></div>
<div class ="BodyRightText3"></div>
</div>
</div>
</div>
<div class ="FooterWrap">
<div class ="Footer">
<div class="FooterPicture"></div>
<div class ="Footer1"></div>
<div class ="Footer2"></div>
<div class ="Fotter3"></div>
<div class ="Footer4"></div>
</div>
</div>
</body>
</html
My problem is with the BodyLeft div which contains several other nested divs. the structure seems to work properly until the Bodyleft div get to a certain size and forces list2 text to pass the div and not push the footer down. here is an example of what happens.
https://www.dropbox.com/s/ukfq84b95unhytd/sampletext.PNG?dl=0
CSS Code
body{
margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;
padding: 0;
#color: black; font-size: 10pt; font-family: "Trebuchet MS", sans-serif;
#background-color: red;
#overflow: hidden;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1; /* ie 6/7 */
}
.dropcap {
font-size: 300%;
float: left;
line-height: 0.8em;
padding: 0 2px 0 0;
color:#690A22;
font-family: 'Helvetica Neue';
font-weight: bold;
position: relative;
left: -3px;
}
.HeaderWrap,
.BodyWrap,
.FooterWrap{float:left; width:100%; border:1px solid yellow; clear:both;}
.Header,
.HeaderBottom,
.Body,
.Footer{width:960px; border: 1px solid red; margin:0 auto; clear:both;}
.Header{height:227px; background:url("../Images/man-with-flag-1.png") no-repeat;#box-shadow: 0 0 20px 0 black; z-index:-1
-webkit-box-shadow: 4px 1px 18px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 4px 1px 18px 0px rgba(0,0,0,0.75);
box-shadow: 4px 1px 18px 0px rgba(0,0,0,0.75);clear:both;}
.HeaderLogo{float:left; height:100px; width:150px; box-shadow: 10px 10px 5px #000000; background:url("../Images/visa.png") no-repeat; position:relative; right:-45px; bottom:-165px; border:5px solid white; z-index:999;clear:both;}
.Body {position: relative; min-height: 550px;
-webkit-box-shadow: 4px 1px 18px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 4px 1px 18px 0px rgba(0,0,0,0.75);
box-shadow: 4px 1px 18px 0px rgba(0,0,0,0.75); clear:both;}
.BodyLeft{float:left; min-height: 950px; #border:1px solid yellow; position: relative; #top: -90px; z-index:-1;background:#b1b6bc; box-shadow: 0 0 15px 0 black; width:26%; clear:both;}
.HeadingBar1{float:left; line-height:50px; width:250px;text-indent: 10px; font-weight: bold; position:relative; top:100px; vertical-align:middle; #border:1px solid yellow;
background: #265884; /* Old browsers */
background: -moz-linear-gradient(left, #265884 0%, #000000 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#265884), color-stop(100%,#000000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #265884 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #265884 0%,#000000 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #265884 0%,#000000 100%); /* IE10+ */
background: linear-gradient(to right, #265884 0%,#000000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#265884', endColorstr='#000000',GradientType=1 ); /* IE6-9 */}
.list1{clear:both; position:relative; top:110px; color:#690A22; #border:1px solid yellow;}
.HeadingBar2{float:left; line-height:50px; width:250px;text-indent: 10px; font-weight: bold; position:relative; vertical-align:middle; #top:250px; #border:1px solid yellow;
background: #265884; /* Old browsers */
background: -moz-linear-gradient(left, #265884 0%, #000000 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#265884), color-stop(100%,#000000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #265884 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #265884 0%,#000000 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #265884 0%,#000000 100%); /* IE10+ */
background: linear-gradient(to right, #265884 0%,#000000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#265884', endColorstr='#000000',GradientType=1 ); /* IE6-9 */}
.List2 {clear: both; position:relative; top:20px; #border:1px solid yellow; margin:20px; text-align: center}
.BodyRight{float:right; min-height: 700px; #background:yellow; position: relative; #top: -150px; z-index:-1; #border:1px solid green; width:73%}
.LeftText{float:left; width:248px; border:1px solid white; position:relative; top:55px}
.BodyRightText1{float:left; #border:2px solid green; position: relative; width:98%; min-height: 690px; margin: 0 5px 0 5px;text-align:justify; z-index:-1}
.Footer{position:relative; z-index:-1; height:70px; background:#1c2f3d;background:url("../Images/footer2.png") no-repeat;
-webkit-box-shadow: 4px 1px 18px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 4px 1px 18px 0px rgba(0,0,0,0.75);
box-shadow: 4px 1px 18px 0px rgba(0,0,0,0.75);}
#.FooterPicture {float:left;box-shadow: 10px 10px 5px #000000; height:50px; width:248px; #border:5px solid white; background:url("../Images/.png") no-repeat;position:relative; #right:-5px; top:50px; z-index:-1}
h1 { font-size:14pt; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color:#690A22; }
h2 { font-size:12pt; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color:#690A22; }
h3 { font-size:10pt; font-weight: normal; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color:black; }
h7 { font-size:18pt; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color:#ffffff;}
Here is the code in http://jsfiddle.net/ylafont/b634rL8v/1/
Any Advice?


You are using top to offset the position of a relative element with HeadingBar1 and list1. Instead you should use margin-top and this will accommodate for the offset. Alternatively, add padding-bottom to the end of list1 of the same magnitude as the top offset you are using.
changed css
.HeadingBar1{
float:left;
line-height:50px;
width:250px;
text-indent: 10px;
font-weight: bold;
position:relative;
margin-top:100px; /* CHANGED FROM TOP */
vertical-align:middle;
#border:1px solid yellow;
background: #265884; /* Old browsers */
background: -moz-linear-gradient(left, #265884 0%, #000000 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#265884), color-stop(100%,#000000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #265884 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #265884 0%,#000000 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #265884 0%,#000000 100%); /* IE10+ */
background: linear-gradient(to right, #265884 0%,#000000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#265884', endColorstr='#000000',GradientType=1 ); /* IE6-9 */
}
.list1{
clear:both;
position:relative;
margin-top:110px; /* CHANGED FROM TOP */
color:#690A22;
#border:1px solid yellow;
}
PS. what are your doing with the # before some of your attributes? this is invalid css and isnt how to comment things out if thats what you're attempting (should use /**/ instead)
updated FIDDLE


Remove position:relative; from .list1 and .list2 ... this should fix push the footer down!
Also your are missing the starting unordered list tags <ul></ul> around your list items <li></li> in .list2.
You should also end all you rules in CSS with a ; (even the last ones). Might be worth running your css through a css validator.

Related

how to align 2 div inside a div?

I have this JSFiddle: Click here
<div id="header-parent">
<div id=header>
<div id=header-title><img src="${pageContext.request.contextPath}/icon/pizza2.png"><span>this is a title</span></div>
<div id=header-cart><div id="cart-title">
<div><span>0</span></div>
<div><span>pizza cart</span></div>
</div>
<div id="cart-icon"><img src="${pageContext.request.contextPath}/icon/shopping-cart.PNG"></div>
</div>
</div>
</div>
If you go to that page youll see that the right div is actually align under the header itself.
How can I set the right div to be inside the header?

A float always float above the next element. So place the header-cart before the cart-title.
Updated JsFiddle
Obs: I didn't fix the fiddle, there's some serious adjustments you have to make. You didn't quoted the ids, among other things...

http://jsfiddle.net/usnmLuy5/3/
Use display:block-inline to keep the blocks from using 100% width. Use a float on the cart, and set the height of the header so that the cart will fit. spell check height, there is a heigth in the CSS which is being ignored and is not needed.
#header-parent {
padding-top:5px;
padding-bottom:5px;
border-bottom: 1px solid White;
background: #45484d; /* Old browsers */
background: -moz-linear-gradient(top, #45484d 43%, #000000 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(43%,#45484d), color-stop(100%,#000000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #45484d 43%,#000000 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #45484d 43%,#000000 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #45484d 43%,#000000 100%); /* IE10+ */
background: linear-gradient(to bottom, #45484d 43%,#000000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}
#header {
position: relative;
margin-left: auto;
margin-right: auto;
cursor: pointer;
height: 36px; /* same as cart */
}
#header-child{
padding:5px 0 5px 0;
display:inline-block;
}
#header-title {
display:inline-block;
}
#header-title img{
width: 25px;
heigth: 25px;
margin-right:5px;
vertical-align: middle;
}
#header-cart{
display: inline-block;
text-align:center;
background-color:red;
float:right;
color:white;
font-size: 15px;
}
#header-cart img{
width: 30px;
heigth: 30px;
}
#header-cart #cart-icon{
float:left;
}
#header-cart #cart-title{
float:left;
}
#header-cart #header-title{
display: inline-block;
background-color:blue;
}
#header-title span{
color: white;
font-family: Georgia, Times, "Times New Roman", serif;
font-size:20px;
margin-top: 0;
margin-bottom: 0;
vertical-align: middle;
}

How to have no border around a DIV

I have the following DIV in my page:
<div id="leftNavCustom" class="leftMenu">
<div class="menu-item">
<h4>Menu</h4>
<ul>
<li id="u"><a >Why Choose Us</a></li>
<li id="u"><a >Physicians</a></li>
<li id="u"><a >Medical Specialties</a></li>
<li id="u"><a >Locations</a></li>
<li id="u"><a >Urgent Care</a></li>
<li id="u"><a >Radiology</a></li>
<li id="u"><a >Lab</a></li>
</ul>
</div>
</div>
which creates a hover over menu expander.
My CSS is as follows:
#leftNavCustom {
display: block;
z-index: 5;
font-family: Helvetica, Arial, "Lucida Grande", sans-serif;
line-height: 1.5;
margin: 0;
width: 240px;
-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
padding: 0;
background: #00ff00;
}
.leftMenu {
position: fixed;
left: 22px;
top: 65px;
margin: 0;
padding: 0;
}
.menu-item, .menu-item2 {
background: url('../theImages/bg_80_b.png');
width: 240px;
font-family: 'nexa_boldregular';
font-size: 19px;
margin: 0;
padding: 0;
text-align: left;
}
/*Menu Header Styles*/
.menu-item h4 {
border-bottom: 1px solid rgba(0,0,0,0.3);
border-top: 1px solid rgba(255,255,255,0.2);
color: #fff;
font-size: 15px;
font-weight: 500;
padding: 7px 12px;
/*Gradient*/
background: #e73827; /* Old browsers */
background: -moz-linear-gradient(top, #e73827 0%, #f02f17 29%, #f6290c 47%, #f27c32 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e73827), color-stop(29%,#f02f17), color-stop(47%,#f6290c), color-stop(100%,#f27c32)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e73827 0%,#f02f17 29%,#f6290c 47%,#f27c32 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e73827 0%,#f02f17 29%,#f6290c 47%,#f27c32 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #e73827 0%,#f02f17 29%,#f6290c 47%,#f27c32 100%); /* IE10+ */
background: linear-gradient(to bottom, #e73827 0%,#f02f17 29%,#f6290c 47%,#f27c32 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e73827', endColorstr='#f27c32',GradientType=0 ); /* IE6-9 */
}
/*Menu Header Styles*/
.menu-item2 h4 {
border-bottom: 1px solid rgba(0,0,0,0.3);
border-top: 1px solid rgba(255,255,255,0.2);
color: #fff;
font-size: 15px;
font-weight: 500;
padding: 7px 12px;
/*Gradient*/
background: #036ca9; /* Old browsers */
background: -moz-linear-gradient(top, #036ca9 0%, #025c90 44%, #00466e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#036ca9), color-stop(44%,#025c90), color-stop(100%,#00466e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #036ca9 0%,#025c90 44%,#00466e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #036ca9 0%,#025c90 44%,#00466e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #036ca9 0%,#025c90 44%,#00466e 100%); /* IE10+ */
background: linear-gradient(to bottom, #036ca9 0%,#025c90 44%,#00466e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#036ca9', endColorstr='#00466e',GradientType=0 ); /* IE6-9 */
}
.menu-item h4:hover {
background: #f27c32; /* Old browsers */
background: -moz-linear-gradient(top, #f27c32 0%, #f6290c 53%, #f02f17 71%, #e73827 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f27c32), color-stop(53%,#f6290c), color-stop(71%,#f02f17), color-stop(100%,#e73827)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f27c32 0%,#f6290c 53%,#f02f17 71%,#e73827 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f27c32 0%,#f6290c 53%,#f02f17 71%,#e73827 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f27c32 0%,#f6290c 53%,#f02f17 71%,#e73827 100%); /* IE10+ */
background: linear-gradient(to bottom, #f27c32 0%,#f6290c 53%,#f02f17 71%,#e73827 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f27c32', endColorstr='#e73827',GradientType=0 ); /* IE6-9 */
}
.menu-item2 h4:hover {
background: #00a3cc; /* Old browsers */
background: -moz-linear-gradient(top, #00a3cc 0%, #005a6e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00a3cc), color-stop(100%,#005a6e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #00a3cc 0%,#005a6e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #00a3cc 0%,#005a6e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #00a3cc 0%,#005a6e 100%); /* IE10+ */
background: linear-gradient(to bottom, #00a3cc 0%,#005a6e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a3cc', endColorstr='#005a6e',GradientType=0 ); /* IE6-9 */
}
.menu-item h4 a, .menu-item2 h4 a {
color: white;
display: block;
text-decoration: none;
width: 240px;
}
/*ul Styles*/
.menu-item ul {
background: url('theImages/bg_80_b.png');
font-size: 13px;
line-height: 30px;
height: 0px;
list-style-type: none;
overflow: hidden;
padding: 0px;
*Animation*/
-webkit-transition: height 1s ease;
-moz-transition: height 1s ease;
-o-transition: height 1s ease;
-ms-transition: height 1s ease;
transition: height 1s ease;
}
.menu-item:hover ul {
width: 240px;
height: 300px;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
.menu-item ul li#u a {
color: #fff;
cursor: pointer;
display: block;
height: 25px;
line-height: 25px;
text-indent: 0px;
text-decoration: none;
width: 100%;
font-family: 'nexa_boldregular';
font-size: 19px;
}
/*li Styles*/
.menu-item li#u {
border-bottom: 1px #13476F solid;
padding: 8px;
}
.menu-item li#u:hover {
background: #5196AB;
}
.menu-item li#firstOne {
display: absolute;
top: 0;
left: 0;
background-color: #FFFFFF;
text-align: center;
height: 75px;
line-height: 75px;
border-bottom: 1px solid #FF7263;
vertical-align: middle;
}
.menu-item li#firstOne img {
vertical-align: middle;
}
By default it creates a big space around the menu as shown below:
The only way the menu comes out normal like I would like:
Is to add the following style to the above css file:
* {
margin: 0;
padding: 0;
}
But that makes some of my other DIVS on the page out of place. I tried adding margin and padding to every single code in my CSS but nothing works without adding the few lines shown above.
How do i modify my existing css code to fix it?
JSFIDDLE: http://jsfiddle.net/s2z6f/

Remove the margin from the specific elements that shouldn't have it (the h4 and the ul of .menu-item). You can do this rather than using * as the selector.
.menu-item h4, .menu-item ul {
margin: 0;
}
http://jsfiddle.net/v9xp2/

Try starting off with a CSS reset.
http://meyerweb.com/eric/tools/css/reset/
This will "zero out" all properties that individual browsers introduce automatically. It's generally a good practice if you're going to be writing a lot of custom styles.

Replicate image in CSS and HTML only

For a code quiz I am trying to replicate the attached image using CSS and HTML only. The gradients and borders seem to be working out fine, but I am having trouble getting the ribbon edges to look curved.
Here is my markup:
<div class="container">
<div class="ribbon-wrapper-green"><div class="ribbon-green">AWESOME!</div></div>
<div class="ribbon-bottom-left"></div>
<div class="bottom-left-gradient"></div>
And here is my CSS:
.container {
width:300px;
height:300px;
margin-left:auto;
margin-right:auto;
margin-top:10px;
position:relative;
border:#CCC 1px solid;
background-color:#EBEBEB;
box-shadow:1px 1px 1px #CCC;
}
.ribbon-wrapper-green {
width: 290px;
height: 290px;
overflow: hidden;
position: absolute;
top: -3px;
right: -3px;
}
.ribbon-green {
font: 25px Arial;
text-align: center;
text-shadow:0px 0px 6px #000;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
position: relative;
padding: 20px 0;
left: 7px;
top: 66px;
width: 363px;
background-color: #BFDC7A;
background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));
background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -ms-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -o-linear-gradient(top, #BFDC7A, #8EBF45);
color: #FFF;
-webkit-box-shadow: 0px 8px 20px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 8px 20px rgba(0,0,0,0.3);
box-shadow: 0px 8px 20px rgba(0,0,0,0.3);
}
.ribbon-green:before, .ribbon-green:after {
content: "";
border-top: 4px solid #6e8900;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
position:absolute;
bottom: -4px;
}
.ribbon-green:before {
left: 0;
}
.ribbon-green:after {
right: 0;
}
.ribbon-bottom-left {
width: 0px;
height: 0px;
border-style: solid;
border-width: 250px 0 0 250px;
border-color: transparent transparent transparent #D32023;
position:absolute;
bottom:-5px;
left:-5px;
border-top-left-radius:10px;
border-bottom-right-radius:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-bottomright:10px;
z-index:1;
}
.bottom-left-gradient {
position:absolute;
bottom:-8px;
left:-8px;
z-index:100;
height:245px;
width:245px;
opacity:0.4;
filter:alpha(opacity=40);
background: -moz-linear-gradient(45deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.92) 4%, rgba(255,255,255,0) 51%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(4%,rgba(255,255,255,0.92)), color-stop(51%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(45deg, rgba(255,255,255,1) 0%,rgba(255,255,255,0.92) 4%,rgba(255,255,255,0) 51%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(45deg, rgba(255,255,255,1) 0%,rgba(255,255,255,0.92) 4%,rgba(255,255,255,0) 51%); /* Opera 11.10+ */
background: -ms-linear-gradient(45deg, rgba(255,255,255,1) 0%,rgba(255,255,255,0.92) 4%,rgba(255,255,255,0) 51%); /* IE10+ */
background: linear-gradient(45deg, rgba(255,255,255,1) 0%,rgba(255,255,255,0.92) 4%,rgba(255,255,255,0) 51%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
border-style:solid;
border-width:0 0 5px 5px;
border-radius:10px;
-moz-border-radius:10px;
border-color:#E41316;
}
The image is coming out like this example here: http://arunsood.me/code-quizzes/placebo-effect/.
The original I need to copy is below. How can I achieve the edge bending effect via CSS alone?

Positioning dropdown menu in IE and Firefox

I'm trying to position this dropdown menu. It only works in Chrome, the submenu appear right below the hovered link. But in IE and firefox they all appear at the same place in the bottom left.
http://jsfiddle.net/3HZGB/2/
CSS
#menu {
float:right;
list-style-type: none;
padding: 0px;
margin: 36px 130px 0 0;
}
#menu a {
height:50px;
font-size:18px;
font-weight:bold;
color:black;
text-decoration:none;
}
#menu a:hover {
color:#FFF;
border:#002d56 6px solid;
background-color:#002d56;
opacity:0.8;
}
#menu li {
position:relative;
display:inline;
padding:24px 5px 10px 5px;
margin-left:40px;
}
#menu li:hover > ul
{
display: block;
}
#menu li:hover ul {
display: block;
}
#menu ul li:first-child a:after /*triangulo*/
{
content: '';
position: absolute;
left: 10px;
top: -15px;
z-index:99999;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #002d56;
}
/*submenu*/
#menu ul {
padding:5px 30px 5px 10px;
margin-top:12px;
position:absolute;
display:none;
z-index: 99999;
float:left;
/*visual*/
background-color:#002d56;
box-shadow: 4px 4px 10px #999;
border:#002d56 2px solid;
/*opacity:0.9;*/
border-radius:10px;
/*gradiente*/
background-image: linear-gradient(bottom, rgb(0,72,135) 39%, rgb(0,43,84) 66%);
background-image: -o-linear-gradient(bottom, rgb(0,72,135) 39%, rgb(0,43,84) 66%);
background-image: -moz-linear-gradient(bottom, rgb(0,72,135) 39%, rgb(0,43,84) 66%);
background-image: -webkit-linear-gradient(bottom, rgb(0,72,135) 39%, rgb(0,43,84) 66%);
background-image: -ms-linear-gradient(bottom, rgb(0,72,135) 39%, rgb(0,43,84) 66%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.39, rgb(0,72,135)),
color-stop(0.66, rgb(0,43,84))
);
}
#menu ul a
{
color:#FFF;
font-size:14px;
font-weight:400;
padding: 10px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#menu ul a:hover {
background-color:transparent;
border:none;
display: block;
font-size:14px;
font-weight:400;
text-decoration:underline;
opacity:1;
}
#menu ul li
{
float: none;
margin: 0;
padding: 0;
display: block;
}
.form
{
color:#FFF;
font-size:14px;
font-weight:400;
padding: 10px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
.form li:first-child/*triangulo*/
{
content: '';
position: absolute;
left: 10px;
top: -15px;
z-index:99999;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #002d56;
}
.forminput {
margin:8px 0;
width:100px;
border:2px solid #919293;
border-radius:10px;
padding:5px;
/*gradiente*/
background: rgb(255,255,255); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjcwJSIgc3RvcC1jb2xvcj0iI2Q2ZDZkNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijg5JSIgc3RvcC1jb2xvcj0iI2JjYmNiYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNhM2EzYTMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(214,214,214,1) 70%, rgba(188,188,188,1) 89%, rgba(163,163,163,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(70%,rgba(214,214,214,1)), color-stop(89%,rgba(188,188,188,1)), color-stop(100%,rgba(163,163,163,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(214,214,214,1) 70%,rgba(188,188,188,1) 89%,rgba(163,163,163,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(214,214,214,1) 70%,rgba(188,188,188,1) 89%,rgba(163,163,163,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(214,214,214,1) 70%,rgba(188,188,188,1) 89%,rgba(163,163,163,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(214,214,214,1) 70%,rgba(188,188,188,1) 89%,rgba(163,163,163,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#a3a3a3',GradientType=0 ); /* IE6-8 */
}
*:focus { outline:none; }
.enviar {
float:right;
width:50px;
color:#fff;
border:2px solid #002d56;
border-radius:10px;
padding:5px;
/*gradients*/
background: rgb(30,87,153); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzI5ODlkOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzIwN2NjYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 51%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(50%,rgba(41,137,216,1)), color-stop(51%,rgba(32,124,202,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%); /* IE10+ */
background: linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#207cca',GradientType=0 ); /* IE6-8 */
}
.login {
margin:0 10px 0 0;
}
.perdadesenha a {
font-size:9px;
}
/**/
HTML
<ul id="menu">
<li>EMPRESA
<ul><li>Visão geral</li>
<li>História</li>
<li>Escritórios</li>
<li>Trabalhe conosco</li>
</ul>
</li>
<li>SERVIÇOS
<ul>
<li>Despacho</li>
<li>Transporte Rodoviário</li>
<li>Logística de Líquidos</li>
<li>Frete Internacional</li>
<li>Licenças Polícia/Exército</li>
</ul>
</li>
<li>CONTATO</li>
<li>LOGIN
<ul class="form"><form>
<li></li>
<li><label class="login">Login</label><input class="forminput" type="text" name="firstname" /><br />
<label>Senha</label> <input class="forminput" type="password" name="firstname" /></li>
<li><input class="enviar" type="submit" value="Entrar" /></li>
</form>
<font size="-6">Esqueceu a senha?</font>
</ul>
</li>
</ul>

you need to update your css
in "#menu ul " remove the following properties
margin-top:12px;
float:left;
and add
top:56px;
left:0;
here is the updated jsFiddle file.
this will fix drop down issue.

CSS: Cell border isn't rounded for some reason

I want to make a nice navigation bar, but for some reason, I can't get the borders of the cells on the ends of the bar to be rounded. If you look closely at the corners, you should be able to see a bit of rounding happening to the background, but not to the border for some reason.
You can see what I mean here: http://jsfiddle.net/7veZQ/299/
Here is my code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
table {
border-collapse: collapse;
border: none;
box-shadow: 0px 5px 10px #BBB;
}
.nav tr td {
width: 160px;
height: 40px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
text-transform: uppercase;
color: #666;
border: 1px solid #999;
vertical-align: middle;
text-align: center;
background: #eeeeee; /* Old browsers */
background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* IE10+ */
background: linear-gradient(to bottom, #eeeeee 0%,#cccccc 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
text-shadow: 1px 1px 0px #FFFFFF;
letter-spacing: 3px;
}
.nav tr td:hover {
background: #F4F4F4; /* Old browsers */
background: -moz-linear-gradient(top, #F4F4F4 0%, #E0E0E0 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F4F4F4), color-stop(100%,#E0E0E0)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #F4F4F4 0%,#E0E0E0 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #F4F4F4 0%,#E0E0E0 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #F4F4F4 0%,#E0E0E0 100%); /* IE10+ */
background: linear-gradient(to bottom, #F4F4F4 0%,#E0E0E0 100%); /* W3C */
}
.nav tr td#first {
border-radius: 5px 0px 0px 5px;
-moz-border-radius: 5px 0px 0px 5px;
-webkit-border-radius: 5px 0px 0px 5px;
}
.nav tr td#last {
color: #09C;
border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
-webkit-border-radius: 0px 5px 5px 0px;
}
</style>
</head>
<body>
<table class="nav" width="960" border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="first">Home</td>
<td>Options</td>
<td>Prices</td>
<td>Showcase</td>
<td>Help</td>
<td id="last">Order Now!</td>
</tr>
</table>
</body>
</html>
So what am I doing wrong?

So what am I doing wrong?
Using a table for layout.
Tables are not layout tools. Some browsers won't round corners on table cells. You have a list of data, use list markup.

change your table css to
border-collapse: separate;

Unfortunately, this is not cross browser CSS. CSS3 is not found in all browsers. That being said, there are a few changes I'd suggest. First, you shouldn't really use exact heights & widths for anything.
Second, you should be using DIVs.
Decent forum post as to why...
In any case, here is the "fix" (I'm personally against floating anything, but oh well. It is what happens sometimes:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
.nav {
float:left;
width:960px;
height:40px;
border: 1px solid #999;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 0px 5px 10px #BBB;
}
.nav a {
float:left;
display:inline-block;
margin:0;
padding:0;
line-height:40px;
text-decoration:none;
width: 160px;
height: 40px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
text-transform: uppercase;
color: #666;
text-align: center;
background: #eeeeee; /* Old browsers */
background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* IE10+ */
background: linear-gradient(to bottom, #eeeeee 0%,#cccccc 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
text-shadow: 1px 1px 0px #FFFFFF;
letter-spacing: 3px;
}
.nav a:hover {
background: #F4F4F4; /* Old browsers */
background: -moz-linear-gradient(top, #F4F4F4 0%, #E0E0E0 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F4F4F4), color-stop(100%,#E0E0E0)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #F4F4F4 0%,#E0E0E0 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #F4F4F4 0%,#E0E0E0 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #F4F4F4 0%,#E0E0E0 100%); /* IE10+ */
background: linear-gradient(to bottom, #F4F4F4 0%,#E0E0E0 100%); /* W3C */
}
.nav a#first {
border-radius: 5px 0px 0px 5px;
-moz-border-radius: 5px 0px 0px 5px;
-webkit-border-radius: 5px 0px 0px 5px;
}
.nav a#last {
color: #09C;
border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
-webkit-border-radius: 0px 5px 5px 0px;
}
</style>
</head>
<body>
<div id="main-menu" class="nav">
Home
Options
Prices
Showcase
Help
Order Now!
</div>
</body>
</html>
This should be all you need for it to work... If you are having trouble with CSS Layouts, check out YUI3 Grids. I'm a fan of YUI 3, so yes, this is a shameful plug.
YUI Library

Look at this:
http://jsfiddle.net/7veZQ/313/
The table is converted into div + ul.
Look at line-height (used here to center the text vertically).
Also, I changed first and last to be classes (instead of id's) as they are very common names and id's should be unique in document.
At last, look at the borders. We don't have border-collapse in lists so the last item is a little different than the others.