CSS - Pushing Table Down In <div>
For some reason, my table (using this for a calendar) is being pushed down in my <div>. Please look this over and see if you can figure out why this is doing this. (and pay no mind to the width, I'm still working on that part)
TIA Javashackgirl http://www.fit4lifehealthclub.com/index2.html Similar TutorialsHey guys, I'm now truly understanding why all my tech friends constantly talk about how much they hate IE. Anyways, im working on a site and am trying to add a corner element to one of my divs. It works perfect in firefox... but in IE it pushes the table below it and adds like a 2px wide sliver to the right of the img. Here is the table layout Code: <div class='wrapp'> <img src='Images/tr.gif' /> <table style='width:100%;'> <tbody> <tr class='time'> <td colspan='6' style='text-align:left;'>" . date('F d Y',$key[5]) . ", " . date('g A T',$key[5]) . "</td> </tr> </tbody> </table> [/div] Then here is the related CSS codes to make the image float to the right. Code: .wrapp { margin-bottom:8px; width:354px; text-align:center; } .wrapp img { float:right; display:inline; } table { margin-left:auto; margin-right:auto; } So once again what im trying to do is have the corner img show on the top right corner of the wrapp div. It works perfect in firefox but again it does not work in IE... and I have read about 20 articles on google that talk about these problems but I just can't figure the right combination out to make it work. Thanks in advance for any help! I'm having a problem inserting two DIV columns (left and right) inside another DIV to get a result like the following image: http://www.geocities.com/simonc1204/image.htm What happens is that the DIVs extend outside of their containing block and into the footer below, rather than pushing it down, like so: http://www.geocities.com/simonc1204/bad.htm But, when I replace the two DIVs with some placeholder text, that works OK, with the footer being pushed down, as in: http://www.geocities.com/simonc1204/good.htm I would have thought that wrapping the two DIVs (which are absolute positioned) in a container DIV would make other block elements flow before and after them, but apparently not, and I need to understand CSS a bit more. I've reduced the problem to almost its simplest form, and by looking at the small amount of source, I'm wondering if anybody can tell me where I might be going wrong? Thanks in advance for any replies. Miner2049er. Hi Folks, Does anyone know why a floated DIV would push another DIV out of the way? Or even why two floated divs would not want to sit either side-by-side or one infront of the other? Sorry this is actually the jist of a prob I had earlier, but I'm simplifying the question - hope that's okay. Thanks John Right, so I'm very new at this CSS positioning business. All I'm trying to do is have a centered 100% tall div with some content inside it. The 100% tall div is working. Now, inside, I'm going to eventually have 3 different divs containing information. All will be centered in the large container, , be about as wide as the centered container, and they will appear one on top of the other. Right now, all I have is my title image, which is basically just a placeholder until I make the title image I want. I have it centered just fine, and its at the top obviously. The problem is, I don't want it jammed up against the top of the browser window. So, margin-top, right? When I do that, It pushed the entire page down however many pixels I make the margin. HTML: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>How To Read Basic Sheet Music ◊ Week 1: Welcome ◊ Cory Mensch</title> <link href="css.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="whiteFrame"> <div id="topTitle"></div> </div> </body> </html> CSS: html { margin: 0px; padding: 0px; height: 100%; } body { margin:0px; padding:0px; height:100%; background-image:url(Images/bg.jpg); background-repeat:repeat-x; } #whiteFrame{ background-color:#FFFFFF; margin:auto; width: 652px; min-height: 100%; } #topTitle{ width:611px; height:48px; background-image:url(Images/title.gif); background-repeat:no-repeat; margin-top: 50px; margin-left:auto; margin-right:auto; margin-bottom:auto; } Any help is greatly appreciated. Hello, I am a javascript noob trying to do a javascript dropdown and this does not seem to be working at all. When ever I add in the list for the drop down, everything gets pushed to the left and where ever the list begins, every link after that just disappears. I'm pretty sure the link is being put inline instead of block like I wanted it to but i'm not sure how to correct it and I am getting completely frustrated doing it. I was wondering if anyone could tell me what I was doing wrong. Also, I used the suckerfish method for the drop down. HTML Code: Code: <div id="nav"> <ul> <li><a href="agency.html"id="nav_agency" class="" title="Agency">AGENCY</a></li> <li><a href="services.html"id="nav_services" class="active" title="Services">SERVICES</a></li> <li><a href="technology.html" id="nav_technology" class="" title="Technology">TECHNOLOGY</a></li> <li><a href="distribution.html" id="nav_distribution" class="" title="Distribution">DISTRIBUTION</a></li> <ul id="break"><li id="first"> <li><a href="case_studies.html" id="nav_casestudies" class="casestudies" title="Case Studies">CASE STUDIES</a></li> <li><a href="#" id="nav_blog" class="" title="Blog">BLOG</a></li> <ul> <li><a href="#">Search Engine Marketing</a></li> <li><a href="#">Pay Per Click Management</a></li> <li><a href="#">Lovcal Search Marketing</a></li> <li><a href="#">Contextual Marketing</a></li> <li><a href="#">Shopping Comparison</a></li> <li><a href="#">Paid Inclusion</a></li> <li><a href="#">Search Engine Optimizaiton</a></li> </ul> </li> </ul> </ul> </div> [\code] JavaScript Code: [code] startList = function() { if (document.all&&document.getElementById) { navRoot = document.getElementById("break"); for (i=0; i<navRoot.childNodes.length; i++) { node = navRoot.childNodes[i]; if (node.nodeName=="LI") { node.onmouseover=function() { this.className+=" over"; } node.onmouseout=function() { this.className=this.className.replace(" over", ""); } } } } } window.onload=startList; Here is the part of the css I created but i'm not sure how it's all supposed to go together since I'm a javascript noob. CSS: Code: li#first { border-left-width: 1em; } li#last { border-right-width: 1em; } li ul { display: none; position: absolute; top: 100%; float:right; font-weight: normal; padding: 0.5em 0 1em 0; border-right: solid 1px #7d6340; } li>ul { top: auto; left: auto; } li li { display: block; float: none; background-color: transparent; border: 0; } li:hover ul, li.over ul { display: block; } #break a { font-weight: bold; color: green; } #break a { text-decoration: none; } #break li li a { display: block; font-weight: normal; color: #060; padding: 0.2em 10px; } #break li li a:hover { padding: 0.2em 5px; border: 5px solid #7d6340; border-width: 0 5px; } #nav{ float:left; width:100%; margin:0px; padding:0px; margin-top:-8px; } #nav ul{ float: right; list-style-stype:none; margin:0px; padding:0px; height:27px; overflow:hidden; } #nav ul li{ display: inline; margin: 0px; padding: 0px; height: 27px; overflow:hidden; } #nav ul li a, #nav ul li a:visited{ background-position: centertop; background-repeat:no-repeat; display:block; float: left; height: 0px; margin: 0px 0px 0px 8px; overflow: hidden; padding: 30px 0px 0px 10px; text-decoration:none; } #nav ul li a:link#nav_agency, #nav ul li a:visited#nav_agency { background-image:url(images/agency2.gif); border:0px; width:54px; } #nav ul li a:hover#nav_agency, #nav ul li a:link#nav_agency.active, #nav ul li a:visited#nav_agency.active { background-image: url(images/agencyup2.gif); border: 0px; width: 54px; } #nav ul li a#nav_services, #nav ul li a:visited#nav_services { background-image: url(images/services2.gif); border:0px; width: 56px; } #nav ul li a:hover#nav_services, #nav ul li a#nav_services.active, #nav ul li a:visited#nav_services.active { background-image: url(images/expandedservice2.gif); border: 0px; width: 56px; } #nav ul li a#nav_technology, #nav ul li a:visited#nav_technology{ background-image: url(images/technology2.gif); border:0px; width: 76px; } #nav ul li a:hover#nav_technology, #nav ul li a#nav_technology.active, #nav ul li a:visited#nav_technology.active { background-image: url(images/technology2up.gif); border: 0px; width: 76px; } #nav ul li a#nav_distribution, #nav ul li a:visited#nav_distribution { background-image:url(images/distribution2.gif); border:0px; width: 72px; } #nav ul li a:hover#nav_distribution, #nav ul li a#nav_distribution.active, #nav ul li a:visited#nav_distribution.active { background-image: url(images/distributionup2.gif); border: 0px; width: 72px; } #nav ul li a#nav_casestudies, #nav ul li a:visited#nav_casestudies { background-image: url(images/casestudies2.gif); border:0px; width: 72px; } #nav ul li a:hover#nav_casestudies, #nav ul li a#nav_casestudies.active, #nav ul li a:visited#nav_casestudies.active { background-image: url(images/casestudiesup2.gif); border: 0px; width: 72px; } #nav ul li a#nav_blog, #nav ul li a:visited#nav_blog { background-image: url(images/blog2.gif); border:0px solid black; width: 27px; } #nav ul li a:hover#nav_blog, #nav ul li a#nav_blog.active, #nav ul li a:visited#nav_blog.active { background-image: url(images/blogup2.gif); border: 0px; width: 27px; } Hi everyone, It's been a while since I've opened up a .css file so forgive me. I have a couple of questions about this partiular site. It's a test site I'm workig on... http://www.karenwilliamson.com/joom2/ I would like if possible to fix the footer in a fixed position and not have it rise and fall according to the amount of content on each page. Click some of the random links and you'll see what I mean. Also, while I'm here I can't figure out how to adjust the spacing in the main content area to be more uniform between IE7 and FF. It seems to my novice eyes that it should be controlled by Code: table.contentpaneopen Maybe I'm being too nitpicky but I'm sure there is a way to make it more uniform among the two browsers? Thanks for any input Rob hi. I need some formatting help. I am using niftycorners and the linked list tabs I am building seem to rest at the bottom, pushing the bottom of the rounded corners to the right of them. I have tried clear:left, clear:right, clear:both at the div and ul levels but that doesnt work. any ideas? I have attached a picture of the problem. Here is the CSS/HTML: Code: <style> body { margin:20px; } #toptabs { clear:left; } #toptabs ul { clear:left; position:relative; width:100%; margin-bottom:0; list-style:none; line-height:1em; padding:100px 0px 0px 0px; } #toptabs ul li { float:left; margin-right:5px; padding:0; } #toptabs ul li.clear { clear:right; } #toptabs a { display:block; color:#444; text-decoration:none; font-weight:bold; background:#ddd; margin:0; padding:0.25em 1em; border-left:1px solid #fff; border-top:1px solid #fff; border-right:1px solid #aaa; } #toptabs A:hover, #toptabs A:active, #toptabs A.he link, #toptabs A.he visited { background:#bbb; } #toptabs A.he link, #toptabs A.he visited { position:relative; z-index:102; } </style> </HEAD> <BODY> <div id="header"> <div id="toptabs"> <ul id="venture"> <li id="current"><a href="#"><span>Profile</span></a></li> <li><a href="#"><span>Q&A</span></a></li> <li><a href="#"><span>Recommendations</span></a></li> <li><a href="#"><span>Connections</span></a></li> </ul> </div> </div> </BODY> Hello, I'm currently in the works of converting an old HTML site of mine into CSS and have run into what seems to be a notorious problem with the page text not pushing the footer down when the text gets to a certain length. Instead the text just covers and hides the footer. I've been trying to remedy this problem for about a week, but to no avail. I've Googled this problem and tried the suggested fixes, but once again have had no such luck. I'm left to believe that every instance is unique. If you view the Style Sheet, I have the 'footerlinks' set at an "Absolute" position because it looks fine on the other pages and I do relize this will have to be changed. As to what else has to be changed I would really appreciate some input as to what I need to do to get the footer to slide down when the text gets lengthy. ------- Here's a link to the page thats having issues with the footer... *** Note: I keep getting an error message saying I can't post URLs on this forum because I have a new user account so below this line is the link to the page I'm having trouble with without the http:// ........ infoheaven.bravepages.com/Testamonials/Testimonials.htm The URL to the STYLE SHEET is located at the top of the page between the "Head" tags of the website source code I provided above. I tried listing my CSS code here, but once again I kept getting the "New user accounts are not permitted to create posts containing URLs" error message. Sorry for the inconvenience.... Dan - Hi, My page has 3 elements: one at the top(header banner), one in the middle (a middle content area) and one at the bottom (footer banner). Now I want those positions to remain intact regardless of the number of lines output in the middle element. The content is going to be determined at runtime by a server-side routine so I don't want to use a fixed positioning for the footer banner. I want it to be displayed at the bottom - after the middle content is displayed. And I want the middle content to be visible in the page i.e. I don't want a scroll area within the page. I have tried various approaches and read up on positioning but so far have not been able to do it using css. Any help is much appreciated. Jim Hi I have a vertical menu containing main and subcategories. subcats are hidden, when a main cat is clicked then subcats are displayed, all is done with css no javascript. here is the structure, Code: <ul id="nav"> <li class="level item-1 nav-clothes active parent"> <a href="/clothes.html"><span>Clothes</span></a> <ol class="level item-1"> <li class="level1 nav-clothes-shirts"> <a href="/clothes/shirts.html"><span>Shirts</span></a> </li> <li class="level1 nav-clothes-tanks"> <a href="/clothes/tanks.html"><span>Tanks</span></a> </li> <li class="level1 nav-clothes-raincoats"> <a href="/clothes/raincoats.html"><span>Raincoats</span></a> </li> <li class="level1 nav-clothes-dresses"> <a href="/clothes/dresses.html"><span>Dresses</span></a> </li> <li class="level1 nav-clothes-swimsuits"> <a href="/clothes/swimsuits.html"><span>Swimsuits</span></a> </li> <li class="level1 nav-clothes-outerwear last"> <a href="/outerwear.html"><span>Outerwear</span></a> </li> </ol></li> <li class="level item-2 nav-beds parent"> <a href="/beds.html"><span>Beds</span></a> here is my all related css, external css file, Code: #nav { font-size:13.5px; color:#000; padding:0 0 0 0; margin:-20px 0 0 0; width:100%;} /* All Levels */ #nav li { text-align:left; } #nav li.over { z-index:999; } #nav a, #nav a:hover { display:block; line-height:1.3em; text-decoration:none; } #nav span { display:block; cursor:pointer; white-space:nowrap; } #nav li ul span {white-space:normal; } #nav li li.parent {} /* 0 Level */ #nav li { clear:both; position:relative; display:block; } #nav li.active a { color:#000; text-decoration:underline; } #nav a { float:left; padding:2px 14px 11px 0px; color:#000; font-weight:bold; } #nav li.over a, #nav a:hover { color:#000; text-decoration:underline; } #nav .item-1 ul a { background:url(../images/arr_sub_menu.gif) 0 9px no-repeat; padding:0 0 0 0; color:#1A1616;} #nav .item-2 ul a {padding:0 0 0 0; color:#1A1616;} #nav .item-3 ul a {padding:0 0 0 0; color:#1A1616;} #nav .item-4 ul a {padding:0 0 0 0; color:#1A1616;} #nav .item-5 ul a {padding:0 0 0 0; color:#1A1616;} #nav .item-6 ul a {padding:0 0 0 0; color:#1A1616;} #nav .item-7 ul a {padding:0 0 0 0; color:#1A1616;} #nav .item-8 ul a {padding:0 0 0 0; color:#1A1616;} #nav .item-9 ul a {padding:0 0 0 0; color:#1A1616;} #nav ul li a { padding:0 0 0 0;} #nav ul li a:hover { padding:0 0 0 0; text-decoration:none;} /* 1st Level */ #nav ul li, #nav ul li.active { float:none; margin:0; padding:6px 0 0 29px; background:#FFFFFF; border-left:1px solid #E8E7E7; border-right:1px solid #E8E7E7; } #nav ul li.over {} #nav ul li.last { background:#FFFFFF; padding-bottom:15px; } #nav ul a, #nav ul a:hover { float:none; padding:0;} #nav ul li a { font-weight:normal !important; } /* 2nd level */ #nav ul { position:absolute; width:199px; top:23px; left:-10000px; background:url(../images/bg_sub_menu.gif) 0 0 no-repeat; padding:23px 0 0 0; border-bottom:1px solid #E8E7E7; margin-left:100px; } /* 3rd+ Level */ #nav ul ul { top:5px; background:none; padding-top:0; border-top:1px solid #E8E7E7; } /* Show Menu */ #nav li.over > ul { left:0; } #nav li.over > ul li.over > ul { left:100px; } #nav li.over ul ul { left:-10000px; } #nav ul li a { background:url(../images/arr_sub_menu.gif) 0 9px no-repeat; padding:0 0 0 0; color:#1A1616; } #nav ul li a:hover { color:#1A1616 !important; } #nav ul span, #nav ul li.last li span { padding:3px 15px 4px 15px; } #nav li ul { display:none; } #nav li:hover ul{display: block; } #nav ol { margin-left:5px; margin-bottom:10px; } #nav ol li { padding-left:15px; background-image:url(../images/ol_bg_lines.gif); font-size:12px; font-weight:normal; } #nav ol li.last { background-image:url(../images/ol_bg_lines_last.gif); } inline css code to overwrite the default behavior for target page Code: ul#nav {margin : 0 10px; margin-bottom:0px;} ul#nav li {height : 14px; margin-top : 5px;} ul#nav li a, ul#nav li a:hover {} ul#nav ul {margin-top : -8px; background : url(/images/drop-ul-bgr.gif) no-repeat; } ul#nav ul li {height : auto; margin-top : auto;} ul#nav ol li a { padding:0px; } ul#nav ol li { margin:0px; padding:5px 0 5px 15px; } ul#nav ol { border:#ccc 1px solid; padding-bottom:30px; } I am attaching a screenshot to explain the problem, i have given border to the OL to explain the problem. In the screenshot the pink arrow is pointing the place, BEFORE BEDS, where i want to give more space but the child list keeps overlapping rather than pushing the parent list downwards. any help is much appreciated I am really stuck with this. I have a textarea in a <td>which asks for users for some description. If users enter text and don't use any space or enter, the width of the table gets bigger and bigger and damages the pages design. What can I add (to td.fixed_width css for example )to make the line break after the width of the table is reached??? There is a solution that I put a div in td and then Code: #desc { width:"100%"; width::fixed; overflow:scroll;} but it is not exactly what I want hi every one... How can I display static headers in a table, so that headers remain visible while user scrolls the table body? This is not working in IE 7 any working example please 2. iam having a column which holds data around some 100 to 200 characters... by default i want to display some 50 characters and rest of the characters can be viewed by moving the column... if this is possible let me know how to do it with some sample code......i dont know much about CSS 3. One more problem iam facing is with the number of columns displayed in the table. I have to display around 15 to 20 columns in a table... with this 15 to 20 columns in a table, i can see scrollbar to the page ....but i dont want scrollbar to the page, instead i want want scroll bar to the table (so that it doesnot effect the design of the page) I need a fixed table width and height and also fixed column width and height..... Note: I dont mind if columns are not visible (thru scrool bar i should see the hide columns) 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. I have a dynamic table that is in the cell of another table. For the life of me I cant get it to stick to the top of the cell. It wants to sit at the midline of it vertically. Thanks for reading. -------------------------------------------------------------------------------- Hello, Not exactly sure where to post this question... but: I'm having a bit of trouble keeping a table at a fixed height. What I have is a Small 200x80px table above my an input form. As users type data into the input form, javascript code dynamically updates the contents of the table. I have the table width properly fixed, and the input fields have character limitations... however if a user inputs a lot of capital letters or other wide characters, the table automatically increases in height when the text wraps. It's pretty much necessary that the text wraps for the middle lines of the table, and on the other two lines I have used the javascript to remove wrapping, but I never want the table to grow longer than 80px no matter how much is typed in the fields. Is there a way that I can constrain the table height? Thanks in advance! I'm trying to get a table inside another table which completely fills the parent table, but I cannot get it to work. The simple piece of code illustrates my problem. The red table is inside the blue table but does not cover the entire cell from top to bottom, but only the centre. I want this table to be streched. Obviously height: 100% doesn't work. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html> <body> <table> <tbody> <tr> <td> 1<br>2<br>3<br>4<br>5<br> </td> <td style="background: blue;"> <table style="height: 100%; background: red;"> <tbody> <tr> <td style="vertical-align: bottom"> Test </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </body> </html> Hi, CSS whizz needed! I'm currently formatting a pre-determined HTML website using CSS. The website has been formatted with ID's for all tables and cells so I can specify which colour I'd like the background of the cells. The HTML is like this: Code: <table id="Description"> <tr><th class="title">Text</th></tr> <tr><td class="data"><div class="ggcode">Text</div></td></tr> </table> So I've been formatting it like this: Code: div#Main table#Description .title { border-color:#F0E68C; background-color:#F0E68C; } div#Main table#Description td.data { border-color:#F0E68C; background-color:#F0E68C; } However the last table is like this: Code: <table id="recentPosts"> <tr> <th class="title"> Recent Forum Posts </th> </tr> <tr> <td> <table class="data"> <tr> <th>Topic</th> <th>User</th> <th>Posted At</th> </tr> <tr> <td class="clickable forumTitle"><a href="link">Text></td> <td class="username">Text</td> <td class="date">Text12/04/2009 03:25 PM</td> </tr> <tr> <td class="clickable forumTitle"><a href="link">Text</a></td> <td class="username">Text</td> <td class="date">Text</td> </tr> </table> </td> </tr> </table> I'm able to format the cells within the <table id="recentPosts">, but I can't alter the cells within <table class="data"> - the table within the table. Any ideas how I would go about doing this? Thanks in advance hi all ! Im having a little bit of problem to make a header and the table body match in a correct way. My header is declared as <table align="center" class="style36" id="header"> and the CSS controlling it is Code: table.style36 { width: 1000px; vertical-align:middle; } .style36 td{ font-family: Arial, Helvetica, sans-serif; font-size: 12px; vertical-align:middle; } And the table wich is declared as Code: <div class="scrollingDiv"> <table border="1" bordercolor="#000000" align="center" bgcolor="#FFFFFF" class="style13" id="tableBody" > And the CSS controlling it Code: div.scrollingDiv { height:420px; overflow:scroll; vertical-align:middle; width:1024px; } table.style13 { width: 1000px; vertical-align:middle; } /* Since the table has a class of style13, all td elements under that style can be selected as below... no need for more style definitions... */ .style13 td { vertical-align:middle; } .style13 th { vertical-align:middle; } My first idea was to declare a width for each td, something like: Code: <td width="30" bgcolor="#${color2}"><div align="center">${fila.sHoraent_Citas}</div></td> <td width="120" bgcolor="#${color2}"><div align="center"><a href="SvMedPro?boton=Info&idPaciente=${fila.idPaciente_Citas}">${fila.nom_Paciente}</a></div></td> AND match the header too, dosent seem to work, Im pretty new to web programing so any help is appreciated. Thanks! Hi all, what i want is to customise the borders of a table... i know that <div>'s can have custom borders but, for the way that the page works i used table tags <table>. (very little experience of using <div>) is there a way that css can manipulate the borders of a table? i tried using this css: .nmhead { border-color:#cccccc; border-top:border-top-style:none; border-left:border-left-style:none; border-right:border-right-style:double; border-bottom:border-bottom-width:5px; } and then in the table doing this: <td class='nmhead'> but it didnt work (attached is what i want it to look like) any ideas? I have a table with a specified background color (specified in CSS). The content part of the table (a cell) uses information from a downloaded script (wordpress.com) to load information. I want the table background to shine through everything. How can I accomplish this (I suspect it is in the script CSS, but I don't know what). URL The 'home' page is how I want it (basically that background effect). But the other pages come out funny with no background. Could someone solve this, or alternatively reccommend another way. |