This is irritating. I am simply trying to set some basic inline styles and it is not working.
<td style="text-align: center; background-color: Black;">
</td>
The only thing is that I am using DataTables API. None of the styles set seems to work there.
try this,
<td style="text-align: center !important; background-color: Black !important;">
</td>
Related
I have a table where one of the cells is like this:
<td>
<div class="table-wrapper">
<table class="inner-table">
<!--content-->
</table>
<div>
</td>
The div is there so I can put a border around the table, with a gap of 10px. As it displays, though, the div is the entire width of the enclosing td. What I would like is for it to be just the width of the table it wraps (plus margin, to be specified). I can't figure out the CSS to do this, simple though it no doubt is, although I've got it working with Javascript - but I would prefer to do it using CSS, if possible. I had hoped setting width:auto for the div would work, but it makes no difference,
One way is to use inline-block
<style>
.table-wrapper {
border : 1px solid black;
padding : 10px;
display : inline-block;
}
</style>
<table width="400px">
<tr>
<td>
OUTER
</td>
<td>
<div class="table-wrapper">
<table class="inner-table">
<tr><td>INNER</td></tr>
</table>
<div>
</td>
</tr>
</table>
I have no problem getting this to work in Firefox. The program is that Chrome hides the text below the bottom of the input box. I think Chrome is only using the body tag's font and height and ignoring class completely as a stupid thing with stupid values that it thinks is not valid because it results in a super thin input box, which is by design. The user is only suppose to put in " _ " to "underline" the letter.
NOTE: Flex boxes do not work because Flex box is all about the content moving to fit the screen. I am trying to do something more akin to a Word Find where the user would simply put a "=" in the in put box, to indicate that they are underlining the letter. I need the input boxes and the letters to line up both Vertically and Horizontally.
UPDATE:
Flex box will wrap to the next line after you've closed your screen enough. I do not want a code that thinks for me. I know where I want things. Besides, Flex boxes do not make INPUT boxes allow input that shows up! Flex boxes do NOT have a thing to do with input boxes. The problem is that Chrome needs a HACK to force its God Code to stop playing God on my page. This is why I think I will just throw out Chrome and just use Firefox. At least Firefox actually ALLOWS MY CSS instead of ignoring it because IT thinks that IT knows best!
Things I have tried:
Changing Font size both increasing and decreasing the size.
Commenting out/not commenting out height, vertical-align, line-height values.
Thanks!
EDIT: The HTML and Updated CSS, and gave the JS too.
<tr>
<td> </td>
<td class="grey"> Q </td>
<td class="grey"> A </td>
<td class="grey"> F </td>
<td class="grey"> O </td>
<td class="grey"> U </td>
<td class="grey"> R </td>
</tr>
<tr>
<td> </td>
<td><input class="zthin" type="text" name="c1" size="1"> </td>
<td><input class="zthin" type="text" name="c2" size="1"> </td>
<td><input class="zthin" type="text" name="c3" size="1"> </td>
<td><input class="zthin" type="text" name="c4" size="1"> </td>
<td><input class="zthin" type="text" name="c5" size="1"> </td>
</tr>
CSS Updated:
BODY {
background-color: #000000;
background-image: url(/w5jyz84kw0dle38f19s0xceydkoyjs/velvela/gaming/2/word/xw/xwcss/ngc3.jpg);
background-repeat: repeat-y;
background-position: top left;
border: 0px; height: 100%; width: 100%;
margin: 0px 0px 0px 0px;
}
input.zthin {
background-color: #c1c1c1;
border: 2px solid #0000ff;
font-size: 10pt;
height: 10pt;
line-height: 10pt;
padding:0px;
width:20px;
z-index: 1;
}
JS:
<script type="text/javascript">
function jyzcrossWord(){
if (document.form.c1.value=="-"
&& document.form.c2.value=="-"
&& document.form.c3.value=="-"
&& document.form.c4.value=="-"
&& document.form.c5.value=="-"
)
alert("Congratulations! All is correct!")
else {alert("Not correct. Please check your answers.")}
}
</script>
Lastly, when I put '-' into the input box, I do not see it at all. If put 'm' I only see the upper half of the 'm'. In Firefox, it shows up properly. Also, class grey does not matter, as that part of the css was not the issue. Thanks!
Driving myself nuts here!.
Firstly can I just clarify that it is no longer necessary to prefix border radius eg with -moz-. But is it good practice to do so in case an old browser is employed?
Secondly I accept that in employing a border radius inside a table demands that border-collapse is not collapse I also believe that border-spacing should not be 0.
The following draft CSS & HTML creates nicely rounded table elements in all browsers except mozilla where for some reason the table is rounded the th is rounded BUT the td's are all square.
Fire bug reports that the radius is applied. Indeed if I place a background colour on td I can see that this background is rounded. But it still displays the remainder as square.
Any thoughts ???
/* borders */
#booking_Form_Wrapper{
border: 0px;
padding: 0px;
margin: 0px;
}
#booking_Table{
width: 300px;
height: 400px;
background-color: #a5a5a5;
border-radius: 14px;
border-spacing: 6px 6px;
}
#booking_Table th{
border-radius: 10px;
}
#booking_Table td{
border-radius: 10px;
}
/* other styles */
HTML
<table id="booking_Table">
<thead id="booking_Title">
<th>
Booking
</th>
</thead>
<tbody>
<tr id="booking_Session">
<td>
<a>Class - Level</a><br />
<a>Day and Date</a><br />
<a>Start Time - End Time</a>
</td>
</tr>
<tr id="booking_XXXXXXX">
<td style="border-radius: 6px;">
<label>Do you want to XXXXXXXX</label><input type="checkbox"/>
<label>XXX</label><input type="radio" name="XXX" value="b">
<label>XXX</label><input type="radio" name="XXX" value="s">
<label>XXX</label><input type="radio" name="XXX" value="r">
</td>
</tr>
<tr id="booking_Cancel">
<td>
<P><span>Cancellation Policy</span> - xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</P>
</td>
</tr>
<tr class="form_Footer">
<td>
<input class="form_Submit" type="submit" name="submit" value="Make Booking"/>
<input class="form_Cancel" type="cancel" name="cancel" value="Cancel"/>
</td>
</tr> <!-- form footer -->
</tbody>
</table> <!-- booking table -->
Here is the firebug computed style info for the first square td
I found the solution - I may not be stating this in the correct technical terms but the effect was caused in FF by giving the containing element a height. In my case the <tr>. The interesting thing is that none of the other browsers complain about this and round the <td> regardless. I think that this is connected to the mozilla developer notes which say that the radius is applied to the background of the element where the radius is applied regardless of whether a border is specified or not. The <tr> was not part of the background and so was not rounded.
Anyway don't give the container a height and everything good.
In the following example, I'm trying to get the text, input box and icon to align without over lapping.
http://jsfiddle.net/zGZM7/2/
Is there some css I'm missing?
Thanks
Edit, sadly I need a solution which will work with FF and IE6 :(
You have a lot of irrelevant CSS in your fiddle and the only relevant bit isn't getting called as it in your example requires to be under a ul with id #icons. Removing the ul#icons with the following:
.ui-icon {float: left; margin: 0 4px;}
Should make it work as you described.
example:
http://jsfiddle.net/niklasvh/kTFw7/
Split them in different tds
<table>
<tr>
<td>Foo</td>
<td><input type=text id=Foo class=textInput></td>
<td></td>
</tr>
</table>
or
add style float:left to the input
<td>
<input type=text id=Foo class=textInput style="float:left">
</td>
or like Niklas's idea
.ui-icon {float: right; margin: 0 2px;}
Like happens to all of us sometimes, I inherited some crappy code I have to fix.
We need to center our pages on widescreen machines, so we have a master page layout div like so:
.MasterLayout
{
width:1100px;
height: 100%;
position:absolute;
left:50%;
margin-left:-550px;
vertical-align:top;
}
I removed most of the detailed attributes for readability here, but here's how the table for the master page is laid out:
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%;">
<tr>
<td style="width: 100%" align="center" colspan="2">
</td>
</tr>
<tr>
<td colspan="2" style="height: 20px; background-color: #333;">
<asp:SiteMapPath/>
</td>
</tr>
<tr>
<td style="width: 86px; height: 650px; background-color: #B5C7DE; margin: 6px;" valign="top">
<asp:Menu />
<asp:SiteMapDataSource />
</td>
<td style="background-color:#ffffff; margin:5px; width:1000px;" valign="top">
<asp:contentplaceholder id="ContentPlaceHolder1" runat="server"/>
</td>
</tr>
</table>
When resizing the browser window, the horizontal scrollbar only reaches as far as the left edge of the <asp:contentplaceholder/> control, and the <asp:menu/> that's in the 86px wide <td> is hidden. How can I fix this problem? THANKS IN ADVANCE
Try centering the .MasterLayout using margin: 0px auto instead of the negative margin method.
While you're updating the code, you might also consider using divs instead of tables for page layout.
Put contentPlaceholder in a div and control the overflow with css overflow property of that div. I suggest you to use width of main block like #masterlayout, #sidebar in %.