I'm trying to make the comments wider on Slashdot, especially on mobile (Firefox). There is a big gap on the left.
Example: https://tech.slashdot.org/story/21/08/12/2034218/google-launches-interactive-3d-periodic-table-to-teach-chemistry
(any Slashdot story will work)
The selector is div#comments.a2commentwrap. Examining it you can see that it has the property margin-right: 320px; and if you reduce it to 20px the big gap goes away.
I can't get the rule to work though. I have
slashdot.org##div#comments.a2commentwrap:style(margin-right: 20px; !important;)
but it has no effect. I tested background-color: #333!important; and that worked.
What am I doing wrong?
It's because you terminated your style with ; before !important flag
slashdot.org##div#comments.a2commentwrap:style(margin-right: 20px !important;)
Related
Text Selection Highlighting too much on either side because of padding.
http://jsfiddle.net/JamesKyle/pA7BJ/
How do I fix this using CSS? I've tried a bunch of different things, none of which seem to work. (i.e. trying to use margin and other properties).
I've run into this issue several times and have never been able to figure it out.
If someone could show me how to fix this and maybe explain how the text selection highlight is calculated, I would very much appreciate it.
It appears that this isn't occurring in Firefox/Opera (can't test IE), and it may be limited to webkit-based browsers.
SOLVED:
Add position: relative to any padded elements (this is likely a webkit bug).
http://jsfiddle.net/JamesKyle/ejfsM/
This is strange. However, changing CSS position seems to work, e.g.:
div.sizing-container {
padding: 75px;
position: relative;
}
http://jsfiddle.net/LJLdW/
Don't know if that is possible in your situation.
Changing the padding of div.sizing-container to 75px 0px 75px 0px would fix this issue.
The highlight is so large because of the padding on this element.
Then you need to change add:
width: 93%;
padding-left: 3%;
To the body. And then add 10px padding to .sizing-container
That fixes it for me. Thats all I can say.
Here is my test case : http://jsfiddle.net/bpw98/15/
I have a div with overflow:auto, and a div inside it with a margin and a border. The inner div doesn't have its bottom margin in IE8, while it's displayed properly in Webkit and Firefox.
Opera renders it in a wrong way too:
The solution is in that browser: use padding in the outside box instead of using margin on the inside.
Here is the code
Unfortunately , it does not resolve the IE8 problem, I know. But it's a known bug , CSS 2.1 spec does not cover precisely how this testcase should be rendered.
Check this
Ok, I have a horrible hack for you:
div.outer:after {
content:"";
background-color: inherit;
}
This works for me but leaves a larger than 5px margin at the bottom of div.outer:
JSFiddle: http://jsfiddle.net/wwTnS/
To get past this you could target IE8 only (so not IE8 and below as IE7 works correctly for once) and set margin-bottom to about 1px...but then that is getting even more hacky. The code I have added above should not have any noticeable effect on any other browsers.
Extra Note
If you remove the background-color and check the code in IE9's IE8 compatability mode then it renders fine and the margin-bottom is 5px. However, in my emulator (which is usually quite accurate), the margin-bottom is back to 0 if you do not add background-color.
As commented by tildy, the problem is already documented. I think I found a working solution, but it requires extra markup: I added a div between outer and inner, with a 5px transparent border. See http://jsfiddle.net/bpw98/19/.
I tried to add padding to outer instead, but it didn't work either. The rationale between that is: "the scrollbar lets the user scroll content, and only content". So the scrollbar stops where content stops, even if there's padding or margin after that.
Instead of margin on div.inner maybe you could try setting padding: 5px on div.outer
Ironically jsfiddle doesn't seem to work in IE8, which is quite funny.
Anyway, I had the same problem just now and went down the route of using :after on the inner element to inject content where the bottom margin should be:
div.inner {
margin: 5px 5px 0;
}
div.inner:after {
content: " ";
display: block;
height: 5px;
}
jsfiddle here: http://jsfiddle.net/bpw98/41/
However, this only works if you don't need that red border. I'm not sure if it was there just for the purpose of showing the issue or you actually need it? If it is needed, I'm afraid this answer won't work.
I removed the height of the .outer div and it worked for me !
Propably it doesn't work because your inner div is higher than 100px;
This site has an issue with the center content portion. For some reason in internet explorer just a couple of letters are being cut off by the sidebar. I have no idea why, or how to fix it. The div floats right, so I figured adding a few pixels of margin to the right would do the trick. It doesn't...
It's this way on IE8 and I'm actually running IE 7.4 through parallels on a Mac.
Any suggestions?
http://www.thesurgicalsolution.com/
In an ie.css you have:
#content, .sidebar { overflow: hidden; }
which is clipping the text in IE only. So if you remove this rule the text will no longer be clipped. It is possible that this rule exits for a reason though, so you might want to test the whole site before just deleting it.
Edit: I would also fix the validation errors as well as I have had unexplained rendering issues on different browsers in the past which were caused by invalid markup.
Edit 2: The #content parent <div> has a defined width (and is overflow:hidden) but a child <div> also has a defined width and its position makes it greater than the right edge of the parent and is therefore clipped by the parent's overflow rule. So as an alternative, you could make the .rightbox narrower to avoid the overflow hiding in IE.
.custom #content .box-wrapper .rightbox {
float: right;
width: 451px; /* <-- change this */
margin-right:5px;
}
I don't know why that happens, but adding a padding-left: 3px anywhere that applies to it fixes it.
Just a quick question regarding CSS positioning. I have several "segments" on my site which are 100% wide (fills the screen), and I want them floated next to each other. So only the first one will be visible, the other ones will be off-screen. I've tried playing around with positions and the overflow property without luck. Right now they just pop down below each other instead of floating.
This would work perfectly if the elements did not exceed the screen width, but as they do, they just pop down as I said earlier. I've tried setting a huge width to the "wrapper", something like 99999px. And then setting the segments to 100%, but that will just fill the whole 99999px width instead of the screen.
Any ideas?
JSFiddle example: http://jsfiddle.net/9xGPb/
Do you mean like this?
Example Fiddle: here
I used my favourite alternative to floats, inline-blocks
if you actually take it out of the fiddle it has some pretty (gaudy?) colours which show that it allows for the min-width: 900px; on the centered_content div to work too, and I removed the absolute positioning for the menu so the content would go below it, for demo only but you may find it useful..
let me know if any good or if you have any questions
Updated with some jQuery and to make corrections for default word-spacing
New Example: here
re: the IE6/7 hack rightly mentioned in the comments;
.segment {
display: inline-block;
overflow: hidden;
width: 0;
}
.segment {display: inline !ie7;}
needn't be a "parse hack" if that's your preference as long as that second rule is given to [lte IE 7] somehow, and separately at that it cannot be combined into the original rule with the * hack or anything, it won't work.. has to be in a separate ruleset.
I discovered word-spacing might be a problem if relying on width to hide, the natural behaviour of inline blocks is to put 3-4px between the elements like the space in between words, the workaround to this is to correct the word-spacing on the wrapper
.segment-wrapper {
white-space: nowrap;
word-spacing: -4px;
}
then restore it normal for the actual content divs, same place as you would restore the normal wrapping behaviour
.centered_content {
width: 900px;
margin: 0px auto;
background: #fcf;
white-space: normal;
word-spacing: 0;
}
and last, apart from this was fun.. there's 2 effects in that new fiddle - uncomment and comment the other.. forgive me I was playing! :)
The meaning of float is to try to float to the right or left unless there is not room for it.
This means that you cannot ever float an element off the page.
If you need to keep the element off the page, you will need to use a different positioning mechanism like position: absolute.
It sounds like you're creating a horizontal one-page portfolio. I've recently been working on something similar.
Using your fiddle I've set the .segment class to
.segment {width:90%;height:90%;position:absolute;}
and then offset each left positioning further off the screen
#home {background-color:red;left:5%;}
#work {background-color:yellow;left:105%;}
#portfolio {background-color:green;left:205%;}
#contact {background-color:blue;left:305%;}
http://jsfiddle.net/9xGPb/2/
I also added some jQuery logic to switch views for the divs.
I'm still not entirely sure which segments you want to start off the page but this jsfiddle uses positioning to shove the #two div off to the right: http://jsfiddle.net/EdAZP/1/
Which part of your example did you want to start off the page?
Did you try to just hide the other elements and toggle them with some javascript (jQuery is much easier)?
http://api.jquery.com/toggle/
Can someone help me vertically center text inside a div, consistently across browsers. In IE9 ONLY, text is one pixel closer to the top of the parent div. All other browsers render the text as expected.
Important: I'm using standards-mode:
<!DOCTYPE html>
Here's some example HTML:
<!DOCTYPE html>
<div style="width:100px; height:16px; font-size:13px; font-family:Arial; line-height:1.2; background-color:red; color:White; vertical-align:middle">
<div style="line-height:16px">XXXXXXXXXX</div></div>
Bit late to the party. However, I came across a similar issue recently. After some digging about I came across this article: Sub-pixel Fonts in IE9.
I think this is directly responsible for the issues of font vertical alignment in IE9. Unfortunately there doesn't seem to be a fix as this is a forced option or customisable by the user (not likely to happen).
So it looks like the only solution is to increase the line-height as mentioned previously.
You might want to look at the following:
CSS: Standard (dynamic) way to centralize an element in the y-axis
There are some useful references that will probably still apply to IE9.
Based on your code: you are setting the line-height in more than one place. Try removing the line-height:16px property in your inner div, in fact, get rid of the inner div since vertical-align will only affect inline elements.
Also, make sure your container height is big enough to hold the text (1.2*13) otherwise you may get into issues related to different fonts or different default font-sizes across browsers.
Probably what is happening is that 1.2*13 = 15.6, and depending how the browser rounds off floating point numbers, that could account for a 1 pixel shift. Set line-height to 16px instead of 1.2 and see if that works.
Second Try:
.outer {
background-color: red;
color: white;
width: 100px;
height: auto;
padding-top: 0px;
font-family: Arial, sans-serf;
font-size: 13px;
line-height: 5.0;
}
applied to:
<div class="outer">XXXXXXXXXX</div>
If anything will fix this, make the line-height large enough so that there is some space above/below the lettering. Set the container height to auto and let the line-height control the height of the container.
There is an answer to this question here:
http://www.sitepoint.com/forums/css-53/text-alignment-w-ie9-standards-mode-745359.html
I had the same problem with the 1px off text rendering, and it would only appear with font size 13px in IE9.
adding the css style
{
height: 16px;
line-height:16.99px;
}
to the surrounding div fixed the problem for me on IE7-9, FF and Chrome on Windows.