Mousing over a link in the sidebar works; therefore the sidebar is on top.
Issue description
Commends ending under the sidebar cannot be deleted.
What I've tried
Workaround: using Stylebot to set a user-side CSS rule:
td.comment-text {
width: 500px;
}
Question
My attempts to target have failed. Would someone help me find the right target and rule?
!Additional info
This is not necessarily a stackexchange bug. I use font scaling because it prevents horizontal scrolling, which is very inconvenient for low-vision users.
UPDATE/Resolution
tr td textarea{
width: 475px;
}
Well, the default styles have a rule like this:
.comments {
width: 660px;
}
Maybe try overriding that?
.comments {
width: 500px;
}
Update
The comments textarea specifies a cols attribute that makes it too wide, as well. This should shrink it down.
.comment-form textarea{
width: 475px;
}
Related
I created a site on my blog where I'm putting yt videos. Unfortunately the container of this site goes left and I have no idea why. It doesn't happen to any other site of the blog.
I'm using Virtue theme - https://www.kadencethemes.com/product/virtue-free-theme/
Here's the link to the site I have problem with: http://mlodziez-wks.slask.pl/multimedia/wideo/
I would be more than thankful for help.
This is happening because you added that CSS in your stylesheet
.wideo {
width: 300px;
heignt: 169px;
display: inline-block;
}
Which class is getting called in your "body" tag. And you are forcing your body to stay in 300px width only. Therefore you need to remove it or replace it with
.wideo {
width: 100%;
heignt: 169px;
display: inline-block;
}
it is because you have the CSS class wideo iny our body element, that is adding the following CSS style to it:
width: 300px;
heignt: 169px;
display: inline-block;
You need to remove this class from the body, it is defined outside a CSS file, so it must be added over some theme customisation or similar stuff.
Set your css to
.wideo {
width:100%;
height: 169px;
display: inline-block;
}
This will solve your problem.
Question 1: css doesn't style div id
In my html file I've created a div id for a top bar (with text + social links). In the related css file I've created the corresponding style
#topbar {
height: 40px;
width: 100%;
background-color: #383433;
margin: auto;
overflow: hidden;
}
#topbar p {
color: white;
}
<div id="topbar">
<p>Text text text</p>
</div>
The text becomes white, but the height, background color etc. isn't coming through. Am I overlooking something?
Question 2: can I style an image as part of a div id?
Html:
<div id="scroller">
<img src="images/scroller-1.jpg">
</div>
When I add:
#scroller {
max-width: 100%;
height: auto;
}
The image doesn't get responsive / resized.
If I add:
#scroller img {
max-width: 100%;
height: auto;
}
It works.
So elements part of a div-id don't inherit the parent-style?
First of all: If you have two questions, its better to post them seperated. It is cleaner this way.
To question 1: It is working actually. You can run your pasted code snippet. Likely, some other style is overwriting it. Since we cant know which one it is, the only advice i can give you is to write !important behind your css code like this:
height: 40px !important;
This way, nothing can overwrite it except styles that also have an !important tag.
To question 2:
So elements part of a div-id don't inherit the parent-style?
Well, it depends. You can set the font-color of a div then the headlines and p tags in this div will have the same color unless you specify it otherwise like
#scroller{
color:blue;
}
#scroller p{
color:red;
}
Images dont inherit from divs. They are by default always the full image size so you have to specifiy their size seperately if it should be the full width at all times.
If it was helpful to you, pls mark the answer as accepted :)
I'm trying to have a block-level input-append, where the input bar takes up all the space other than the button.
I got this working with a <button> or <span>, but once I switched the tag to an <input>, I started having styling issues again. However, the <input> tag is required.
I've include a Fiddle - HERE
I got it to work by doing this:
.input-append {
display: table;
width: 100%;
}
.add-on {
display: table-cell;
height: auto !important;
}
.input-bar {
display: table-cell;
width: 100%;
border-right-style: None;
}
.well{
padding-right: 58px;
}
I removed the nested selectors as you can't do that in regular CSS. (With Sass and LESS you can though).
I added "height: auto !important" to the ".add-on" selector. Although it's generally regarded not best practice to use "!important".
I added padding-right to the well of 58px which is the width of the GO! button, 39px, plus the well padding of 19px.
Edit: As #nicefinly pointed out, the height of the GO! button was still off. In Chrome I didn't see anything wrong, but in Firefox I could definitely see the height problem.
So, with all of his changes, I would also add that when modifying the well and add-on classes for example, this would change all the places where those standard Bootstrap classes are used and this is probably not want you want.
Instead, I would create separate classes for all of these custom classes so they work in this specific case and elsewhere it works as intended. For example, "add-on-button", "well-with-button", etc.
#CoderDave pointed me in the right direction with his suggestion - JSFiddle of #CoderDave's answer
However, I then noticed that the height was somewhat off. Instead, I set the button height manually - JSFiddle of my workaround
.input-append {
display: table;
width: 100%;
}
.add-on {
display: table-cell;
height: 30px !important;
}
.input-bar {
display: table-cell;
width: 100%;
border-right-style: None;
}
.well{
padding-right: 58px;
}
BUT THEN...
Testing in Chrome gave me strange results (not necessarily in the fiddle, but in my local environment). Therefore, instead of padding, I used the margin-left and margin-right where
margin-left = 17px on the input .add-on
and
margin-right = -55px on the .input-bar
However... After that, I noticed that the z-index was causing the .input-bar to block out the GO! button when the bar was in focus (i.e. I clicked into it).
Therefore, I set z-index
z-index: -1 for the well
z-index: 1 for the .input-bar
z-index: 2 for the .add-on
FINAL JSFIDDLE HERE!
This seems like a pretty hacky solution. If anyone has a better solution, please share.
I've set background-image on a couple of span elements, but they aren't showing up, I think because my height and width settings are being ignored.
HTML source:
<div class="textwidget">
<span id="starthere" class="sidebar-poster"></span>
<span id="#primarydocs" class="sidebar-poster"></span>
<span id="donate" class="sidebar-poster"></span>
</div>
CSS:
span.sidebar-poster {
margin-bottom: 10px;
background-repeat: no-repeat;
width: 160px;
}
span#starthere {
background-image: url(/betatesting/wp-content/themes/dynamik/css/images/brunelwantsyou180.jpg);
height: 285px;
}
span#starthere:hover {
background-image: url(/betatesting/wp-content/themes/dynamik/css/images/brunelwantsyou_hover.jpg);
}
span#primarydocs {
background-image: url(/betatesting/wp-content/themes/dynamik/css/images/brunelwantsyou180.jpg);
height: 285px;
}
span#primarydocs:hover {
background-image: url(/betatesting/wp-content/themes/dynamik/css/images/brunelwantsyou_hover.jpg);
}
span#donate {
background-image: url(/betatesting/wp-content/themes/dynamik/css/images/donatebutton.jpg);
height: 285px;
}
span#donate:hover {
background-image: url(/betatesting/wp-content/themes/dynamik/css/images/donateposter_hover.jpg);
}
None of the background images are actually visible.
In Chrome Developer Tools, Under Computed Style, these two spans do appear to have a background image. If I copy and paste the URL of this image, I see the image. Yet nothing is actually rendering.
[UPDATE - this part is solved, thanks] In Chrome Developer Tools, under Matched Rules, only the #starthere and #donate spans are actually picking up the background-image attribute. The #primarydocs span is not. Why not?
SPAN is an inline element. Which will indeed ignore such things. Try setting the display mode in your CSS to something like: display: block;
I think your spans need to have display:inline-block, an ordinary span will always have its 'natural' width and height.
Since a is display: inline; automatically it cannot take width and height attributes from CSS.
If you want to use the inline characteristic but without inner content (ie: <span>content</span>) and instead have a background image, use padding instead.
ie:
span {
padding: 10px;
}
but input the number of pixels you would need to show the image.
Solved it - you can't set height and width on span because it is an inline element. Switching to div solved it.
Phew.
If anyone knows how to debug CSS with better tools than guesswork, hope, Google searches and swearing, please let me know!
I want to show images on the page but I don't want to hardcode the references to the images in html.
Is it possible to do something like:
HTML:
<span id="got-easier"></span>
CSS:
#got-easier { image: url(/i/trend-down.gif); }
(IE6 should be supported)
Yes, use a background image :)
#got-easier { background-image: url(/i/trend-down.gif); }
Remember to set a span to display: block; and set width/height of your image if you use it.
As David Dorward pointed out, if it's an image relevant to the information, it should be included in the document with an <img> tag and alt attribute.
Heya, the common term for it is css Image Replacement technique (or IR). Here are the commonly used methods currently. Just choose any of the two ;)
/* Leahy Langridge Method */
span#imageName {
display: block;
height: 0 !important;
overflow: hidden;
padding-top: 0px; /* height of image */
width: 0px; /* width of image */
background: url(url/of/image.jpg) no-repeat
}
/* Phark Method */
span#imageName {
display: block;
width: 0px;
height: 0px;
background: url(url/of/image.jpg) no-repeat;
text-indent: -9999px
}
In case you want to display the images inline, position:absolute does the trick:
#got-easier {
display:inline;
position:absolute;
width:img-Xpx;
height:img-Ypx;
background:url(/i/trend-down.gif) no-repeat;
}
The only problem with this is that, since the image position is absolute, it will overlay whatever is next to it (in IE6 it might appear behind), and the workarounds that I found to fix this (with both CSS and jQuery) aren't supported in IE6. Your image-container will have to be followed by new line.
This might be useful when, for instance, you'd like to place a (?) image next to a form caption or a button (that usually have nothing next to them) to display help with onmouseover.