CSS - Td Border Issue

Hey all,

I am working on completely redoing our website (FizzPow.com) I have a border-right: on my left column in a wordpress template I am modifying. It looks fine in Chrome, IE9, Safari5, but in FF7, it moves my right column all the way down.

Here's the site:
FizzPow.com/newsite

I am an experienced programmer but fairly novice with HTML/CSS. Please be kind and I very much appreciate your help!

I'm building a series of navigation links in boxes on top of each other. I want to pad the links inside their div tags 3 pixels all the way around. I'm seperating the boxes using the border property, 1px solid on the bottom of each cell. The top and the bottom are handled in a seperate class.

In firefox, the brower adds the 3 pixels to the overall width (maybe six since I'm padding left/right) so the page comes out like this:

---------
| Link 1 |
-------------
| Link 2 |
-------------
| Link 3 |
-------------

Now in IE, it looks correctly. I'm not sure which one is correct, but since IE looks right I assume it's correct. Any way to get the padding to be handled consistently in 2 browsers?

Hello,

Here is an example of the issue I'm having..
http://www.patricksaviation.com/backend.php

In Firefox and IE, the border color is correct, but in Opera the color is just black; this is caused by applying border-collapse: collapse. I tried adding, in addition to to the standard html bordercolor, a CSS border-color, which helped change Opera to a dark green (not the right color, but closer) but it also causes the border color in IE to darken (the wrong color).

Does anyone know what causes this or how I could fix it?

Thanks,
Patrick

using css i've got a table in a div: e.g.

div
padding: 20px

table
width: 540px
border: 10px solid red;

result: the div including it's own padding should be 600px wide but using the html strict dtd ie is in strict mode (confirmed by other measurements) the whole width of the table is 540px including the borders. also setting box-sizing to contents . thoughts?

My site is: adventurevalley.ca/jason

The current CSS file appears to work problem free in IE7 and FF, but Im having no luck in IE6. I realise things like the hover highlighting and menu indent will not work which I am fine with, however the corners and different box size are driving me insane. Can someone please point me in the right direction?!

Thanks,
Jason

the 2 pages below have some general layout css issues, like too much white space above the grey line AND though they both use the same right bar (I uses a PHP include) the format is different in both. The green line is the toughest...it won't extend the height of the page.

Any ideas?

I attached my style sheet as well. thanks.

http://bowtree.org/latest/luminaries.php
http://bowtree.org/latest/index.php

I'm having some issues with getting a table border to appear in both Mozilla and IE. I had it working at one point but now it's stopped working in IE.

Basicly this is the code to control it:

border:1px solid #0;

but IE doesn't read it, I've checked the rest of the CSS to see if there is any conflicts but found none.

Anyone know how to get the table border to appear in both IE and Mozilla?

ok i have links on the side, i have applied border-bottom:0.1em solid black properties so they look like they are underlined. Now it all works but sometimes when i scroll the page down and then up, SOME of the link's border have disappeared, i can fix this by moving my mouse of the links and the border appear but i was wondering is it to do with CSS/html?
the only other thing could be my Screen/monitor's refresh rate

I'm trying to put a 1px line on the bottom of my header that spans the width all the way. I've used border-bottom: 1px and border-style: solid; but I still have a looks like 3px border all the way around my header.

Also I have my unordered list inside of my header div and it's placed directly below my header.

Any help much appreciated, just learning how to layout.

http://imgbin.org/index.php?page=image&id=6637

CSS code
Code:

body { 	
	font-family: "Lucida Sans Unicode", sans-serif, Verdana; 
	
	background-color: #999999; 
}

#header {
	
	height: 75px; 
	width: 100%; 
	
	border: 0px 0px 1px 0px; 
	border-style: solid;  
	border-color: white; 
	background-color: #336699; 
}	

#container {
	margin: 0 auto; 
	width: 900px;
	height: 100%;  
	
	background-color: #666666;  
}

#content {
	width: 75%; 
}

#sidebar {
	width: 25%; 	
	
	background-color: #666666; 	
}

ul {
 
	list-style-type: none; 
	
}

li {
	display: inline;	
}

and

HTML
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
	<head>
		<title>Jeremy</title>
		<link href="default.css" rel="stylesheet" type="text/css" />	
	</head>
	
	<body>
		<div id="header">
			<h1 class="header">Jeremy</h1>
			<ul>
				<li><a href="index.html">Home</a></li>
				<li><a href="portfolio.html">Portfolio</a></li>
				<li><a href="forums.html">Forums</a></li>
				<li><a href="contactme.html">Contact Me</a></li>			
			</ul>
		</div>	
		
		<div id="container">
			<div id="sidebar">
			
			</div>		
			
			<div id="content">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor dui sit amet diam molestie cursus. Vivamus a sapien sed nunc fermentum feugiat. Donec iaculis neque sit amet tortor consectetur eu lacinia est commodo. Ut lobortis fermentum felis, eu tristique elit fermentum sed. Etiam pulvinar commodo est non vestibulum. Aenean sed ante in velit vulputate tristique. Duis lacinia eleifend massa, sed volutpat dolor malesuada at. Nam convallis consequat mauris imperdiet rutrum. Aenean vitae vestibulum libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum lorem nulla, pellentesque vitae porttitor condimentum, dignissim a libero. In quis turpis orci, vitae faucibus risus. Duis tincidunt, libero tincidunt hendrerit viverra, felis lectus rutrum diam, et dictum mauris ipsum nec purus.</p>
				<p>Vivamus ut nunc vitae eros fermentum pretium. Nunc molestie odio vitae magna consectetur quis ultricies purus adipiscing. Curabitur ante nisl, scelerisque a consequat sed, rhoncus at turpis. Morbi blandit ante eu tellus facilisis eu semper enim auctor. Nunc sollicitudin orci nunc, vitae accumsan risus. Etiam nec est in ipsum iaculis varius. Nam enim velit, imperdiet viverra condimentum vitae, egestas eget dolor. Nullam facilisis condimentum diam, in euismod lorem mattis a. Mauris vel nulla et ipsum venenatis aliquam vitae a nibh. Nunc commodo ullamcorper odio vitae fermentum. Praesent faucibus blandit condimentum. Integer sed justo nulla. Praesent id gravida dui. Proin malesuada interdum scelerisque. Sed condimentum justo nec metus venenatis accumsan.</p>
			</div>		
		
		</div>
	
	</body>
</html>

Hello all,

My website appears fine on Firefox 3.6.7 but not on IE 8 (it is missing the borders on the article text area and the login box is up too high). I notice you can't include URLs in the post for new members so any help is greatly appreciated.

Thanks!

Something like this gives real thick and uneven borders, is it possible to make the borders combine and become one single border when they are next to each other?

I don't want to use seperate border-top border-left etc ...

Thank you.

Code:

<HTML>
	<HEAD>
		<style type="text/css">
			div.table div
			{
				border			: 1px solid black;
				/* border-collapse		: collapse; */
			}
			div.table div.tr
			{
				clear			: both;
			}
			div.table div.tr div.th
			{
				float			: left;
				font-weight		: bold;
				width			: 25%;
			}
			div.table div.tr div.td
			{
				float			: left;
				width			: 25%;
			}
		</style>
	</HEAD>
	
	<BODY>
		<div class="table">
				<div class="tr">
					<div class="th">column 1</div>
					<div class="th">column 2</div>
					<div class="th">column 3</div>
					<div class="th">column 4</div>
				</div>
				<div class="tr">
					<div class="td">num 1</div>
					<div class="td">num 2</div>
					<div class="td">num 3</div>
					<div class="td">num 4</div>
				</div>
				<div class="tr">
					<div class="td">numAAA 1</div>
					<div class="td">numA 2</div>
					<div class="td">numAAAA 3</div>
					<div class="td">num 4</div>
				</div>
				<div class="tr">
					<div class="td">num 1</div>
					<div class="td">num 2</div>
					<div class="td">num 3</div>
					<div class="td">num 4</div>
				</div>
				<div class="tr">
					<div class="td">num 1</div>
					<div class="td">num 2</div>
					<div class="td">num 3</div>
					<div class="td">num 4</div>
				</div>
		</div>
	</BODY>
</HTML>

I like dashed underline links. The trouble is a couple of sections of my site use line-height and vertical-align to center their content. This means that applying a border-bottom: 1px dashed black; to an href has the effect that the underline appears at the bottom of the line height and not directly underneath the link. Is there a way to overcome this?

Hi.

Have created some simple tabs using table cells.

Active tab should have bottom-border color equal to page background-color.
Non-active tabs should have bottom-border=black.

Works fine in IE, but does not work very well in Firefox.

If I remove the border-collapse:collapse on the table, then firefox also work... but I would like to be able to keep the 1px border between each table cell.

So is there a way to make this work in both IE and Firefox...
and hopefully most other browsers...

See code below:

Code:

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<style type="text/css">
	a.menu_top:link {color: #000000; text-decoration: none;}
	a.menu_top:visited {color: #000000; text-decoration: none;}
	a.menu_top:hover {color: #000000; text-decoration: none;}
	a.menu_top:active {color: #000000; text-decoration: none;}
	
	td.menu_top_passive { 
		background-color: #777;
		border-left: 1px #000000 solid;
		border-right: 1px #000000 solid;
		border-top: 1px #000000 solid;
		border-bottom: 1px #000000 solid;
		
		text-align: center;
		
		cursor:pointer;
		font-weight: bold;
		
		padding: 5px 20px 5px 20px; 
		 
		margin: 0;
		 
	}
		
	td.menu_top_active { 
		
		background-color: #bbb;
		border-left: 1px #000000 solid;
		border-right: 1px #000000 solid;
		border-top: 1px #000000 solid;
		border-bottom: 1px #bbb solid;
		
		text-align: center;
	
		cursor:pointer;
		font-weight: bold;
		padding: 5px 20px 5px 20px;
		
		margin: 0;
		
	}
	

</style>

<script language="JavaScript">


function change(id, url) {
	for (i=1; i<6; i++){
		eval("document.getElementById("+i+").className='menu_top_passive'");
	}	
	eval("document.getElementById("+id+").className='menu_top_active'");
}
</script>

</head>
<body style="margin:0; padding:0; background-color:#bbb;">
<br><br>
<center>
1. Load the page.<br>
2. Click Item 4.<br>
3. Click Item 2.<br><br>
Why is the bottom border of the menuelements (table cells) not getting correct in Firefox?<br>
None-active menuelements should have a border-bottom = black, active should have same bottom-border as page.<br>
Notice that I use border-collapse on the table in order to get the cell-border 1px thick between the menuitems.<br>
If I remove border-collapse, then there is no strange behaviour in Firefox.<br>
Any way to get this working in Firefox without breaking it in IE?

</center>
<br><br><br>
	<table border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse:collapse;">
		<tr>
			<td id="1" nowrap class="menu_top_active" onClick="change('1');"><a  href="javascript:;" class="menu_top">Item 1</a></td>
			<td id="2" nowrap class="menu_top_passive" onClick="change('2');"><a href="javascript:;" class="menu_top">Item 2</a></td>	 
			<td id="3" nowrap class="menu_top_passive" onClick="change('3');"><a  href="javascript:;" class="menu_top">Item 3</a></td>				
			<td id="4" nowrap class="menu_top_passive" onClick="change('4');"><a  href="javascript:;" class="menu_top">Item 4</a></td>
			<td id="5" nowrap class="menu_top_passive" onClick="change('5');"><a  href="javascript:;" class="menu_top">Item 5</a></td>

		</tr>
	</table>
</body>
</html>

I'm a little puzzled by this weird display bug by IE7, this bug doesn't occur in IE6. It had to do with the DIV's CSS's border-style.

If you set it to double then you notice some random bugs with it. Some of the time, the border is displayed without a problem. Some of the time, it is displayed with some gaps in the line as if it is not being drawn upon. Some of the other time, it is not displayed at all.

I noticed if I switch from one tab to another then back, the border appeared as if nothing had happened. I also noticed that if I open the view source that overlapp the web browser then closed it, the border appeared as if nothing had happened.

How do you fix that problem?

Thanks...

I would like to set up a table with a different border than the cells inside it. Here's my code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
	TABLE {border: 1px solid black; border-collapse: collapse; width: 200px}
	TD {border: 1px solid #ccc}
</style>


</head>

<body>
<table>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

That's all hunky dory in (gasp!) IE, but good browsers...they only show the lighter gray color. How do I get the table border to be different?