I'm creating a contentEditable div within a table cell to capture user input. The problem is, when I align the text to the right IE8 does not show a text input caret. Every other browser I've tried works. It works if I don't use "text-align: right". It also works if the caret is anywhere other than the far right of the div. Here's some sample code:
<html>
<body>
<table width=400 border=1>
<tr>
<td>
<div contentEditable=true style='outline: none; text-align: right;'>
</div>
</td>
</tr>
</table>
</body>
</html>
What am I doing wrong? If nothing, how can I get around this?
Right padding fixed the problem.
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 a div with a small width and an overflow visible. I have inside a larger table with only one cell and a text inside:
<div style="overflow:visible;width:0px;">
<table>
<tr>
<td style="border:solid">
A small text with spaces...
</td>
</tr>
</table>
</div>
I would like the width of the table to be set automotically as the text width but without breaking line. i.e. I would like to have the same result I would have if I writed only:
<table>
<tr>
<td style="border:solid">
A small text with spaces...
</td>
</tr>
</table>
How can I set the table to not be "of minimum width" without specifying a precise witdh?
I think your answer is here: Object larger than outside div
It uses the position absolute to remove the stipulations of the containers surrounding it. The one issue then is positioning, but You can fix that with setting the left and top CSS rules.
jsfiddle example
<div style="overflow:visible;width:0px;">
<table>
<tr>
<td style="border:solid;position:absolute;">
A small text with spaces...
</td>
</tr>
</table>
</div>
<div style="overflow:visible;width:0px;padding-top:30px;">
<table>
<tr>
<td style="border:solid;white-space:nowrap;">
A small text with spaces...
</td>
</tr>
</table>
</div>
EDIT
As said in a comment above by "insertusernamehere": "white-space:nowrap;" works as well.
NOTE:
Tables are not the best thing to use. Use DIV's and set the `"float:left/right;" CSS style so that they mimic tables. It is easier to code (for me at least, it takes some getting used to at first.) but it is much more browser friendly and you have more room to play in.
I have a div to the left of a page that contains links to different divs on the right. I want the left div to stay fixed when scrolling the page but also show next to the div I jump to. the problem is that when i click on a link it will jump to the div but the navigation div does not render until i mouse over it piece by piece and it seems to break the page. any ideas?
Navigation div
<div class="tableoutline fixed">
<table class="notableoutline glossary">
<thead>
</thead>
<tbody>
<tr>
<td class="datatd">
{{data.learn.recommendedQuestions.title}}
</td>
</tr>
<tr>
<td class="datatd">
{{process.title}}
</td>
</tr>
</tbody>
</table>
</div> <!-- End of tableoutline -->
content div
<div class="contentbox bottomMargin" id="process" name="process">
<h1>{{data.learn.process.title}}</h1>
<div class="questionsAndAnswers">
<h2>{{process.question1}}</h2>
<p>{{process.answer1}}</p>
</div>
</div> <!-- End of Content Box /-->
to make an element fixed:
#element {
position: fixed;
}
if you want it to be on top all the time, use z-index
This is sort of a general web development question that I need some experts' advice on. This is probably quite a no brainer for some of you, but I am having trouble getting this to display properly.
I have a database table set up where each entry has 5 text fields, and one image. What I want to do is use the repeater to display the text on the left hand side of the div, and the image on the right hand side of the div (basically aligned with the center of the text).
Company Name
Description1
Description2
Description3 Image goes about here.
Description4
Description5
I have the repeater all configured properly and ready to go, it's displaying the text just fine in a well formatted way. However, I'm having trouble getting that image to display properly. Do I need to use text wrapping here to accomplish this? I'm pretty stuck and don't know where to proceed. I can post my ASP.net code here if desired.
Thank you so much in advance. Very helpful site for new programmers.
I'm assuming you can't set a fixed height on your column divs? Is so, and if you're happy to use an HTML table (many aren't) then your life will be much simpler than trying to vertically align an image inside a floated div using CSS. Try this:
<!DOCTYPE html>
<html>
<body>
<table style="width:960px; margin:auto 0;">
<tr>
<td style="width:75%;">
<asp:repeater...>
</asp:repeater>
</td>
<td style="width:25%;" valign="middle">
<asp:Image .../>
</td>
</tr>
</table>
Notice the valign="middle" attribute on the right td. Although valign is deprecated in HTML5, it still works in all modern browsers and all supported versions of IE.
NOTE: many will argue that tables aren't SEO friendly or that tables aren't intended for this, plus it's not strictly html5 compliant, so you'll need to way that up. Personally, because it just works and solves a simple problem that CSS can't without silly hacks, I'd use it without worrying too much.
If you want to have the div with the text inside to the left and the image to the right, you can use "Float: Left" to the div with the text inside and "float:right" to the div of the image. This should look like this :
<div style="float: left;"> <--- float:left
<table>
<asp:Repeater ID="TournoiAvenirRep" runat="server">
<ItemTemplate>
<tr>
<td>...</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>
</div>
<div style="float:right"> <--- float:right
<img src='...' />
</div>
And if you want to have an other div BUT not on the same line , you must add a "clear:both" to the new div :
<div style="float: left;">
<table>
<asp:Repeater ID="TournoiAvenirRep" runat="server">
<ItemTemplate>
<tr>
<td>...</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>
</div>
<div style="float:right">
<img src='...' />
</div>
<div style="clear:both"> <------ here clear both
...
</div>
Hope this will help you ! , vinc
EDIT : If you want learn more about css positioning and float you can go to W3 school, they have some nice tuto about it.
This is a CSS issue. You'll need two floated divs, something like this:
<div class="clearfix">
<div style="float:left; width:75%;">
<asp:Repeater ID="MyRepeater" runat="server" [etc] />
</div>
<div style="float:right; width:25%;">
<asp:Image ID="MyImage" runat="server" [etc] />
</div>
</div>
If you want specific examples, please see http://www.vanseodesign.com/css/vertical-centering/.
I have an issue that only seems to affect Safari and Chrome (aka WebKit). I have an overlay that fills the whole screen, and two table rows that I would like to appear on top of the overlay. Everything else on the page should be displayed below the overlay.
The problem is that Safari only displays one of the table rows on top. Firefox correctly displays both on top. I can't seem to find the root cause of this issue in Safari, but I know I'm not the only one who has had a "Safari positioning issue that works in Firefox".
What should I do in order to make this work in both Firefox and Safari/Chrome?
<body>
<style>
.ui-widget-overlay {
display: block;
position: absolute;
width: 100%;
height: 100%;
background: #000;
opacity: 0.5;
}
</style>
<table>
<tr style="position:relative; z-index:1000;">
<td>Displays on top in Firefox only</td>
</tr>
<tr>
<td>
<div style="position:relative; z-index:1000;">
Displays on top in both Safari and Firefox
</div>
<span class="ui-widget-overlay"></span>
</td>
</tr>
<tr>
<td>Displays below overlay</td>
</tr>
<tr>
<td>Displays below overlay</td>
</tr>
<tr>
<td>Displays below overlay</td>
</tr>
</table>
</body>
Update: Apparently the code sample above displays correctly. However, that is just a sample. It's not the actual code. The HTML is identical, but I am applying the styles dynamically with JavaScript.
Maybe the issue lies with jQuery? I'm using this line to add the positioning to the first table row:
$(firstTableRow).css('position', 'relative').css('z-index', '1000');
In Firefox (using Firebug) I can see that the style is being applied, however in Safari (using Web Inspector) it says that the "computed style" of that table row is statically positioned with a z-index of auto, even though the "style attribute" styles say that the position is relative and z-index is 1000.
According to the CSS 2.1 specifications:
The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.
I'm assuming that Firefox implements it one way, and WebKit implements it a different way and both are correct since it is undefined. The moral of the story here is not to specify a position on table elements.
I was able to get it to work by wrapping the contents of each cell with a div and positioning the div.
<table>
<tr>
<td>
<div style="position:relative; z-index:1000;">
Displays on top in both Safari and Firefox
</div>
</td>
</tr>
<tr>
<td>
<div style="position:relative; z-index:1000;">
Displays on top in both Safari and Firefox
</div>
<span class="ui-widget-overlay"></span>
</td>
</tr>
<tr>
<td>Displays below overlay</td>
</tr>
<tr>
<td>Displays below overlay</td>
</tr>
<tr>
<td>Displays below overlay</td>
</tr>
</table>