|
CSS - Border-collapse
I have several adjoining tables (tables are stacked on top of each other)
and I'm using css to set the borders using the following: border: 1px solid #FFFFFF; border-collapse: collapse; IE doesn't collapse the horizontal border of the adjoining tables (one table underneath another table). Mozilla renders fine (the horizontal borders collapse). Is there a way to get IE to collapse the horizontal borders on adjoining tables? Thanks for any help. -D- Similar TutorialsHi. 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>
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 I am porting over a Nucleus CMS skin to WordPress and I am about 90% done with the port... http://www.jamesmeister.com/mom/ as you can see, the ID #wrapper is not being let by the sidebar and is causing major headaches. it is supposed to look like this: http://skins.nucleuscms.org/blog/16 My CSS file is located he http://jamesmeister.com/mom/wp-content/themes/stanch2/style.css Can anyone figure out what could be the problem and how to fix it? Thanks! Hello, first post here... I have an image floated left, with an unordered list (ul) next to it. Problem is, the margin values I set for the list are totally ignored, so the list bullets end up overlapping the image. Seems the only solution is to set margins on the image, but that also pushes away non-overlapping content, like the h3 that is above the list and positioned fine. Any ideas? Everything works fine if/when I float the list left, but that seems draconian... Code: css Code: Original - css Code img.alignleft { margin-right:0.5em; display:inline; float:left; } ul, ol, dl { line-height:1.5em; margin:0 0 1em 1em; }
HTML4Strict Code: Original - HTML4Strict Code <p><img src="" width="295" height="400" class="alignleft"/></p> <h3>A Sampling of Workshops We Have Brought to Nonprofits</h3> <ul> <li>An Introduction to Social Media for the Nonprofit</li> <li>An Introduction to Storytelling for the Nonprofit</li> <li>Using Social Media and Digital Storytelling in the Classroom</li> </ul> <p><img src="" width="295" height="400" class="alignleft"/></p> Hi! Any helpful advise is appreciated.... I have an issue where I trying to arrange 3 images in a simple column with a small amount of space in between, all the way to the right. It funny if I disable the CSS code the 3 image array will return left in the perfect column, but I want it on the right, and only get an image pile-up on the right side. Please PM to get the URL to see the test page. Example HTML: <div class="thumbnail"> <h2><b>heading</b></h2> <img src="(URL address.....file1.png)" alt="" width="278" height="142"><br> <!-- Caption --> </div> <br class="clearboth"> <div class="thumbnail"> <img src="(URL address.....file2.png)" alt="" width="278" height="142"><br> <!-- Caption --> </div> <br class="clearboth"> <div class="thumbnail"> <img src="(URL address.....file3.png)" alt="" width="278" height="142"><br> <!-- Caption --> </div> Example CSS: .thumbnail { width: 278px; margin: 30 15px 15px 30; right:40px; position:absolute; } .clearboth { clear:both; } THank you in advance for your help! Best, Digigumball Hi all 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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>untitled</title>
</head>
<body>
<table style="margin-bottom: 10px;" cellspacing="0" cellpadding="0">
<tr>
<td>asdf</td>
</tr>
</table>
<p style="margin-top: 10px;">asdf</p>
</body>
</html>
Why do the margin-bottom of the table and the margin-top of the p not collapse (only tested in Firefox2)? Why is there 20px between them? I don't understand the world of margins anymore... Is this an exception or a bug or what? Thanks for help, Josh On my new design: http://codymays.net/~private_ftp/theed The header and footer of the green block have a space on them and I cannot figure out why. I had this problem with the design before, but I started over and now I only have this issue with IE6 and below. It works in all other browsers. I can clear the spaces if I set the margin-top of the block's content area to -4 and the footer's margin-top to -4. But once this is done, IE then redraws the div at the bottom of the page for no apparent reason. Any ideas/suggestions on what to do here would be appreciated. Thanks, Cody I am using a table with 5 rows and 5 columns of data. First i hide <td>'s using style.display="none"; When i use style.display=""; for showing up <td>'s , in IE its working fine, but in Netscape 7.1 (Windows) the columns get collapsed on one another. Can anybody know why this happens ? Is there any other way it can solved. Need help pls. 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> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </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? Hi, This used to be my solution: Code: <table border=1 bordercolorlight='#CCCCCC' Bordercolordark='#FFFFFF'> But this only works well on IE - not Mozilla Now I want to use CSS: Code:
.results {
border: 1px solid #CCCCCC ;
}
Code: <table class='results'> --------------- The problem is, with CSS, only the TABLE acquires the border property. The cells within it don't. If I specify Code: <td class='results'> for all the cells in the table, this also won't work, because the cell borders overlap each other and some border lines seem thicker than others (because of overlapping). Is there any simple way I can specify the border property for the table - in ONE declaration? I want the table and td borders all to be a simple 1px width ...is that possible in one declaration? Thanks a lot! How do you create an inner border around a table in css, rather than a "solid" border which creates a border line around the table on the outer half. The border needs to butt up against an image, rather than leaving a pixel space. This is the coder I have so far. Nothing big: Code:
.solid {
border: solid 1px #000000;
}
Thanks. I'm making a dashed border, and I was wondering how can I change the pixel size and color of the border? It's been awhile for me since I've used CSS or HTML but here's what I have(I know this isn't the proper formatting, but it's for a xanga site so the way it's entered doesn't really matter =\) <style="text/css"> #box { border-style:dashed; width:700px; position:absolute; } </style> <div id="box"> <div id="da"><p>Da..daa...da da Da</p> </div> <div id="muh"><p>muh numa nah</p> </div> </div> Hi, I'm a total newbie when it comes to .. well everything. HTML, CSS etc ... I'm working on a little site, but I have a problem on (apparantly I can't post the link to my site because I'm a new user.. ) In Firefox everything is OK. But in IE when I hover over the bottom Div's (delphi.exe file) and (Delphi-files) I get a solid border instead of a dashed border as I wrote down in the CSS. Any idea what the problem is? Is it needed for me to post the CSS file? Might be a little bit embarrasing as it's probably the most rediculous CSS file you've ever seen. Thank you for your time. hi, i was wondering if it is possible to assign images for each border. something like border-top:5px dotted black; background-image:url(horBrdr.gif); border-left:1px solid red; background-image:url(verBrdr.gif); border-right: 2px groove green; background-image:url(horBrdr.gif); border-bottom:3px dotted #3399CC ; background-image:url(horBrdr.gif); vertical-align:middle; padding:1em;} of course this doesn't work. thanks for the help... Hi, I am using blueBox class that makes a border. code: Code: <div class="blueBox" <table bgcolor="#FF3300"><tr><td> <div id="my_title" style="position: relative; width: 200px; height: 20px;" ></div> </td></tr> <tr><td>... My problem is that <div id="my_title" is causing right border of <div class="blueBox" disappear. When I change <div id="my_title" style="position: relative; to <div id="my_title" style="position: absolute; border is right where it should be. I do not want to use absolute positioning. What can I do about it? What is the problem? I can see that red background of the <table bgcolor="#FF3300"> does not even reach half of <div class="blueBox" Something is obviously pushing or covering right border of <div class="blueBox" Hey on my website: http://www.chamillionairechat.com I want there to be a border around the mainmenu and to look something like this: And this is the css i'm using for the mainmenu: Code: .mainmenu { background-color:#FFFFFF; padding-bottom:5px; border:1px border-color:#21511F; }
So does anyone know what i'm doing wrong Thanks So here's my css code Code:
#top-div {
border-top : 10px solid #FF8F00;
width:100%;
position:relative;
top:-8px;
}
The intention is suppose to make an orange strip across the top of the page. The problem is that the left and right border of the div is not orange - specifically the top-right, top-left borders are not orange. So basically the strip is not stretch 100% from the otter most left to the otter most right side. Any advice? Hi guys. Can I change a table row border style like below?? Code: <tr style="border-bottom: solid 1px #DBDBDC";> how to create the free products heading over the border... with the border cut for tht part of the box ??? |
|||||||