I have a small problem with z-index on my site http://süperb.de.
In the header there are four links in a div with z-index:99. Under them there is the logo with z-index:1.
My problem: the links are just completable clickable in FF. In Chrome and Safari the z-index doesn't work and they are not completable clickable.
Help would be great.
The problem seems to be that chrome does not calculate the width and height of the A tag properly, try setting { display: block; } on the surrounding a tag, if that doesn't work, you might have to set a width and height on the a tag aswell.
Related
I have big problem. Tried almost everything and it still doesn't work properly.
Everything works fine in Opera, but in FF and IE images aren't responsive. I mean they are displayed with original dimensions instead of fitting a div (like in Opera).
Here is the link: http://gksolutions.pl/oferta/strony-internetowe
Any help my friends? I literaly wasted 2 days on it already. It's not bootstrap, just a simple grid system.
How does it look in FF and IE:
How it looks in Opera
Basically images aren't scaling properly in FF and IE, although row div is set to 350px height and img is styled with:
max-width:100%;
height:auto;
The problem here isn't with the images, but with the display: table; and display: table-cell; on the parent elements.
As far as I can tell, adding table-layout: fixed; after display: table; (in .element .row .row_inner > div) solves the layout problem.
See https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout for more information on what table-layout does.
I see no problems in IE11, but if I'm understanding you right, just use images as div backgrounds (css background-image) and everything will be fine.
I'm having a problem on a website with Safari 7 (on OSX).
The website address is:
<Edit: Address not valid anymore. Sorry.>
If you click on vertical newsletter button, on the right edge of the content box, an overlay will pop-up.
This overlay looks good on most browser, but there is a problem with safari.
The overlay content is an absolutely positioned box of fixed width. It contains a div with the class "bg", which is a div with CSS position set to fixed and CSS top, right, bottom left set to 0.
The desired (and normally obtained) effect, is that this bg box sizes up to the width and height of the viewport. In safari, it just behaves as if it had it's position set to "absolute" - it just sizes up to the width and height of the container div.
Is this a known issue with Safari? Is there a bug filed? An update?
I could probably fix that by rewriting small parts of the HTML, CSS and JavaScript (if someone has an easier solution, you're welcome to share it!) but I'd like to understand what's happening at first.
I'm not sure what's going on with that positioning thing, but here was my approach to get the same result across the browsers:
#overlays .overlay { /* line 1081 */
...
width: 100%;
height:100%;
...
}
#overlays .overlay .content.text { /* line 1185 */
...
margin:0 auto;
...
}
You could use Z-index but Z-index is not reliable with position:fixed, as shown in this fiddle: http://jsfiddle.net/mZMkE/2/ use translateZ transformation instead.
transform:translateZ(1px);
on your page elements.
EDIT: In your code, Add this css:
.bla, .projects, .contact {
-webkit-transform:translateZ(1px);
-moz-transform:translateZ(1px);
-o-transform:translateZ(1px);
transform:translateZ(1px);
}
and then remove z-index refs from those elements and .intro.
Also You can try in other browsers as well
There is a thing in default stylesheet firefox who make : line-height:normal !important; for the input.
My text with font-size:20px; have a computed line-height of 37px in firefox. My container (the input) have a fixed height of 30px and i can't center my text with padding because content > container and CSS don't allow negative padding.
I use a icon font and this is what i need a big font-size.
No problem with chrome, ie etc ...
Unfortunately I can't replace the by another html element.
I did a test in my firefox and the line-height rendered was from my code.
I used a simple css code:
div{
line-height:2;
}
The jsfiddle for you test in your firefox browser: http://jsfiddle.net/yso6v2po/5/
Did you check the version of your firefox?
I'm looking for a way to set an image to the 100% height of the browser window (with a small padding at the bottom), centred on the page.
I've set up an example in codepen, which works great in Chrome and Safari, but not Firefox, where the image shows at full size. What am I missing?
http://cdpn.io/sHJhl
.photo-bkg also needs its height set:
.photo-bkg { height: 100%; }
Here's a working fork of your pen.
So I want a page that's nothing but a square image which scales up to the height of the window. Fine, great, I do:
img
{
max-height:100%;
height:100%;
width:auto;
}
and stick an in a center-aligned div. Firefox loves it, but insists on the height:100%. Chrome doesn't need that, but adds a little bit of height to the page and so a scrollbar pops up. The whole page itself is still rendering identically down to the last pixel, but Chrome seems to think its window is a little heightier than it actually is. What's going on?
Check the margin and padding on the html and body elements -- often a hidden source of pain!
Yes, I know this was in my comment, but this way the question looks answered :-)