(This question is a follow up from Safari Scrollbars & SVG - the workaround suggested was to use javascript, but Safari is not responding even to javascript. Or even straight css.)
I am unable to get a fully sized svg from Safari. It refuses to enlarge at all. I want the min-width to follow the jquery window width but it ignores the javascript (other browsers seem fine) and then even if I change the css directly it ignores even "width: 700px;"
SVG File
viewBox="0 0 800 800"
(no height or width specified)
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.objectwrapper{
max-width: 80%;
margin-right:auto;
margin-left:auto;
}
.objectdiv{
max-width: 100%;
margin-right:auto;
margin-left:auto;
display:block;
}
.svg{
width:100%;
display:block;
}
</style>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
var sixtypercentInnerWidth = .6*$(window).width();
$("document").ready(function(){
$(".objectwrapper").css("max-width",sixtypercentInnerWidth);
});
</script>
</head>
<body>
<div class="objectwrapper">
<div class="objectdiv">
Object4
<object class="svg" type="image/svg+xml" data="question0optimize1.svg" >
</object>
</div>
</div>
</body>
</html>
EDIT
I've just found that editing the .svg is getting some response...
$("document").ready(function(){
$(".svg").css("width",sixtypercentInnerWidth);
$(".svg").css("height",sixtypercentInnerWidth);
});
I needed to add HEIGHT as well as WIDTH.. so it seems SAFARI can't do svg %'s???????
Safari is absolutely capable of sizing SVG elements using CSS. I do it every day :)
The reason that your
.svg{
width:100%;
display:block;
}
isn't applying is because your objectwrapper and objectdiv elements don't have an explicit width in CSS. A max-width is not enough. Give those parent elements an explicit 100% width and that should solve things. No need to go round the bend with JS on this one.
A few related points:
a) Jquery selectors and functions generally don't play well together with SVG. I've used the jquery animate method on a path attribute, but that's about it. Everything else fails. You will need to write vanilla js to do much of anything with SVG.
b) Troubleshooting SVG is way easier in Chrome. Dev Tools still has some weird bugs with SVG that are being worked out, but generally if it works in Chrome it works in Safari.
In my opinion safari is perfectly capable of doing svg, either on os x, windows or ios. I don't use but and I find JQuery sometimes not behaving intuitive with svg.
On animation I do even some javascript backed animation, working in all browsers but MS IE.
Related
Why does the following media query work fine in FF (22.0) and Chrome (28.0.1500.71), but Safari (6.0.5) ignores it?
In case it's relevant, I'm using Mac OS X (10.7.5) macbook pro 13"
Thank you for your help!
Also, does anyone know if it works in IE?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<style type="text/css">
body {background-color:#efefef;}
h1 {color:black;}
#media only screen and (max-width:37.5em) {
body {background-color:#000000;}
h1 {color:white;}
}
</style>
</head>
<body>
<h1>Hi.</h1>
</body>
</html>
I found out why it wasn't working:
To test the media query, I was zooming in on the page, rather than resizing the browser window, and in Safari, unlike FF and Chrome, the media query doesn't kick in until you've refreshed the browser.
This is driving me nuts — I cannot place the image in src="", because border-radius will then fail. So, I moved it to background: url(), but then Safari keeps pushing this annoying border towards my face. How can I get rid of it ...?!
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img style="width: 500px; height: 500px">
</body>
</html>
Are you sure about the border radius? This works for me:
<!DOCTYPE html>
<html lang="en">
<body>
<img src="test.png" style="border-radius: 10px"/>
</body>
</html>
Rendering:
Safari 5.0.3 (6533.19.4), the default 10.6.5 browser.
If you want to get rid of the border set it in CSS file, do something like:
set all the images borderless
img {border:none}
or using a CSS class
img.nobrdr {border:none}
or specifying the container like on of these
#container img {border:none}
.container img {border:none}
also specifying a class inside the container
.container img.nobrdr {border:none}
This question already has answers here:
How do I fix inconsistent Textarea bottom margin in Firefox and Chrome?
(5 answers)
Closed 6 years ago.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="background-color:#f09;">
<textarea></textarea>
</div>
</body>
</html>
Result in Chrome:
removed dead ImageShack link
Result in FF:
removed dead ImageShack link
Try display:block on the textarea:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
textarea {display:block;}
</style>
</head>
<body>
<div style="background-color:#f09;">
<textarea></textarea>
</div>
</body>
</html>
The issue is that the textarea is inline and it is using the text height to add a bit of extra padding. You can also specify:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="background-color:#f09;line-height:0px;font-size:1px;">
<textarea></textarea>
</div>
</body>
</html>
Another option which is helpful if you want to keep the textarea inline and don't want to mess with the parent block's font properties (I suggest this over the previous method with line-height):
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
textarea {vertical-align:middle;}
</style>
</head>
<body>
<div style="background-color:#f09;">
<textarea></textarea>
</div>
</body>
</html>
Finally, if you're really worried about consistency between browsers keep in mind margins and other things like that can be defined with different defaults in different browsers. Utilizing something like YUI-Reset can help bring all new browsers to a consistent standard from which you can build.
Setting the display mode to block did the trick for me. Just to clarify, here is the declaration that you need to add to your stylesheet. I would recommend adding it to your reset or normalize stylesheet, in the first place.
textarea {
display:block
}
I usually have a "first line" in every global.css file I make.
saying:
<style>
html,body,p,h1,h2,h3,h4,h5,h6,img,table,td,th
{
margin:0;padding:0;border:none;
font-familiy:"my sites default font";font-size:10px;
}
</style>
After this, I feel that I have full control of the browsers behaviour, when testing on 5 different platforms: Chrome, Firefox, Safari, Opera and ... doh... Microsoft Internet Extracrap..
Then you can easily do something similar for < input > and < textarea > too.
if the first line does too much, then just make a second line for the "special cases" alone.
<style>
textarea {margin:0; padding:0; border:none; display:block;}
</style>
Remember that CSS inherits, so you can have multiple declarations of different classes.
Does this remove your problem?
I want to use gradient color as my page background
how do I apply css to get gradient background?
See:
Cross-Browser CSS Gradient
(source: webdesignerwall.com)
CSS 3 supports gradients but this won't be supported by all browsers (eg IE6).
But you could do this, which I think is pretty similar to the previous answer:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
padding:0px;
margin:0px;
}
div#bg {
background: url(http://www.khiba.com/PSP/FALL01/Testgrad.jpg) repeat-x;
height:600px;
}
</style>
</head>
<body>
<div id="bg">
</div>
</body>
</html>
if you want your site to be compatible with all browsers, you can use this :
background-image: url(someurl.gif);
background-repeat: repeat-x;
the someurl.gif image should contain the gradient that you want. Have it as a very small piece of image and you can extend it with repeat-x or repeat-y. whichever you prefer.
You can use the linear-gradient function in CSS.
Add this to your css file:
body {
background: linear-gradient(0deg, COLOR1, COLOR2);
}
Replace COLOR1 with the first color and COLOR2 with the second color.
I am using Blue print CSS and it works fine in Firefox...but when I look at it in IE, even with the for IE lt IE8, it still doesn't seem to be working right in terms of spacing and alignment.
Any suggestions on what I can do to make it look proper?
Make sure that you use a doctype. If you do not it will render in quirks mode. I had the same problem and correcting the doctype worked.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
That should go at the top of the document
Are you including the ie.css file? Below the regular blueprint css files, include the ie.css file, using the notation that only IE will parse:
<link rel="stylesheet" href="../../blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="../../blueprint/print.css" type="text/css" media="print">
<!--[if lt IE 8]><link rel="stylesheet" href="../../blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
Make sure that all the URLs to the CSS files are correct and are working on your site also.
I know this is a bit late, but hopefully it'll help someone who googles it.
A big gotcha when using blueprint here is to ensure that your container div has a class of container, not id:
<div class="container"> ... </div>
Not
<div id="container"> ... </div>
It's caught me out a few times before.