What is the default CSS of a textarea? - html

I am trying to make an ordered list go by the side of a textarea, such that it has line numbers, but I can't seem to make the textarea and the ordered list line up. I don't know the default CSS for a textarea that I could use on the ordered list, where could I find the default CSS of a textarea?

You can check default values from browser developer console.
When you click an HTML tag, It will show all applied CSS to your selected element.
Also you can use this link. It has all elements and default styles.
Click
For example, textarea has no default styling on it.
You mentioned log outing your element to console and all values seems empty string. It is because textarea has no default styling on it.

For this specific case, if you want the textarea to match up with something, like the lines, you would have to manually set the styling of the textarea and the styling of the thing you want to match with it. If you like the textarea for the font where every character is the same width, the consolas font is a good font to use.
CSS:
#objtextdiv{
background-color:#eecccc44;
position:relative;
top:0;
padding:0 0 0 30px;
left:0%;
height:100%;
}
#objtext{
font-family:"Lucida Console",Monoco,monospace;
font-size:14px;
position:relative;
top:0;
left:0;
width:100%;
height:99%;
background-color:#eeeeee44;
resize:horizontal;
outline:none;
border:none;
}
#linenumbersdiv{
font-family:"Lucida Console",Monoco,monospace;
position: absolute;
top:0;
left:0;
width:40px;
height:100%;
background-color:lime;
margin-left:-10px;
padding:0px;
margin-top:0;
margin-bottom:0;
padding-left:0;
overflow-y:hidden;
overflow-x:hidden;
}
#linenumberslist{
font-size:14px;
display:block;
margin-top:5px;
margin-bottom:0;
margin-left:10px;
margin-right:0;
}
HTML:
<div id="linenumbersdiv">
<ol id="linenumberslist">
<li id="theone">what</li>
<!--li>ahh</li>
<li>AHHHH</li-->
</ol>
</div>
<div id="objtextdiv">
<textarea id="objtext">
etc etc etc
</textarea>
</div>

Related

Header not changing style using CSS, however other div is

I am trying to get my header background to change color using css, however I am unable to change anything other than the position of my nav <div>.
https://jsfiddle.net/70d40nnt/2/
<style type="text/css">
#header {
background:#7D72F7;
text-align:center;
padding:5px;
}
.clearfix {
overflow: auto;
}
#nav {
line-height:30px;
background-color:#eeeeee;
height:200px;
width:150px;
float:right;
padding:5px;
text-align:center;
}
#section {
width:350px;
padding:10px;
float:left;
}
</style>
Remove the <style></style> from your stylesheet and your jsfiddle works. Indeed, they are needed only for css directives inside a html page.
Just remove the <style> tags from the "CSS" box (and <body> from the "HTML" one), and it will work.
remove the style tag in css block in js fiddle. JS fiddle doesn't need style tag to be defined. Directly write the styles.

I'am using css :hover option but my code is not working

I'am currently working some code for my website and i came to this problem.I want to change background of paragraph on div's hover but it doesn't seems to works.I found some tutorials and I don't know what is wrong with my code
<style>
.more_news{
padding:10px;
border:1px double lightgray;
width:170px;
height:100px;
overflow: hidden;
margin:0px;
}
.more_news img{
width:100%;
height:100%;
}
.more_news p{
color:green;
position:absolute;
display:block;
background:gray;
margin-top:-40px;
width:170px;
height:40px;
}
.more_news div:hover ~ .more_news p{
background:red;
}
</style>
<div class="more_news">
<img src="images/proba1.png" class="more_news_img">
<p class="more_news_p">Hello</p>
</div>
All you need to do is select the class and element like so:
p.more_news_p:hover {
background:red;
}
No need for ~ or any other combinator/selector
http://jsfiddle.net/7H4XW/
Or, if you want to change the background when you hover over the entire div you can do something like this:
.more_news:hover p.more_news_p {
background:red;
}
http://jsfiddle.net/qfb9Z/
"I want to change background of paragraph on div's hover but it
doesn't seems to works."
You'd just use:
.more_news:hover > .more_news_p {
background:red;
}
You were using the general sibling selector ~, which selects sibling elements after that element.
whereas you actually want to target the paragraph which is a child element - hence the use of the direct child selector (>)
jsFiddle here

HTML/CSS: link not clickable

This is undoubtedly a stupid error, but I am going crazy trying to find it. In the following code for a calendar, links if there is an event and also links for today are not clickable.
Note I have substituted www.google.com for the hyperlink. In the actual app it points to the daily view of calendar.
Would be extremely grateful if someone could spot the error. Thank you.
Links for 2, 3, 4 and 7 work but links for 5, 6 and 8 do not work.
The jsfiddle is here.
Here is the same code as in the fiddle:
CSS:
div.event {
position:relative;
vertical-aligh:top;
z-index:3;
top:25px;
text-width: 70px;
}
a.event {
position:relative;
vertical-align:top;
z-index:3;
// top:-15px;
text-width: 70px;
}
a.day-number {
vertical-align:top;
background:#999;
z-index:2;
top:0px;
padding:4px;
color:#fff;
font-weight:bold;
width:18px;
text-align:center;
float:right;
}
a.theday-number {
vertical-align:top;
background:#999;
z-index:2;
top:0px;
padding:4px;
color:#fff;
font-weight:bold;
width:18px;
text-align:center;
float:right;
background-color:red;
}
HTML:
<table>
<tr class="calendar-row"><td class="calendar-day"><span style="position:relative;height:400px;width:70px;">2<p> </p><p> </p></span></td>
<td class="calendar-day"><span style="position:relative;height:400px;width:70px;">3<p> </p><p> </p></span></td>
<td class="calendar-day"><span style="position:relative;height:400px;width:70px;">4<p> </p><p> </p></span></td>
<td class="calendar-day"><span style="position:relative;height:400px;width:70px;">5<div class="event">6:00 PM<br>drinks</div></span></td>
<td class="calendar-day"><span style="position:relative;height:400px;width:70px;">6<div class="event">Test</div></span></td>
<td class="calendar-day"><span style="position:relative;height:400px;width:70px;">7<p> </p><p> </p></span></td>
<td class="calendar-day"><span style="position:relative;height:400px;width:70px;">8<div class="event">6:00 PM<br>party</div></span></td>
</tr>
</table>
You need to move the <p> and <div> tags out of the <span>
<p> and <div> are block-level elements and a <span> is an inline element, and you can't have a block element inside an inline element.
When using position:absolute;and links together, there are issues with z-index. In order for the link to work, add a high z-index value,
For example,
z-index:9999999;
Instead of div within a span use other html element. It seems this is the problem. If you remove those divs, elements are clickable..
Add a display block to your span inside your td calendar-day and it will work.
I see the links are clickable if you remove the <span></span> tag which you have placed inside <td></td>. I suggest you add styling inside <td> instead of using <span>.
Try. It might work :)
From what I can tell, you have some elements overlapping one another. Part of the problem is that you are setting width on an inline element (span).
Discussed here on stackOverflow:
CSS - width not honored on span tag
I added the display: inline-block property to your span tags and also added some background color just for contrast here:
<span style="display: inline-block;position:relative;height:400px;width:70px;">
http://jsfiddle.net/6YRRF/16/
All your links seem to be working now.
Hope this helps!
You can either remove <p> tag or provide css(display: inline-block) to <p> tag.
For those who didn't address their problem out of the answers provided here, check html element or it's parent element to don't have this CSS property:
pointer-events: none;
Please remove the span wrap inside td. And Yes! correct your css.
<style>
div.event {
position:relative;
vertical-align:top;
z-index:3;
top:25px;
width: 70px;
}
a.event {
position:relative;
vertical-align:top;
z-index:3;
// top:-15px;
width: 70px;
}
a.day-number {
vertical-align:top;
background:#999;
z-index:2;
top:0px;
padding:4px;
color:#fff;
font-weight:bold;
width:18px;
text-align:center;
float:right;
}
a.theday-number {
vertical-align:top;
background:#999;
z-index:2;
top:0px;
padding:4px;
color:#fff;
font-weight:bold;
width:18px;
text-align:center;
float:right;
background-color:red;
}
</style>

Edit link on hovering

How to show an edit link on the profile picture just like the one on facebook but positioned at the right-top corner of the image?
HTML Code:
<div class="topgrid">
<a href="#"><img src="C:/images/users/image1.png"/>
<span class="image" id="image">Edit Picture</span>
</a>
</div>
CSS Code:
.image {
color:#033;
font-size:12px;
background:#FFF;
display:none;
top:0;
right:0;
width:80px;
position:absolute;
}
.topgrid:hover .image{
display:block;
cursor:pointer;
}
.topgrid {
background-color:gray;
height:100px;
width:100px;
position:relative;
}
​
I am here using the fixed width of the span element, but when I don't specify the width of the span element, the element doesn't appears at the absolute top right-corner . So i have to adjust the right property as:
right:13%;
which is not the standard way to do it. I need your valuable suggestions!
I am also attaching the tried out fiddle here!
http://jsfiddle.net/nQvEW/81/
Try this Fiddle
css:
.image {
position:relative;
color:#033;
font-size:12px;
background:#FFF;
display:none;
top:0;
}
.topgrid:hover .image{
display:block;
cursor:pointer;
position:relative;
width:auto;
background:none;
top:-205px;
}
.topgrid {
text-align:right;
width:300px;
height:200px;
margin:20px;
}​
Is this what your looking for ?
The span element has no fixed width and remains in the top-right corner!
.image {
color:#033;
font-size:12px;
background:#FFF;
display:none;
width:auto;
float:right;
}
.topgrid:hover .image{
display:block;
margin:0 auto;
cursor:pointer;
}
.topgrid {
background-color:gray;
height:100px;
width:100px;
position:relative;
}
​
Here's the updated Fiddle: http://jsfiddle.net/b6Yw6/15/
What i have done is :
made the span width to auto and gave float:right.
Removed position:absolute;top:0;right:0 property from span. Add them if it causes browser compatibility problems
You can also do
.image{
background:transparent;
color:white;
font-weight:500;
}
to make it look good!
Here's the new Fiddle as per your request! Tell me if there's anymore changes to be made.
First step is to have the image be a background image rather than a straight-up <img> tag. This will allow you to add child nodes.
Add one such child node: the edit link. Make it appear where you want it, ignore the "only when hovering" part for now.
When you're ready, add display:none. Then, in the :hover style for the container, (ie. #container:hover>#editlink), add display:block. Done.
Or you can use the dynamic html tag generations every time on hover

The <span> Tag with {float:right] Stretches Container in IE7

I have an A tag button with Span inside to hold icons. It works well in all browsers. WHen I apply float:right to shift Span to the right side it also works fine in all browsers (Firefox, IE8+, etc.) except IE7 (I know... but I need to fix it).
<span> </span>Link
So, IE7 works fine when SPAN is floated left. However, once it is floated right it stretches the A tag container 100%.
I do not wish to change the structure of HTML, i.e. insert another span to handle IE7 only or move SPAN right of text, but I do want to fix it with CSS though what I tried did not work well for me yet.
Test case: http://jsfiddle.net/QeQSQ/1/ (IE7 works OK when SPAN is on left side)
Test case: http://jsfiddle.net/QeQSQ/2/ (IE7 does NOT work because SPAN is on right side and container is stretching)
Position it absolutely instead (example):
a{
display:inline-block;
border:1px solid red;
height:auto;
width:auto;
padding:5px;
position:relative;
padding-right:1em;
}
a span{
position:absolute;
right:0;
display:block;
height:14px;
width:15px;
}
Or, another [better] solution would be to add the character via :before and :after pseudo-elements (example):
Link
Link
a{
display:inline-block;
border:1px solid red;
height:auto;
width:auto;
padding:5px;
}
a.site:before {
content:"» ";
}
a.account:after {
content:" »";
}
Note: This doesn't work in IE7 at all (no additional text appears), but it also doesn't introduce any bugs.
remove the float:left and instead give the span display inline-block with an ie7 workaround:
a{
display:inline-block;
border:1px solid red;
height:auto;
width:auto;
padding:5px;
}
a span{
display:inline-block;
zoom:1;
*display: inline;
height:14px;
width:15px;
}​
updated fiddle here: http://jsfiddle.net/QeQSQ/5/
also an article about the ie7 inline-block workaround: http://flipc.blogspot.co.uk/2009/02/damn-ie7-and-inline-block.html