I have two animated .gif images in my webpage, but they are not being displayed in Firefox. It works on IE, Safari and Chrome. I have read other posts but I couldn't find a solution that works. Could someone help please?
This is the url:
http://www.lokalbericht.unibe.ch
Following is the code:
<!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>Lokalbericht - Hermann Burger</title>
<style type="text/css">
.text_body {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
body {
background-color:#000000;
background-image:url(images/intro/background_paper.jpg);
background-position:center 50px;
background-repeat:no-repeat;
background-attachment:fixed;
}
div.soon {
content:url(images/intro/coming_soon.gif);
position: relative;
width:650px;
height:170px;
top:350px;
left:30%;
}
div.lokalbericht {
content:url(images/intro/animation.gif);
width:160px;
height:20px;
position: absolute;
top:300px;
left:45%;
}
</style>
</head>
<body>
<div class="soon"> </div>
<div class="lokalbericht"> </div>
I checked your link. Try this...
div.soon {
background-image:url(images/intro/coming_soon.gif);
position: relative;
width:650px;
height:170px;
top:350px;
left:30%;
}
div.lokalbericht {
background-image:url(images/intro/animation.gif);
width:160px;
height:20px;
position: absolute;
top:300px;
left:45%;
}
Try this :
content: css property which you have set for load background image is creating problem so just replaced it with background-image into both given class div.soon ,div.lokalbericht
background-image:url(images/intro/coming_soon.gif);
background-image:url(images/intro/animation.gif);
In place of :
content:url(images/intro/coming_soon.gif);
I hope this helps you!!
Firefox doesn't support the content property in the same way as Chrome — on img elements and/or when the source is an image.
So you need to use background property instead of content or you need to use :before property the classes like below.
div.soon:before {
content:url(images/intro/coming_soon.gif);
position: relative;
width:650px;
height:170px;
top:350px;
left:30%;
}
div.lokalbericht:before {
content:url(images/intro/animation.gif);
width:160px;
height:20px;
position: absolute;
top:300px;
left:45%;
}
Related
Some idea to render this correctly on IE????
The :active only goes if I click out of span area.
I would like to do this without to use javascript.
On chrome and firefox it runs perfectly.
<!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>Documento sem título</title>
<style type="text/css">
a
{
padding:20px;
border:1px;
display:block;
}
a span
{
width:96px;
height:96px;
display:block;
border:1px solid;
}
a:hover
{
background-color:#ccc;
}
a:active
{
background-color:#666;
}
</style>
</head>
<body>
<a href="#">
<span>casa</span>
</a>
</body>
</html>
You can fix this using a pseudo-element for the a-element which is positioned right on top of it:
a {
position: relative;
}
a:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
The drawback is that you can't select any text inside the a-element.
Pseudo-elements are supported by IE8+. A workaround for IE7 would require CSS-Expressions, but as you don't want to use Javascript …
Try this code on your CSS
ul.active_a li a:link { color: red;}
this code may help you.. http://jsfiddle.net/easwee/WVrzu/16/
I tested it IE. its working perfectly.
Good Luck !
I'm having problems to align correctly the buttons on side by side. I need to build a solution without use the float resource. See it:
<!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>Documento sem título</title>
<style type="text/css">
* {
margin:0px;
padding:0px;
}
a {
display:inline-block;
padding: .63em;
border:1px solid #ccc;
position:relative;
}
.b2 {
padding: .0em 1em .0em 2.1em;
text-decoration:none
}
.icon {
position:absolute;
width:16px;
height:16px;
background-color:#999;
top:50%;
margin-top:-8px;
left:2px;
}
</style>
</head>
<body>
<div style="background-color:#f0f0f0; margin-top:50px; position:relative; height:22px; padding:4px;"> <span class="icon"></span>
<div style="display:inline-block; width:2px; height:22px; background-color:#666;"></div> <span class="icon"></span>
<span class="icon"></span><span>Casa d wqe dde qeasd sd</span>
</div>
<h2 style="background:#999"> test</h2>
<span class="icon"></span><span>Casa d wqe dde qeasd sd</span>
</body>
</html>
Try this here:
div .b2 {
top:-6px;
}
Demo
What about using an unordered list item? See this jsFiddle: jsFiddle
You set it to be inline using the CSS properties like this:
li {
list-style:none;
display:inline;
}
I am facing some issue in printing a form created using absolute positioning in FF. I am printing on A4 sheet. The page comes fine if its single paged form, but when i have to print multi page form the only first page is printed and other elements that have to come on second page overwrites each other in a single line on the next page. Its quite weird the same is working fine on IE
NOTE I am unable to share the html as it includes a lot of css and quite complex and big HTML pages.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#-moz-document url-prefix() {div{position:relative} }
#media print { marquee { -moz-binding: none; } body{overflow:visible !important;} }
#a{
position:absolute;
top:50px;
left:70px;
}
#b{
position:absolute;
top:1050px;
left:170px;
}
#d{
position:absolute;
top:1650px;
left:270px;
}
#c{
position:absolute;
top:1550px;
left:470px;
}
</style>
</head>
<body>asdasd
<div id="a">aa</div>
<div id="d">bb</div>
<div id="b">ff</div>
<div id="c">asd</div>
asdasda
</body>
</html>
There is a thread where the topic was already discussed:
Firefox printing only 1st page
However, the problem could be in the css.
As explained here http://briancaos.wordpress.com/2008/12/05/firefox-only-prints-first-page-of-contents/
If you have an
overflow: hidden;
in your css, change it to
overflow:visible;
and then it should work.
If it is possible, set the height of the div elements. This will at least force visibility onto two pages. However, it does not deal with overlapping divs, and there still may a problem of visibility of the div content.
Here is my revision (some visibility borders and coloring was added, and the width may or may not prove useful):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#-moz-document url-prefix() {
div{
position:relative;
background-color: #dddddd;
border: 1px solid #999999;
width: 20%;
}
}
#media print {
marquee {
-moz-binding: none;
}
body{
overflow:visible !important;
}
}
#a{
position:absolute;
top:50px;
left:70px;
height: 1000px;
}
#b{
position:absolute;
top:1050px;
left:170px;
height: 600px;
}
#c{
position:absolute;
top:1550px;
left:470px;
height: 500px;
}
#d{
position:absolute;
top:1650px;
left:270px;
height: 100px;
}
</style>
</head>
<body>asdasd
<div id="a">aa</div>
<div id="d">bb</div>
<div id="b">ff</div>
<div id="c">asd</div>
asdasda
</body>
</html>
There's a long standing issue with Firefox and printing absolute positioned elements as mentioned by Daniele B.
Can you redo the HTML+CSS to use relative positioning?
In the CSS add some page-break stuff (http://davidwalsh.name/css-page-breaks). That should make it easier to style the block elements so they flow in each 'page' and align things correctly when #media print.
change your position:absolute to position:relative. you can target firefox only in your print stylesheet using: #-moz-document url-prefix() {div{position:relative} }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#a{
position:relative;
height:50px;
left:70px;
border:solid 10px blue;
}
#b{
position:relative;
top:20px;
height:2000px;
left:70px;
border:solid 10px red;
}
#c{
position:relative;
top:50px;
height:250px;
left:70px;
border:solid 10px purple;
}
#d{
position:relative;
top:100px;
height:3000px;
left:70px;
border:solid 10px green;
}
</style>
</head>
<body>asdasd
<div id="a">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div id="b">bbbbbbbbbb</div>
<div id="c">cccccccccccccc</div>
<div id="d">ddddddddddddd</div>
asdasda
</body>
</html>
What worked for me is add a non-zero top margin to the absolute element container as David Earl writes here https://bugzilla.mozilla.org/show_bug.cgi?id=267029
I'm trying to develop a Layout with CSS and using a Iframe. How can I show the full page in the iframe without scrolling? Is the iframe appropriate to show full web pages?
Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>layout basic method web</title>
<style type="text/css" media="screen">
#container
{
width: 100%;
height: 100%;
background-color: #fff;
}
iframe
{
border-style: none;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="container">
<div id="top">
<h1>Header</h1>
</div>
<div id="content">
<h2>Subheading</h2>
<IFRAME name='iframe1' id="iframe1" src="http://www.yahoo.com"></IFRAME>
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>
If you test the code, you see that the CSS create a scroll inside the page. How can I get rid of this scroll and show all the page?
Best Regards,
UPDATE:
I'm almost there. I only need that the scroll up/down goes over the Header, just like goes over the footer. Is that possible? Please see the code. Just copy/paste it.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> stu nicholls | CSS PLaY | cross browser fixed header/footer layout basic method </title>
<style type="text/css" media="screen">
#printhead {display:none;}
html {
height:100%;
max-height:100%;
padding:0;
margin:0;
border:0;
background:#fff;
font-size:80%;
font-family: "trebuchet ms", tahoma, verdana, arial, sans-serif;
/* hide overflow:hidden from IE5/Mac */
/* \*/
/*overflow: hidden;*/
/* */
}
body {height:100%; max-height:100%; overflow:hidden; padding:0; margin:0; border:0;}
#content {display:block; height:100%; max-height:100%; overflow:hidden; padding-left:0px; position:relative; z-index:3; word-wrap:break-word;}
/*#head {position:absolute; margin:0; top:0; right:18px; display:block; width:100%; height:50px; background:#fff; font-size:1em; z-index:5; color:#000; border-bottom:1px solid #000; }*/
#head {position:absolute; margin:0; top:0; right:18px; display:block; width:100%; height:50px; background:#fff; color:#000; font-size:1em; border-bottom:1px solid #000;}
#foot {position:absolute; margin:0; bottom:-1px; right:18px; display:block; width:100%; height:25px; background:#fff; color:#000; text-align:right; font-size:2em; z-index:4; border-top:1px solid #000;}
.pad1 {display:block; width:18px; height:50px; float:left;}
.pad2 {display:block; height:50px;}
.pad3 {display:block; height:500px;}
#content p {padding:5px;}
.bold {font-size:1.2em; font-weight:bold;}
.red {color:#c00; margin-left:5px; font-family:"trebuchet ms", "trebuchet", "verdana", sans-serif;}
h2 {margin-left:5px;}
h3 {margin-left:5px;}
</style>
</head>
<body>
<div id="head">
<div class="pad1"></div><h1>Header</h1>
</div>
<div id="content">
<div class="pad2"></div>
<IFRAME name="teste" src="http://www.yahoo.com" width="100%" height="100%" frameborder=0></IFRAME>
<!--<div class="pad3"></div>-->
</div>
<div id="foot">Footer</div>
</body>
</html>
Any clues on how to achieve this?
Best Regards,
You'll have to set the height of the iframe to match the height of the page you are looking at.
If the page is within the same domain you could use javascript to dynamically resize the frame to match the body size of the page you are viewing. There's a few jQuery plugins out there that will do that.
If it's an external domain you can't do this so you'll have to just set the height property of the iframe to match.
If you want to get rid of the scrollbar on the main window, add an overflow style:
#container {
width: 100%;
height: 100%;
background-color: #fff;
overflow: hidden;
}
You can do this with javascript:
function resizeFrame(){
var iframe = parent.document.getElementById('id of your iframe');
$(iframe).height($('#your top html tag inside your iframe').height());
$(iframe).width($('#your top html tag inside your iframe').width());
}
Then call this function on load & after any hide/unhide actions that will change the form length:
resizeFrame();
If you have margins/padding on the top level html tag inside the iframe, you might need to add px to the height() / width() like this:
$(iframe).height($('#your top html tag inside your iframe').height()+40);
$(iframe).width($('#your top html tag inside your iframe').width()+20);
An iframe cannot adjust size relative to the page it is showing. You would need to adjust it's size with javascript, which implies that you know the size of the page beforehand. If you are just after showing the content of another page inside yours, indeed have a look at ajax.
A very simple example can be found here:
http://aleembawany.com/2005/09/01/ajax-instant-tutorial
be aware that loading pages with ajax in a cross-domain context might not work due to security settings of the browser.
I have just started making web pages and I'm having lots of trouble with this very simple web page. I can't make anything appear on IE but it works fine on everyother browser. I'll take the liberty of putting all the code in my question because it is really short. If anyone could help me it would be great!
The html is:
<!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> <title>Rhaya<title>
<link rel='stylesheet' media="screen" type="text/css"
href='rhaya.css'/>
</head>
<body>
<div id="masthead"> Rhaya </div>
<div id="content"> Aca va todo el
contenido </div>
<div id="footer"> ©2009 Rhaya | Teresa
Siu | Pía Fabry </div>
</body>
</html>
and the css is:
ul,ol,li {list-style:none}
body { margin:0 auto; padding:0;font-family: Tahoma;font-size:13px; background: #fff; line-height:15px; color:#000;}
a {color: #000;text-decoration:none}
a:hover {text-decoration:none;color:#000;cursos:default;}
/* Masthead */
#masthead {
margin:10px 0 10px 0;
height: 50px;
font-weight: bold;
padding:10px;
border:1px solid #a2ebf4;
background-color:#e1f2f9;
background-image: url(img/header.png);
}
/* Content */
#content {
margin-left:0px;
margin-bottom:10px;
padding:10px;
border:1px solid #000;
min-width: 300px;
min-height: 300px;
font-family: Tahoma;
font-size:13px;
}
/* Footer */
#footer {
clear:both;
padding:10px;
border:1px solid #a2ebf4;
background-color:#e1f2f9;
text-align:center;
}
#wrapper{
width:1002px;
clear:both;
height:auto;
margin:0px auto;
background:#fff;
}
I'm really sorry for asking so blatantly but I really am stumped.
Thanks!
For future reference: http://validator.w3.org/#validate_by_input
Use it for resolving html issues.
You have a mistake in your html head:
<title>Rhaya<title>
should be
<title>Rhaya</title>
Wow, it actually didn't show up at all in IE.
The reason is that you have the entire page in the title of the page. Change this:
<title>Rhaya<title>
to:
<title>Rhaya</title>
I suggest adding the following to you css:
div { position: relative; }
<html
tag isn't closed properly
title tag isn't closed properly.
I have tried and tested. it is your title problem. enclosed it title /title will definitely work.