|
CSS - Ie Box Model With Table Border Issue?
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? Similar TutorialsI'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? I have a website like shmah: Code:
<div class="wrapper">
<div id="leftframe"><img src="./intro.gif"></div>
<div id="content">
<div id="header"><?php include("header.php"); ?></div>
<div id="content"><?php include("content.php"); ?></div>
<div id="footer"><?php include("footer.php"); ?></div>
</div></div>
And the corresponding css like shmah: Code:
#wrapper {
text-align: center;
}
#content {
width: 700px;
margin: 0 auto;
}
#header {
width: 700px;
margin-bottom: 5px;
}
#content {
width: 700px;
min-height: 400px;
}
#footer {
width: 700px;
margin-bottom: 50px;
}
#leftframe {
position: absolute;
left: 50%;
margin-left: -600px;
}
table.table-in-the-content-area {
width: 100%;
border-collapse: collapse;
border: 0px;
border-spacing: 0px;
}
The issue is that the content div (the table contained therein) appears shoved off to the right in Firefox. When I set Firefox to use the border-box model, it centers correctly with the rest of the divs. IE and chrome don't have this problem. Any ideas where my weird margins may be coming from? 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'm having a lot of difficulty understanding the box model when using css to make div tags act like table elements. I'm trying to get out of the habit of using tables for laying things out because I constantly hear the banter about that being a big no no. With that in mind I'd like a little help understanding how to accomplish what I want to do. In the past I would use something like the following: Code: <html> <head> <title>Test</title> </head> <body> <table border="1" width="100%" height="100%"> <tr> <td colspan="2"></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td colspan="2"></td> </tr> </table> </body> </html> That would give me a header and footer and two separate areas to play around with for the body content. I've tried to mimic that using the display:table and display:table-cell properties but I keep having quirky results due to my lack of extended understanding of how the box model operates. I tried laying out table-rows then nesting table-cells within (like how HTML tables work) and got this: Code: <html>
<head>
<title>Test</title>
<style type="text/css">
<!--
html {
min-height:100%;
height:100%;
}
body {
height:100%;
min-height:100%;
margin:0;
}
#container {
display:table;
position:relative;
width:755px;
height:100%;
min-height:100%;
margin:0 auto 0 auto;
border:1px solid black;
color:#000000;
padding:0;
background-color:#999999;
}
#headerrow {
display:table-row;
}
#bodyrow {
display:table-row;
}
#footerrow {
display:table-row;
bottom:0;
}
#headercell {
display:table-cell;
height:120px;
width:100%;
background-color:#dddddd;
border:1px solid red;
}
.bodycell {
display:table-cell;
padding:0;
text-align:center;
border:0;
vertical-align:middle;
border:1px solid green;
}
#footercell {
display:table-cell;
background-color:#dddddd;
margin:0;
padding:0;
width:100%;
height:26px;
border:1px solid red;
}
</style>
</head>
<body>
<div id="container">
<div id="headerrow">
<div id="headercell"></div>
</div>
<div id="bodyrow">
<div class="bodycell">Something</div>
<div class="bodycell">Something</div>
</div>
<div id="footerrow">
<div id="footercell"></div>
</div>
</div>
</body>
</html>
Am I just going about it the wrong way and making things too complicated for myself? I've tried employing the use of table-columns but that got me nowhere because I'm not exactly sure how to apply it in the hierarchy. All I want to accomplish is having a similar layout to the html table example but with css div tags. I've been Googling and staring at code for too long again and hope that some fresh eyes (and a fresh mind) can talk me through this. Thanks in advance. 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! 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. 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? 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 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? 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? 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? this 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 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 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 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> |
|||||||