I essentially have two div tags I'm dealing with. On this page - www.employeratlas.com/search.html - when you click on any of the four tabs that tab has a border around it. The idea is that the border is black on the left, right, and top, and is white on the bottom to cover up the border of the div below it. This works fine in everything but IE6 and IE7 (IE6 example here http://www.employeratlas.com/images/ie_tabs.png). I've tried setting the z-index to make the top tab above the other, but it doesn't work.
IE has a different interpretation of z-index, taking into consideration parent elements' z-indexes. In essence, it's not possible to elevate an element above its parent's z-index.
Background info on quirksmode.org
An example of working around it
Related
I'm having an issue with this site:
https://connectiveworldenergy.com/
At the top of the page, there is some text saying "Design a happy life and create a stress free path that you've always dreamed of.
Let us show you how!". It is a clickable link.
On FireFox and IE, the link is not clickable.
I think it might have something to do with z-Index. The menu is overlapping on top of it. I've tried adjusting Z-index but haven't had luck. So then I read about z-index and it appears z-index requires elements to have the same "position"
The elements on top of it are transparent background... not sure why it's not clickable.
You have two elements: .cwe-ribbon (your clickable link) and `#top-header' (the rest of your header).
You gave #top-header a z-index of 100 so .cwe-ribbon (your clickable link) will need to be greater than this to sit on top of the other element (and be clickable).
set the z-index of .cew-ribbon to 101. In order for z-index to work you need to give the element a position so go ahead set it to position: relative.
strong textSeems like a common problem, but in my case it's complicated by a few extra requirements, so what I found on SO and MDN didn't lead me to a full solution.
Simple premise:
Horizontal nav bar, full width of the page, semi-transparent background, variable number of tabs (extra space filled with same background as tabs).
Easy, right? Give the container element rgba background, set nav items display:inline or float them left and you're golden.
Complication 1: Active tab has to have a triangular cutout (see pic).
Ok, I can have a cutout by setting background-image to a png with transparent bit. The background of the parent element would get in the way - so set background to individual elements instead of parent.
What about the variable width "empty space" past the tabs (see pic)? Ok, put an empty element with a larger than life width, and cut it off with overflow:hidden on the parent.
Complication 2:
Buttons need tooltips on hover.
Ah, the thrill! The suspense! overflow:hidden won't do unless I put tooltips outside of nav div altogether (which would probably work - but seems smelly).
So, here are a few things I tried:
Old implementation which doesn't have the "filler" element width problem but clips off half a tooltip (with overflow:hidden):
http://codepen.io/istro/pen/aHcdi
Messing with display:table seems to give little control over how display:table-cell div width is decided, also needs content to display the div in the first place. Content can be moved away, but still no good (didn't even add a tooltip here):
http://codepen.io/istro/pen/uIcfn
Messing with floats (tooltip sorta where I'd want it to be more or less), but clueless how to make the last "filler" element fit remaining width:
http://codepen.io/istro/pen/aIGxB
So the question - how could I make a div to fill the remaining width with CSS only? Or perhaps I'm asking the wrong question altogether, in which case what ideas would I use to implement it cleanly?
Thanks!!!
I am adding a footer to our organization's website. It looks just fine in Firefox (Mac and PC) and Safari (Mac). But, of course, not in IE 8.
I've got two divs (columns) on the left and middle and within them two rows of links. On the right side of the footer I have an image of our building I'd like to be flush to the top, right, and bottom.
In order to do that I had to make the image part of the background image of the footer. The footer is nestled within the larger content area and that content area has a margin or padding on the left and right sides. In addition, I wanted some extra space below the text so I added some padding (which prevents the image from sitting on the lower edge of the footer.
Here's the test page I am working on: http://americanart.si.edu/collections/index_footer.cfm
I'm stymied. Any fresh look would be appreciated.
The background is in the correct position, but your .col3 inside the footer is covering it. It has a grey background color and is 0px tall in smart browsers, but is rendering at 19px tall in IE even though it has no content. You should probably just remove that div if there is nothing in it.
I need to create this layout and I'd like to do as much of it as possible with CSS, rather than using images and whatever.
As such, how can I do this in CSS? (if at all?)
As you can see, there is the image behind, with the button overlaid with padding. The bit that I'm struggling with is creating the curves on the IMAGE above and to the left of the button and bottom to the right of the button (I've pointed them out on the pic below).
Any help would be great.
Thanks
I know just enough CSS to be dangerous so I can't detail every step, but I think you can approach it like this:
Split the background image into two separate images both at a z-index of 0 at the height of the top of the grey box. I think you can use two div's that reference the same original image with different offsets (similar to CSS Sprites) but I don't know the details of how to do that. The left edge of the lower div would start where the grey box ends. Round the lower-left corner of each "image" div.
Add the grey box at a z-index of 1 with appropriate rounding, and then the blue box at a z-index of 2, again with appropriate rounding.
The background of the block element containing all of this would also have to be grey to match the grey border and properly fill in grey where your right-most arrow is pointing.
You don't have to split your image at all, only the container divs.
Let me detail a bit:
You can have your image set as a background image instead of putting it in a src attribute of an img tag. This technique is most commonly used when working with CSS sprites.
So, if you have you uppermost div at a constant width and height, if you try to apply the background image in it, you'll see it fits very nice.
On the bottom, you have two divs or whatever block element you'll like, just be sure to put fixed width and height, so the background will be applied and you will be able to actually see it.
Then all you have to do is fiddle with css background-position to adjust the SE chunk of image.
I'll be putting a small demo together to better illustrate the idea.
After you have a big div at the top, and two smaller at the bottom, where two of them share the same background-image, but with different background-position, you can safely add some css3 border-radius to fit your roundness needs. You can also use some tool like http://css3generator.com/ to add a compatibility layer on all browsers with ease.
That is very easy to realize with pure css. The page you have shown is divided into 3 divs without any margin. You only need to set the right border radius for each div.
This is a function of the background image, which is a css element if that's what you mean, but it is not a seperate attribute for a selector, at least not in standard CSS. Wait until CSS3 becomes more prevelant, then it's corner-radius or some such thing.
Well it's 3 probably 3 seperate divs, a hole "burned" into the background image, or a div being overlayed for the button.
The best way to figure out how it's done is to read the source of the page you found it on.
For convenience:
If you have a webkit based browser like chrome or safari then enable developper mode mouse over the button "right click" and choose inspect element. Otherwise you can pour over the page source until you find what you want.
This needs to be compatible with all modern browsers and IE7 and IE8.
What I'm trying to do is have a repeated background image for the page with a linear fade that makes the bottom darker. http://i.imgur.com/rrzyw.jpg
Here's my example code: http://jsfiddle.net/hxk2d/2/
As you can see, I have two floated divs in the example above. The body linear gradients do not show up for some reason. I figured out it was because of the left div being floated.
As soon as I delete the float for the left div, you start to see a gradient but it only appears within the container.
Obviously, I'd prefer this to work whether there's a floated div or not. My test browsers were both Chrome and Firefox, both of which performed the same behavior.
What am I missing?
Please look at my example, I'm not 100% sure but I think the parent div of your two floats didn't had a height calculating as a result of the 2 floating div's, the parent tag of that div is the body that doesn't have any height because nothing inside has, as a quick fix i added some the clearfix class to the parent of the floating div's
Here is the example link:
http://jsfiddle.net/sHXf2/
I modified your gradients to make them more visible, Hope this helped