I have a span with several other spans inside it, and I want to toggle the sub-spans between display:block and display:inline. The spans start off with display:inline-block, then are switched to display:block. This works fine. The problem is when toggling back in Webkit (it works fine in Firefox): the spans are rendered with extra line breaks in between them.
Can I make this render correctly without putting <br/> tags between the spans?
demo here: http://jsbin.com/omalu3/4/edit
Any other solution would be a workaround since it's a browser bug.
An alternative to derekerdmann's solution:
#a.multiline * { width: 100% }
#a.oneline * { width: auto }
#a * { border:solid 1px black; display:inline-block }
Another workaround would be to not wrap the children spans with another span -- which is an inline element. Use a <div> for #a and it behaves correctly (in Webkit at least!).
On another note, the star selector is not really efficient, although I understand this is only an example so I'm not going to criticise that here :D
Now isn't that fun.
I'm not sure what's causing the problem, but it goes away if you add float: left; to #a.oneline *. When you do that, you could change the display to block so your styles look like this:
#a.multiline * { }
#a.oneline * { float:left; }
#a * { border:solid 1px black; display:block;}
The only difference between this solution and your original layout is that the oneline blocks will be aligned at the top instead of the bottom, but you could set a fixed height for those elements.
Related
I'm working on a grid and I am trying to figure out how to make two divs, which are display:inline-block match each other in height. Is this possible using just CSS?
For example see this JS Fiddle here. The green area I would like to be 100% of it's container, so that it matches the left container.
http://jsfiddle.net/franhaselden/kqtLkkz6/
The divs use the following grid CSS:
.grid {
vertical-align:top;
font-size:0;
box-sizing:border-box;
display:inline-block;
font-size:0%;
}
.grid.golden-small {
width:61.8%;
}
.grid.golden-large {
width:38.2%;
}
I tried explicitly stating the height of the parent container, by doing height:auto so that it would fit to the content inside it, but this didn't seem to work. See my second example here:
section {
height:auto; /* and added this */
}
.featured-post .featured-text {
height:100%; /* added this */
}
http://jsfiddle.net/franhaselden/kqtLkkz6/1/
If I where you I would make a table instead. inline positioning is very difficult to use. I would try remake it by making a parent element that contains all the elements you want to stack inline to display:table; and the child elements to display:table-cell; play around with it is my advice
Take a look at this.
Set the display of your parent element to table, .featured-post {display: table;} and the display of the child elements to table-cell, .grid {display: table-cell;} I guess this is the easiest solution (you can check here) It will work at least that you set position:absolute but I don't think that's your case.
I need your help: I want to reverse the order of <p> elements that are inside a <div>.
The difficulty is that I can't change the HTML, I can't give a class at each p, I can't use CSS3, and I can't add any JavaScript.
I can only make changes to the CSS.
<div id="divID">
<p>1</p>
<p>2</p>
</div>
CSS is for styling, not ordering your markup... but that being said, with CSS3 you can rotate the DIV and then individually rotate the P elements which will make them appear "in reverse order".
This is not very accessible, something like a screen reader WILL read your page differently.
http://jsfiddle.net/kzWr8/
div#divID {
transform:rotate(180deg);
-ms-transform:rotate(180deg); /* IE 9 */
-webkit-transform:rotate(180deg); /* Safari and Chrome */
}
#divID p {
transform:rotate(180deg);
-ms-transform:rotate(180deg); /* IE 9 */
-webkit-transform:rotate(180deg); /* Safari and Chrome */
}
Update: CSS2 Absolute positioning with sibling selectors: http://jsfiddle.net/kzWr8/1/
This assumes you know the height and number of a fixed number of elements so that you can position them absolutely.
div#divID {
position:relative;
}
#divID p {
border-top: 1px dotted #CCCCCC;
padding-top: 20px;
height:40px;
text-transform: uppercase;
}
#divID > p {
position:absolute;
top:60px;
}
#divID > p + p {
position:absolute;
top:0;
}
Short, technical answer: it's not possible. However, what is possible is changing how the order is displayed.
CSS is exclusively to style the webpage and nothing else. Changing the HTML directly will change the order. You could also accomplish such a thing with Javascript. However, CSS will only make it appear that the paragraphs have changed positions. This comes with consequences. For one, crawlers like search engines won't notice the change in positioning. Additionally, screen readers will most likely read it how it is in the HTML making the page very confusing for someone trying to access your page.
If you're okay with not actually rearranging the paragraphs, but instead making it appear like you did, you should probably check out how floating elements will make them appear in different positions. To my knowledge, this will only work in certain situations unless you want to reposition elements using relative and absolute positioning.
For example, if you've got two of the elements next to each other using floats (i.e., columns or links), it's pretty simple to float them to opposite sides (example):
.first-element { float: right; }
.second-element { } //whatever
As pointed out by #artSx in the comment below, I realize you may not be able to add a class in your HTML. If there aren't already any classes or IDs that differentiate the two elements, you'll have to read up on different types of selectors (like nth-child and so on).
However, if you wanted to completely reposition the elements relative to the page or a parent div, you may want to read up on how absolute/relative positions work and how they'll affect the flow of your page.
There are likely multiple ways to achieve this. We'd need some legitimate examples of what you're trying to do in order to give you the method that works best for your situation.
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 7 years ago.
In Firefox only my video thumbnails are displaying mysterious 2-3 pixels of white space between the bottom of my image and its border (see below).
I've tried everything I can think of in Firebug with no luck.
How can I remove this white space?
You're seeing the space for descenders (the bits that hang off the bottom of 'y' and 'p') because img is an inline element by default. This removes the gap:
.youtube-thumb img { display: block; }
You can use code below if you don't want to modify block mode:
img{vertical-align:text-bottom}
Or you can use following as Stuart suggests:
img{vertical-align:bottom}
If you would like to preserve the image as inline you can put vertical-align: top or vertical-align: bottom on it. By default it is aligned on the baseline hence the few pixels beneath it.
I've set up a JSFiddle to test several different solutions to this problem. Based on the [vague] criteria of
1) Maximum flexibility
2) No weird behavior
The accepted answer here of
img { display: block; }
which is recommended by a lot of people (such as in this excellent article), actually ranks fourth.
1st, 2nd, and 3rd place are all a toss-up between these three solutions:
1) The solution given by #Dave Kok and #Hasan Gursoy:
img { vertical-align: top; } /* or bottom */
pros:
All display values work on both the parent and img.
No very strange behavior; any siblings of the img fall where you'd expect them to.
Very efficient.
cons:
In the [perfectly valid] case of both the parent and img having `display: inline`, the value of this property can determine the position of the img's parent (a bit strange).
2) Setting font-size: 0; on the parent element:
.parent {
font-size: 0;
vertical-align: top;
}
.parent > * {
font-size: 16px;
vertical-align: top;
}
Since this one [kind of] requires vertical-align: top on the img, this is basically an extension of the 1st solution.
pros:
All display values work on both the parent and img.
No very strange behavior; any siblings of the img fall where you'd expect them to.
Fixes the inline whitespace problem for any siblings of the img.
Although this still moves the position of the parent in the case of the parent and img both having `display: inline`, at least you can't see the parent anymore.
cons:
Less efficient code.
This assumes "correct" markup; if the img has text node siblings, they won't show up.
3) Setting line-height: 0 on the parent element:
.parent {
line-height: 0;
vertical-align: top;
}
.parent > * {
line-height: 1.15;
vertical-align: top;
}
Similar to the 2nd solution in that, to make it fully flexible, it basically becomes an extension of the 1st.
pros:
Behaves like the first two solutions on all display combinations except when the parent and img have `display: inline`.
cons:
Less efficient code.
In the case of both the parent and img having `display: inline`, we get all sorts of crazy. (Maybe playing with the `line-height` property isn't the best idea...)
So there you have it. I hope this helps some poor soul.
I found this question and none of the solutions here worked for me. I found another solution that got rid of the gaps below images in Chrome. I had to add line-height:0; to the img selector in my CSS and the gaps below images went away.
Crazy that this problem persists in browsers in 2013.
Had this prob, found perfect solution elsewhere if you dont want you use block just add
img { vertical-align: top }
.youtube-thumb img {display:block;} or .youtube-thumb img {float:left;}
Give the height of the div .youtube-thumb the height of the image. That should set the problem in Firefox browser.
.youtube-thumb{ height: 106px }
As stated before, the image is treated as text, so the bottom is to accommodate for those pesky: "p,q,y,g,j"; the easiest solution is to assign the img display:block; in your css.
But this does inhibit the standard image behavior of flowing with the text. To keep that behavior and eliminate the space. I recommend wrapping the image with something like this.
<style>
.imageHolder
{
display: inline-block;
}
img.noSpace
{
display: block;
}
</style>
<div class="imageHolder"><img src="myimg.png" class="noSpace"/></div>
This is a really odd one. I cannot seem to affect this one image via css at all. Tried adding a class specifically for the image and also writing css to affect just the image, but zip. It won't budge. The only thing that made it move was setting the neg. margin on the actual image, and there it only moved up about 40px and wouldn't go any further (taken that off since then). The image in question is the "imagine" tab (wp-image-39) on this page:http://circore.com/haute/. The bits of css I've left are:
img.wp-image-39
{
margin-top:-120px;
background:#ff0000;
}
.toptab
{
margin-top:-120px;
background:#ff0000;
}
I've also tried affecting all images in the content area and a bunch of other things. The red background is just so I can see if something worked. Argh! Thanks so much!
Instead of trying to put styles on the image, why not put styles on the containing div?
.toptab { margin-top: -50px; }
Would that suit your needs?
I would set position: absolute for the image. Then you will be able to move it freely with margins relative to its inline position.
The last 3 classes of your CSS
#text-4
{
font-size:11px;
line-height: 15px;
color: #000000;
text-align: center;
}
img.wp-image-39
{
margin-top:-120px;
background:#ff0000;
}
.toptab
{
margin-top:-120px;
background:#ff0000;
}
are inside #media print { which is actually not closed.
Put a closing bracket before #text-4 or wherever you need.
<div style="margin-top:-120px;">
Inline CSS would work also on the div that wraps around the . Hope this helps.
Please see www.racedayworld.com
The plus sign (which is floated on the right of an accordian div panel) is being pushed down in certain browsers, but shows up fine is others...
I know it's happening in these browsers...
Firefox 3.0.5
IE 7
others?
Any ideas?
Instead of:
#accordion span {
float:right;
}
Get rid of the span. Float the image itself. Use:
#accordion img {
float:right;
display:block
}
Float only floats items above those which follow after in the document order. Try delivering something like this:
<h2><span><img src="plus.gif"/></span> text here </h2>
As others have also mentioned, the SPAN is possibly redundant.
id just make the img part of the background
#accordion h2 img{
position:absolute;
top:0; /* you might need to play with # */
right:0; /* you might need to play with # */
}
#accordion h2{
position:relative;
}
i would also just use JqueryUI's no-theme accordion instead, as it has support for open/active/inactive states/classes.
http://jqueryui.com/demos/accordion/