|
CSS - Apply A Margin To Tbody
Is there any way I can stick a margin onto a tbody element?
I'd like a 10px gap between the bottom of my table if the tbody element is present and does not have display: none. My alternative is to put in a tfoot element that is nothing but a spacer, but I hate putting in extra markup just so I have a handle for display rules. Cheers, Pete Similar TutorialsHi! In this page [www].bezlica.ru/chat/sample.php , left bottom flash window is 3 pixels up of its normal position. In Firefox it renders well. Is there any way to fix in IE, while not affecting Firefox? I want a fixed height table, so I'm using overflow: scroll for the tbody. This works well in Firefox but does not work in Opera or IE. Does a solution exist to my problem? Hello all, I have the following code which is working fine in IE but not in Firefox. I declared the tbody height to 500px and when there is only one row in the table IE is not showing the entire height where as firefox is showing the entire height with white colour. How can i make it work in firefox. Also, i want to keep my header freezed. Help me out... Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta name="keywords" HTTP-EQUIV="CACHE-CONTROL" content="One1Clear Finance, Multiservice Transaction Management, Cibernet, Cibernet $O1CName: Reports, Help - Reports;NO-CACHE">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
<style type="text/css">
div.tableContainer {
width: 135%; /* table width will be 99% of this*/
height: 550px; /* must be greater than tbody*/
overflow: auto;
margin: 0 auto;
}
table.report .c { text-align: center }
table.report .r { text-align: right }
table.report {
width: 99%; /*100% of container produces horiz. scroll in Mozilla*/
border: none;
background-color: #f7f7f7;
}
table.report>tbody { /* child selector syntax which IE6 and older do not support*/
overflow: auto;
height: 500px;
overflow-x: hidden;
}
table.report thead tr {
position:relative;
top: expression(offsetParent.scrollTop); /*IE5+ only*/
}
table.report thead td, thead th {
color: #FFFFFF;
text-align: center;
background-color: #6699FF;
}
table.report td.h {
color: #FFFFFF;
text-align: center;
background-color: #6699FF;
}
table.report td {
font-size: small;
color: #000000;
text-align: left;
background-color: #CCCCFF;
vertical-align: top;
padding-right: 0.75ex;
padding-left: 0.75ex;
}
tfoot td {
text-align: center;
font-size: 11px;
font-weight: bold;
background-color: papayawhip;
color: red;
border-top: solid 2px slategray;
}
td:last-child {padding-right: 20px;} /*prevent Mozilla scrollbar from hiding cell content*/
</style>
<title>Cibernet $O1CName: Reports</title>
</head>
<div align='center'>
<font size='2'><table class="report" $border cellspacing="1" cellpadding="1" style="margin-top:-1">
<thead>
</table><br />
</font></div><div align='center'>
<font size='2'><table class="report" $border cellspacing="1" cellpadding="1" style="margin-top:-1">
<thead>
<tr><td class="h">Payer Entity</td><td class="h">120+ Days</td><td class="h">90 Days</td><td class="h">60 Days</td><td class="h">30 Days</td><td class="h">Current</td><td class="h">Total</td></tr></thead>
<tr><td class="c"></td><td class="c">0.00</td><td class="c">0.00</td><td class="c">0.00</td><td class="c">0.00</td><td class="c">23,617.90</td><td class="c">23,617.90</td></tr>
</table><br />
</font></div>
<center><font size="1" color="gray">
<i><b>Cibernet proprietary.</b> All information on this web site is restricted to use pursuant to Cibernet instructions.</i><br>
(Generated 2007/05/15 14:06:26 UTC in 0.95 seconds)
</font></center>
</body><HEAD><META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
</HEAD></html>
I've been wanting to solve a table problem I've had for a long time. I want a scrollable table without needing to specify specific px widths for the headers and the table cells. I've been told there is no solution to this. What I've done is duplicate the table. I create a div, give absolute positioning to both tables, show the headers of table1 then use visibility:hidden height:0.01em on subsequent rows. I position the duplicate table - table2 1.8em (1 row) below table1. (I think something could be done with z-index too, and if someone wants to demonstrate I'd be happy to see it). This table has the same data, but skips the headers. Some work is also done to make room for the scrollbar. Here's a sample: http://restoredirect.com/test.html You'll notice I'm close, but just a little off. Can someone help me to get it right? While not ideal, I think this may help many people. Also, if someone does have a more ideal approach please speak up and let me know! I've been looking through many, many forums trying to resolve this issue, so please forgive me if there is a solution to this that I've missed. Here's the deal: On some installs of Firefox (4.0), the body is being positioned 28px lower than the top of the screen. I set the <html> tag to have a light blue background to troubleshoot the issue, and now there is a light blue bar across the top of the page, proving that it is the body of the page that is lower than it should be. I thought it was a Firefox "collapsing margin" issue, so I added "margin:0; to almost everything, and it didn't help. I'm trying to do this without having to absolutely position everything. Here's the site: www-dot-myportlandtours-dot-com here's the css: www-dot-myportlandtours-dot-com/wp-content/themes/myportlandtours/style.css Anybody have insight into this? Background info: - I have validated the page and CSS, no problems there - Site is working properly in Firefox and IE, seems to be a margin issue in Safari -This margin issue is not the common Safari bug with a negative margin being applied to a floated element -I am using Safari in a windows environment, I do not have a Mac The problem: -in Safari the top margin on the content either is either not being applied at all or is being interpreted differently -it may be of note that I was having the same issue with IE, but was able to specify an IE specific style sheet for it, I don't believe this is possible in Safari? The website: http://www.lisa-noble.com/test/redo.html The HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Site Test</title>
<link rel="stylesheet" type="text/css" href="redo.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
</head>
<body>
<div id="top_filler">
</div>
<div id="left_filler">
</div>
<div id="right_filler">
</div>
<div id="top_left">
</div>
<div id="header">
</div>
<div id="top_right">
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Etc, etc, etc....</p>
</div>
<div id="bottom_filler">
</div>
<div id="bottom_left">
</div>
<div id="bottom_right">
</div>
</body>
</html>
The CSS Code: * {
margin: 0;
padding: 0;
}
body {
background: #fdd9e9;
}
div#top_filler {
background: url(images/bg_slice_sm.png) repeat-x;
width: 100%;
height: 164px;
position: fixed;
top: 0px;
z-index: 5;
}
div#left_filler {
background: url(images/left_slice_sm.png) repeat-y;
width: 174px;
height: 100%;
position:fixed;
left:0px;
z-index: 5;
}
div#right_filler {
background: url(images/right_slice_sm.png) repeat-y;
width: 161px;
height: 100%;
position:fixed;
right: 0px;
z-index:5;
}
div#bottom_filler {
background: url(images/bottom_slice_sm.png) repeat-x;
width: 100%;
height: 76px;
position: fixed;
bottom: 0px;
z-index: 5;
}
div#header {
position: fixed;
top: 0px;
left: 37%;
height: 125px;
width: 316px;
margin: 0 auto;
background: url(pink_logo2.png) no-repeat;
z-index: 25;
}
ul.NoBulletNoIndent {
list-style-type: none;
margin-left: 0px;
padding-left: 0px
}
div#top_left {
height: 314px;
width: 221px;
background: url(images/left_top_corner_sm.png) no-repeat;
position: fixed;
top: 0px;
left: 0px;
z-index: 5;
}
div#bottom_left {
height: 175px;
width: 176px;
background: url(images/left_bottom_corner_sm.png) bottom no-repeat;
position: fixed;
bottom: 0px;
left: 0px;
z-index: 5;
}
div#top_right{
height:174px;
width:174px;
background: url(images/right_top_corner_sm.png) top no-repeat;
position: fixed;
top:0px;
right: 0px;
z-index:5
}
div#bottom_right{
height: 602px;
width:198px;
background: url(images/right_bottom_corner2_sm.png) bottom no-repeat;
position: fixed;
bottom: 0px;
right: 0px;
z-index: 5
}
div#content {
margin: 40px 164px 0px 180px;
position: relative;
z-index: 1;
}
Hi! Should I do this? p { margin-top: 2em; margin-bottom: 2em; } or this: p { margin-bottom: 2em; } Same question for headers (h1, h2, etc) Thanks! Heya guys, Hope someone can help me with this one. Been looking around the web but most are suggesting to do what i have already done. I've got this in style.css file: Code: /* SEARCH Bar */
.lb_bl {background: url(/img/lb_bl.gif) 0 100% no-repeat #E5ECEC}
.lb_br {background: url(/img/lb_br.gif) 100% 100% no-repeat}
.lb_tl {background: url(/img/lb_tl.gif) 0 0 no-repeat}
.lb_tr {background: url(/img/lb_tr.gif) 100% 0 no-repeat; padding: 3px}
.clear {font-size: 1px; height: 1px}
.topform {
position: absolute;
right: 5px;
top: 65px;
width: 300px;
font-size: 10px;
font-family: myriad, verdana, sans-serif;
text-align: right; }
input, form {
font-size: 11px;
font-family: myriad, verdana, sans-serif;
margin-bottom: 0px;
margin: 0px; }
/* End of SEARCH Bar */
Which refers to this part of my index.php page: Code: <!-- Top right SEARCH -->
<div class="topform">
<div class="lb_bl">
<div class="lb_br">
<div class="lb_tl">
<div class="lb_tr">
<form name="form" id="form" method="post" action=""><input name="search" type="text" />
<input name="search" type="button" value="SEARCH" /></form>
</div>
</div>
</div>
</div>
<div class="clear"> </div>
</div>
<!-- End of top right SEARCH -->
But i am still getting a space below the form in IE (firefox is perfect). What should i do? You can see an example of the page at www.theresortwarehouse.com Thanks in advance to anyone who can help - Gaz Hi all Take a look at this in Firefox and then in IE7: http://www.josh.ch/files/temp/ie7_margin_bug/formulare.html The text input and the textarea fields have a strange margin on the left in IE7 that shouldn't be there. It seems to be "inherited" by the outher paragraph, just change the value in css/general.css on line 29 to see it happen. FF and IE6 behave well, IE7 doesn't. Interestingly, the select field (and all the other fields like radio buttons and checkboxes) don't have this problem. I did a search and found this link: http://www.positioniseverything.net/explorer/floatIndent.html Seems to be something like that, but the display:inline fix didn't help. the only way I see is a minus margin for the text input and textarea fields for IE7 only, but maybe there's a cleaner way? Thanks a lot for help :-) Josh Hey Guys, I'm trying to apply a style to all the TD's within a class of TR's. I am having trouble making the changes apply to the TD not the TR. How can I do it? Thanks! Hi there. I am looking through a style sheet from a site and was just wondering what this line would apply to: Code: submit { font-size: 10px; border: thin #A9D5F5 solid;
background-color: #395980; color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
letter-spacing: 0px; word-spacing: 1pt;
}
I guessed submit buttons but it's nothing to do with them. Thanks Colin Hi I'm building a selectbox insead of using the common select tag. I use the windows.createpopup() method to display the list of choise. Differently to the div object the popup object is like a new window so it doesn't inherit the css style sheet I've attached to the main window. I tought to attach it by using the addImport(url) method of the styleSheet object but it doesn't seem to work. Here it's my code, the show function it's called when the selectbox expands: var Select_box = window.createPopup(); Select_box.document.styleSheets[0].addImport("URL('common/css/default_style.css');") function show(element) { if (Select_box.isOpen==false) { Select_box.document.body.innerHTML = Select_box_content.innerHTML; Select_box.document.body.className='selectbox'; Select_box.show(0, 18, 150, 50, element); } else { Select_box.hide(); } } I've noticed that using the addImport method on the main window, and not on the instance of the select_box, with 0 index of the styleSheet the error doesn't occur but it doesn't also change the proprety. Tring using any other index value it gives me the usual error. So how can I attach a style sheet to a popup created with the window.createpopup()? Thank you Is there a way to use CSS to apply "no" style to something? I know it's strange... I'll explain. I have a general style for all the forms on my website but there is one form I want to appear as the standard default looking form. I don't want to assign an id or anything to the styled forms because then I would have to go back and edit every single page... I'd much rather do something to the 1 form to make it look like the browser default. Is there a way to exclude something from taking on a general style? Any help is appreciated! Thanks! hi friends, i have a table with two columns.I have a designed td in stylesheet but it is not take effect.In the normal design view,style is effected but when runtime the changes will not take effect. And also if apply css "class" for td it wont accept instead it accept only property which are given in in style property i.e <td style="bgcolor:blue......"> My CSS is... Code:
.left_column
{
background-color:#d29b28;
width:2000px;
}
.content
{
background-color:#cccccc;
vertical-align:top;
padding-top:10px;
padding-left:10px;
line-height:5pt;
font-family:Tahoma;
}
.caption
{
background-color:Black;
color:White;
}
div.content
{
background-color:Lime;
float:left;
text-align:left;
font-size:20px;
line-height:3px;
font-family: Arial, Helvetica, sans-serif,Tahoma;
}
and my Source Code is...(Which is not take effect) Code:
<td class="left_column">
..............................................
</td>
<td class="content">
<div class="content"><%# Server.HtmlEncode(Eval("question").ToString())%></div>
</td>
If i give the above code <tr> is divided into two <td> with equal width. This code only take effect... Code:
<td width="200" style="background-color:#d29b28;border-style:solid; border-right-color:Black; border-width:1px; min-height:250px;">
...........................
</td>
<td class="content">
<div class="content">
<%#Server.HtmlEncode(Eval("question").ToString())%>
</div>
</td>
what can i do for that...I'm designing in Master Page.. Hi there, I have recently stumbled about a problem I had with another website I made as well, but since it was at the very bottom back then I kinda ignored it. My new website has this right in the header though, and so I decided to ask for help. Works perfectly in Gecko based browsers, though. I have the problem that I have to Div's right after each other which both have a top and bottom margin of zero, but there is a visible gap between them, only in IE though (header and content as well as content and footer) and in Opera 7.54 at the very bottom. The colors of the background PNG are also broken in IE, never mind that, will exchange that with a JPG. Website in question is http://cyxxon.com, WordPress with my own template. Had the same problem with a website completely handcoded by me. Any ideas? Thomas Hi all.. I been tried to put page break function inside <div> tag but it still can't take any effect. Am i correct or any others idea? And when i put in page break function and want to print page 2, but it'll also print out some page 1 table field. can I apply more than one style to an element? Or do they overwrite each other? thanks Hello, Though the 'CssClass' property is available with the control, it doesnt seem to have any effect on it. Rather it works on HTML Control Checkbox. Thanks. Hi, I have a weird litlle problem here... I have embedded a forum (invision) in my website. This forum uses a stylesheet for all its settings (duh). I can choose if I want to use it inline or external. Offcourse, my site also has its own stylesheet to work with. Because the forum code is on a <div > in my site, the css from the forum messes up my site. Is it possible to get the forum stylesheet to be only applicable inside the layer that it's on? Inline or linked? I tried using an iframe instead of a div, but that gives a heap of other trouble (especially cookie-related) so that's not an option... |
|||||||