I am creating a website which has the following code in it.
<style>
.browser_logo{
width:100%;
}
</style>
<img class="ie_logo browser_logo" src="images/clientimages/logo/logo.gif">
The image is about 1000px width which is extreme but it needs to be. The problem is that it is only 52px width in Safari. It is correctly displaying in Chrome, Firefox, Opera and even in IE. I have been looking the entire evening for Safari hacks but everything I find also changes the output in the Chrome browser. When I remove the width 100% or basically the style part then it shows the entire image as it should in safari. But then it will no longer be responsive. Any help would be greatly appreciated.
I have added the following to the style part above. Which makes it work but it is an ugly hack so I still would like to know how to do it properly.
This is the new code. I have used the screensizes from http://www.websitedimensions.com/
<style>
#media screen and (min-width:310px) {.browser_logo{min-width:310px;}}
#media screen and (min-width:468px) {.browser_logo{min-width:468px;}}
#media screen and (min-width:750px) {.browser_logo{min-width:750px;}}
#media screen and (min-width:989px) {.browser_logo{min-width:989px;}}
#media screen and (min-width:1010px) {.browser_logo{min-width:1010px;}}
#media screen and (min-width:1117px) {.browser_logo{min-width:1117px;}}
#media screen and (min-width:1245px) {.browser_logo{min-width:1245px;}}
#media screen and (min-width:1405px) {.browser_logo{min-width:1405px;}}
#media screen and (min-width:1645px) {.browser_logo{min-width:1645px;}}
#media screen and (min-width:1885px) {.browser_logo{min-width:1885px;}}
}
</style>
<img class="ie_logo browser_logo" src="images/clientimages/logo/logo.gif">
Why not just set .browser_logo { width:100%; } instead of using all of those media queries?
Perhaps it would be easier to understand what you were trying to do if you put it in a jsfiddle, or showed us the live link?
Related
Does anyone know of a firebug like debug tool that will notify user of which #media tag they are currently viewing in?
It would clear up any confusion as to where user should be debugging in the code.
Using the latest Bootstrap (as of today).
Secondly this brings me to the main issue, when the screen size changes elements shift on the screen as expected, however 1 div shifts out in the wrong direction when the screen changes. Observing firebug, no html/css code changes.
So this must be JS? either way where to begin tracking the fault?
You could create a dummy element for each selector that you can then inspect using JavaScript and examine its value.
For example:
<div id="media-version"></div>
#media-version {
content:"Full Width";
display:none;
}
#media all and (max-width: 699px) and (min-width: 520px){
#media-version {
content:"520-699 width";
display:none;
}
}
alert($('#version').css('content'))
You'd have to change the content within each media query.
I am working on a fixed width legacy site and want to create a more optimal experience for tablet users by implementing a couple adaptive layouts. The first layout will be a 600px wide design and it will be displayed on devices with 600px - 768px screen widths. The second adaptive layout will be a 769px wide design and it will be displayed on devices with 769 - 1023 screen widths.
I want to know how I can use the viewport meta tag to make the designs scale up to fit into mobile browsers with widths larger than the original design.
For example, when the 600px design is viewed on a device with a 768px browser screen width, how can I make the smaller design take up the full width of the screen?
I have found a lot of information about adaptive layouts for websites with fluid grids, but nothing that specifically talks about the relationship between design width and viewport sizes for fixed width sites - at least not one that I can understand.
It is called responsive web development.
First step is to put below tag in your code inside head tag part.
For responsive design use media queries:
Now use the media queries, here is good example of media queries . Also learn how to use it.
Here is small snippet of code which will guide you how to use:-
<style>
.clear{ clear:both;}
/*this will work for desktop*/
#media only screen and (min-width: 801px){
#container {
position:relative;
width:80%;
margin: 0 auto;
}
/*this will work for tablet*/
#media only screen and (max-width: 800px) and (min-width: 521px)
{
#container {
position:relative;
width:80%;
margin: 0 auto;
}
/*this will work for mobile*/
#media only screen and (max-width: 520px) and (min-width: 320px)
{
#container {
position:relative;
width:80%;
margin: 0 auto;
}
</style>
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 have multiple backgrounds with a gradient, and its working for Firefox, Chrome and Safari, with certain media querys for mobile devices.
As usual the problem is Internet Explorer. I used to have a conditional stylesheet for IE where I just loaded a single background image, but as far as I know, IE10 wont support < !--If IE--> in my CSS.
Ideally I would like to get the css3 gradient and separate background images working on all browsers, I'v been happy to use a single background image for all IE browsers, but so far the single background image wont work for IE.
CSS in main style.css
body{
font:14px 'questrialregular', Arial, Helvetica, sans-serif;
margin:0;
width:100%;
color:#797979;
background-image:
url(../img/bknd_img1.png),
url(../img/bknd_img2.png),
url(../img/bknd_img3.png),
url(../img/bknd_img4.png),
url(../img/bknd_img5), -webkit-gradient(radial, 50% 20%, 0, center center, 500, from(#c0deff), to(#509deb));
background-image:
url(../img/bknd_img1.png),
url(../img/bknd_img2.png),
url(../img/bknd_img3.png),
url(../img/bknd_img4.png),
url(../img/bknd_img5.png), -moz-radial-gradient(center center, circle contain, #c0deff, #509deb);
background-attachment:fixed;
background-position:top right, top left, center bottom, bottom right, left bottom;
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
background-color:#509deb;
display:block;}
CSS for Internet Explorer: style-ie.css
font:14px 'questrialregular', Arial, Helvetica, sans-serif;
margin:0;
width:100%;
color:#797979;
background-image: url('img/bknd_full_img.jpg');
background-attachment:fixed;
background-position:center top;
background-repeat: no-repeat;
background-color:#fff;
display:block;
}
The problem is that you only give the gradient and multiple background to WebKit (using the old syntax) and Firefox (using the slightly newer syntax). There is no way that either IE or Opera can display the gradients or multiple backgrounds as you don't supply their prefixes or the none prefixed version.
IE10 implements gradients using the latest and final syntax, without prefixes. The latest Opera does too, and so does recent Firefox. IE10 doesn't need your conditional comment code, as it will work the same way as the other browsers.
The radial gradient should become something like:
background-image:
url(../img/bknd_img1.png),
url(../img/bknd_img2.png),
url(../img/bknd_img3.png),
url(../img/bknd_img4.png),
url(../img/bknd_img5.png),
radial-gradient(circle closest-side at center, #c0deff, #509deb);
More details on the syntax changes can be found on the IE blog [0] and the spec [1]
[0] http://blogs.msdn.com/b/ie/archive/2012/06/25/unprefixed-css3-gradients-in-ie10.aspx ,
[1] http://dev.w3.org/csswg/css3-images/#radial-gradients
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);