border-bottom property doesn't work in firefox

Written By
Shadow  
Submitted At
2009-08-21 12:05:40  
Num Views
1750  
Category
HTML / CSS  
>:( Hmm.. The border-bottom property in CSS doesn't seem to work when I run it in Firefox (v3.0.13) but works fine in IE (v7). Is there another way of setting the bottom border so that it works on both?

By Shadow @ 2009-08-21 12:05:40
Please paste your code here so I can see what you are struggling with, otherwise you can try just the below border properties.

There is also:

border-bottom-color:   Sets the color of the bottom border
border-bottom-color:#ff0000;


border-bottom-style: Sets the style of the bottom border
border-bottom-style:solid;
//solid border
border-bottom-style:dotted;
//dotted border
border-bottom-style:hidden;
//no border
border-bottom-style:dashed;
//dashed border
border-bottom-style:double;
//double border
border-bottom-style:groove;
//3d grooved border depends on the border-color value
border-bottom-style:ridge;
//3d ridged border depends on border-color value
etc



border-bottom-width:    Sets the width of the bottom border
border-bottom-width:15px;





By PHPin24 @ 2009-08-21 12:12:50
.navbar {
background-color: #CCC;
border-bottom: #999;
border-left: #999;
border-width: 0 0 thin thin;
border-style: none none groove groove;
display: block;
float: left;
margin: 0 0 0 10px;
padding: 0 10px 0 10px;
width: 190px
}

By Shadow @ 2009-08-21 12:21:16
[quote author=Shadow link=topic=349.msg369#msg369 date=1250853676]
.navbar {
background-color: #CCC;
border-bottom: #999;
border-left: #999;
border-width: 0 0 thin thin;
border-style: none none groove groove;
display: block;
float: left;
margin: 0 0 0 10px;
padding: 0 10px 0 10px;
width: 190px
}
This is just for a navigation bar with links.. Thanks.
[/quote]

By Shadow @ 2009-08-21 12:23:37
Please post the HTML as well as I need to know whether it's a div, span, list element

By PHPin24 @ 2009-08-21 12:26:31
<!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>

<title>CSS Backgrounds Internal Style Sheets</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<style type="text/css">
.navbar {
background-color: #CCC;
border-bottom: #999;
border-left: #999;
border-width: 0 0 thin thin;
border-style: none none groove groove;
display: block;
float: left;
margin: 0 0 0 10px;
padding: 0 10px 0 10px;
width: 190px
}
</style>

</head>

<body>

<h1>Navigation Bar</h1>
<div class="navbar">
Links of interest: <br />
<a href="http://www.google.com"/ target="_blank">Google</a><br />
<a href="http://www.amazon.com/" target="_blank">Amazon</a><br />
<a href="http://www.yahoo.com/" target="_blank">Yahoo</a><br />
</div>
<img src="../xhtml_web_pages/pics/broken_heart.jpg" width="205" height="189" alt="Broken Heart" />

</body>

</html>

By Shadow @ 2009-08-21 12:30:21
It seems fine, is it not that you can't see it as thin is too thin to actually see if it's working.

Your code:
border-width: 0 0 thin thin;

Try this:
border-width: 0 0 5px 5px;


You can also try changing this:
border-style: none none groove groove;

to this
border-style: none none solid solid;


If this is not the case please send me a screenshot or idea of what you want to accomplish.

Thanks again for joining phpin24  ;)




By PHPin24 @ 2009-08-21 13:07:53
You can also try this

<style type="text/css">
      .navbar {
            background-color: #CCC;
            border-bottom: #999;           
            border-left: #999;
            border-width: 0 0 5px 5px;
            border-top-style:none;
            border-right-style:none;
            border-bottom-style:groove;
            border-left-style:groove;
            display: block;
            float: left;
            margin: 0 0 0 10px;
            padding: 0 10px 0 10px;
            width: 190px
            }
  </style>

By PHPin24 @ 2009-08-21 13:14:10
Amazing.. Replacing the thin with 5px worked perfectly.
Thank you for your help and prompt response.
;D

By Shadow @ 2009-08-21 14:22:54
Glad I could help. Post questions anytime!  :)

By PHPin24 @ 2009-08-21 18:40:07