|
CSS - Issues With Tables In Absolute Divs In Ie / Firefox
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. Similar TutorialsHello 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 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 cannot figure this out. I've tried adding clear: both in several places, I've tried overflow: hidden and I've tried cursing. Nothing works! How can this be fixed so that in IE6 the divs are not staggered vertically?? Code: <div style="height: 38px; margin: 0px; padding: 0px; width: 140px;"> <div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="38" border="0"></div> <div style="float: right; height: 38px; width: 102px;">copy</a><br>copy</a></div> </div> <div style="height: 38px; margin: 0px; padding: 0px; width: 140px;"> <div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="19" border="0"></div> <div style="float: right; height: 38px; width: 102px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="8" border="0"></div> </div> I am desperate. I think I found a bug in Firefox, and I'm not sure how to work around it. The following code works in everything (IE 8, Chrome, Safari, Opera) except Firefox (version 3.6.3). Am I doing something wrong, or is this a bug in Firefox? You can look what happens to the drop-down menu's on Menu 2 and 3 live by going to my site (deenfoxx dot com slash firefox-bug dot html). css Code: Original - css Code #main-nav { background-color: black; height: 40px; } #nav { position: relative; margin: 0; padding: 0; } #nav li { position: relative; float: left; display: table; width: 99px; height: 40px; border-right: 1px solid white; text-align: center; font-size: 10px; } #nav li:hover { background-color: darkred; } #nav a { display: table-cell; vertical-align: middle; line-height: 11px; font-weight: bold; text-decoration: none; color: #fff; } #nav li ul { position: absolute; padding: 0; background-color: gray; top: 40px; left: 0px; } #nav li ul li { width: 98px; border: 0; border-top: 1px solid white; } #main-nav html4strict Code: Original - html4strict Code <div id="main-nav"> <ul id="nav"> <li id="m1"><a href="#1">Main Menu 1</a></li> <li> <a href="#2">Main Menu 2</a> <ul> <li><a href="#2a">Sub-Category 1</a></li> <li><a href="#2b">Sub-Category<br/>with multiple lines</a></li> </ul> </li> <li> <a href="#3">Main Menu 3 with multiple lines</a> <ul> <li><a href="#3a">Sub-Category 2</a></li> </ul> </li> <li><a href="#4">Main Menu item which has a really long name on it</a></li> </ul> </div> <div id="main-nav"> The problem appears to be that "#nav li" happens to have position:relative; and a display:table; and "#nav li ul" is position:absolute;. Normally, absolute positioning requires its parent or ancestor position to be set, but when used with the table display, it doesn't work normally on Firefox--but it does on other browsers. Can someone help me with a workaround that does not involve altering the HTML? If I must, I will accept a workaround that requires changing the HTML, but I'll have to do some heavy duty recoding of Magento's core menu generation. Anyone that knows Magento knows I want to avoid that like the plague--my example is a very simplified version of the problem. Hi, Basically I have two divs, and I want to position another div within each div using the absolute property of css. However for some reason, rather then having to absolute divs within my other divs I finish having the two abolute divs one on top of each other. Here is an example I did: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <body> <!-- first box --> <div style="border:1px solid black;"> Hello <br><br><br><br><br><br><br><br> <div style="position:absolute; top:50px; left:50px; border:1px solid red">Helloooo</div> </div> <!-- second box --> <div style="border:1px solid black;"> Hello <br><br><br><br><br><br><br><br> <div style="position:absolute; top:50px; left:50px; border:1px solid red">Helloooo</div> </div> </body> </html> I have done some research and found that this is happening because when I set a div as absolute, this does not remain part of the parent div, and thus the absolute div is not positioned according to the parent div, but according to the whole website. What I want to achieve is to position my absolute divs taking in consideration the parent div, and this in the example above I would have the label 'helloooo' with red border in both parent divs and not one of top of each other!! Is this possible? Regards, Sim085 I have a menu system that I'm triyng to nest in my navbar div. The problem is that the absolute postioning of the nested divs are causing them to bust out of the navbar div. What can I do to remedy the problem. Here is my CSS Code:
#header {
width: 100%;
height:145px;
background-image: url(images/topbackground2.jpg);
background-repeat: repeat;
}
#navbar {
width: 122px;
background-color:#3f79a1;
position: relative;
float: left;
border;
}
#content {
height:100%;
background-color:#3f79a1;
position: relative;
float: right;
}
#footer {
background-image: url(images/gradientsmaller2.gif);
font: 10pt;
background-color: #ccffcc;
width: 100%;
text-align: center;
padding: 0 15%;
clear:both;
}
Here is the html for the navbar div Code:
<div id="navbar">
<div id="p7menu1" style="position:absolute; left:0px; top:15px; width:122px; z-index:106"><a href="javascript:;" onClick="P7_trigMenuMagic1('p7menu1',1);return false" onMouseOver="P7_rollCMenu1(event,'p7menu1',0)" onMouseOut="P7_rollCMenu1(event,'p7menu1',0)" onFocus="if(this.blur)this.blur()"><img src="images/Login.gif" width="122" height="20" name="p7mbut1" border="0" alt="menu 1"></a></div>
<div id="p7menu2" style="position:absolute; left:0px; top:35px; width:122px; z-index:107"><a href="javascript:;" onClick="P7_trigMenuMagic1('p7menu2',1);return false" onMouseOver="P7_rollCMenu1(event,'p7menu2',0)" onMouseOut="P7_rollCMenu1(event,'p7menu2',0)" onFocus="if(this.blur)this.blur()"><img src="images/EditProfile.gif" width="122" height="20" name="p7mbut2" border="0" alt="menu 2"></a></div>
<div id="p7menu3" style="position:absolute; left:0px; top:55px; width:122px; z-index:108"><a href="javascript:;" onClick="P7_trigMenuMagic1('p7menu3',1);return false" onMouseOver="P7_rollCMenu1(event,'p7menu3',0)" onMouseOut="P7_rollCMenu1(event,'p7menu3',0)" onFocus="if(this.blur)this.blur()"><img src="images/InstructorInfo.gif" width="122" height="20" name="p7mbut3" border="0" alt="menu 3"></a></div>
<div id="p7menu4" style="position:absolute; left:0px; top:75px; width:122px; z-index:109"><a href="javascript:;" onClick="P7_trigMenuMagic1('p7menu4',1);return false" onMouseOver="P7_rollCMenu1(event,'p7menu4',0)" onMouseOut="P7_rollCMenu1(event,'p7menu4',0)" onFocus="if(this.blur)this.blur()"><img src="images/MyCourses.gif" width="122" height="20" name="p7mbut4" border="0" alt="menu 4"></a></div>
<div id="p7menu5" style="position:absolute; left:0px; top:95px; width:122px; z-index:110"><a href="javascript:;" onClick="P7_trigMenuMagic1('p7menu5',1);return false" onMouseOver="P7_rollCMenu1(event,'p7menu5',0)" onMouseOut="P7_rollCMenu1(event,'p7menu5',0)" onFocus="if(this.blur)this.blur()"><img src="images/GradeBook.gif" width="122" height="20" name="p7mbut5" border="0" alt="menu 5"></a></div>
<div id="p7submenu1" class="pviimenudiv" style="position:absolute; left:142px; top:35px; width:102px; visibility: hidden; z-index:101">
<table width="108" border="0" cellspacing="6" cellpadding="0">
<tr><td>stuff</td></tr>
</table>
</div>
<div id="p7submenu2" class="pviimenudiv" style="position:absolute; left:142px; top:55px; width:102px; visibility: hidden; z-index:102">
<table width="108" border="0" cellspacing="6" cellpadding="0">
<tr><td>stuff</td></tr>
</table>
</div>
<div id="p7submenu3" class="pviimenudiv" style="position:absolute; left:142px; top:75px; width:102px; visibility: hidden; z-index:103">
<table width="108" border="0" cellspacing="6" cellpadding="0">
<tr><td>stuff</td></tr>
</table>
</div>
<div id="p7menubottom" class="pviimenudiv" style="position:absolute; left:10px; top:115px; width:102px; visibility: visible; z-index:111">
<table width="108" border="0" cellspacing="6" cellpadding="0">
<tr><td>stuff</td></tr>
</table>
</div>
</div>
Sorry for so much code. I'm completely frustrated! I can't seem to get this layout to work at all. I was using frames which was fine but I have to make this work without frames now. Thanks for any help. For a search tool, I have a "results toolbar", horizontally across the top of the results page. Within this toolbar (position: relative) I have a span containing the current page, absolutely positioned at top: 8px; left: 5px; What I get when rendering however, is the following: Right: http://tim.komta.com/images/css/Firefox.gif Wrong: http://tim.komta.com/images/css/IE.gif More accurately, I should say that I get what I expect in Firefox, and not what I expect in IE, which is not overly surprising. Anyway, what am I doing wrong? If I change the text-align of the box from right (current) back to left, it's still overlaid on top of the images, but on the left, like it's supposed to be. It kinda seems like IE is making the images the bounding box for absolute positioning. Any thoughts? MPEDrummer Centering DIVs inside other DIVs in Firefox? Can it be done in a straight forward way? Setting the inner DIVs float to none seemed to work for IE but not FF. I have been reading a lot about tableless desing and I decided to convert my web site into fixed width, 3 column desing. I did 3 different types of CSS to do this (based on tutorials and templates), but I have no idea on wich will be better for my web site. Please take a look at the source codes (small files, CSS included in the html files, should be really quick to look at) and help me choosing. important: the 1px border in the main containers are just for "debugging pusposes", it won't be used on the web site. http://www.djbrunofacca.com.br/sample1.html - this uses absolute positioning. http://www.djbrunofacca.com.br/sample2.html - this uses float but there's an additional container (inside the main container) just for the left and middle columns. any advantages in this? http://www.djbrunofacca.com.br/sample3.html - this uses float: left for all 3 columns and I think it's the simplest of them all. I'm concerned about cross browser compatibility and degradation in different resolutions. Thanks Bruno Facca I'm working on a pet project on the off chance that I could be hired by a small business referral organization in the city where I live, so this isn't super urgent. I'm also not a web developer by trade, more IT, so if I make any obvious mistakes, feel free to point them out. I've got a simple absolute-positioned two-column layout and a two-color background that I want to tile vertically behind it. The problem seems to be that the browsers ( IE and FF, haven't tried chrome/safari/opera) seem to think that the body ends at the bottom of the logo I set on top, and won't tile it beyond the bottom of the image. 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> <link rel="stylesheet" type="text/css" href="css/stylesheet.css" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Hub City Business Network | Word-Of-Mouth Business Referrals in Hattiesburg, Mississippi | Home</title> </head> <body> <div id="content"> <div id="logo"><a href="index.htm"><img src="images/hcbnlogo1transparency.png" alt="Hub City Business Network" /></a></div> <div class="left"> <div id="navigation"> <ul> <li><a href="index.htm">Home</a></li> <li><a href="members/index.htm">Members</a></li> <li><a href="contact.htm">Contact Us</a></li> </ul> </div> <div id="leftinfo"> <p>We meet for breakfast every Tuesday,<br /> 7 - 8:30 AM. <br /> at the Neal House at<br /> 1311 East Hardy St.</p> </div> </div> <div class="right"> <p>Hub City Business Network (HCBN), is a Hattiesburg-based business networking group that meets every Tuesday for breakfast at 7:00 till 8:30 A.M. Our membership is composed of some of the finest and best-respected business men and women in Hattiesburg. Our networking model is predicated on the idea that people do business with people they know, trust, and like. Our members know that they can confidently refer business to a member and the referral will be handled in a timely, professional manner. In addition, we encourage members to meet outside of the weekly meetings for one-on-one Strategic Marketing Sessions (SMS). An SMS usually takes the form of a lunch or coffee, and gives members time to discover in a more relaxed environment things about other members that don't surface at the regular weekly meetings. </p> </div> <div id="footer"> <p>Site built by Robert Greenstreet</p> </div> </div> </body> </html> CSS: Code: html
{
width:100%;
}
#logo img
{
margin:10px 0px 0px 20px;
width:400px;
height:100px;
}
img
{
border:0px;
}
a:link
{
color:#29497f;
}
a:visited{
color:#5dd0c0;
}
body
{
width:650px;
margin-left:auto;
margin-right:auto;
background-color:#29497f;
}
#content
{
/*height:500px;*/
width:650px;
background-image:url('../images/bg1.png');
background-repeat:repeat-y;
background-attachment:fixed;
background-position:center;
margin-top:-10px;
}
.left
{
position:absolute;
left:auto;
top:120px;
width:15em;
margin-left:12px;
padding-left:0px;
}
.left ul
{
list-style-type:none;
margin-left:-33px;
font-family:sans-serif;
}
#leftinfo
{
margin-left:10px;
width:9em;
}
.right
{
position:absolute;
left:auto;
top:120px;
width:27em;
margin-left:12em;
font-family:sans-serif;
}
.right p
{
color:#000000;
}
#memberlist ul
{
margin-left:-40px;
}
#memberlist a:visited{
color:#6a92d4;
text-decoration:none;
}
#footer
{
position:absolute;
top:400px;
width:650px;
margin:0 auto;
}
Also, I'm working on getting that footer centered about 30px from the bottom of the page, without running up into whatever content may be above it. I think I might be able to figure that one out on my own, though. Like I said, no rush. This isn't a paid gig i have 10 div's with abolute positioning and the css is external the html is like this <div class="1"> <div class="2">......... it works in IE but in firefox the images get put all below eachother on the left...except if i put the css inline it works 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? Please look at http://www.rodstrans.com/diagnosis/body_leaks.html In IE & Chrome the checkboxes are positioned absolute in each table cell, but in Firefox they all bunch at the top left. I have put a position:relative on all parent elements and can not figure out what is happening. 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. 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... 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, 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 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 |
|||||||