CSS - Urk... Have Problem With Border-collapse And Bottom Cell Border In Firefox.. Help?

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?

Hi there!

This might seem really basic but I don't seem to be able to remove the default border from a cell I created.

The code looks like this:

"<p> </p>
<table align="center" style="margin-left: auto; margin-right: auto; border-width: 0px;">
<tbody>
<tr>
<td>
<div style="overflow: auto; height: 475px; width: 700px; border-style: hidden;">
<p align="center">
<img height="457" width="600" src="images/stories/vlkommen3.jpg" alt="vlkommen3" style="margin: 0px; vertical-align: middle;" />&nbsp;</p>
<p align="center">
</p>
<p> </p>
</div>
</td>
</tr>
</tbody>
</table>
<p>&nbsp;&nbsp;</p>

How shall I do to hide the border?

Thanks in advance!

/Kristoffer

Can any of you tell me why with the a:link/visited set with border:none
(as in the example at the bottom of the e-mail), I get a box around an
image inside a link:

<a href="communication.php"><img src="resources/president.jpg"></a>

Working on a MAC, I noticed that the border only appears in
Firefox but not in Safari, Opera and OmniWeb. Can anyone
tell me why this border appears around the image, why only in FF, and of course, how one can make it dissappear using the stylesheet?

STYLESHEET:

a {text-decoration: none;}
a:link { color: #000000; border: none;}
a:visited { color: #000000; border: none;}
a:hover { color: #bbbb00; border: none;}
a:active { color: #000000; border: none;}

.image{border-width:0px; border: none;}

Here's something strange. I'm seeing a problem in IE on Windows. I've built a progress bar using vbscript and css, but the table doesn't quite display the way I want it to. Here's demo code:
Code:

<html>
<body bgcolor="dddddd">
<center>
<table border="1" cellpadding="0" cellspacing="0" style="border: 1px solid #000; border-collapse: collapse; background-color: #000" width="100">
	<tr><td id="pct_complete" width="50" bgcolor="black">&nbsp;</td><td id="pct_remain" width="*" bgcolor="blue">&nbsp;</td></tr>
</table>
</center>
</body>
</html>

Now I've set the border to collapse, but if you load it up, you'll notice a white line between the two. I think it may be the way ie adds a 3d appearance to the table, but I can't figure out how to overcome it.

Any ideas?

Thanks!

This is killing me! The border of a DIV top is working perfectly on FF but not applying on top in IE 6+7. Here are the class attributes:

{padding:1px 7px 3px; font-size:16px; border-color:#555555; border-style:solid; border-width:1px 1px 0px; text-decoration:none; color:#425366; background-color: #abd3ff; font-weight:bold;}

Not sure if the problem is on this class or in anything that affecting it. Any suggestions will be great.


Ehud

Hi

Could someone take a look at this please http://dmumford.bizhat.com/test.htm

You will see that in IE5 the border-bottom is about 2 pixels bigger than in other browsers, I have speciifed border-bottom:1px solid #fff;, but IE5 is making this bigger..........why????

Thanks for any help

hi there,

i have a local web page that im trying to build.

Its a three column fixed layout. The 3 columns have been floated and are contained by a container div element. I have implemented the bug fix (see http://www.positioniseverything.net/easyclearing.html) to ensure that the containing div wraps around the three floated columns and this works for both FF and IE.

However, i have one remaining problem. I'd like to display a right and left sided border to the "middle" floated div and this needs to stretch down to the bottom of the containing div element. However, i cannot get this to work. Does anyone have any suggestions?

Please see the attachments for the files

Thanks

http://www.brendanclements.com/ups/
http://www.brendanclements.com/ups/styles.css

It's the slideshow swf on the right. The bottom has a sliver but the heights are both at 300 px.

I know I used tables too much but it's been way too long since I've done CSS positioning so I'm doing this for now.

I believe the sliver is caused because the slideshow box has a rowspan of 2 since the slideshow does not require a title but I can not figure out how to get rid of it.

Thank you.

I currently have a problem with chrome not displaying a page properly under windows that a user emailed me about.

I have tested on my windows xp install with chrome and i do not see the error:

What he sees:
http://i43.photobucket.com/albums/e397/clericvash/chrome-xp-sp3.gif

What i see:
http://i43.photobucket.com/albums/e397/clericvash/Clipboard01-2.jpg

Just below the logo you have the main links "home, rules" etc but on his install the line below the links is way too far down, same version of chrome and all.

Code:
Code:

.menu_fancy
{
        width: 100%;
}
	
.menu_fancy ul
{
        margin: 0; 
	padding: 0;
        float: left;
	list-style-type: none;
}

.menu_fancy ul li
{
	text-align: center;
	float: left;
	padding: 0px 10px 3px 10px;
	margin-left: 5px;
	border-bottom: 1px solid #0099CC;
	border-top: 1px solid #FFFFFF;
	border-left: 1px solid #FFFFFF;
	border-right: 1px solid #FFFFFF;
	display: block;
}

.menu_fancy ul li a
{
	text-decoration: none;
	padding: 5px;
	display: block;
}

Sitewide, I have a bottom border affect, rather than an underline for links. But it applies itself to linked images as well. I have borders shut off on images, but that doesn't stop it from applying the border.

I've tried img border:none; and a few other tricks, but it only does the trick in Chrome.

CODE:
a {
text-decoration: none;
}
a:hover {
text-decoration: none;
border-bottom-width: 1px;
border-bottom-style: solid;
padding-bottom: 2px;
}
img {
border-width: 0px;
}
img a {
border-width: 0px;
}
img a:hover {
border-width: 0px;
}

Hi,

I have a list that shows the photo and some personal data of people.

Here it is:

http://www.tiregarfio.byethost17.co...ev.php/miembros

username: fer
password: m

I you load it with FF, you can see clearly I have added a green line that separate each member (border-bottom: solid 1px #A9F16C).

This line in IE6 is not between each member but below the personal data.

Here it is the styles:

Code:

div.miembro {
    overflow: hidden;
    clear: both;
    border-bottom: solid 1px #A9F16C;
}

div.fotografia {
    float:left;
    
}

Any idea?

Javi

Can anyone help me out with the following... I'm trying to create a table that, upon hovering a single cell, will increase the border thickness of that one cell, without increasing the thickness of other cells' borders in the same row/column.

So far, my attempts have resulted in other table cells also getting increased border thickness, which makes the whole table move. Is there a way to achieve this for just the one cell? Adding border thickness just on the inside of the cell?

Many thanks in advance!
ZephSev

I've got a div (picright) within a div that has an image with a border. The border works, but for some reason there's a teeny tiny gap between the bottom of the image and the border. (At least on a Mac using FF.)

.picright {
float: right;
border: solid 1px #9F7A47;
margin: .3em .3em .5em .5em;
padding: 0;
}

Then I thought maybe I needed a rule for the img, so I added

.picright img {
margin: 0;
padding: 0;
}

but that didn't fix it.

Any guesses?

Yes........it's me again with more problems.

In trying to solve some other problems I went to using contrasting bg colors so I could see what was going on per Kravvitz suggestion.

So here is what I have

body bg color set at gold

#whiteBorder - set at white

#page bg set at green; border hot pink

and then #topbar and #sideColumn set at powder blue.

The problems is that the 10px whiteBorder shows on the top and left - but not on the right and bottom and I have no clue why.

Here is the css: Code:

body {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: center;
	background-color: #FFCC33;
	color: #515151;
	margin:0px;
	padding:10px;
}

/*page container settings*/

#page {
	width: 750px;
	height: 600px;
	border: 1px solid #FF00FF;
	background-color: #339900;
	overflow: hidden;
	margin: auto;
	text-align: left;
}

#whiteBorder {
	border: 10px solid #FFFFFF;
	width: 100%;
	height: 100%;
}

/*text*/

.large {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #5094F9;
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 15px;
}

h1 {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #5094F9;
	font-size:20px;
	font-weight: bold;
	margin-bottom: 10px;
}

h2 {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #5094F9;
	font-size: 16px;
	font-weight: bold;
}

h3 {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #5094F9;
	font-size: 12px;
	font-weight: bold;
}

h4 {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #5094F9;
	font-size: 14px;
	font-weight: bold;
}

p a:link, a:visited {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #5094F9;
	font-size: 12px;
	font-weight: bold;
}

p a:hover, p a:active {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #990099;
	font-size: 12px;
	font-weight: bold;
}

/*logo header and tag settings*/
	
#header {	
	margin: 0;
	padding-bottom: 5px;
	width: 450px;
	height: 36px;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #5094F9;
	text-align: left;
}

#header img {
    vertical-align: -7px;
    }

.tagline {
	color: #5094F9;
	font-size: 16;
	font-style: italic;
	font-weight: bold;
	display: inline;
	clear: both;
	line-height: 20px;
	margin-left: 10px;
}

/*top bar settings*/

#topbar {
	float: top;
	height: 20px;
	background-color: #5094F9;
	clear: both;
	padding-left: 10px;
	text-align: left;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
}

#topbar a:link, #topbar a:visited {
	background-color: transparent;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
}

#topbar a:hover, #topbar a:active {
	background-color: #FFFFFF;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #5094F9;
	font-size: 12px;
	font-weight: bold;
}

#topbar ul {
	list-style: none;
	margin: 0;
	padding-top: 2px;
}

#topbar li {
	display: inline;
	margin-right: 160px;
}

/*Main Section two columns under top section*/

#wrapper{
	width: 100%;
	height: 100%;
}

#sideColumn {
	float:left;
	width:155px;
	height: 100%;
	background-color: #5094F9;
	padding-top: 50px;
	padding-left:10px; 
	padding-bottom:10px;
	pading-right: 10px;

	text-align: left;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-weight: bold;
	line-height: 20px;
}

.category {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 16px;
	font-weight: bold;
	letter-spacing: 5px;
}

#sideColumn a:link, #sideColumn a:visited {
	background-color: transparent;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
}

#sideColumn a:hover, #sideColumn a:active {
	background-color: #FFFFFF;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #5094F9;
	font-size: 12px;
	font-weight: bold;
}

#sideColumn ul {
	list-style: none;
	padding: 15px 0px 15px 10px;
	margin: 0px;
}

#mainColumn {
	padding: 0px;
	margin-left: 185px;
}

Here is the xhtml: Code:

<body>

	<!--begin page -->
	<div id="page">
	
	<!--begin white border -->
	<div id="whiteBorder">
	
	<!--begin header -->	
  	<div id="header"><img src="../images/vitalograph_spirometers_logo.gif" width="230" height="36" alt="vitalograph spirometers logo" />
  	<span class="tagline">world leaders in spirometry</span>
	</div>
	<!--end of header -->
	
	<!--begin topbar -->
  	<div id="topbar">
  	<ul>
		<li><a href="../index.html">Home</a></li>
		<li><a href="../about_us/about_us.html">About Us</a></li>
		<li><a href="../other_regions.html">Other Regions</a></li>
   	</ul>
  	</div>
  	<!--end topbar -->
  
  	<!--begin wrapper-->
  	<div id="wrapper">
  
  	<!--begin side column -->
  	<div id="sideColumn">
        <span class="category">Products</span>
    <ul>
		<li><a href="../products/spirometers.html">Spirometers</a></li>
		<li><a href="../products/clinical_trials.html">Clinical Trials</a></li>
		<li><a href="../products/asthma_copd.html">Asthma &  COPD</a></li>
		<li><a href="../products/smoking_cessation.html">Smoking Cessation</a></li>
		<li><a href="../products/resuscitaion.html">Resuscitation</a></li>
	</ul>
	
	<span class="category">Resources</span> 
    <ul>
        <li><a href="../resources/customer_support.html">Customer Support</a></li>
	  <li><a href="../resources/training_services.html">Training & Services</a></li>
      <li><a href="../resources/exhibitions.html">Exhibitions</a></li>
      <li><a href="../resources/newsletters.html">Newsletters</a></li>
      <li><a href="../resources/downloads.html">Downloads</a></li>
      <li><a href="../resources/useful_links.html">Useful Links</a></li>
      <li><a href="../resources/industry_information.html">Industry Information</a></li>
	  <li><a href="../resources/industry_information.html">Sitemap</a></li>
	</ul>
  </div>
  <!--end of side column -->
  
  <!--begin main column -->  
  <div id="mainColumn">
  
  	<!-- TemplateBeginEditable name="Main_Section" -->Main_Section<!-- TemplateEndEditable -->
  
  </div>
  <!--end of main column -->
  
  </div> 
  <!--end of wrapper--> 
   
  </div>
  <!--end of white border -->
  
  </div>
  <!--end of page -->
  
</body>

Thanks