I have been reading these forums for some time, but this is my first question :)
The question is related to styling tables. If you look at my page in Chrome, at the bottom left of my table and the bottom left <td> tag, I was able to hide the borders the using visibility:hidden; But, in Firefox, the <td> still shows these borders. I have found that Firefox doesn't like the visibility attribute.
http://allramhosting.com/new/shared-3/
.hide
{
visibility: hidden;
}
<td class="hide"> </td>
Does anyone know a way around this that will work in multiple browsers? I also tried border-color:white; in the <td> on <tfoot> and that almost works; it keeps the very bottom border line visible.
Use
.hide { border-style: none; }
or
.hide { border: none; }
on your tds or
.tableClass{ border: none;}
if your table has class tableClass.
Have you tried setting the border-width to zero?
Have you tried:
display:none
I find that works to hide things far better without side effects.
As an FYI I have found issues with proper size rendering when you start hiding "parts" of tables. Meaning that I have seen the browser (including chrome) not render the rest of the document properly or hang things off the end of the document when you hide parts of a table. If you hide the whole table it seems to figure that out fine.
I once worked around with the following trick:
Depends upon what you want to achieve in styling, but generally, setting relevant element's (color/background-color/border-color(in this case)) to 'transparent' usually works across browsers.
hope this helps someone.
Related
Throughout my website, I have many <table>s in which there is a specific column we want to have squeezed to it's minimum possible space (without having it's text wrapped). Other sibling cells share the rest of the space automatically.
I'm using the following trick and it works in all browsers except IE7-. (At this time I actually only care about IE7)
table {width:100%;}
table td.min-col {white-space:nowrap; width:1px; }
jsFiddle link: http://jsfiddle.net/vm8gc/23/
If you try this in IE7 you will notice it acts differently (not expected behavious). -- see screen capture below.
Can anyone think of a fix for IE7 to achieve this?
Attachments:
All other browsers:
IE7:
CSS 2 Version
For some reason Internet Explorer seems to ignore white-space on TDs. Best way around the problem is to use a span inside the TD.
<td><span style="white-space: nowrap;">This should not wrap</span></td>
As usual IE doing it's own thing ;)
For info on white-space support, see here:
http://www.quirksmode.org/css/whitespace.html
PRE Version
An alternative which would have better support with older browsers would be to do the following:
<td><pre>This will not wrap</pre></td>
And then have your pre element set-up to either be styled in the same way as your normal text or enable it to inherit style from it's parents (inheriting probably has less support that just specifiying the style):
td pre { font-family: inherit; font-size: inherit; color: inherit; ... }
Can you have a look at my code and please tell me why the hover is not working, thanks!
<style>
#moreDiscussHome:hover{
background-color: #ffffff;
}
</style>
<a id="moreDiscussHome" style="color:#f1f7f8;background-color:#12a1b7;" href="">more discussions</a>
Well, as soon as display: none; is applied, you are no longer hovering the element because it is not there, so it will basically flicker constantly or do nothing.
Try opacity* instead perhaps:
#moreDiscussHome:hover {
opcaity: 0;
}
Note that the element still retains it's space in the layout with this, which may not be what you want... but I'm honestly not sure what you're trying to achieve with this.
Side note: There's no reason not to move those other inline styles to a stylesheet.
This doesn't work: #moreDiscussHome:hover{ background-color: #ffffff; }
EDIT: I strongly urge you to move all inline styles to a CSS file. If for no other reason, to avoid some of the issues you already seem to be having with trying to apply background colors. A shortcut might seem easier at the time, but as the saying goes: "Shortcuts make for long delays". (In other words, don't do it)
* visibility:hidden will respond to :hover the same as display:none, so it won't work either. Thanks to thirtydot for the tip.
I've got quite common IE8 issue with my site. IE8 renders my page differently than other browsers, which is quite annoying. I'd love if someone could help, please!
I've tried to give IE8 its own stylesheet but it doesn't seem to work.
Here's the page with the issue:
http://www.routeqr.com/toimex/tuotteet
Scroll down to picture section and you'll see that the first colum and the second column got too much space between them.
The TH-tags are also rendered wrong.
IE doesn't render margins properly there, just check the same page with Firefox or with other browser and you should see the difference.
I'd appreciate it a lot if someone could help me, I'm so lost myself.
HTML-code
<table class="tuotekuvat">
<tbody>
<tr>
<th><a name="kannakkeet">ยป Kannakkeet</a></th>
</tr>
CSS
.custom .tuotekuvat th {
float: left;
margin-top: 15px;
margin-bottom: 15px;
padding: 10px;
background-color: #333333;
}
The table is not coded correctly, you have one th (cell) with no colspans specified, and in the table itself some rows have 6 cells (columns) and some have 5. any browser may have trouble evening that up ;)
Then you are floating the single th - IE 7 and below don't understand float on a table cell/header element and will be forcing the whole of the 1st column to be as wide as the header link
If I can suggest you stick to one method or another, either floating a header outside the table, or even putting it in it's own <thead> element - and then using table-layout: fixed on the entire table so that the columns are forced to be of equal width. that should help even it up.. but mainly if you decide that the table is to have six columns (whether all of them are used or not) then for example that single th should be <th colspan="6">
get the table HTML right first and the rest should perfectly OK across browser if you then want to make it look like there's gaps between table rows and table headings you can pad the th.. but I don't really see a need for it to float outside the table structure
Remove the left and right padding:
padding: 10px;
becomes
padding: 10px 0px 10px 0px;
Hope this helps!
N.S.
In regards to empty <td> cells. It used to be that you needed at least an to have it render properly across browsers. I think that may no longer be case with current versions.
As an aside, I would recommend using tools like firefox webdeveloper and firebug . Webdeveloper has a plethora of nice features along with a link to the w3c Validator which has helped me find malformed html.
Suppose I have something like this:
<table class="myTable">
<colgroup span="2" /><colgroup span="2" />
<tr><td>........</tr>
And so on...
Then on the stylesheet:
table.myTable colgroup
{
border-right: solid 5px #ffffff;
}
The point being that I want some space to separate colgroups in my table.
It's working fine in Firefox and IE8. I already read everywhere that IE7 does not implements borders for colgroup, but here is a call to your imagination and creativity, does anyone have an idea of how I could achieve a similar result in IE7, without adding a class to every cells or generating empty cell...
Here's an exemple of the result in Firefox 4 : http://imageshack.us/photo/my-images/853/capturezz.png/
The headers generated can be litterally of any form, some case are really complex. This is why the colgroup solution is interesting, since it is quite simple to calculate the needed span.
Every suggestions will be appreciated.
Don't have much experience in IE7, but this might work:
You can check if it is possible to set a background-image. And align that image (with the desired color) to the right side of the cell, making some kind of a fake border look.
In chrome setting a border on a colgroup doesn't work eighter. Setting a background-image does work.
Greetz,
XpertEase
In order to use the border property in tables, you must set the following rule. If not you wont get them
table {
border-collapse:collapse;
}
Then you will get borders working as you pretend
Ive used the following css code to align my form elements:
form { position:relative; }
form input { position:absolute; left:11em; }
However, the textarea element is not aligned correctly with the rest of the elements. I tried the following, but that didnt work
form input,textarea { position:absolute; left:11em; }
Any way to fix this ?
Thank You.
No-one is going to be able to solve this without seeing the current result; I generally avoid absolute positioning as a rule unless doing something particularly complicated like tooltips, can you not achieve what you want using margins?
It looks like this is a Firefox, em-specific bug.
I think it's related to this bug about Firefox textareas and its font: Mozilla 3.0.8 and Chrome height in em bug workaround
Your positioning should work if you add the following code:
form { font: 11px Arial; }
form textarea { font-size: 100%; font-family: inherit; }
Also, another workaround is using pixels instead of em's.
This does not address your question, but why not use "text-align"? Absolute positioning to place form elements sounds a bit odd in my ears.
If you must use absolute positioning in this way, have you considered using margin instead of left? As the others have pointed out, it's difficult to troubleshoot your problem without more information.