Log in

View Full Version : CSS Triangle Arrow DIVs not working in Firefox5


dcr33
07-12-2011, 09:59 AM
1) Script Title: CSS Triangle Arrow DIVs

2) Script URL (on DD): http://www.dynamicdrive.com/style/csslibrary/item/css_triangle_arrow_divs/

3) Describe problem:
I found the following code from dynamic drive website - http://www.dynamicdrive.com/style/csslibrary/item/css_triangle_arrow_divs/
But it doesn't seem to provide the effect in my Firefox browser(updated to latest version 5.0) .I have typed the follwing code but it doesn't work-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */<style>

.uparrowdiv, .downarrowdiv, .leftarrowdiv, .rightarrowdiv{
width:600px;
min-height:40px; /*min height of DIV should be set to at least 2x the width of the arrow*/
background: blue;
color:red;
padding:5px;
position:relative;
word-wrap:break-word;
-moz-border-radius:5px; /*add some nice CSS3 round corners*/
-webkit-border-radius:5px;
border-radius:5px;
margin-bottom:2em;
}

.uparrowdiv:after{ /*arrow added to uparrowdiv DIV*/
content:'';
display:block;
position:absolute;
top:-20px; /*should be set to -border-width x 2 */
left:30px;
width:0;
height:0;
border-color: transparent transparent blue transparent; /*border color should be same as div div background color*/
border-style: solid;
border-width: 10px;

}

.downarrowdiv:after{ /*arrow added to downarrowdiv DIV*/
content:'';
display:block;
position:absolute;
top:100%; /*should be set to 100% */
left:30px;
width:0;
height:0;
border-color: blue transparent transparent transparent; /*border color should be same as div div background color*/
border-style: solid;
border-width: 10px;
}

.leftarrowdiv:after{ /*arrow added to leftarrowdiv DIV*/
content:'';
display:block;
position:absolute;
top:10px;
left:-20px; /*should be set to -border-width x 2 */
width:0;
height:0;
border-color: transparent blue transparent transparent; /*border color should be same as div div background color*/
border-style: solid;
border-width: 10px;
}

.rightarrowdiv:after{ /*arrow added to rightarrowdiv DIV*/
content:'';
display:block;
position:absolute;
top:10px;
left:100%; /*should be set to 100% */
width:0;
height:0;
border-color: transparent transparent transparent blue; /*border color should be same as div div background color*/
border-style: solid;
border-width: 10px;
}

</style>

</head>

<body>
<div class="uparrowdiv">
This is a test
</div>

<div class="downarrowdiv">
This is a test
</div>

<div class="leftarrowdiv">
This is a test
</div>

<div class="rightarrowdiv">
This is a test
</div>

</body>
</html>

Is the code OK?
ddadmin
07-12-2011, 04:27 PM
There is an extra <style> tag inside your CSS code that shouldn't be there. This was present on the examples page on DD as well, which I've now fixed. Try the below instead:


<style>

.uparrowdiv, .downarrowdiv, .leftarrowdiv, .rightarrowdiv{
width:600px;
min-height:40px; /*min height of DIV should be set to at least 2x the width of the arrow*/
background: black;
color:white;
padding:5px;
position:relative;
word-wrap:break-word;
-moz-border-radius:5px; /*add some nice CSS3 round corners*/
-webkit-border-radius:5px;
border-radius:5px;
margin-bottom:2em;
}

.uparrowdiv:after{ /*arrow added to uparrowdiv DIV*/
content:'';
display:block;
position:absolute;
top:-20px; /*should be set to -border-width x 2 */
left:30px;
width:0;
height:0;
border-color: transparent transparent black transparent; /*border color should be same as div div background color*/
border-style: solid;
border-width: 10px;

}

.downarrowdiv:after{ /*arrow added to downarrowdiv DIV*/
content:'';
display:block;
position:absolute;
top:100%; /*should be set to 100% */
left:30px;
width:0;
height:0;
border-color: black transparent transparent transparent; /*border color should be same as div div background color*/
border-style: solid;
border-width: 10px;
}

.leftarrowdiv:after{ /*arrow added to leftarrowdiv DIV*/
content:'';
display:block;
position:absolute;
top:10px;
left:-20px; /*should be set to -border-width x 2 */
width:0;
height:0;
border-color: transparent black transparent transparent; /*border color should be same as div div background color*/
border-style: solid;
border-width: 10px;
}

.rightarrowdiv:after{ /*arrow added to rightarrowdiv DIV*/
content:'';
display:block;
position:absolute;
top:10px;
left:100%; /*should be set to 100% */
width:0;
height:0;
border-color: transparent transparent transparent black; /*border color should be same as div div background color*/
border-style: solid;
border-width: 10px;
}

</style>