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
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.
On one of our Joomla 2.5 websites the images here
http://rodoyo.com/flatnews/index.php/benefits/event-organiser-benefits
appear correctly in firefox but are thumbnails in Chrome
Why is that?
have checked that the image sizes are correct in the backend
The problem is happening in all WebKit based browsers I currently have at hand i.e. Chrome (Win/OSX/IOS) and Safari (Desktop & Mobile)
In your bootstrap.css you will notice this:
img {
max-width: 100%;
height: auto;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
Specifically the max-width: 100% — I think you will find that as it's set to 100% of the container (in this case the surrounding <td></td>) that the problem lies in the width of the <table> columns.
Given that max-width percentages are used to calculate the width from the size of the containing block, not the element they are attached to the WebKit browsers are doing the right thing and Firefox apparently isn't (anyone with better insight please chime in here).
You could fix this by specifying the width of the first <td> like this:
<td style="width:102px;">
Or a better approach would be to not use tables for layout, as that's not what they are meant for.
Read more about using here and here.
I have two boxes. The first one contains simple text. The second one contains a submit input with no borders, paddings, margins.
So, why the input takes more height than the simple text?
I know that I can play with the padding and remove the box height, but for my purposes I need to set it a static height, and prepare this box to be reusable for both inputs and simple texts.
I have tried to play with line-height and vertical-align properties, without success.
What is causing that extra line-height?
There's an example to play with it.
Edit: I recently see, that the issue is only with Firefox...
I think it could be for the line-height property in the Firefox CSS:
But... in first place I can't believe what my eyes are seeing. An !important in the internal browser stylesheet? That's normal? Could this be a possible answer?
Similar question with the same answer.
But the trick Leniel suggest doesn't work for me...
The extra padding is on your .buttonarrownext class.
Fixed CSS Class:
.buttonarrownext {
cursor:pointer;
position:relative;
border-radius:4px;
text-align:center;
background:white;
border:1px solid red;
padding: 0px; /* changed the padding here */
margin:0px auto;
display:inline-block;
}
A JSFiddle to demonstrate.
As mentioned in my comment, it displays fine in IE and Chrome, but not FF. A quick solution is to replace the input with a button.
updated html would be:
<div class="container">
<div class="buttonarrownext">Siguiente</div>
<div class="buttonarrownext"><button class="reset">Siguiente</button></div>
</div>
There's no real difference as you can still fire a submit event with a click handler for the button...
It will be interesting to find out why FireFox does this though...
Updated fiddle - http://jsfiddle.net/QfPGW/2/
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 have a bug i'm trying to narrow down and it's proving to be a doozie. i'm making a modal overlay and in IE8 for some reason i am able to click "through", focus inputs and select text underneath it.
in IE9, FF, Chrome everything works as expected. unfortunately a reduced testcase i slapped together (shown below) works just fine in IE8. has anyone run into this bug before? hoping to save some time. thanks!
<!DOCTYPE html>
<html>
<head>
<style>
div {
background: pink;
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
opacity: 0.5;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
</style>
</head>
<body>
<input type="text" />
<div></div>
</body>
</html>
The problem is indeed that IE allows clicks to bleed through when the background of a div is transparent. For me, this works everywhere:
Just use a base64 encode of a 1x1 pixel transparent GIF as background, this stops all the clicks / taps (also tested on IE9 and IE8). Plus, this is pure CSS, no extra images needed.
background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
The root cause of this issue is that IE does not consider semi-opaque backgrounds to be valid click targets, and so clicks are passed through to the element underneath.
For IE, you must have a solid color background or a background image to have an element capture clicks. As you've discovered, filters will not work.
The common thing to do is to use a 1x1 transparent GIF as the background-image for IE. The element will then capture clicks appropriately.
figured it out, i was using rgba() rather than opacity because i needed only the background to have transparency.
for IE it generated gradient filter using -ms-filter which was causing the issue. ended up just using
background: url(/images/EBEBEBB3.png);
background: rgba(255,255,255,.7);