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.
Related
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
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.
I'm trying to make a website and everything works fine on certain browsers like Google Chrome and Safari, but it doesn't work on Mozilla Firefox and Internet Explorer.
Here's a link to how it looks http://imgur.com/BmMOqw0,qiICBR4#0
The first image is how it looks in Chrome and Safari. The second link is IE and Firefox.
The HTML is basically a square image wrapped in many borders.
<div> <div> ... <div> <img> </div> ... </div> </div>
The CSS has the image and all the divs set to border-radius 100% and also has code along the lines of:
max-width: 574px;
max-height: 574px;
display:block;
max-height:100%; //repetitive, I know, but I've been frustratingly trying everything that might work
width:auto;
max-width:100%;
height: auto;
I've tried it with max-height, without max-height, with height: 100%, without height: 100%, etc. I've googled this problem countless times and the solutions that work for others don't seem to work for me. I've set html, body {height: 100%} and I've tried .cycle-slide {width:100%;} and section img { width: 100% } but those didn't work either.
edit: http://jsfiddle.net/zc3Y8/1/
The code is a little bit different because I'm using Ruby on Rails on Aptana. But this is pretty much how it looks
You are using two different images as link: First one, http://i.imgur.com/BmMOqw0.png and second one, http://i.imgur.com/qiICBR4.png
I've implemented an Iframe Like box, but the vertical scroll bar does not show. (The generated code set scrolling to no, but I've now changed it to yes, but still it does not work).
The code is as follows:
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FChristopher-Carter-Veterinary-Surgery%2F332086710515idth=300&height=590&colorscheme=light&show_faces=true&border_color&stream=true&header=true" scrolling="Yes" frameborder="0" style="border:none; overflow:hidden; width:300px; height:590px;" allowtransparency="true"></iframe>
The problem occurs with I/E but not with Safari, Firefox, Netscape or Chrome. It seems as if this is a Windows XP / IE8 issue, but if anybody knows differently, I'd be pleased to hear from them.
You have overridden the scrollbars in the style clause;
overflow: hidden;
However, it has the opposite effect, IE will correctly render as-is, but firefox etc will not render the scrollbars. Fix that with;
overflow-y: scroll;
Having style overflow:hidden; seems to me like a contradiction to scrolling=Yes.
At the risk of stating the obvious:
Have you tried:
overflow:scroll
I'm running into a vertical positioning problem with a couple of elements on a page in Firefox 5. When I set a line-height on a piece of text, and give it an equal height, it doesn't center vertically the way it should. Instead it sticks to the top of its line-height.
The page in question is here: http://www.tyndale.ca/~missiodei/
Here are the two problem elements along with their CSS. In both cases the text is pushed up in FF5 but displays properly (vertically centered within its line-height) in Chrome/Chromium.
the large title link in the banner (#blogtitle a)
position:relative;
display:block;
margin:0;
padding:0;
color:#fff;
text-decoration:none;
letter-spacing:.1em;
font-family:"Palatino Linotype", Palatino, serif;
font-weight:bold;
opacity:0.6;
height:120px;
line-height:120px;
any of the drop-caps that float at the beginning of new sections of body text (p.openingPar:first-letter)
font-size:3em;
font-weight:bold;
position:relative;
float:left;
height:48px;
color:#ccc;
line-height:48px;
margin-right:4px;
You might not see these drop caps unless you look at the page using Chrome or Safari, since most of them aren't showing up at all in FF. (I'm not sure why these styles aren't being respected either).
Finally, it would be helpful to know whether this is a problem unique to FF5 or whether 3.6 and 4.0 have the same problem. I don't have any old versions of FF available for quick testing.
Thanks ahead of time for help. I've imprinted my keyboard on my forehead bashing my head over this one!
The vertical centering seems to work fine for me....
The lack of first letter styling is https://bugzilla.mozilla.org/show_bug.cgi?id=8253
Try using <span class"dropcaps">W</span> instead of styling your opening first letter in the paragraph by selector :first-letter. Let us know if it works.