Css styling bug on admin controls - html

So, I'm getting this strange styling bug.
You can use Firebug or inspect element on the website here: www.leapfm.com but won't be able to see edit, and destroy as that's admin only.
However, the main issue is that when I go into admin. The space between songs stays the same even though there are buttons there. Why is this? and What can I do to fix it?
I tried to fix it with this code (no luck)
.admin {
margin: 0px 0px 10px 350px;
}

I guess it's some kind of list order or unordered.
Then how about making it like so:
ul li { position: realtive; padding: 0 100px 0 0; } /*where the paddinh must be a little bigger then the admin size*/
ul li .admin { position: absolute; top: 0; right:0; }

You have a height property set to .song class.
By defining a height property you make the element always stay in that specific height, regardless of content. The overflow is by default visible, but if you hide the overflow, you will see clipped buttons.
So in order to make your boxes expand automatically when there is more content (i.e. buttons) there, remove the height property.

Related

Dropdown menu either moves content or does not let me centre it

I guess it's kinda easy, but I've been stuck here for 3 hours already.
My dropdown menu moves whole content when used. I searched for similar questions on StackOverflow, for questions related to dropdown menus and got the following answer that partly helped:
.menu > ol {
position:absolute;
z-index:100;
}
I've added the snippet above to the original code. It worked out somehow - it doesn't move other content but now I can't centre it horizontally.
Using margin:0 auto; also did not help.
Could you please help me out? I've either placed position + zindex in wrong place, or I'm missing something.
Codepen:
https://codepen.io/graphconcept/pen/MdwQBM
Remove the position: absolute from .menu > ol and add it to .menu. Also add width: 100% to .menu. If you want your menu to be visible regardless of scrolling make the position fixed instead and add top: 0.
.menu {
margin: 15px;
position: fixed;
width: 100%;
top: 0;
}
.menu > ol {
list-style: none;
margin: 0;
padding: 0;
z-index:100;
}
Explanation:
Block elements with position: static (the default value for position) have a default width of 100%; Setting the position to absolute or fixed changes their width to auto; i.e. they shrink to fit their content's width. Your menu list is being horizontally centred within the menu element. This meant that when the menu element was 100% the width of the page, horizontally centring the menu list would also centre it with respect to the page. However when the menu element shrank to fit its width, the menu list couldn't be centred any more than it already was. The width of the menu element needed to be explicitly set to 100% to allow the centring to have a visible effect.

Why is div clipped off jcarousel? unknown issue challenge

Development test site
https://ntsu.unioncloudsandpit.org/
Can anyone help solve why the jcarousel contained newsblock is clipped off.
FYI newsBlock are just empty divs populated via javascript
I have tried filling newsBlocks with lots of content, but the cutoff remains
i've tried
adjusting the z-index -1 -999
overflow:auto;
height:X px;
I can adjust the carousel size, but cannot for the life of me stop newsBlocks from being cut off?
newsBlock css is simply
.newsBlock {
height:500px;
background:white;}
Any advice?
The height of the <ul> that contains the carousel items is set to height: 90px;. This needs to be changed if it's set via a config or you need to change the height prop via CSS.
.stripe-carousel ul,
.grid-carousel ul {
height: auto;
}
It looks like the height of the carousel is currently 90px, which is being set here:
.stripe-carousel ul,.grid-carousel ul {
margin: 0;
padding: 0;
height: 90px
}
That's found in the minified/combined "application_student_view-800c0baf1f440dfdc34b6b467c315e46574331c5f3987c31f22978b55353aec9.css" file.
If you remove the "stripe-carousel" class from the div with the id "news-stripe" (or change the height value defined above) the carousel displays at full size.

Linkedin Follow Button not showing properly in Firefox

I've set the Linkedin Follow button within a hidden element, so only when you hover an icon, the hidden element becomes visible and button is shown.
Problem is that in Firefox v35.0.1 the followers number is shown not on the same row, as if there is no enough space on the same row. Look at the photo:
When I'm expecting the source code it seems the iframe is being set width and height in the moment of becoming visible (on hover) and then (on blur) its width/height is set back to 0. In Chrome the iframe has a constant width/height, which doesn't change on hover.
I tried to set the iframe width with css, which didn't work because when I expected the code it turned out there is another iframe in the Linkedin iframe and the internal iframe has again wrong dimensions.
Any ideas?
UPDATE: when I set the wrapping element to be visible all is good, so this seems to cause the problem, but how can I fix it?
UPDATE 2: You can see the problem yourself: link (make sure open it in Firefox!)
EDIT: Someone edited my post removing Linkedin tag from it, but I truly believe that this is more their issue than Firefox's or CSS, as there is something within their javascript that adds the width/height to the button iframe and adds them wrong. Also in IE the same issue appears. I added the button twice - first time as it was and second time in a visible wrapper and it's obvious that in the visible wrapper all is OK, though in the hidden wrapper is broken.
UPDATE 3: I realized that the button iframe width is the same as its #body element's 'min-width: 57px', so if Linkedin team correct that min-width to let's say 120px this may solve this problem.
problem is here :
in firefox the loaded width are 2px in the element but in webkit(chrome and opera) are 106px.
the style is not making enough width to show elements in one line.
and here is answer :
.social-details {
width: 195px;
/* float: left; */
position: absolute;
left: -120px;
top: -7px;
background-color: white;
padding: 11px 10px 8px 10px;
z-index: -1;
border-radius: 5px;
visibility: hidden;
}
and
#social .social-linkedin:hover .social-details {
visibility: visible;
}
its allow the element load with 106px of width and it is hidden to users.

Margin not working with float elements

On my web page, I have a logo and a menu that make up header elements and a hero unit under it.
Now I want to give it some bottom margin so there is enough negative space between
header and hero unit but this bottom margin (100px) is not applying.
Same thing if I try to give top margin from hero unit.
.header {
width: 95%;
margin: 20px auto 100px;
}
Here is my working sample JS BIN
Adding a div under it with:
.someclass {
clear: both;
}
would help. But even easier is:
.header {
width: 95%;
margin: 20px auto 100px;
overflow: hidden;
}
If you add the overflow: hidden; the browser will be forced to calculate the size of the elements within, despite them being floated. When the size is calculated, it also knows where to start the margin-bottom.
One more popular uses of setting overflow, strangely enough, is float clearing. Setting overflow doesn't clear the float at the element, it self-clears. This means that the element with overflow applied (auto or hidden), will extend as large as it needs to encompass child elements inside that are floated (instead of collapsing), assuming that the height isn't declared.
Source
The difference between auto and hidden in this case, is that with hidden, it will hide everything that overflows, when it doesn't have enough room anymore, and with auto, it will create a scrollbar.
EDIT:
Since this question apparently is still active, I'll add the most common way of solving this in the present day:
.header:after {
clear: both;
height: 0;
width: 100%;
content: '';
display: block;
}
This is the same as the first method, but then without having to add another element. This is the way to go if setting overflow is not an option (or even if it is an option, this would be better).
When I first posted this answer, it wasn't an option as it was not supported by IE 6 / 7, which were still broadly used back then.
you could add a clearfix to your header or wrapper tag. This is useful bit of css to include in your file. More about the clearfix can be found here
http://css-tricks.com/snippets/css/clear-fix/
I think it's a problem in your margin attribute order.
If I change your property from: 20px auto 100px; to: 20px 0px 100px 0px then I have bottom space appearing.

Anchor-Link skips too far

At the top of a website I'm currently working on, I defined a «Skip to content»-Link with the following markup:
Skip to content
I placed this link somewhere outside the viewport, using CSS position: absolute. As soon as somebody focusses the link (when «tabbing» trough the page), the link gets moved back to the viewport and it pushes the content below down a bit, so it gets the space it needs.
#skip-to-content {
display: block;
text-align: center;
position: absolute;
top: -999px;
}
#skip-to-content:focus {
position: static;
outline: 0 none;
border: 1px solid #681;
top: 0;
}
If you now click the link, my browser skips to the content correctly, but after that the link looses focus, so the content slips up again a little bit (because the link above gets moved out of the viewport again). So in the end, you need to scroll up a little bit to see the beginning of the content. It looks, as if the anchor link would skip too far.
Is there any way I can make sure, the link always skips to the content and not some pixels below?
Please don't suggest any JavaScript-Solutions, this is basic functionality that needs to work in every browser. Thanks for your help.
— André
While not an elegant solution, try adding this to your CSS, it may give you an idea of how to fix it.
#content {
margin-top: -60px;
padding: 60px 1.1em 1.1em;/*add approx 1.1em in px for top padding here*/
}
Where 60px is the approximate added height when the skip link is visible. It's just moving the top edge of #content up a little bit. You can try different measurements to get the padding back to where it needs to be. I didn't want to suggest wrapper divs or anything, but that could work to give you the exact 1.1em top padding you originally had.
If you can figure out the exact total added height when the link is visible, use that measurement in ems instead of px.
You could just not reset the position back to static in your :focus rule.