CSS - Use Of 'border-style:solid' Results In Misaligned Text In Firefox

I want to apply this style to a Table TD cell:

Code:

border-bottom: 1px solid #D2D7DD;

It works fine in firefox but not IE, as with many things. Any get-around for this, something that IE would be happy with?

Thanks.

Hello,

Code:

<table border="1">
<tr>
<td class="norightborder">
Two cells,
</td>
<td class="noleftborder">
but no borders between them.
</td>
</tr>
</table>

Code:

.noleftborder {
	border-left-style: none;	
}
.norightborder {
	border-right-style: none;	
}

I notice a pixel gap between the two cells and it's annoying me.

How do I get rid of it?

Thanks

Rogier

I have the following code in my page for the links styles:

Code:

a:link, a:visited, a:active {
	font-weight: bold;
	color: #000099;
	text-decoration: none;
	background-color: #C4E4F7;
	border: 1px solid #000066;
}
a:hover {
	font-weight: bold;
	color: #FC6103;
	text-decoration: none;
	background-color: #FFEAD5;
	border: 1px solid #974B00;
}

The thing is, that in firefox, the code works fine, but on IE the top and bottom border sections are not displayed... Can't understand why...

Any ideas how to fix it?

I would like to create an effect similar to the one found on http://www.macromedia.com that when you click in the search box, the edge of the searchbox changes color.

I know how to change the color of the box, but I do not know how to make the box switch whenever it is clicked on or in focus. Can anyone help me?

I have the following defined in my css file:

Code:

table {
	border:1px dashed #999;
	}

And the following code interspersed throughout other parts of my code:

PHP Code:
echo "<table nowrap border=\"0\">"; 





The problem I have is that the border is still appearing around these tables where I have specified no border.

As I understand, the inline style should take precedence, right?

Is this a php issue? Or am I doing something else wrong?

Hi,

I have created a component which is wrapped inside a div element. Is it possible to set the border of the div element similar to the borders shown by default for a select drop down?

thanks and regards,
Sim085

Probably there already was such question, but my Internet connection is very slow and I don't have time to search thru topics.

So, when I put an image into centercolumn that has big width my right column stays where it was, but center column with the picture goes to the right widely, and right column stays over the picture.
But I want right column always follow center column (stays on the right of centercolumn whatever size it is).

How to fix it in css?

here is my code:

BODY {
PADDING-RIGHT:0;
PADDING-LEFT:0;
BACKGROUND:url(img_86.gif) #ddd;
PADDING-BOTTOM:0;
MARGIN:0;
PADDING-TOP:0;
FONT-SIZE:12px;
LINE-HEIGHT:18px;
FONT-FAMILY:tahoma,verdana,geneva,arial,helvetica,sans-serif;
}

.registered {
BACKGROUND-COLOR:#ff9;
}

#centercolumn {
BORDER-RIGHT:#666 0 solid;
PADDING-RIGHT:4px;
BORDER-TOP:#666 0 solid;
PADDING-LEFT:4px;
PADDING-BOTTOM:10px;
MARGIN-LEFT:179px;
BORDER-LEFT:#666 0 solid;
MARGIN-RIGHT:179px;
PADDING-TOP:10px;
BORDER-BOTTOM:#666 0 solid;
}

#header {
PADDING-RIGHT:8px;
BORDER-TOP:#182746 2px solid;
PADDING-LEFT:8px;
BACKGROUND:url(img_87.gif) #314e8c;
PADDING-BOTTOM:8px;
PADDING-TOP:8px;
BORDER-BOTTOM:#182746 2px solid;
}

#leftcolumn {
MARGIN-TOP:4px;
LEFT:0;
WIDTH:180px;
POSITION:absolute;
FONT-SIZE:11px;
LINE-HEIGHT:16px;
}

#rightcolumn {
MARGIN-TOP:4px;
RIGHT:0;
WIDTH:180px;
POSITION:absolute;
FONT-SIZE:11px;
LINE-HEIGHT:16px;
}

#footer {
CLEAR:both;
MARGIN-BOTTOM:12px;
}

.block {
BORDER-RIGHT:#999 1px solid;
PADDING-RIGHT:4px;
BORDER-TOP:#999 1px solid;
PADDING-LEFT:4px;
BACKGROUND:#fff;
PADDING-BOTTOM:4px;
MARGIN:6px 6px 12px;
BORDER-LEFT:#999 1px solid;
PADDING-TOP:4px;
BORDER-BOTTOM:#999 1px solid;
}

.block H3 {
PADDING-RIGHT:4px;
PADDING-LEFT:4px;
FONT-SIZE:11px;
BACKGROUND:#a7b6c9;
PADDING-BOTTOM:4px;
MARGIN:-4px -4px 4px;
COLOR:#26344c;
PADDING-TOP:4px;
BORDER-BOTTOM:#999 1px solid;
}

.block P {
MARGIN:0;
}

.content {
BORDER-RIGHT:#999 1px solid;
PADDING-RIGHT:4px;
BORDER-TOP:#999 1px solid;
PADDING-LEFT:4px;
BACKGROUND:#fff;
PADDING-BOTTOM:4px;
BORDER-LEFT:#999 1px solid;
PADDING-TOP:4px;
BORDER-BOTTOM:#999 1px solid;
}

.entrycontent {
BORDER-RIGHT:#999 1px solid;
PADDING-RIGHT:12px;
BORDER-TOP:#999 1px solid;
PADDING-LEFT:12px;
BACKGROUND:#fff;
PADDING-BOTTOM:12px;
BORDER-LEFT:#999 1px solid;
PADDING-TOP:12px;
BORDER-BOTTOM:#999 1px solid;
}

.content P {
MARGIN:4px 2px;
}

H1 {
DISPLAY:inline;
FONT-SIZE:16px;
MARGIN:4px;
COLOR:#fff;
}

H2 {
PADDING-RIGHT:2px;
PADDING-LEFT:2px;
FONT-SIZE:13px;
PADDING-BOTTOM:2px;
MARGIN:0;
COLOR:#26344c;
PADDING-TOP:2px;
BORDER-BOTTOM:#999 1px dashed;
}

H3 {
FONT-SIZE:13px;
}

.entryfooter {
CLEAR:both;
PADDING-RIGHT:0;
PADDING-LEFT:0;
FONT-WEIGHT:normal;
FONT-SIZE:11px;
PADDING-BOTTOM:6px;
MARGIN:0;
COLOR:#666;
LINE-HEIGHT:16px;
PADDING-TOP:6px;
FONT-FAMILY:tahoma,verdana,geneva,arial,helvetica,sans-serif;
TEXT-ALIGN:right;
}

.entryfooter_linkdump {
PADDING-RIGHT:0;
PADDING-LEFT:0;
FONT-WEIGHT:normal;
FONT-SIZE:10px;
PADDING-BOTTOM:6px;
MARGIN:0;
COLOR:#666;
LINE-HEIGHT:16px;
PADDING-TOP:6px;
BORDER-BOTTOM:#666 1px dashed;
FONT-FAMILY:tahoma,verdana,geneva,arial,helvetica,sans-serif;
TEXT-ALIGN:right;
}

A {
COLOR:#253a69;
}

.prevnext_links {
FLOAT:right;
COLOR:#fff;
}

.searchbox {
FONT-SIZE:10px;
WIDTH:10em;
}

.searchbutton {
BORDER-RIGHT:#000 1px solid;
BORDER-TOP:#000 1px solid;
FONT-SIZE:10px;
BORDER-LEFT:#000 1px solid;
BORDER-BOTTOM:#000 1px solid;
}

IMG.badge {
BORDER-TOP-WIDTH:0;
BORDER-LEFT-WIDTH:0;
BORDER-BOTTOM-WIDTH:0;
MARGIN-BOTTOM:2px;
BORDER-RIGHT-WIDTH:0;
}

A IMG.badge:hover {
MARGIN-BOTTOM:1px;
BORDER-BOTTOM:#314e8c 1px solid;
}

P,HTML,TABLE,TD {
FONT-SIZE:12px;
LINE-HEIGHT:18px;
FONT-FAMILY:tahoma,verdana,geneva,arial,helvetica,sans-serif;
}

#leftcolumn P,#rightcolumn P {
FONT-SIZE:11px;
LINE-HEIGHT:16px;
}

H4,.subtitle {
DISPLAY:inline;
FONT-SIZE:14px;
MARGIN:4px;
COLOR:#fff;
FONT-STYLE:italic;
}

.date_linkdump,.date {
FONT-WEIGHT:normal;
FONT-SIZE:10px;
FLOAT:right;
COLOR:#666;
LINE-HEIGHT:16px;
FONT-FAMILY:tahoma,verdana,geneva,arial,helvetica,sans-serif;
}

.entryfooter A,.date A,.entryfooter_linkdump A,.date_linkdump A {
FONT-WEIGHT:bold;
COLOR:#5c6b8e;
TEXT-DECORATION:none;
}

.date A:hover,.entryfooter A:hover {
FONT-WEIGHT:bold;
COLOR:#5c6b8e;
TEXT-DECORATION:underline;
}

H1 A,.prevnext_links A {
FONT-WEIGHT:bold;
COLOR:#fff;
TEXT-DECORATION:none;
}


and here's screenshot

Hi everyone,

I am using nivo slider for a website that I'm building. I have created a gradient png for the background of the captions that will go over the slider images.

Everything is working perfectly in ie9 and FF, however in ie8 and 7 all I get is a big black block where the gradient should be.

The strange thing is that if I set a background color, then the gradient shows through.

I have tried to make the background transparent with no luck at all. I have tried to set the background-color to transparent, and made it !important. I've also tried to use filters, nothing seems to work.

The URL of the site is http://www.backupstorage.co.za/new/ .

If anyone out there can help, I really would be incredibly grateful!

Hi

I have a style made in CSS. It is a menu where if you hover over some of the menu a drop down box will appear. This works in Firefox but does not work in IE.

Here is the link: Look first in Firefox at my menu then look at it in IE.

http://www.bcit.gimppro.co.uk/index.php

Also is their some way to test my CSS code to make sure it works in all browser.

PHP Code:
#menu {
top:5px;
width: 8.87em; /* set width of menu */
background: #eee;
width: 100%;
} 

#menu ul { /* remove bullets and list indents */
list-style: none;
margin: 0;
padding: 0;
}

#menu ul ul {
position: absolute;
z-index: 500;
}

#menu ul ul ul {
position: relative;
top: 0;
left: 100%; /* to position them to the right of their containing block */
width: 100%; /* width is based on the containing block */
}

/* style, color and size links and headings to suit */
#menu a, #menu h2 {
font: bold 11px/16px arial;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}

#menu h2 {
color: #fff;
background: #000;
text-transform: uppercase;
}

#menu a {
color: #000;
background: #efefef;
text-decoration: none;
}

#menu a:hover {
color: #a00;
background: #fff;
}

#menu li {
/* make the list elements a containing block for the nested lists */
position: relative;
} 

div#menu ul ul ul,
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}

#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 8.87em;
float: left;
}

div.container{
    position:relative;
    top:0px;
    left:0px;
    width:995px;
    height:auto; 
}

#login{
    position:absolute;
    top:300px;
    left:745px;
    height: auto;
    width:240px;
    font: bold 11px/16px arial;    
}

#content{
    position:absolute;
    top:300px;
    left:0px;
    height: auto;
    width:695px;
    margin:0 .25em;
    padding: 5px 15px; 
    font: bold 11px/16px arial;    
    border: 1px solid black; 
}
#content h1, h2 {
    font-weight: bolder; 
}

#banner{
    position:absolute;
    top:0px;
    left:0px;
    height: auto;
    width:1000px;
} 

Is there any way to display a style seperately for Firefox than for any other browser?

Trying to use css to make a border around an element, and am using:

.navbar { border: 1px solid red; }

In IE, it puts a border around the navigational bar, but in FF, it only puts 1 line above it. Even if I try independently adding:
border-left
border-right
border-bottom

etc, it only shows above for border-top and border-bottom and nothing for left and right.

I can place the code if needed, but I really just have a few words typed to try and get this to work. It's of strict doctype if that matters.

Does FF have something special I need to add to get border to work?

Thanks.

It looks fine in IE. But went wrong in Firefox.
Also there seems to be a space to the right of each img button. :cry:

IE
http ://imgboost.com/uploads/894333_screenshot2.jpg

FF
http ://imgboost.com/uploads/113426_screenshot1.jpg

My Css
Quote:
* {
margin: 0;
padding: 0;
}

html{
height: 100%;
margin: 0;
padding: 0;
}

body {
height: 100%;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
margin: 0;
padding: 0;
}


* html #container {
height: 100%;
}

#container {
position: relative;
min-height: 100%;
}

#buttons {
padding-right: 0em;
padding-left: 0em;
}

#topLinks
{
list-style: none;
margin-top: 0;
margin-left: 0;
margin-right: 0;
padding-top: 0.9em;
padding-right: 0;
background-image: url(../images/footer_bg.gif);
background-repeat: no-repeat;
}

#topLinks li
{
display: inline;
border-left: 1px solid #FFFFFF;
padding-right: 0em;
padding-left: 0em;
}

#topLinks li.topLinks_first
{
border-left: 1px solid #FFFFFF;
}

#topLinks li.topLinks_last
{
border-right: 1px solid #FFFFFF;
}

#topLinks a
{
color: #FFFFFF;
}

#header {
padding-top: 5px;
padding-left: 5px;
margin: 5px;
}

#footer {
width: 100%;
text-align:center;
position: absolute;
bottom: 0;
margin:0;
padding:0;
}

#footer_pink {
background: url('../images/footer_pink.gif') repeat-x;
height: 35px;
}

#bottomLinks
{
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
list-style: none;
margin-top: 0;
margin-left: 0;
padding-top: 0.9em;
background-image: url(../images/footer_bg.gif);
background-repeat: no-repeat;
}

#bottomLinks li
{
display: inline;
border-left: 1px solid #FFFFFF;
padding-right: 1em;
padding-left: 1em;
}

#bottomLinks li.first
{
border-left: 0 none transparent;
}

#bottomLinks a
{
color: #FFFFFF;
}


#footer_yellow {
background: url('../images/footer_yellow.gif') repeat-x;
height: 55px;
}

.footer_yellow {
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
color:#333333;
}

#footer_content {
padding-top:1.0em;
}

#footer_yellow img {
border: none;
}

#menu {
background: url('../images/pink_menu.gif') repeat-x;
height: 37px;
text-align:center;
}

#menu a img {
border: none;
}

#menu ul {
padding:0px;
margin:0px auto;
}

#menu ul li{
display:inline;
list-style-type:none;
}

I've got a layer on my page that I'm showing and hiding through javascript. The layer is positioned absolutely and given a position of right: 0 and bottom: 10px in the CSS file.

Now in one case I actually went into the page and did an inline style to change the position. So that one is given a different position, top: -5px and left: 10px.

In IE it works fine. In Firefox the border sometimes won't expand to enclose the box.

Here's what I've found:

-Take out the position from the CSS file and position with inline style -- works.

-Leave the position in the CSS file and don't position with inline style -- works.

-Leave position in CSS file and change right to left and change to any value -- works.

-Leave position in CSS file and change bottom to top and change to any value -- doesn't work.

So the big culprit here seems to be defining a position with bottom and then switching to top causes Firefox 1.5 or 2 to fail. The same thing seems to happen in Opera 9. This seems like a bug, but why in multiple browsers?

I've tried floating things within the box, setting the overflow to auto, nothing seems to make the border expand around the box. Any thoughts?

Why do the margin-top values on these layers DO NOTHING in firefox, but act as expected in IE? Which way is actually correct?
Also, if I add a float:left to the blue layer, firefox adds a margin-top to the blue and green layers only?
This seems very wrong.. How can I get the expected margin-top on each layer?

Code:

<BODY style="background-color:yellow;">
<div id='blue' style="width:250px; height:250px; display:block; margin-left:1px; margin-top:10px; background-color:blue; position:relative;">
	<div id='green' style='width:220px; height:200px; margin-top:10px; background-color:green; display:block; position:relative;'>
		<!--- prod selector box --->
		<div id='gray' style='width:200px; height:150px; overflow:auto; margin-top:10px; margin-left:4px; display:block; background-color:gray; position:relative;'>
			asdf
		</div>
	</div>
</div>
</BODY>

I just can't seem to see why Firefox only shows part of the border on the < ul> element. IE 6 seems OK.

Here's the link: imagesandwords.org.uk/andrewjamesrp/index.php

Here's the HTML:

< div id="navcontainer">
< ul id="navlist">
< li>< a href="#1" title="Examples of the Work">Images< /a>< /li>
< li>< a href="pages/about.php" title="About the artist">Andrew< /font>< /a>< /li>

i etc for the other links
< /ul>
< /div>
Here's the CSS:

#navcontainer {
color: #8d1016;
font-weight: bold;
width: 205px;
padding: 20px 0 0 115px;
}
#navcontainer ul{
list-style: none;
width: 90px;
padding: 0;
color: inherit;
border: 1px black solid;
}
#navlist li
{
width: 90px;
}
#navlist li a
{
display: block;
width: 100%;
padding: 2px 14px;
background-color: #E8E8E8;
border: 2px solid #E8E8E8;
background-image:url(siteimages/nav_arrow.gif);
background-position:left center;
background-repeat:no-repeat;
text-decoration: none;
}

#navlist li a:hover{
color: black;
background-color: #C0C0C0;
border-style: outset;
padding: 2px 14px;
background-image:url(siteimages/nav_arrow02.gif);
background-position:left center;
background-repeat:no-repeat;
}

html>body #navlist li a:active
{
border-style: inset;
}