|
CSS - Tables Breaking Out Of Divs: Why, Oh Why?
Hi Folks,
I'm still struggling to make table-less pages - CSS layout is NOT easy at all, even with a good book. This page however has a table for displaying images in amongst text [it's in the Content Management System - I have to work with it]. http://www.johniwhite.com/tests/indextest.html The trouble is: the table is longer than its container DIV at some browser dimensions, so it breaks out of the bottom of it - overlapping it, ALSO: pushing the following DIV out of the way. I don't know either (A): Why the table doesn't just stay in the containing DIV or (B): why the containing DIV doesn't stretch with it. Can anyone help? Thanks John Similar Tutorialshey all just new to layouts with CSS and having a few problems i managed to get divs to go side by side (not sure if it the best way to do it). now my content area divs are going crazy the bottom one appears on top and cuts into the navigation etc. Here is the HTML : Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>:: Reflective Web Design ::</title>
<link href="rwd_style.css" rel="stylesheet" type="text/css" />
<script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onload="MM_preloadImages('images/b_home_over.jpg','images/b_news_over.jpg','images/b_bio_over.jpg','images/b_resume_over.jpg','images/b_portfolio_over.jpg','images/b_gallery_over.jpg','images/b_links_over.jpg','images/b_contact_over.jpg')">
<!-- Center Container -->
<div id="center">
<!-- Banner Container -->
<div id="ban_container">
<!-- Banner -->
<div id="ban_left" style=float:left;clear:right><img src="images/banner_left.jpg" width="326" height="178" /></div>
<div id="ban_right" style=float:left><img src="images/banner_right_top.jpg" width="650" height="87" /><img src="images/banner_right_middle_.jpg" /><img src="images/banner_right_base_.jpg" /></div>
</div>
<!-- Navigation -->
<div id="nav" style=float:left;clear:right><img src="images/nav_side.jpg" width="24" height="279" align="left" />
<a href="home.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','images/b_home_over.jpg',1)">
<img src="images/b_home.jpg" alt="return to the home page" name="home" width="155" height="34" border="0" id="home" /></a><a href="news.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('news','','images/b_news_over.jpg',1)">
<img src="images/b_news.jpg" alt="view the latest news" name="news" width="155" height="35" border="0" id="news" /></a><a href="bio.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('bio','','images/b_bio_over.jpg',1)">
<img src="images/b_bio.jpg" alt="get to know me" name="bio" width="155" height="35" border="0" id="bio" /></a><a href="resume.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('resume','','images/b_resume_over.jpg',1)">
<img src="images/b_resume.jpg" alt="check out my resume" name="resume" width="155" height="35" border="0" id="resume" /></a><a href="portfolio.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('portfolio','','images/b_portfolio_over.jpg',1)">
<img src="images/b_portfolio.jpg" alt="view my web design portfolio" name="portfolio" width="155" height="35" border="0" id="portfolio" /></a>
<a href="gallery.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('gallery','','images/b_gallery_over.jpg',1)"><img src="images/b_gallery.jpg" alt="view my other graphical works" name="gallery" width="155" height="35" border="0" id="gallery" /> </a><a href="links.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('links','','images/b_links_over.jpg',1)">
<img src="images/b_links.jpg" alt="check out some useful links" name="links" width="155" height="35" border="0" id="links" /></a><a href="contact.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','images/b_contact_over.jpg',1)">
<img src="images/b_contact.jpg" alt="contact me " name="contact" width="155" height="35" border="0" id="contact" /></a>
<img src="images/nav_base.jpg" align="left" />
</div>
<!-- Content Container -->
<div id="content_container">
<!-- Content -->
<div id="content_top"><img src="images/content_top.jpg" /></div>
<div id="content_left" style=float:left;clear:right></div>
<div id="content_area" style=float:left>
<!-- Content goes here -->
AAA<br />
AAA<br />
AAA<br />
AAA<br />
AAA<br />
AAA<br />
AAA<br />
AAA<br />
AAA</div>
<div id="content_right"></div>
<div id="content_base"></div>
</div>
</div>
</body>
</html>
and the CSS: Code: body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
margin: 0px;
padding: 0px;
text-align:center; /* for IE */
background-color: #2A2A2A;
}
h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 24px;
font-weight: bold;
color: #FFFFFF;
}
.heading2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
color: #CCCCCC;
}
.heading3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight:bold;
color: #CCCCCC;
}
.small {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #CCCCCC;
}
a:link {
font-size: 11px;
color: #FFFFFF;
}
a:hover {
font-size: 11px;
color: #66FFFF;
}
a:visited {
font-size: 11px;
color: #CCCCCC;
}
.barref {
background-image: url(images/barref.jpg);
background-repeat: repeat-x;
background-position: bottom;
border: 1px solid #e8eaec;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
background-color: #454545;
}
.barrefbox {
background-image: url(images/barref.jpg);
background-repeat: repeat-x;
background-position: bottom;
border: 1px solid #e8eaec;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
background-color: #161616;
}
#ban_left {
height: 178px;
width: 326px;
position: relative;
}
div#center {
margin-left: auto;
margin-right: auto;
width: 976px;
text-align: left;
position: absolute;
}
div#ban_right {
height: 178px;
width: 650px;
position: relative;
}
div#nav {
position: relative;
width: 179px;
height: 279px;
}
div#ban_container {
position: relative;
width: 976px;
height: 178px;
}
div#content_container {
position: relative;
width: 797px;
}
div#content_top {
position: relative;
height: 35px;
width: 797px;
}
div#content_left {
position: relative;
height: 100%;
width: 34px;
background-image: url(images/content_left.jpg);
background-repeat: repeat-y;
}
div#content_area {
background-color: #171717;
position: relative;
height: 100%;
width: 710px;
}
div#content_right {
background-image: url(images/content_right.jpg);
position: relative;
height: 100%;
width: 53px;
}
div#content_base {
background-image: url(images/content_base.jpg);
background-repeat: no-repeat;
background-position: top;
position: relative;
height: 47px;
width: 797px;
}
If anyone has any ideas how i can get this working or optimise it, it would be greatly appreciated This error happens with firefox but in IE7 the layout seems to stay together but the left side is force to the center of the screen .... Cheers Lance This is a simplification of my problem, but in general: I have one row in a table whose width is defined by the width of the image in the <td> tag. On the second row, I have two <td>'s and the first one has a width=10 and the second one is supposed to dynamically fill whatever is left between 10px and the width of the image. Unfortunatly, the first <td> on the second row, with a width declared to 10px expands across the entire bottom of just leaving a 1px sliver of the <td>with no width declared. So it looks like this: PHP Code: ----------------- | | | Image | | | ----------------- |________________|| <10px td> <other td> It should look like this: PHP Code: ----------------- | | | Image | | | ----------------- |__|______________| <10px td> <other td> Here is my code: PHP Code: <table> <tr> <td colspan=2><img src="flountt.jpg" style="border: 1px solid #FF0000;"></td> </tr> <tr> <td width=10 height=10 style="border: 1px solid #FF0000;"></td> <td style="border: 1px solid #00FF00;"></td> </tr> </table> Is there an alternative way to use <div>'s and CSS to produce the desired results? Hi, this is my first effort (which will be obvious when you look at it) at using divs and css instead of tables .. http: //pastie.org/935502 Two things that I have been unable to do at the moment are to make the text "Photographs by award winning film sound editor Michael Redbourn" a few pixel lower, and, I tried centering the container that holds the text, "Most pictures are available for sale as Cards, Matted Prints, Laminated Prints, Mounted Prints, Canvas Prints and Framed Prints" by using a spacer but it doesn't display correctly. The two images are here, http: //i42.tinypic.com/kb60q9.jpg and here, http: //i42.tinypic.com/20zqsmr.gif I'm sure you'll know how to replace the adsense banner with a placeholder. Any help with the above two things and also any criticm and hints would be much appreciated. Thanks, Michael Hey there, I'm pretty new to CSS, but am learning more everyday so bare with me. I recently went over to www.csscreator.com and used their Layout creator to create a page with a header, left column, main column, right column, and footer. This whole thing is to be centered in the browser. That went all well and good, but When I tried to put my main Header and Nav Menu in the Header Div, the entire thing gets garbled up in IE and FF. More specifically, the menu buttons and spacer gifs all become misaligned. Should I go about this some other way or is there anything im just plain missing? Thanks a lot... Hello folks. I am normally pretty handy with the CSS. I develop my sites in the latest of Firefox then test in IE 6.0. My latest site looks like gargabe in IE 6. Looks 99.99% perfect in Firefox. Here are the two problems: 1) I can't get the sliced image on the right lined up in IE 6 for the life of me! 2) On the front page, I have 2 tables underneath a paragraph. I don't like tables but for displaying 37 small icons... you get the idea. Anyway when you first go to the home page in IE the tables look okay. But if you navigate away then back, the icons go crazy! Please help! http://www.TattooSeek.info Hi, I'm developing a database driven site in php, which outputs results in a table. The problem I'm having is with styling the table. I need each row to have a thin a bottom-border to seperate them, but when I use tr { bottom-border: 1px solid #dedede; } nothing happens - no border, nothing. I can get the border to appear if I give the tr a display of block, but that breaks the table and it appears like an ordinary div. Is there any way I can use divs to 'fake' a table so it's easier to style. Can I set the main div's display to table and each row div to table-row etc. to get them to display right. The reason I need the table is that the site needs to be uber accessible, so I need screen readers to read the data as it would a table. Can anyone enlighten me? Thanks. Hi - I have been using xhtml coding for most of my web projects this year, thankfully they have been pretty simple. I have a new one, the client has requested it be xhtml compliant. I was not consulted during the design phase, so i have been give the task of programming a very table centric layout. Can all designs be rendered with div's instead of tables? I have a diagram of the structure of a template page and I am not sure how to go about tackling it. Do i start with each individual section? I just need a little push and confimation the below layout is doable in css/divs... Thanks Hi all, I know there are certain tricks to vertically center texts or images in a div area. And I have read somewhere there are plans to avoid current complexity compared with tables. For example, provided I use same CSS... Code:
div,table{
width: 250px;
height: 100px;
border: 1px solid red;
text-align: center;
}
...we optain well vertically centered text in this table... Code: <table> <tr><td>this IS vertically centered</td></tr> </table> ...but not in this div based one... Code: <div>this IS NOT vertically centered</div> I ask, do you know an easy way to acomplish the same we get with tables? Thanks! The objective: Produce page content which behaves as if it were 'tabbed' as seen on many websites and programmes. I have done this many times before, but only with absolute positioning from the document base level. This time, the div containing the information to be tabbed has to appear relative (for re-sizability) and contain the tab divs within it. I am using a short javascript to change the z-index of the divs in order to produce the tab effect. The problem: The whole thing works fine, except for: - If I leave the css height off the divs, IE chops the bottom off, and does not allow a scroll. - If I put a height and auto (or scroll) overflow on the divs they display correctly in IE, but disappear in firefox - Until a table contained within one of the divs becomes larger than the stated height. At which point that div (not any of the others) disappears from IE as well. The question: Is this a known bug? If so, what is the work-around? Have I done something dumb? If so, what? The source: source files are available for download (they are quite large, and I don't want to trim them in case something in the trim is the problem. Plus they need to be large to demonstrate the length issue correctly). Text within these examples is copyrighted by various people and is used without permission, for illustrative purposes only. the xhtml page - click through the tabs to see the effect. Add extra rows to the table in the 'dates & prices' tab to see the disappearing problem. the javascript file - the function is at the bottom, 'layer_z_lift'. the css stylesheet - the styles for the tabs are in the middle, commented as tour details tabs. any questions, post and I shall answer. Jz. I haven't tried this before, so if I'm way off beat, I'll take directions. What I'm trying to do is take a psd file and make a webpage from it. So far, I think I've got the images cut correctly. I tried using divs to begin with, but found I had to apply position:relative to compensate for extra spacing coming after images and divs. I'm placing an image then a div then an image. The spacing between the two are different. I've tried padding:0 and margin:0 just about everywhere I could think of putting it, but that didn't fix it. So, I used RP. But, after getting it to look right in Safari, but not Firefox [just checked before posting here], I found that making the text bigger caused the divs and images to overlap. So, I thought about tables. Yeah, same thing, so I figure I must not know something pretty basic and was wondering if anyone could help. Both pairs of files validate. Here are the links for the: div based layout and it's css file AND table based layout and it's css file Just in case this looks absolutley nuts on other browsers, here is a picture of where I'm trying to get to. I'm feeling a little tortured over this one Just when you thought you got everything under control, something backfires.. lol Please see acengage.com and try the Reach Us tab under IE 7.0 - and you'd see a broken tab with a line underneath. I have tried every sane CSS maneuver to fix it, but in vain. Any help would be greatly appreciated! Thanks in advance! I have this page: http://www.taleria.net/ken/ It looks beautiful in Firefox but in IE only the page background shows up. If I comment out the entire CSS file the page shows up in IE so it's obviously a problem with my CSS code - but I don't know where the problem is. Any pointers would be appreciated: Code:
<style type="text/css">
<!--
body
{
background: url(http://www.taleria.net/ken/images/bg2.jpg) repeat-x left top;
font-family: arial;
}
td
{
font-family: arial;
font-size: 13px;
}
.navfont
{
font-variant: small-caps;
font-weight: bold;
color: black;
}
a.navfont
{
color: black;
text-decoration: none;
}
.main_heading
{
font-variant: small-caps;
font-weight: bold;
font-size: 14px;
color: #000033;
}
.bodytable
{
background: url(http://www.taleria.net/ken/images/headingbg.jpg) repeat-x left top;
}
a
{
color: #393d5a;
}
/************************/
/* BEGIN SUCKERFISH*/
/************************/
ul.menu {
list-style: none;
padding: 0;
margin: 0;
}
#nav a {
font-weight: bold;
color: black;
}
#nav a {
text-decoration: none;
}
#nav li li a {
display: block;
font-weight: normal;
color: black;
padding: 0.2em 10px;
}
#nav li li a:hover {
padding: 0.2em 5px;
border: 5px solid #393d5a;
border-width: 0 5px;
}
#nav li {
float: left;
position: relative;
cursor: default;
background-color: white;
padding-right: 1.2em;
}
#nav li#first
{
padding-right: 1.2em;
}
#nav li#last
{
padding-left: 1.2em;
padding-right: 0;
}
#nav li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
font-weight: normal;
background: url(http://www.taleria.net/ken/images/ddbg3.gif) bottom left no-repeat;
padding: 0.5em 0 1em 0;
border-right: solid 1px #393d5a;
}
#nav li>ul {
top: auto;
left: auto;
}
#nav li li {
display: block;
float: none;
background-color: transparent;
background-image: none;
border: 0;
}
#nav li:hover ul, li.over ul {
display: block;
}
/************************/
/* END SUCKERFISH*/
/************************/
</style>
ok this isnt so much a need for code, more an need for information. I have worked out how to page break Code: <STYLE TYPE="text/css">
H2 {
page-break-befo always
}
</STYLE>
<div class="H2"> </div>
I am assuming this is right, as the page will always break after the <div> But I would like to know how much success people have had with this? I have tried using it and it doesnt seem to work on IE 6.0. Any luck with any other browsers? I am just wondering whether im doing it wrong or it isnt supported fully yet. I have customised an open source wordpress template for my website and somewhere along the line seem to have broken the navigation as it appears in IE6,7,8. I use a mac so I didn't identify the problem straight away and I'm not sure how to fix it. I can work my way around CSS usually but I find navigation very difficult to grasp and so any help would be very much appreciated. blackmarlinfishingblog.com Problem: The child items of the navigation (drop downs) are appearing under the slideshow so you can't click on them. Thanks again in advance for any help you may be able to give! Ok, so I've learned to stay away from tables when you don't need them, and I have an instance where this is the case. I have a container div that has a header, content and a footer. On my home page, I have to divs next to each other with the same height and a div below them towards the right. To simplify my problem, look at this example. Code:
<html>
<body>
<div style="float:right">
Hello there!
</div>
<hr>
</body>
</html>
If there's a "float:right" on that div, the hr tag below doesn't get pushed down. But if I use relative positioning and don't use the floats, I can't put the two top divs next to each other. The other option is to use absolute positioning, but again content below doesn't get pushed down correctly. It seems that using "clear:both" works, but it seems weird that this has to be done. For example if I have floating divs in a container, I can get them to stretch out the container like so: Code:
<html>
<body>
<div style="border: 1px solid #000; ">
<div style="float:right">
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
</div>
<div style="clear: both"></div>
</div>
<hr>
</body>
</html>
Am I missing something fundamental here? Is there a better solution? Thanks in advance. I inherited a big huge site; so there is way much going on; this is a simplification... I am trying to use CSS to divide it into columns, with a column as a div. For debugging, I draw a border around the columns to show me the boundaries. But when I include the following code within the column div: Code: <div class="mycolumn"> <p>Hi, I'm in the Div!</p> <table><tr><td><p> I'm in the table</p> </td></tr></table> <p>Hi, I'm after the table; I would expect to still be in the div</p> </div> The bottom border of the div is drawn right beneath the words "Hi, I'm in the Div", and both "I'm in the table" and "I'm after the table" are outside the box boundary. This does NOT happen if I create a separate test html file and include my Column CSS, but it does happen withing the application. Now, what's going on in the application is extremely complex, involving dozens of included CSS files, javascript, smarty templates which include other smarty templates, and over 4000 files in all. Could one of the other CSS files or something else be redefining <td> somehow, or any other obvious thing that could be breaking the div? Obviously, I keep trying to debug it, but if any old hand has an explanation that might save me another 8 hours, that would be greatly appreciated. Thanks, Chris First off, thanks for reading. I've finally been hit with a document that requires I create some smart page breaking. What I need to do is get the document to have a page break only after certain things and not within those certain things. What I've done is surrounded these things with <div> tags and put this in my stylesheet: DIV {page-break-inside:avoid;} However, this fails miserably. I also looked at this site, but in Mozilla 1.6 and IE 6, the elements were all broken by page breaks. Anyone had any successful experience with this? Thanks in advance, colin This is the problem, and it is driving me crazy... Code: <html>
<head>
<title>content breaking out of container</title>
<style type="text/css">
div {
border: 1px solid black;
}
#container {
border: 5px solid green;
height: 200px;
}
#sidebar {
height:100%;
width: 50%;
}
#footer {
padding:20px;
}
</style>
</head>
<body>
<div id="container">
<div id="sidebar"></div>
<div id="footer"></div>
</div>
</body>
</html>
In FF/Safari the footer 'breaks out' of the container. I can't see why it would do this. In IE and Opera, it stays in the container, as I expect it would. I'm trying to find a fix for FF, but it's in vain... any ideas? I recently inherited an application that, in my opinion, is poorly written. It relies heavily on tables, like so: Code: ... <table> <tr> <td>Error:</td> <td> <table> <tr> <td>P</td><td>a</td><td>g</td><td>e</td><td> </td><td>N</td><td>o</td><td>t</td><td> </td><td>F</td><td>o</td>u</td><td>n</td><td>d</td> </tr> </table> </td> </tr> </table> ... I kid you not. It's horrible but it can't be re-written *yet*. It will be rewritten around October. But there's a problem I'm dealing with now that I am hoping is possible. I have a feeling it isn't because it's logically impossible (even if it may be practically possible. I'm writing some CSS for a media="print" layout. There is so much garbage in some of these table cells, that I'm finding it so much easier to hide the entire cell. For example, there is a page header that has a lot of junk in it that won't be on a print out. But there is one <div> inside that header that we would like. Is it possible to display an element that is nested deep down inside an element that's hidden? It's a div inside a table cell inside a table cell inside a table cell. The top level cell is hidden, but I'd like to stylize the div. I know it makes no sense logically - a hidden element's children should all be hidden too. But practically, I'm wondering if it's possible to break away from the HTML's heirarchy with CSS. Any suggestions (other than "rewrite the app") are appreciated. Hi I have 3 background images that make up the background for my navigation you can see here http://dmumford.bizhat.com/test/about.htm When viewed in FF and Netscape it breaks in 3 positions, in IE just below the top image. Does anyone know why, and can they please help me Thanks |
|||||||