|
CSS - Html Table Breaking A Div?
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 Similar TutorialsThis post can be deleted, I solved my problem. Code:
#ticker {
background: transparent url('../images/dark_gradient.png');
overflow: hidden;
display: table;
margin-left: 20px;
margin-top: 10px;
width: 835px;
height: 52px;
}
#ticker #items {
position: relative;
top: 0px;
left: 829px;
}
the point is to use javascript to scroll the #items div along the container (#ticker). now, using this method, overflow: hidden does not seem to be working correctly. (i know display: table only works in FF, but this is an internal tool, so no need to make IE fixes yet) ... now, when i change display: table to display: block, the overflow works, but now the #items div is no longer relative to the container, but relative to the window. 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. 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>
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 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. 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! 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 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 hey 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 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 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? Hi there, I'm having a tough time getting these two images to align side by side...the line keeps breaking and thus forcing the image to the next line, as show here (not to mention it's messing with my footer): http://www.groundedgroup.com/client...A_Index_v2.html Here's the respective css: CSS Stuff Here's what it's supposed to look like: http://www.groundedgroup.com/client...EA_Show_v2.html Both of the images add up to a total width of 956px, however, the div containing it is set to 947px width. If I change it to 956px, it works, but it pushes out the sides, resulting in the left and right vertical borders not lining up with the rest of header, footer, etc. Ideally, I want these images to hover over this area and thus not spread out the design. Got any ideas? BTW, I checked my css and xhtml before posting and it validates. Thanks for your help. Thanks in advance to anyone who can help. I've been spending some time moving from HTML 4 and a table-based layout to CSS-based layout and XHTML 1.1 compliance. Most of my site looks fine to me. However, on pages where there is not a lot of content in the right-hand column, the contents of the left-hand column end up looking very wonky in Firefox 0.8. It shows up fine in IE, but I don't trust IE. Here's an example of an offending page: http://www.thatlittlebastad.com/more.php?id=1286_0_1_0_M Here's my CSS file http://www.thatlittlebastad.com/style_040805.css Can anyone help? http://cad-design-engineering.com/New I double checked, and this page validates. (CSS and XHTML) The gray background on the right hand side - I can't adjust the width. When I do get a change, it breaks something - the links panel shifts to the bottom of the screen. Code:
#container
{
width: 737px;
height: 1%;
overflow: visible;
float: left;
padding: 4px 0 0 0;
margin-right: -185px;
}
This is the output from the Firefox Web Developer plugin: Code:
#container (line 147)
{
width: 737px;
height: 1%;
overflow: visible;
float: left;
padding-top: 4px;
padding-right-value: 0pt;
padding-bottom: 0pt;
padding-left-value: 0pt;
padding-left-ltr-source: physical;
padding-left-rtl-source: physical;
padding-right-ltr-source: physical;
padding-right-rtl-source: physical;
margin-right-value: -185px;
margin-right-ltr-source: physical;
margin-right-rtl-source: physical;
}
Not sure what I'm doing wrong. I've been perplexed for several days on this one. Thank you. I'm creating a blog for someone, and my issue resides in <h2>. Using Wordpress, <h2> is typically the blog entry title. As you know, blog entry titles vary, because people put in different titles for different entries. I have <h2> formatted to my friend's likings, but an issue has arisen. If a blog entry title is particularly longer than the average, <h2> breaks into another line of text. This results in corrupting the layout entirely. So my question: How do I go about formatting <h2> so that the blog entry title text fills up the entire width of <h2> without breaking into a new line? Clarification (if needed): I want the font size to be dependent upon the physical length of text in the blog title Here's my code for <h2>. It resides in two containers of sorts. Code: h2
{
float:left;
font-family:"Franklin Gothic Medium";
font-size:55px;letter-spacing:-2px;
width:728px;
padding: 0;
margin: 0;
}
This is my first post/topic. Be gentle! Thanks. Code: <div class="container"> <div>Booya</div> </div> Code:
.container {
position: relative;
}
.container div {
position: absolute;
bottom: 0;
right: 0;
}
Is there any way to position the nested div relative to its grandparent vs. its parent without losing the relative positioning, or is JS the only option? Hello. I am building a site (perelachaisecemetery dot com)for a friend of my bosses. And I'm having problems with Safari on Mac Zoom Feature. When I zoom out my Nav Menu at the top (as well as my copyright at the bottom) get broken up into two lines. A windows safari user said this is not happening in his browser. It does not happen in Firefox. But it is happening in Chrome. Can anyone recommend anything? Is it something I can code not to happen or is it a individual browser preference thing. Please help. Thanks, Colin Anybody know how to force a long string of text that doesn't contain any spaces to wrap inside its containing div, and not just sprawl outside of the entire page? I've done some searching and can't seem to find a lot of discussion about this particular problem. If the content contained enough spaces, then the overflow would wrap nicely, but there aren't any. What am I missing here? Thanks I am not sure if something like the attached should be put in an html table or done with css positioning. Any thoughts? |
|||||||