|
CSS - Safari Bug Table Cells & Print Medium
I am developing a PHP/CSS database application built for Safari and have run into a very nasty bug.
(Aside: the web application I am building is sort of browser-specific... we are an all-Mac company, so we want people to use Safari. [I'm not even trying to make it work with IE5/Mac. Screw that.] But having said that, I'd also like it to work in IE6/Win and Firefox [Mac/PC] to give people at least a few more options, like if they're on their PC at home... whatever. Just thought I would explain that before I get flamed by those who think I'm crazy for going that route.) Anyway, I'd like to have tables with cells/columns that are hidden on the screen but visible on printouts and vice versa. But I've discovered that using display:none for table cells in the print style sheet crashes Safari. It does not affect span tags within table cells. This will crash Safari. Code: td { display: none; }
This is okay. Code: td span.printhide { display: none; }
This is also okay, but why do this if it's still going to take up the space on the page? Might as well just leave it. Code: td { visibility: hidden; }
Now, I've found a workaround that works, but it's a pain. Basically, instead of setting it up like a normal table, like this: Code: <table> <tr> <td>Cell</td> </tr> </table> You have to set it up like this: Code: <span class="table"> <span class="row"> <span class="cell">Cell</span> </span> </span> As long as you give those span tags their respective display attributes, this works when you set this in your print stylesheet, for example: Code: span.cell { display: none; }
But the big problem with doing it this way is that you're now completely handcuffed to the stylesheet. At least if the style sheet bonks the old way, you still have a table with tabular data in it. Plus, say if the next version of Safari fixes this problem, then you'd have to go back and fix it on every page that uses these span tags in order to "unlock" the handcuffs, which kind of nullifies the purpose of style sheets in the first place. So I guess what I'm asking is if anyone knows of a workaround that I can use that does NOT involve converting my <table><tr><td> to <span><span><span>? Thanks for reading. Similar Tutorialswith border: 1px solid #FFFFFF; in css i got border only around the table I want the border to surround every cell of the table as it is with <table border="1" bordercolor="#FFFFFF" > how? Hi, I have the following code which is for a table. Code: <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td> </td> </tr> <tr> <td><a name="A"></a>A</td> </tr> <tr> <td> </td> </tr> <tr> <td><a name="B"></a>B</td> </tr> <tr> <td> </td> </tr> <tr> <td><a name="C"></a>C</td> </tr> <tr> <td> </td> </tr> <tr> <td><a name="D"></a>D</td> </tr> <tr> <td> </td> </tr> <tr> <td><a name="E"></a>E</td> </tr> <tr> <td> </td> </tr> <tr> <td><a name="F"></a>F</td> </tr> <tr> <td> </td> </tr> <tr> <td><a name="G"></a>G</td> </tr> <tr> <td> </td> </tr> <tr> <td><a name="H"></a>H</td> </tr> <tr> <td> </td> </tr> <tr> <td><a name="I"></a>I</td> </tr> <tr> <td> </td> </tr> <tr> <td><a name="J"></a>J</td> </tr> <tr> <td> </td> </tr> <tr> <td><a name="K"></a>K</td> </tr> <tr> <td> </td> </tr> <tr> <td><a name="L"></a>L</td> </tr> <tr> <td> </td> </tr> <tr> <td><a name="M"></a>M</td> </tr> <tr> <td> </td> </tr> <tr> <td><a name="N"></a>N</td> </tr> <tr> <td> </td> </tr> <tr> <td><a name="O"></a>O</td> </tr> <tr> <td> </td> </tr> <tr> <td><a name="P"></a>P</td> </tr> <tr> <td> </td> </tr> <tr> <td><a name="Q"></a>Q</td> </tr> <tr> <td> </td> </tr> </table> What I want to do is to have a black 1px border around the cells with the letters in, in A, B, C , D etc etc. I am hoping it is a CSS thing, but I only want it to apply to this table, not all the other tables on the page. Anyone know the easiest way to do this? Thanks Ok, so I'm making a website using tables and css since I personally hate using <div>. Anyway, it's going fine except for one problem. There is air between my cells. I wanted to show a SS of it, but apparantly I'm not allowed to post either links to the picture nor attach pictures to my thread, so I'll try to explain it. Now, the html code for the tables looks like this: Quote: <table class="center"> <tr> <td class="top"> <img src="img/top.jpg" alt="top" /> </td> </tr> <tr> <td class="horizontal"></td> </tr> </table> The is air between my two cells here. My horizontal border wont connect to my top cell containing the top.jpg. The CSS code for trying to make the cells connect looks like this: Quote: table.center { width: 590px; margin-left: auto; margin-right: auto; border-spacing: 0px; border-collapse: collapse; } tr, th { padding: 0px; } td.horizontal { width: 590px; height: 2px; background: #28847F; padding: 0px; } td.top { width: 590px; height: 91px; padding: 0px; } How come the two freakin' cells wont connect? Here is what I am trying to do: <table> <tr> <td>left cell</td> <td>right cell</td> </tr> </table> I want to have the code so that the left cell is read first by the search engines followed by the right cell but I want the css to reverse the cells so that the right cell is shown first followed by the left cell. I have done this in IE by assigning the table element to position: relative and then using relative positioning to scoot the right cell to the left and the left cell to the right but this does not work in FF. I am using different stylesheets for different browsers so I dont need a solution that is cross browser compatible, just a solution that will work in standards compliant browsers like FF. Thanks for your help. My Goal: using an onmouseover, highlight the mouse-overed table cell red and highlight another table cell green. Code:
<head><style type='text/css'>
.cell1 { background-color: #cccccc; }
.cell1_over { background-color: #ff3366; }
#other_cell { background-color: #cccccc; }
</style></head>
<body>
<table>
<tr>
<td class='cell1' onmouseover='this.className="cell1_over";' onmouseout='this.className="cell1";'>words</td>
<td id='other_cell'>more words</td>
</tr>
</table>
</body>
OK - the above code will change the first cell from grey to red no problem. What I want is to not only make the first cell grey but also the other cell turn green under the same onmouseover. How might I go about this? Thanks in advance! I am displaying data from mySQL in a table. I am having a problem controlling the width of the columns. I am trying to replace code like this: <td width="100px><?php echo $row_rsList['taskpriority']; ?></td> with a css style <td id='pcol' ><?php echo $row_rsList['taskpriority']; ?></td> where td.pcol { width: 100; } But when I display the table it seems to disregard the width setting. The only other table formatting I ahve done so far is this: table { margin:0; padding:0; } table th { vertical-align: baseline; font-size: x-small; font-weight: bold; font-variant: small-caps; background: #CCCCCC; text-align: left; } Thoughts? Hello, I am working on a site and want to put a thin black line border on individual cells in a table with out putting a border on the whole table. Im not very experienced with css and would perfer to keep it simple. any info will help thanks Nick Carlevaris Is it not possible to do the following? What is the correct way of aligning a cell if not? PHP Code: TD.theader { background-color: #D0D0D0; border: 1px solid #000000; padding:5px; horizontal-align: right; } I'm building a table (for tabular data, of course) and need text within cells centered. However, applying "text-align:center;" to the cells in any other way but inline styles doesn't work. For example, this does not work: Code: td.centercell {
text-align: center;
}
<table>
<tr>
<td class="centercell">Hi!</td>
<tr>
</table>
But this does: Code: <table>
<tr>
<td style="text-align:center;">Hi!</td>
<tr>
</table>
I'd rather not have to put inline styles on every single cell I need centered, as this is most of them. What's going on? Hello, I am attempting to have two pieces of text within a table cell that also contains an image. I was able to figure out the first piece of text that I wanted vertically aligned to the top and to the left, but the next piece of text, which I want vertically aligned to the bottom of the cell and aligned right I am having issues with. Here is the example code: Code: <td style"vertical-align: bottom;"><img src="image1.jpg" border="0" width="195"><font style="position: absolute;left: 2;background-color: #FFFFFF; color: #000000;font-weight: bold;font-size: 18px;">STYLE#</font><font style="position: absolute;right: ;background-color: #FFFFFF; color: #000000;font-weight: bold;font-size: 18px;">As low as $x.xxfont></td> Is this possible within the same table cell as the image? Or do I have to place a CSS table within this cell to place text over top of the image? I would have placed the image as the cell background image, however, I am dynamically creating these tables, and not all of my images are of same size. I am specifying the width though, just not the height. Thank you in advance. is there a problem with placing div tags inside table cells. I have a need to do this and it works fine on my FF3 and IE7 but i am told this is bad practice. is there a problem and/or workaround to using div tags inside a table cell Hello, I posted this in the HTML forum too but didnt get any replies so maybe people in here know it. When you have a table cell with a width of 20%, and you put a very long string in it. Let's say 255 chars long, without spaces in between. The cell will then expand beyond the 20% that was specified. How can you prevent this and make sure the string is broken down and goes further on a next line in the cell when the 20% width is reached? thanks in advance I'm fighting with this for a while now. I want to change my table layout into div based one, but keeping all the positive features of table design. The layout is based on percents and em (the liquid philosophy) The problem: Make div resize like table cell with minimal width equal to width of widest unbreakable element. I don't want my "verylongunnecesaryword" stick out of menu div nor dissapear partaily when resizing the window. I basically want the menu to always stay wide enough to accomodate the longest word and resize dynamically with window and fonts. There is no such problem when using tables, cells automatically resize to fit content and never become so small that content sticks out or disappear. Setting the min-width with either em, px nor percent is a no go, because it's impossible to tell what size will the biggest element be. No javascript either. Also keeping it IE6 complaint would be good. I still think that tables are the best idea and unless someone shows me how to fix this problem with div and css, I'm just sticking with tables till the end of world. shortened HTML: Code: <div class="menu"> menu here </div> <div class="contents"> the rest of page </div> shortened CSS: Code: .menu
{float: left;
width: 20%;
padding: 1%;
}
.contents
{float: left;
padding: 1%;
width: 76%;
}
hello, i have a few tables with different background-image (style attribute) in my page. how can i print the page with the background images i know @media print should help, but i don't know how. * does the css have to be external, or can i use the tag <style> PLEASE HELP Hi guys, I've got both long and wide table to be showed and printed. Customer would like that for scrolling, some left columns will freeze on the left (when printed, will be printed on every page), same for table header (fixed when scrolling, repeated on top of every page when printing). For fixed table headers, there are lots of tutorials, like: http://www.cssplay.co.uk/menu/tablescroll.html And for printing, good browsers can repeat thead on every page (don't know how to achieve this for IE). But for columns locking (repeating for print), I'm totally stuck. Yes, some stuff can be found for scrolling, like: http://web.tampabay.rr.com/bmerkey/...column-csv.html But these solutions usually use JavaScript or are not cross-browser. Is there any way how to do this? Primarily for IE 6.0/7.0 We're having a weird problem with a print stylesheet - a little bit of the javascript menu appear on the printed over the top of the content. eg: (http://www.lawhandbook.sa.gov.au/ch10.php ) - Print Preview this page and you will see "Chapters A-Z" in the middle. This seems to happen in all browsers. We've looked into many css solutions to the issue - but to no avail - we cant make the damn thing disappear. One long winded solution is to change the stylesheet to be built dynamically - so a call to ch10.php=true would build the page differently. But this seems to defeat the purpose of using a print stylesheet in the first place. Another long winded soltuion is to change the (Rather old) menu script - but that not really an option in this case either. So my question is - What happens when a browser prints a page? Does it send anything back to the server indicating it is loading the print stylesheet instead? (eg: Some sort of request variable) Or does the client's browser simple request the CSS file and reformat the page it has already downloaded? If so I could detect this event with PHP or Javascript to not load the offending menus when the print css had been loaded I have pages the when viewed for print in Firefox, show the page going below the page margin and not continuing to the next logical printed page. This image below, shows better than I can explain. Has anyone ever seen this before?...Any ideas how to make it preview and print correctly? Hi guys .... I've been all over google looking for the answer and nothing I've tried works. I'm trying to make a print-friendly css page but my browsers (FF and IE7) both ignore the CSS and apply their own standards to it no matter what I do, it's driving me positively INSANE because it feels like I've done everything according to the instructions I found online for print CSS. Could you please take a look at my code and make some suggestions? You'd be saving my sanity. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "(URL address blocked: See forum rules)"> <html xmlns="(URL address blocked: See forum rules)" lang="en" xml:lang="en"> <head> <title>CLOColors3</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="mainstyle.css" type="text/css" /> <link rel="stylesheet" href="mainstyleprint.css" media="print" type="text/css" /> the print css: Code:
@media print {
html{
height:auto;}
body{
background-color:#FFF;}
#header{
display:none;}
#body{
position:relative;
background-color:#FFF;
background-image:none;
height:auto;
width:auto;
left:0px;
top:0px;
z-index:0;
padding-bottom:0px;}
#textbox{
position:relative;
overflow:visible;
float:none;
margin-left: 0px;
top: 0px;
width:auto;
bottom:0px;
background-color:#FFF;
border:hidden;
border-color:#FFF;
z-index:0;
padding:0px;}
#textbox img{
display:none;}
.searchbar{
display:none;}
#linkbar{
display:none;}
.map{
display:none;}
.video{
display:none;}
#linktext{
display:none;}
#clear_both{
display:none;}
#menu{
display:none;}
#footer{
display:none;}
}
Currently the main CSS is being used and none of the elements I set to be "hidden" are hidden. Help!!! UPDATE: Ok, so IE seems to be PARTIALLY responding to the print CSS. It responds to all the "display:none;" commands but refuses to format the #textbox div according to my instructions, a border persists and the div has an overflow scrollbar for some reason. Firefox is still unresponsive. hello, I'm trying to create my first site in CSS and I'm having trouble with a simple task after tackling so many challenges. Basically I want a row with three cells ______ |_|_|_| and the text inside to be lined left, middle and right, respectively. This is what I was trying, next I'm going to position them absolutely. But figured I would ask for a better way. html4strict Code: Original - html4strict Code #greyrow { width:452px; background-color: #EEECE7; padding: 4px 4px 4px 10px; } #leftgrey { display: inline; width: 150px; } #midgrey { display: inline; width: 152px; text-align: middle; } #rightgrey { display: inline; width: 150px; } <div id='greyrow'> <div id='leftgrey'> left </div> <div id='midgrey'> middle </div> <div id='rightgrey'> right </div> </div>
thanks for any help. webg Hello, I have question regarding proper use of CSS, so I can get web site layout to display properly in both IE and Firefox. At the moment it's laid out properly in FF, but I have some problems with IE. The cells of a table "deform" while browsing in IE. This is how it looks like: URL http://i38.tinypic.com/5ffe6q.gif Here is html of the cells in question: Code: <table class="cHs" width="1000" border="0" align="center" cellpadding="0" cellspacing="0" background="pic/topcenter.jpg"> <tr> <td colspan="3" class="cHs" width="1000" height="145"><img src="pic/logo.jpg" border="0"> </td> </tr> <tr> <td class="cHs" background="pic/left.jpg" width="47" valign=top></td> <td class="cHs" align=center width="906" background="pic/backcen.gif" class=interior valign=top> <td class="cHs" background="pic/right.jpg" width="47"></td></tr><tr><th align="left" valign="top" scope="row" height=\"37\" background="pic/bottom1.gif"></th><td class="cHs" height="37" width="906" background="pic/bottom2.gif" align="center" valign="top"> </td> </tr> </table> Here is used CSS: Code:
table.cHs{ background: transparent;
border: none;
}
td.cHs { border: none;
}
Does anybody see a problem? Thanks in advance. |
|||||||