1.) This works in Chrome.
In Firefox, however, a django tables table that we are rendering on our site is not observing the overflow style. From what I read, table cell elements may be a "per browser" decision because they aren't pure block elements (if I am understanding the standard correctly), but here's a picture of my problem.
I've tried fussing with the max-width tag (to no effect other than the width changes but the overflow is still garbled into the next cell). I could technically wrap the line (white-space), but we don't want huge table rows on the page.
The Mozilla developer page (Overflow) says "In order for overflow to have an effect, the block-level container must have either a set height (height or max-height) or white-space set to nowrap." The height property doesn't seem to change this either. No other CSS property I've tried seems to have an effect.
I keep thinking that this is something Firefox may not support (i.e. table cells aren't "block-level"?), but I can't quite say that for certain.
EDIT: Here's the html. It's just a basic table produced by django tables. Please ignore the inline style I attempted which is commented out.
EDIT: Here's inline code and a JSFiddle link at the bottom.
<!DOCTYPE html>
<html lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<head>
<style>
<body {font-family: Arial, Helvetica, sans-serif;}
th {
padding: 8px;
}
td {
padding: 8px;
}
td.content {
overflow-x: scroll;
max-width: 0;
white-space: nowrap;
}
</style>
</head>
<body>
<table>
<thead><th>Column 1</th><th>Column 2</th><th>Column 3</th></thead>
<tbody>
<tr><td>Other stuff</td><td class="content">A REALLY REALLY REALLY
REALLY LONG MESSAGE</td><td>Other stuff</td></tr>
</tbody>
</table>
</html>
JSFiddle
I made a simple code for you, i hope help you, tell me if this is what you want:
.msg_list{
border:1px solid red;
}
.td-content{
border:1px solid blue;
max-height:100px;
max-width:100px;
}
.content{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: auto;
}
.content div{
width:200px;
}
<table class="msg_list">
<thead>
</thead>
<tbody>
<tr>
<td class="td-content">
<div class="content">
<div>One really really really really really long message</div>
</div>
</td>
</tr>
</tbody>
</table>
If you watch you can see in the css the class .content and his property max-width, i tested it in firefox, you can try it
I have a table on my page that I am unable to apply rounded corners to for Firefox. I have tested on IE, Chrome, and Safari and it works fine on those browsers.
HTML
<table class="login-table">
<tr id="header">
<td id="logo">
</td>
</tr>
</table>
CSS
#logo {
height:85px;
width:170px;
border-top-right-radius:14px;
border-top-left-radius:14px;
}
I tried adding -moz-border-radius-topleft:14px and -moz-border-radius-topright:14px to #logo, but it did not change my output.
Here's an example which shows my issue.
It looks to me that the tr element is actually keeping it's square edges, causing the issue. If you make the tr itself transparent, and make sure the children don't inherit the transparent background-color, it seems to work:
// The first <tr>
#header {
background-color: transparent!important;
}
// The child of the first <tr>
#logo {
background-color:#1c918a;
}
Demo: http://jsfiddle.net/o9z695hf/
I managed to show the top rounderd by moving the CSS down to .container and adding a few changes (height: 100%, etc.)
Here is the result: http://jsfiddle.net/jzdy7yz4/16/
I still see what looks like a white 1px border outside. I suppose it is some kind of spacing.
Good afternoon Stackoverflow gurus,
I wish I could show you the exact code for this issue, but I work in a secure area. I can show you an example.
Here's my CSS
table tr.header{
background: url('image.jpg') 0 0 repeat-x !important;
}
table td{
background: none !important;
color: #FFF !important;
}
td.special{
background:url('image2.png'); 0 0 no-repeat transparent !important;
color: #FFF !important;
}
The reason for all the importants is that I'm attempting to overwrite a systems god awful bland CSS; simple colors, narrow heights and no pizzazz whatsoever.
Here's my generic HTML
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr class="header">
<td>HEADER TITLE</td>
<td class="special"></td>
<tr>
<td>TABLE CONTENT</td>
</tr>
</tbody>
</table>
I apologize for the <tbody> tags, but the system automatically puts <tbody> tags in every table.
The problem I'm running into is only in IE8, I have a set image for the table row class "Header" and the all Table Data to show as NO background, but IE8 like to fill the TABLE DATA with white. I can see the background image of the table row if I go into Developer tools and turn off the CSS for the table data, but there shouldn't be anything in there anyways...
How can I force the table data (except for the one labeled "special") to be 100% clear and transparent in IE8?
How can I force the table data (except for the one labeled "special")
to be 100% clear and transparent in IE8?
Put the following code in an external stylesheet named ie8.css.
table,
table td {
background: transparent;
}
table td.special {
background: url('image2.png'); 0 0 no-repeat transparent;
color: #FFF;
}
Then add this code to your page.
<!--[if IE 8]><link rel="stylesheet" href="ie8.css" /><![endif]-->
background-color:transparent should work, but it doesn't dig through elements that are under it. If an element under it has a colour, you'll see that colour.
Try putting :-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
at the top of the document (before the <HTML> tag). It fixed this problem for me (and moved a load of stuff round too! I hate IE8!).
My problem looks similar to the question I have found here:
chrome vs FF/IE/Opera in calculating table cell width ? (table-layout:fixed)
I simplified the page. The page contains a table, that looks the same in all browsers, but Chrome. I beleive the problem is padding (don't know how to fix it) or doctype (I don't know too much about doctype)... Please help me make Chrome view the same as in any other browser. Thank you.
Below is my html-page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
<title>Looks different in Chrome vs FF, IE, Opera</title>
<style>
table.maintable {
background-color:yellow;
border: 1px solid red;
border-spacing:0;
border-collapse:collapse;
table-layout:fixed;
word-wrap:break-word;
}
table.maintable th, table.maintable td {
border: 1px solid red;
margin:0;
padding:14px;
}
</style>
</head>
<body>
I want the date look like 05/10/2011, in 1 string. Chrome cuts the date into 2 parts. All other browsers are OK. The problem is style <u>padding:14px;</u>, but we need some padding in cells. <br>
Also <b>table-layout:fixed;</b> and <b>word-wrap:break-word;</b> are needed because any long text without any spaces will not destroy the table size in this case. How to make Chrome look like any other browser?
<table class="maintable" style="width:510px;"><tbody>
<tr><th style="width:57px;">number number</th><th style="width:75px;">date</th><th>current info</th><th style="width:90px;">more</th></tr>
<tr><td>40</td>
<td>05/10/2011</td>
<td>2 lines in Crhome but 3 lines in other browsers. Also check the date.</td>
<td>more...</td>
</tr>
</tbody>
</table>
</body></html>
If you believe my first string (doctype declaration) is wrong, please show me a proper one. The web-site in one of Cyrillic languages. No xml is used.
Thank you.
I wonder if the padding is causing the date to wrap due to available space.
You could try to put a span tag around the dates with a .no-wrap class and give the class the property white-space: nowrap to prevent dates from wrapping.
.no-wrap {
white-space: nowrap;
}
...
<td>
<span class="no-wrap">01/11/2014</span>
</td>
...
I have an absolutely positioned input box in a form. The input box has transparent background:
.form-page input[type="text"] {
border: none;
background-color: transparent;
/* Other stuff: font-weight, font-size */
}
Surprisingly, I cannot select this input box by clicking on it in IE8. It works perfectly in Firefox however. The same happens for background: none. When I change the background color:
background-color: red;
It works fine, so this is issue associated with transparent background. Setting a border makes the input box selectable by clicking on its border only.
Is there a workaround to have clickable input box with transparent background working in IE8?
Update: Example. Uncomment background-color and the inputbox is selectable. You can also click on the select box, and focus the input box by pressing Shift+Tab.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head></head><body>
<style type="text/css">
input[type="text"] {
border: none;
background: transparent;
/*background-color: blue;*/
}
#elem528 { position:absolute; left:155px; top:164px; width:60px; height:20px; }
#elem529 { position:absolute; left:218px; top:164px; width:40px; height:20px; }
</style>
<img src="xxx.png" alt="" width="1000" height="1000">
<input id="elem528" maxlength="7" type="text">
<select id="elem529"></select>
</body></html>
I am unable to reproduce such a problem in IE8. Full test case? Are you sure there's not a layering problem causing some other transparent element to cover the clickable area?
Does setting background-image make a difference? What about to a transparent GIF?
ETA: Curious! It's actually an IE7 bug. For me, your example exhibits the described behaviour in IE7, but in IE8 it's only when in EmulateIE7 mode; in IE8 native rendering it's fixed. You'll generally want to make sure you don't fall back to IE7 rendering by using a suitable X-UA-Compatible header/meta; however, yes, setting the background-image to a transparent GIF fixed the problem for me. Tsk, we still need the blank GIF even in this day and age, huh?
You have to define a (transparent) background image.
Just in case someone would be interested. One of suggested workarounds....
Please include the html for the input element.
How did you define the input element? The code below works in IE8 (IE 8.0.7600 Windows).
I tried this in IE8 and was able to 'select' the input area just fine.
<html>
<head>
<style>
.form-page input[type="text"] {
border: none;
background-color: transparent;
/* Other stuff: font-weight, font-size */
}
</style>
</head>
<body>
<input type="text" name="test" value="test" id="test"/>
</body>
</html>
Just give the input field a transparent background image and it will work...
Example:
#search .input {
width:260px;
padding:3px 5px;
border:0;
background:url(../images/trans.gif);}
I've found the same issue using IE10 on Windows 7. Both of the following methods fixed the issue for me.
Franky's method using a transparent background image...
background:url(/images/transparent.gif);
Sketchfemme's method using an rgba background colour with '0' opacity
background-color:rgba(0,0,0,0);
Jim Jeffers suggestion for editing the z-index's did not work for me.
Here is a very simple test case:
<html>
<head>
</head>
<body style="direction: ltr;">
<br/><br/><br/>
<INPUT style="WIDTH: 100%;" />
<DIV style="POSITION: absolute; TOP: 58px; RIGHT: 193px; WIDTH: 300px;">
<INPUT style="WIDTH: 100%; background-color: transparent;"/>
</DIV>
</body>
</html>
When running in IE8 - you should see the focus on the underlying textbox instead on the absolutely positioned textbox.
Our solution was to set both transparent background color and transparent background image:
<INPUT style="WIDTH: 100%; background-color: transparent; background-image: url('transparent.gif');"/>
IE in its infinite wisdom is deciding not to render the item because it thinks there is nothing to render. There are numerous ways to address this but basically you'll need to give IE something to chew on.
Adding a 'value=x' to the input tag itself definitely works. But more than likely it's not the best solution. A simple, color:black (without the focus) allows the element to be tabbed to. Adding ':focus' to the input style allows the element to render.
Try this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head></head><body>
<style type="text/css">
input[type="text"]:focus {
border: none;
background: transparent;
/*background-color: blue;*/
}
#elem528 { position:absolute; left:155px; top:164px; width:60px; height:20px; }
#elem529 { position:absolute; left:218px; top:164px; width:40px; height:20px; }
</style>
<img src="xxx.png" alt="" width="1000" height="1000">
<input id="elem528" maxlength="7" type="text">
<select id="elem529"></select>
</body></html>
As bobince observed, it's an IE7 bug. I've sometimes found it convenient to solve it by adding a value=" ". Use as many non-breaking spaces as required to make the clickable area big enough. Depending on your app, you might need to strip these later.
background-image:url(about:blank);background-color:transparent;
Had the similar issue -> IE8 textbox was not editable (when wrapper of my App has position:absolute). Click worked only in the border. Filled with color and transparent also did not work. With the following doctype change the issue is fixed.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Source : http://www.codingforums.com/showthread.php?p=1173375#post1173375
Actually in my case it was like
text-indent: -9999px
I used to remove the text, do not do that and it is clickable again.
It may seem strange but you should try explicitly specifying the z-index of the elements involved. This should force the input to render on top of the element with the background color/image applied to it.
It seems though that even with the transparent gif trick, if you set background: transparent anywhere else in your CSS, for actual web browsers, it triggers the IE7 bug and you don't get a cursor on hover and can't easily click into the input box.
this is an awesome question. I would never have been able to figure out what was going on without this post. My solution though was to use rgba(0,0,0,0) instead of transparent gif.