I'm having what would seem a very basic css problem that shouldn't be an issue. I have three divs:
(Output directly from firebug. Each div contains a lot of content and nested form partials (rails) so below is an abbreviation)
<div class="dynamic-container person">
<div class="symegrid"></div>
<div class="officer tf-attribute"></div>
<div class="director tf-attribute"></div>
</div>
Divs with class tf-attribute should have a boarder:
div.tf-attribute{
border: medium solid #a5ac20;
border-radius: 10px;
padding: 20px;
}
Strange thing is that the border is being applied to the div of class symegrid. When I use firebug to inspect the computed attributes of the symegrid div, no border is listed. If I take the border off of tf-attribute, the one arround symegrid disappears.
I doubt anyone would be able to give me a difinitive answer on this but I'm running out of ideas. Has anyone seen this sort of behavior before? Any ideas/thoughts would be appreciated.
In response to comments I've gotten:
It's been quite fairly suggested that I post a reproduction of the problem in a fiddle or something like that. I'm currently trying to reproduce this in a fiddle but can't so far. Will post it if I'm able to do so (though I suspect reproducing it would likely give me the info I need to solve the problem)
You having missing closing div tag
See the fiddle: "https://jsfiddle.net/s48o7kr1/"
The code becomes:
<div class="dynamic-container person">
<div class="symegrid"></div>
<div class="officer tf-attribute"></div>
<div class="director tf-attribute"></div>
</div>
Change your html to
<div class="dynamic-container person">
<div class="symegrid"></div>
<div class="officer tf-attribute"></div>
<div class="director tf-attribute"></div>
</div>
So for some reason the div.officer.tf-attribute happened to be sizing itself to include the exact boundaries of div.symegrid, leaving its own contents below. Therefore div.symegrid only appeared to have a border and because the content of div.officer.tf-attribute was sandwitched between two bordered divs, it appeared to have a border itself. (Still can't get it to do that in a fiddle but whatever)
Anyway, all I needed was to add
div.tf-attribute{
overflow: hidden;
}
And it was all better. :-P Thanks to everyone who was so kind to spend their time on this nonsense.
Related
I'm currently facing a big issue in the https://www.npmjs.com/package/#angular/flex-layout library. The problem is the fxLayoutGap setting for grid likely designs but just as a flexbox.
The actual problem is that when I use this settings fxLayout="row wrap" fxLayoutGap="25px grid" fxFlexFill on each box/grid element to add a gap between each boxes, I'm also getting a gap at the last element of each row. In my eyes there should be no gap to prevent a useless padding there:
I did a lot of research. The most nearest answer on SO is this one:
Remove padding from fxLayoutGap last element of row
But this answer is just about the las element in a single row so the answer don't helps. So I've continued searching and found this:
https://github.com/angular/flex-layout/issues/363
This is an issue in the actual library. But sadly the developer says that this is not a bug and should be fixed by the developer. But I think this is not true...
He provided this answer here...
Simply add a CSS style [fxFlex]:last-of-type { margin-right:15px; }
... and closed the ticket: Closing as a will-not-fix issue. So not very helpful. After trying the answer this way [fxFlex]::nth-child(4n) { padding-right:0px !important; } I've found out the the last element get's bigger which looks bad:
This is my code:
<div id="list" class="shadow-box-list" fxLayout="row wrap" fxLayoutGap="25px grid" fxFlexFill>
<div class="widget" *ngFor="let element of elements" [fxFlex]="fxFlex">
<div class="shadow-box-list-widget-content mat-elevation-z3" fxLayout="row" fxLayoutAlign="center center">
<div class="name">{{element.name}}</div>
</div>
</div>
</div>
So does anyone had the same issue/problem before and can share the answer with me? I really don't know how to solve this.
I'm new to html and css. I've gotten a college assignment to create a webpage and i went somewhat overboard on the design something that was supposed to be simple has gotten somewhat complicated.
I'm currently trying to list the cast of a tv show down the left hand side of my page.
->Wire-frame example <-
Everything I have tried has failed, I'm feeling beaten here is an example of what I've managed to do trying methods i know or have found online hoping it would do the trick.
->Current Progress<-
->Link to current HTML<-
As you can see in the wire-frame, I'm ideally wanting their names centred under the pictures, which is my struggle.
Any ideas?
Thanks.
The problem you're having is that the label and the image belonging to one actor are not grouped. Put them inside a <div> container.
<div>
<div class="actor">
<img src="Pictures/willingham.jpg" class="actor-image">
<div class="actor-label">Travis</div>
</div>
<div class="actor">
<img src="Pictures/willingham.jpg" class="actor-image">
<div class="actor-label">Laura</div>
</div>
</div>
Here's the new CSS:
.actor {
display: inline-block;
}
.actor-image {
width: 86px;
}
.actor-label {
font-weight: bold;
}
Note that I also improved a lot of other things like removing unnecessary code or using CSS to style elements instead of HTML (cause that's what CSS is for). If you want the labels to look different just change/add the properties inside the .actor-label selector.
I have to transform a given webdesign into an template for an CMS.
While I was doing this, I realized, that the design did screw up in Firefox:
I'm not really deep into webdesign, but I was able to narrow it down to a div (.inside) which contains two further divs (.titel and .logo) and a <figure> that contains an <img>.
In Chrome (Version 33) and IE (Version 10) the image is rendered under the two divs (As it was intended by the designer) - in Firefox, the image is inserted right in line with the other two elements.
See the difference:
https://imagizer.imageshack.us/v2/249x342q90/34/e5yj.png
I prepared a jsfiddle:
http://jsfiddle.net/5zu32/embedded/result/
rough code:
<div class="inside">
<div class="titel"></div>
<div class="logo"></div>
<div class="main_image block">
<figure class="image_container">
<img src="foo" alt="img test" height="323" width="853">
</figure>
</div>
</div>
I tried to remove the "block" class (which only removes the overflow:hidden) but that screws up the original design. (It does not do that so clearly in the demo.)
(Picture of horses is a random internet image that happens to have the same size as my used image)
I hope somebody could help me? How can I fix this?
By the way: I'm new to the site, if I did anything wrong, please tell me :)
Try using
.main_image {
clear: both;
...
}
This will clear the float: left you used earlier.
BY adding a clear: both; to your main_image class you can clear out the problem with the display.
DEMO
The HTML scheme is following:
<div class="items">
<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
...
</div>
.item CSS style:
float: left;
And the result:
But the white boxes are not aligned right one after another one -- where could be the issue? I;ve tried also using display: inline-block; instead of float: left;, but the result was basically the same.
Thank you
You can use CSS 3 column-width and column-gap like this..
http://www.bootply.com/118335
I run into the exact same problem and I found this one that worked for me.
https://github.com/kudago/waterfall
It depends only on js no css, though I'm still using bootstrap for other styling. I also use jquery.infinitescroll.js to dynamically load items and after the items are appended, waterfall will do its magic and put everything in place.
The only glitch I found is sometimes items could overlap a bit vertically, as soon as you keep scrolling down they are put correctly. I'm not sure why this is happening, a bit annoying but till I find something better.
Hope this helps.
For a veeery long time I've had this problem but always I managed to avoid it somehow (by removing elements or changing order) and now here it is again and I have no idea how to get rid of it. First, it appeared in my admin panel, but only few users acces that so it's not big problem (nobody uses IE6), but now this problem is appearing on my index page of portal and I must get rid of it because 15% of portal visitors are IE6 visitors.
Here's LINK to test version of portal:
If you open this page in IE6 you can see that second news (titled: Test one) doesn't have any text, only image. Well, if you make mouseover on that image you will see that there is some text. This problem occurs only when I enter paragraf whose height isn't bigger that image's height. If I enter same image but with some more text this show/hide problem disappears. I hope someone knows why is this happening because this problem has been torturing me for few years but I never figured out what is the main cause of this problem and how to avoid it.
Any help is welcome!
Ile
EDIT:
Here is solution for this problem:
http://www.positioniseverything.net/explorer/peekaboo.html
Well, It's easiest to make copy paste from page where it's detailed explained:
HTML code:
<!--********** Start of demo ***********-->
<div id="floatholder">
<div id="float">
<br />
<span> Float
<br /><br />
test link
</span>
</div>
This is bare text. Test link
<div style="border: 3px solid #f00; background: #dde;">This is text inside a div.
Test link</div>
This is bare text. Test link
<div style="border: 3px solid #0c0; background: #dde;">This is text inside a div.
Test link</div>
This is bare text. Test link
<div style="border: 3px solid #00f; background: #dde;">This is text inside a div.
Test link</div>
This is bare text. Test link
<div id="clear">Clearing div</div> <!--******* Note: a cleared <br> will not prevent bug *******-->
<div style="border: 3px solid #00f; background: #dde;">This div is after the cleared div. (purple box) If cleared div
does not touch float, bug is not triggered. Test link</div>
</div>
<!--********** End of demo ***********-->
And here is screenshoot from IE6
Fixes:
The fixes:
Finally, this bug will be triggered
even if div#float preceeds
div#floatholder, provided that this
external float actually touches the
clearing div within div#floatholder!
There are three ways we know to
prevent this bug.
Keep the clearing div from touching the float, or avoid using a
background on div#floatholder. Not
exactly ideal.
Give both div#floatholder and div#float 'position: relative'. Be
sure to fully test this method.
Give div#floatholder hasLayout (now the preferred method)
We suggest using a conditional comment
to feed a hasLayout fix to IE6 and
below only. Further details helpful to
this method may be found in the Zoom
Fix page.
Thanks to Simon Willison for the
timely screenshot.
This bug is called Peekaboo, and here is detail explanation of everything:
http://www.positioniseverything.net/explorer/peekaboo.html
Although, I have to admit that for me it worked when I set all these 3 steps. After first two it didn't work, but after I added display: inline to floating div it worked.
Can you please post (the bare minimum example) the code here, so that we can reference it long after your server's copy goes away (... just like now)? Otherwise, this question will serve no one as a reference or learning tool.