|
CSS - Css Table Border Issue [mozilla & Ie]
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? Similar Tutorialsthis is what happen... as you can see from the 2 images Mozilla does not use the border in the way IE6 does (it should be all around the images) why ??? Code:
<span class="minilogo"><img src="../images/minilogo/minilogo_armatabrancaleone.gif" border="0" /></span>
.minilogo {background-color:#fff;
border:2px dashed #88f;
}
the code will come from a php page with 4 gif in a row... thank you Roberto 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? 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'm having trouble with a layout issue. Position is fine in IE, but in Firefox and Mozilla there's a 55 pixel gap on this drop down list and an even larger gap when the list is expanded. Here's my css for the navbar: /* Navbar */ #nav { width: 158px; margin-left: 0; } #nav ul { font-family: "Trebuchet MS", serif; font-size: 11px; margin-left: 0px; list-style-type: none; } #nav ul li ul { margin-left: 12px; } Any suggestions or help would be appreciated. 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! 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, I have a table with a scroll bar. My problem is that it works in ie but not in mozilla,netscape7.1, firefox...When I load the page in mozilla, the table is not shown, it's as if it were set to hidden, and it's really weird because the first time that I load the page, the table is shown with the scroll bar just for a moment and then hides..... I used a div tag that contains the table to be shown. I've tried different things as changing the z-index, using the display attribute, but none of them worked. Here is the style defined for the div tag: Code:
div.tableContainer_plegado{height: 420px; overflow: auto; width:100%;}
Please help me! Thanks in advance! Alright, this is probably a simple fix but I can not find the solution anywhere. I'm trying to highlight a table cell with a 2px solid red border when it is clicked. Is there a way to get this to happen with out changing the size of the cell? I hope this makes sense. Basically the cell is expanding by 1 px causing movement in the table. Hi, I have a table with a scrollbar that works perfectly in ie but not in mozilla. When I scroll up/down in mozilla, the header is not kept fixed as it should be. I use a div that encloses one table with the content. the css code for the div and the thead: Code:
div.tableContainer_plegado{height: 285px; overflow: auto; width:100%;}
//I also tried top:0, just in case mozilla doesn't support the expression element
thead.lista td{position:relative; top: expression(document.getElementById("data").scrollTop-0);}
thanks in advance!! i use external stylesheet which is shown below. i have tried using <h1> which is set to center, ive tried using <p class="center"> and it still does not center. it only centers when i use the <center> tag...what gives? its fine in netscape, opera, and ie..... Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Ranid Photo Gallery</title> <link rel="stylesheet" type="text/css" href="stylesheet1.css" /> </head> <body bgcolor="#ffffff" text="#000000" link="#0000ff" alink="#0000ff" vlink="#0000ff"> <div style="position: absolute; left: 10px; top: 200px; width: 740px; background-color: transperant; padding: 0px;"> <h1>Ranid Frog Photos</h1> <p class="center"><table width=70% border=1 cellspacing=0 cellpadding=0> <tr><td width=30%><h4><a href="images/raurora1.jpg"><img src="images/raurora1.jpg" width=100 height=100></a></h4><h4>Rana aurora aurora; Vancouver Island, Canada</td> <td width=30%><h4><a href="images/raurora2.jpg"><img src="images/raurora2.jpg" width=100 height=100></a></h4><h4>Rana aurora aurora; Vancouver Island, Canada</td> <td width=30%><h4><a href="images/.jpg"></a></h4><h4></td></tr> </table></p> <h5>:<a href="gallery.html">Back to the Gallery</a>:</h5> </body> </html> My style sheet Code:
body {
color: #000000;
background-color: #ffffff;
font-family: Georgia, "Times New Roman",
Times, serif;
}
}
h1 {
FONT-WEIGHT: bold;
text-align: center;
font-size: 30px }
h2 {
FONT-WEIGHT: bold;
text-align: center;
font-size: 25px }
h3
{
FONT-WEIGHT: bold;
text-align: center;
font-size: 20px }
h4
{
FONT-WEIGHT: bold;
text-align: center;
font-size: 15px }
h5
{
padding: 0px;
FONT-WEIGHT: normal;
text-align: center;
font-size: 12px }
h6
{
line-height: 1pt ;
FONT-WEIGHT: normal;
text-align: center;
font-size: 9px }
p {
FONT-WEIGHT: normal;
text-align: left;
FONT-WEIGHT: normal;
color: #000000;
font-size: 12px }
hr {color: #7d7c7c }
.right {text-align: right }
.center {text-align: center }
.left {text-align: left }
.uppercase {text-transform: uppercase}
.lowercase {text-transform: lowercase}
.capitalize {text-transform: capitalize}
A:visited {
COLOR: #802CFF; TEXT-DECORATION: underline
}
A:link {
COLOR: #2C31FF; TEXT-DECORATION: none
}
A:hover {
COLOR: #719FFE; TEXT-DECORATION: underline
}
A:active {
COLOR: #2C31FF; TEXT-DECORATION: underline
}
any ideas? Hi all, I have a content div wrapping two inner divs. The widths of the inner divs (div A, div B) add up to the total width of the content div. div A is floated left. Everything displays correctly, until I put a 1px solid border on the content div. In IE 6, div B renders below div A. All margins and paddings are 0px. When I adjust div B's width to factor in the content div's border, the divs position correctly, but there is a gap between div B and the border. Can someone tell me why this is happening and how to fix it? Thanks in advance In a CSS I have a couple of styles defined for different tables. My problem is that on one table I want borders around each TDk and I don't want them around another. The only way I've found to affect the borders was to define a TD element, but that makes all the tables have borders. What do I do? 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? Okay, I know this has been discussed a lot here and I did a lot of searching including reading through ie problem with drop down menu, but I'm still having a heckuva time getting mine to work. Here it is: http://www.jimandkris.com/test/verticalpopout.html When viewing in IE, on any parent menu item with children, it expands downward a few pixels when hovered over. I'm shooting for something like this: http://sperling.com/examples/menuv/ The *html hack isn't fixing it like I hoped. What am I missing? Second, and not as major, in FF my top border (in red) doesn't extend the entire length of the li for either the parent or the children. Thoughts on that? Thanks again! 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 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? www . gameyin . com It shows as the border image twice. Er...I mean the image is showing twice and no matter what I do I can't seem to get the bottom part to stretch more to meet the content. I don't want to try pixels though because that wouldn't be fluid : \. Any help? 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 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 |
|||||||