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}
Related
I am a junior web designer. I have a problem. please help me... I'm trying to make a website and I want to set a background just for header not for all of the page.what should I do?
Try this :
<!DOCTYPE html>
<html>
<head>
<style>
body {
display: inline-block;
background-image: url("http://s6.uplod.ir/i/00893/uhz63f8xhn0n.jpg");
}
</style>
</head>
<body>
<p>Ahmad</p>
</body>
</html>
Here there is an example of my problem:
http://asdcastelli.altervista.org/test-bootstrap/
In the head i have
<meta name="viewport" content="width=device-width, initial-scale=1.0">
but the responsive works only if i resize the window browser, not in mobile
Why?
This is the page in the resized windows browser
This is the page in the mobile view (chrome inspector)
You have to include table into a div.
<div class="responsive_table">
<table id="pubblicazioni_table">
/*your content*/
</table>
</div>
and on your css, you have to paste this line:
.responsive_table { overflow-x: scroll; width: 100%; }
(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.
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.