CSS - Firefox Shows Dots On A List.

The website
Quote:
downloadwarez.org


CSS
Quote:
/* default styles */
body { padding: 5px 0 0 0; margin: 0; font: .7em Tahoma, Arial, sans-serif; line-height: 1.7em; background: #fff url(images/bg.gif) repeat-x; color: #454545; }
a { color: #2F637A; background: inherit; }
a:hover { color: #808080; background: inherit; }
p { margin: 0 0 5px 0; }
h1 { font: bold 2.2em Arial, Sans-Serif; padding: 8px 0 0 0; margin: 0; letter-spacing: -1px; }
h2 { margin: 0; padding: 0; font: bold 1.8em Arial, Sans-Serif; letter-spacing: -1px; }
h1 a, h2 a { color: #000; background: inherit; text-decoration: none; }
ul { margin: 0; padding : 0; list-style : none; }
img { border: 0; }


/* layout */
#content { margin: 10px auto; width: 960px; }
#logo { margin: 0 0 10px 0; }
#slogan { font-size: 0.9em; margin: 0 0 10px 2px; padding: 0; color: #808080; background: #fff; }
#top_info { line-height: 27px; float: right; color: #808080; background: #fff; margin: 12px 5px 7px 0; text-align: right; height: 74px; }

/* round blue login button */
#loginbutton a { text-decoration: none; width: 24px; padding: 7px 12px; margin: 0 0 0 8px; height: 28px; background: #fff url(images/lb.gif) no-repeat; color: #000; }
#loginbutton a:hover{ background: #fff url(images/lbhover.gif) no-repeat; color: #000;}

/* main horizontal menu */
#tablist{ padding: 3px 0; margin: 0; float: left; }
#tablist li{ list-style: none; display: inline; margin: 0; }
#tablist li a{
text-decoration: none;
padding: 4px 22px;
margin-right: 2px;
background: #808080 url(images/corner.gif) no-repeat top right;
font-weight: bold;
color: #fff;
}
#tablist li a:hover{
background: #6495AB url(images/corner.gif) no-repeat top right;
color: #fff;
}
#tablist li a.current{
background: #9FC7D8 url(images/corner.gif) no-repeat top right;
color: #2F637A;
padding: 6px 22px;
}
#tablist .key { text-decoration: none; }

/* main menu topics */
#topics {
clear: left;
float: left;
width: 640px;
background: #B0D0DC url(images/topicsbg.gif) repeat-x left bottom;
padding: 8px 5px;
margin: 0 0 5px 0;
color: #fff;
height: 59px;
}
#topics li a { background-image: url(images/bullet.gif); background-repeat: no-repeat; background-position: center left; padding: 0 0 0 12px; }

/* main menu search */
#search {
float: right;
text-align: right;
background: #fff url(images/searchbg.gif) no-repeat;
color: #000;
padding: 32px 20px 12px 20px;
min-height: 32px; /* FF height */
height: 25px; /* IE height */
width: 270px;
}
/* search form styling */
form, form p { margin: 0; padding: 0; line-height: 25px; }

.search { width: 170px; border: 1px solid #357994; background: #fff; color: #478F36; padding: 4px; margin: 0; font-weight: bold; font-size: 1.3em; }
.button { padding: 4px; font: bold 1em Arial, Sans-Serif; }

/* left side */
#left {
float: left;
width: 635px;
margin: 0 0 10px 0;
}
.subheader {
margin: 0 0 10px 0;
padding: 8px;
background: #f4f4f4 url(images/bgshade.gif) repeat-x;
color: #808080;
border-bottom: 1px solid #ccc;
}
.left_articles {
margin: 0px 0 10px 0;
background: #fff url(images/bgshade.gif) repeat-x;
color: #454545;
padding: 15px 15px 5px 10px;
}
.date { font-size: .9em; padding: 0 0 0 12px; background: #fff url(images/news.gif) no-repeat center left; color: #808080; }
.bigimage {
float: left;
clear: left;
border: 1px solid #ccc;
background: #eee;
color: #000;
width: 200px;
height: 150px;
margin: 0 15px 10px 0;
}
.left_box {
background: #f4f4f4;
color: #808080;
border-top: 1px dotted #ccc;
border-bottom: 1px dotted #ccc;
padding: 15px;
margin: 0 0 15px 0;
}
.thirds {
float: left;
width: 186px;
padding: 0 10px 0 15px;
}

/* right side */
#right {
float: right;
width: 310px;
margin: 0 0 10px 0;
}
.right_articles {
border: 1px solid #ccc;
padding: 8px;
margin: 0 0 10px 0;
background: #eee;
color: #454545;
}
.image { float: left; margin: 0 9px 3px 0; }
.notes {
border-top: 1px dotted #ccc;
border-bottom: 1px dotted #ccc;
padding: 17px 10px 17px 80px;
margin: 0 0 10px 0;
background: #fff url(images/notes.gif) no-repeat center left;
color: #454545;
}
/* footer */
#footer {
clear: both;
color: #808080;
background: #FFF;
padding: 10px 15px;
border-top: 1px solid #ccc;
}
#footer .right { float: right; }

The page bar should be below the software table, like it is displayed in FireFox. But it shows wrong in Internet Explorer and Opera.

The code looks ok, so i think it must be CSS. Can anyone help

http://www.pricedigital.com/ejs/advanced/0009/weight-loss-am-i-a-candidate-for-weight-loss-surgery.htm

Check it out in IE and then firefox. It shows up great in IE but in firefox its not hidden.

Hi;
I got two problem in my code.
1) a list of menu could not sit in the center.

2) a list menu has a gap from top in the Firefox, but there is not gap from top from IE browser. And in the IE Browser, the list of menu sit too hight on the top.
How could i sit the list of menu in the center and there are about 1px gas or not
gas between the top and the menu bar in IE and Firefox.

my code as following;

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en"> 
<head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
  body {
         font: 80% arial, helvetica, sans-serif;
         background: white;
         margin: 0;
       }
#container{
   
    position: relative;
    width: 780px;
    w\idth: 780;
    border: solid #036;
    border-width: 0 3px;
    margin: auto;
 }

#navlist
{
  color: white;
  text-align: center;
  list-style-type: none;
  padding-bottom: 1px;
 
     
}

#navlist li
{
  bacground-color: #4c56d9;
  margin-left: 1px;
  display: inline;
  border: 3px solid #4c56d9;
  padding: 1px;
  
}

#navlist li a
{
  text-decoration: none;
  border: 2px solid #737be4;
  padding: 2px;
  color: white;
  margin-left: 1px;
  background-color: #4c56d9;
}
  


	
	
</style>
</head>

<body>
<div id="container">
<ul id="navlist">
<li id="active"><a href="#" id="current">Home</a></li>
<li><a href="#">Contact Us </a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Help</a></li>
</ul>
</div>
</body>

</html>

Here is a quick visual layout of my page

(container)
(div banner)
(div left column) (div middle content) (div right column)
(div footer)

In my (div left column) is a list that is aligned right which works great. However, lower in the (div left column) I wish to make another list and align it left. The problem is it won't align all the way to the left. It stops at about the center of the div. I didn't notice it on the first list because it aligned right just fine but it also stops in the middle.

Here is the HTML:
(go easy on the coding, I'm still pretty new at this stuff)

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" href="css/common.css" type="text/css" media="screen" />
<title>Las Vegas Floor Care</title>
</head>

<body id="body">
<div id="container">
<div id="banner">
</div>
<div id="content">
<div id="content_left">
<div class="links">
<ul class="list">
<li><a href="index.htm"><span class="list_big">H</span>OME <span class="list_big">P</span>AGE</a></li>
<li><span class="list_big">R</span>ESIDENTIAL</li>
<li><span class="list_big">C</span>OMMERCIAL</li>
<li><span class="list_big">C</span>ONTACT <span class="list_big">U</span>S</li>
</ul>
</div>
<div class="special_offers">Special Internet Offers</div>
<img class="image_center" src="images/coupon.jpg" />
<ul class="list_offers">
<li>Test 1</li>
<li>Test 2</li>
</ul>
</div>
<div id="content_middle">
<div id="content_middle_top">
</div>
<p class="text"><img src="images/slogan.jpg" style="float:left; margin-right:2px" /> At Las Vegas Floor Care we use Prochem truck mount extractors, which have been rated number one for over 30 years. We also use the Bridgpoint brand of treatment solutions that are eco friendly, pet friendly, and are even biodegradable. We offer carpet repair, cleaning, and protection making you get more out of your carpet no matter what the situation. We also offer 3 different types of tile cleaning to fit the condition of your tile and your pocket book.</p>
<br />
<p class="text">We cater to all aspects of cleaning ranging from the average home owner who wants clean floors to the executive who needs to keep their office in tip top shape, and everything in between. There is no job too big or small. We offer several service packages for home owners with yearly service contracts.</p>
<div id="content_middle_bottom">
</div>
</div>
<div id="content_right">
<img class="image_center" src="images/contact.jpg" />
<div class="side_text">If you have questions or would like to schedule a cleaning, please contact us at <span class="contact_number">(702) 756-0148</span>.</div>
</div>
</div>
<div id="bottom">
<img src="images/bottom_top.jpg" align="top"/>
<p class="bottom_text">
Phone: (702) 756-0148
<br />
Fax: (206) 350-7320
<br />
</p>
</div>
</div>
</body>
</html>

Here is the CSS:

Code:

#banner {position:relative; width:700px; height:130px; clear:both; background-image:url(../images/banner.jpg)}

#body {text-align:center; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:14px; background-image:url(../images/bg.jpg); margin-top:20px; background-position:center}

#bottom {position:relative; text-align:right; width:700px; clear:both; background-color:#970000}

.bottom_text {font-family:Calibri; font-size:14px; text-align:right; margin:0px 8px 0px 4px; color:#CCCCCC}

.contact_number {font-family:Calibri; font-size:12px; color:#970000}

#container {width:700px; margin-left:auto; margin-right:auto; text-align:left}

#content {position:relative; width:700px; overflow:auto; background-image:url(../images/content_bg.jpg); background-position:center}

#content_left {float:left; width:138px; margin-right:5px; clear:left}

#content_left_bottom {width:138px; background-color:#FF3399}

#content_left_top {width:138px; background-color:#FF3399}

#content_middle {float:left; width:414px}

#content_middle_bottom {width:414px; height:100px; background-image:url(../images/middle_bottom.jpg)}

#content_middle_top {width:414px; height:30px; background-image:url(../images/middle_top.jpg)}

#content_right {float:left; width:138px; margin-left:5px; clear:right}

#content_right_bottom {width:138px; background-color:#00FF00}

#content_right_top {width:138px; background-color:#00FF00}

.image_center {margin-left:auto; margin-right:auto; text-align:center; display:block}

.links a:link {text-decoration:none; color:#666666}
.links a:visited {text-decoration:none; color:#666666}
.links a:hover {text-decoration:underline; color:#970000}
.links a:active {text-decoration:none; color:#970000}

.list {font-family:Calibri; font-size:14px; list-style:none; text-align:right; margin:0px 4px 20px 4px; border-bottom:solid; border-bottom-width:1px; border-bottom-color:#666666; padding-bottom:10px; padding-right:4px; color:#666666}

.list_big {font-family:Calibri; font-size:18px}

.list_offers {font-family:Calibri; font-size:12px; list-style:none; text-align:left; margin-left:0px; overflow:auto; color:#666666}

.side_text {font-family:Calibri; font-size:12px; text-align:justify; margin:0px 4px 0px 4px; color:#666666}

.special_offers {font-family:Calibri; font-size:18px; text-align:center; margin-left:4px; color:#970000}

.text {font-family:Calibri; font-size:14px; text-align:justify; margin:0px 4px 0px 4px; color:#666666}

Thanks ahead of time for any help.

Essentially it lines up correctly but when I view it in firefox it doesn't. How should I tweak my code to make this work?

Here is the url:

http://www.westcadet.com/designs/index.htm

Here is the CSS code snippet that is making this all work

Code:

/*--------------- Navigation Layout Begin ---------------*/
#HeaderTopLeftInnerRight {
	width:618px;
	height:100px;
	vertical-align:top;
}

#NavMenu {
	width:600px;
	padding-top:22px;
	
}

#NavMenu ul {
	list-style: none;
	margin-left:22px;
}

#NavMenu li {
	float: left;
	padding-left:8px;
	padding-right:8px;
}

#NavMenu li a {
	color:#FFFFFF;
	text-decoration: none;
}

#NavMenu li a:hover {
	color:#EB2A2D;
}

.NavChosen {
	background-color: #858181;
	color:#FFFFFF;
}

Hello,

I have a problem to display a List/Menu in IE. It cut off the text in the drop down list when I set the WIDTH of the drop down box shorter than the text. It works fine in FireFox.

Here is the picture I captured to demonstrate what I'm talking about. Sorry the forum don't allow me to post url, please copy the link and paste it in your browser

linklighthouse.com/dropdown_ie.html

How do I fix this problem in IE? Please help!

Thanks

Hi,

I'm using a right-to-left layout and I can't find a way to display my list items correctly on Firefox. When I insert something into the rtl div with a float, the list item does not wrap correctly.

Code:

<!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" xml:lang="en" lang="en">
<head>
<style type="text/css">
<!--
#content {
margin:0 200px 0 20px;
border: 2px solid #000;
direction:rtl;
}
#floatdiv {
width:100px;
height:100px;
margin:10px;
border: 1px solid #000;
float:left;
}
-->
</style>
</head>
<body>
<div id="content">
<div id="floatdiv"</div>
<p>This is a test</p>
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
</div>
</body>
</html>

Is there a problem in my code?

Thanks,

Ehud.

http://img55. imageshack .us/img55/6775/cssexamplesy8.png

^ please remove the space before and image shack to view the image

I've taken a screenshot of a problem I need help with, which is how IE and Firefox handle nested lists. Using code like this:

Code:

<ul>
 <li>item 1</li>
 <li>item 2</li>
 <li>
     <ul>
      <li>sub item 1</li>
      <li>sub item 2</li>
     </ul>
</li>
 <li>item 3</li>
</ul>

Firefox displays the new list without being pushed down yet IE seems to create the space for where the list item would be and I can't figure out how to remove the space / how to get it to act like firefox.

Removing the list item that holds the nested ul solves all problems but it isn't valid so I'm looking for another solution.

Cheers

Hi All:

When i use <ul><li>
and <li> is set to "list-style-type: none;" IE and Firefox renders it differently.

Does anybody know a work-around for this?

The good example of this and the CSS code is at following

holzgreen.com/list-test/

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>List Test 1</title>
<meta name="Description" content="x.x.x. CHANGE .x.x.x">
<meta name="KeyWords" content="x.x.x. CHANGE .x.x.x">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META name="Publisher" content="Firework Studio">
<META name="revisit-after" content="15 days">
<META name="robots" content="index, follow">
<META name="Robots" content="All">
<link href="000-style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.style1 {
font-family: "Courier New", Courier, monospace
}
-->
</style>
</head>

<body>
<div #none>
<ol>
<li>List item - 1</li>
<li>List item - 2
<ol>
<li>LI - 2.1</li>
<li>LI - 2.2</li>
</ol>
</li>
<li>List item - 3</li>
<li>List item - 4</li>
</ol>
</div>
</body>
</html>

CSS:

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
border: 1px solid #000000;
margin: 0em;
padding: 0em;
}

#none ol {
background: #BB0000;
list-style-position: inside;
margin: 0em;
padding-left: 1em; /* Moves the Whole List */
}

#none ol ol{
background: #BB00BB;
list-style-position: inside;
margin-left: 0em;
padding-left: 3em; /* Moves the Nested List */
}

#none ol li {
background: #BBBB00;
font-size: .8em;
margin-left: 0em;
list-style-type: none;
}

#none ol ol li {
background: #00BBBB;
font-size: 1em;
list-style-type: lower-alpha;
margin-left: 0em;
list-style-type: none;
}



Thanks for your interest

Hi,

Here is the page I am having trouble with:

http://mccalebconstruction.anchorwave.com/slices/index2.php

If you view source, the CSS should be in the file as well.

It is very basic because I have stripped out everything else on the page to make it simpler to identify the problem. But I don't know what the problem is! In Firefox it looks fine. In IE there is a line on the left of the content area. The line is caused by the background-image of #content. I don't understand why it's showing up, though, since the images are supposed to be floating left (thus, covering the background image)... but it appears they aren't floating ALL THE WAY to the left, there is a gap. I made sure all the padding and stuff was 0 but that doesn't help.

Thanks in advance,

~wz

Hey Guys,

Im kinda stuck, my site here -beta.thenpcs.com just displays the backround in IE6. The CSS validates so im not sure what im doing wrong :/

Thanks!

Hey guys, I'm new to web design, and I've begun putting together a template for the basic aspects of my page. Everything works fine in FireFox but nothing but the background shows up in IE. It's very frustrating because I have a feeling it's something small but I don't know what that thing is. Here is the link to the template I'm working on : thehempdaddy.com/unfinished/newdesign.html

Any help pointing me in the right direction will earn you a friend for life.

Edit: Problem solved

This topic can be locked or deleted. I tried everything and figured out the problem

When I preview my page in firefox on my Mac, (via Dreamweaver's Preview function), I can see the main logo image fine. However, when I uploaded the page and image correctly, I only get a blank area.

I think this is a css issue, but I can't figure it out.

http://alpineec.com/TEST/index.php

Any thoughts?

CSS
Code:

*
{
padding: 0em;
margin: 0em;
}

body
{
background-color:#999999;
padding: 35px 0px 35px 0px;
}

body,input
{
font-size: 10pt;
font-family: "georgia", "times new roman", serif;
color: #333333;
}

p
{
line-height: 1.5em;
margin-bottom: 1.0em;
text-align: justify;
}

a
{
color: #B96D00;
text-decoration: underline;
}

a:hover
{
text-decoration: none;
}


h3 span
{
font-weight: normal;
}

h3,h4
{
display: inline;
font-weight: bold;
background-repeat: no-repeat;
background-position: right;
}

h3
{
font-size: 1.7em;
padding-right: 34px;
background-image: url('images2/db1.gif');
}

h4
{
font-size: 1.2em;
padding-right: 28px;
background-image: url('images2/db2.gif');
}

.contentarea
{
padding-top: 1.3em;
}



img.left
{
position: relative;
float: left;
margin: 0em 1.8em 1.4em 0em;
}

img.right
{
position: relative;
float: right;
margin: 0em 0em 1.8em 1.8em;
}



.post .details
{
position: relative;
top: -1.5em;
font-size: 0.8em;
color: #787878;
}

.post ul.controls
{
clear: both;
}

.post ul.controls li
{
display: inline;
font-size: 0.8em;
}

.post ul.controls li a
{
background-repeat: no-repeat;
background-position: left;
padding: 0em 1.0em 0em 20px;
}

.post ul.controls li a.printerfriendly
{
background-image: url('images2/icon-printerfriendly.gif');
}

.post ul.controls li a.comments
{
background-image: url('images2/icon-comments.gif');
}

.post ul.controls li a.more
{
background-image: url('images2/icon-more.gif');
}

.box
{
position: relative;
background: #FDFCF6 url('images2/boxbg.gif') repeat-x;
left: -1.5em;
top: -1.5em;
padding: 1.5em;
border-bottom: solid 1px #E1D2BD;
margin-bottom: 1.0em;
}

ul.linklist
{
list-style: none;
}

ul.linklist li
{
line-height: 2.0em;
}

#upbg
{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 275px;
background-color:#999999;
z-index: 1;
}

#outer
{
	z-index: 2;
	position: relative;
	/*
	The width value below controls the overall width of the design. By default it's set to 82%
	(so it'll take up 82% of the browser window's width). You can set it to a different percentage
	value (70%, 90%, etc.) or even a pixel value (760px, 800px, etc.) to enforce a fixed width.
*/
width: 700px;
	border: solid 1px #fff;
	background-color: #fff;
	margin: 0 auto;
}

#header
{
position: relative;
width: 100%;

background: #5a5a5a;
}

#headercontent
{
	position: absolute;
	bottom: -56px;
	padding: 0em 2.0em 1.3em 2.0em;
	left: 274px;
}

#headercontent h1
{
font-weight: normal;
color: #fff;
font-size: 2.5em;
}

#headercontent h1 sup
{
color: #777;
}

#headercontent h2
{
font-size: 1.0em;
font-weight: normal;
color: #aaa;
}


#menu
{
position: relative;
background: url('images2/menubg.jpg') repeat-x top left;
height: 20px;
padding: 0em 1.0em 0em 1.0em;
}

#menu ul
{
	position: absolute;
	top: 2px;
}

#menu ul li
{
position: relative;
display: inline;
}

#menu ul li a
{
padding: .5em 1.0em 0.9em 1.0em;
color: black;
text-decoration: none;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
}

#menu ul li a:hover
{
text-decoration: none;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color: #FE3D00;
}

#menu ul li a.active
{
text-decoration: none;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color: #FE3D00;
}

#content
{
padding: 0em 2.0em 0em 2.0em;
}

#primarycontainer
{
float: left;
margin-right: -18.0em;
width: 100%;
}

#primarycontent
{
margin: 1.5em 22.0em 0em 0em;
}

#secondarycontent
{
margin-top: 1.5em;
float: right;
width: 18.0em;
}

#footer
{
position: relative;
height: 2.0em;
clear: both;
padding-top: 5.0em;
background: #fff url('images2/border2.gif') repeat-x 0em 2.5em;
font-size: 0.8em;
}

#footer .left
{
	position: absolute;
	left: 191px;
	bottom: 1.2em;
	z-index: 10;
}

#footer .right
{
position: absolute;
right: 2.0em;
bottom: 1.2em;
}


pre {
 padding:10px;
 border: 1px dotted #eee;
 background-color:#f9f9f9;
}


#photodiv {
  background-repeat: no-repeat;
}

#aboutBLOCK{padding-left:40px;}

/* PHOTO GALLERY */
#pg {
border:2px dotted #666;
padding:5px;
padding-top:15px;
}
#pg ul {
list-style:none; 
left: 10px;
padding:0; 
margin:0; 
position:relative; 
float:left;
}
#pg ul li {
display:inline; 
float:left; 
margin:0 0 8px 8px;
}
#pg ul li a {
display:block; 
width:90px; 
height:90px; 
	text-decoration:none; 
border:1px solid #000;
}
#pg ul li a img {
display:block; 
width:90px; 
height:90px;
border:0;
}
#pg ul li a:hover {
white-space:normal; 
border-color:#336600;
background-color:#323E20;
}
#pg ul li a:hover img {
position:absolute; 
left: 290px;
top:110px; 
width:300px; 
height: 300px; 
border:1px solid #000;
}
#pg ul li a span {display:none}
#pg ul li a:hover span {
display:block;
position:absolute; 
left:9px; 
top:110px; 
width:270px; 
height:auto;
font-size:12px;color: black;
}

On my website (www.tonecollector.com) I use CSS to get a dashed style to my header. The header also has a background image. Without the background image it works ok, but with the background image it doesn't.

The CSS:
.headertabel {
background-image: url(/img/headerbg.gif);
background-color: #FF7B08;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFF6DB;
text-decoration: none;
border-left: 6px dashed #FF7B08;
border-right: 6px dashed #FF7B08;

}

The Problem:
http://www.tonecollector.com/dev/what.gif

Whats the solution?