Basically I want the background-image (the logo) to overlay the white div below it, I tried my best using z-indexes etc and Googling but I can't manage to get it fixed.
I know the question is a duplicate but Im desperate since other solutions didnt work out for me.
Most likely it's an easy fix, I posted the website online here: http://tostimc.net/stackoverflow/ so you guys can see my code etc.
You can fix this by adding z-index: -1; to you .panel-default class in the css file: tosti.css rule 215
Related
Some Context
I am playing around with Angular-material and trying to see how well it plays with bootstrap. The Angular-material start project shows off some of the cool things it can do, but it seems like it seems like Angular Material still requires a lot of custom CSS for my non-designer skills. Ergo, why I'm trying to see if it's a good idea to try to use bootstrap and angular-material together.
If this is a terrible idea, please let me know.
My Problem
The icons in the side panel of this codepen should be circles, but they are squares! I can see the border-radius property with Chrome debugger tools but I cannot figure out why it is not being honored.
To add to the mystery, when you click one of the items then all of the icons below that do in fact become circles for a moment.
Can someone with more CSS experience than myself tell me what's going on or how I might debug this more completely?
And any feedback about using angular-material + bootstrap together is also much appreciated.
I also experienced this problem using angular, where the border-radius is not honored, when trying to style an element that is part of a ng-repeat. I found that if you apply the style to the child element of the ng-repeat instead it will honor the border-radius property. This is more of a workaround than a solution, as I also don't understand why this happens.
So in your case you could do:
.avatar svg {
border-radius: 50%;
}
I've customized the CSS transitions on the Media Grid plugin and they're working everywhere except IE8. That's fine. I can live without the transitions but I still need the div containing the individuals name and title to appear. Right now they don't show up at all. I've tried everything I can think of but I can't find the answer. Could someone point me in the right direction?
http://clients.weinsteinau.cgvcreative.com/team/
For IE8 I'm afraid you will have to make a separate stylesheet and start from your class .overlays than dig deeper into those divs, you will have to change positioning, height and width. There are a few elements without dimensions and IE8 does not like that. Let me know how it goes, and oh yeah good luck! :)
I have a site that can be seen at gronenproperties . com
I am using a div with an id "contact-add"
and absolute positioning it in the DIV where I want it to be.
Firefox shows it fine for the most part, but it shifts when i resize the window, and different browsers and OS's seem to place it somewhere else entirely.
I have been out of the game for awhile when it comes to css and making things cross compatible...In my research, it says to make the parent div relevant and should solve issue.
Pretty sure Ive done that.
If someone could teach me old tricks, but new trick to me.
Id greatly appreciate it
Thanks
Put everthing in a div with margin: 0 auto; and width: 960; or width: 1120;
I am having trouble getting the facebook pop out dialog to be on top of my nav bar and slideshow here:
http://d14599.u62.c14.ixinstant.com
I have search for several hours and all the solutions have not seemed to work. Here is a list of what I have checked:
-overflow:hidden on other page elements causes problems. I looked into this but my nav bar does not have this property.
-z- index only works for positioned elements. I made sure my elements were positioned relative or absolute.
-I tried directly styling the js created facebook elements using things like
.fb_iframe_widget{
display:block !important;
z-index:9999 !important;
}
I'm not that good with CSS but have never been stuck this long on one single issue.
I am assuming the issue actually is with something I have done wrong elsewhere on the page, like the navbar itself, but I cannot see what it is. Any thoughts would be greatly appreciated.
I searched lot of things and tried it too but no solutions worked for me. I found one quick fix to solve facebook like dialogbox overlap issue here and it worked for me.
Hope it could save others time, Cheers!
It doesn't really solve the issue, but what I have done is to hide the comment box. For this case it was acceptable. In the css file I added:
.fb_edge_widget_with_comment span.fb_edge_comment_widget {
display:none;
}
What worked for me was to set the z-index for the element that holds the Facebook like button to be higher than the element the comment box was shown behind.
I've been smashing my head against a wall for about 3 hours now and guessing what's going on isn't working either. Can someone please help me rescue my waning sanity?
Basically in IE7 the second level on this menu just won't stay open when you try to hover over it. I've tried z-indexes, containers with position: relative set, line heights, borders, padding...everything!! What am I missing? ARgg!! Must be something obvious at a guess but my tired brain has just given in.
http://www.sah.org.au/devt/
Thanks for your help!
John.
That really is frustrating.
The only (almost there) solution I could find was to add a background-color to #menu a. You can change it to the correct colour on :hover for the different links. Or, just move it from li to a.
Weird, right? It massively helps.
I'm reasonably sure that a perfect solution is going to require (ugly) HTML changes, or writing jQuery to do the same thing (for only IE7).
Based on your comment on the code that says
/* using left instead of display to hide menus because display: none
isn't read by screen readers */
I found you don't want sub menus got read by screen reader. I did a research and found out most of the screen readers don't read the visibility:hidden elements. My suggestion to you is removing the left:-999em and replacing it with visibility:hidden and dsiplay:none together.
Here is the article about screen readers:
http://www.alistapart.com/articles/fir/