background image is not shown in IE

There is a problem with background image in my HTML file. I have written an HTML file and in that I add a background image. When I open it in firefox, it shows the background image but it does not work in IE and the background is empty. What is the problem?

May 22 '09 #1

Subscribe Post Reply

5136

Markus

6,050

Expert 4TB

@mahmoodn
Not a psychic. Seeing the code-in-question would be helpful.

May 22 '09 #2

mahmoodn

It works in firefox but not in IE. Here is the code:

Expand|Select|Wrap|Line Numbers

 <!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>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >

<style type="text/css">

<!--

.style2 {font-size: 18px}

body {

    background-image: url(background.jpg);

}

-->

</style>

</head>
 
<body>

<script>

function closeMe()

{

window.top.opener=null;

window.close();
 
}

</script>
 
<script language='javascript' type='text/javascript'>

function calc() {

<!-- do something here... -->

</script>
 
<form id="form1" name="form1" method="post" action="">

  <p>

    <label>
 
    <div align="left">

      <fieldset>

      <legend><span class="style2">Environment</span></legend>

      <div align="left">

        <input type="radio" name="Environment" value="1" id="Environment_0" />

      <span class="style2">Residential</span> </div>

      <div align="left"><input type="radio" name="Environment" value="2" id="Environment_1" >

        <span class="style2">Official</span></div>

      <div align="left"><input type="radio" name="Environment" value="3" id="Environment_2" >

        <span class="style2">Industrial</span></div>

</fieldset>

      <p align="left" class="style2">Please insert the following information:</p>
 
<label>

  <div align="center" class="style2">Velocity (m/s)&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;

    <select name="V" id="V">

      <option selected >Very low</option>

      <option>Low</option>

      <option>Medium</option>

      <option>High</option>

      <option>Very high</option>

    </select>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Garment Insulation (clo)

<select name="C" id="C">

  <option selected="selected">Low</option>

  <option>Medium</option>

  <option>High</option>

</select>

  </div>

  <span class="style2">

  </label>

  <label>

  </span>

<div align="center" class="style2">Relative humidity (%)

   <input name="R" type="text" id="R" size="8" >

&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Metabolic Heat Generation (met)

<select name="M" id="M">

  <option selected="selected">Low</option>

  <option>Medium</option>

  <option>High</option>

</select>

</div>

</label>

<label></label>

  <label>
 
<div align="left">

  <p align="center">

    <input name="C2" type="button" id="C2" value="Calculate" onclick="calc()" />

  </p>

</div>

</label>

  <label>

  <div align="left">

    <p align="center">Temperature (C)

      <input name="T" type="text" id="tem" size="10" maxlength="5" >

    </p>

</div>

  </label>

<label>
 
<div align="left">

  <p align="center">

    <input name="E" type="submit" id="E" onclick="closeMe()" value="Exit" >

  </p>

</div>

</label>

<p>&nbsp;</p>

<p> </p>

</body>

</html>

May 22 '09 #3

Markus

6,050

Expert 4TB

Works fine for me in IE 7.

I can only assume that the file you are trying to use as your background doesn't exist.

Make sure you use the correct extension.

May 22 '09 #4

mahmoodn

This is what I see in IE, Firefox and google Chrome. I don't know if background-image: url(background.jpg); is correct. These two files are in the same folder (HTML and JPG files). Is that url correct or I have to give the full path of the image file?

May 22 '09 #5

Atli

5,058

Expert 4TB

Hi.

That markup works fine for me to in Firefox 3, IE8 and Chrome, using W7.
Although, there are lot of syntax errors in it. You may want to validate it to make sure that isn't causing problems.

Still, I would guess this is some sort of a caching problem on your end.
Perhaps you saved the image in the wrong directory, or misspelled the name of it?

Not sure if the fact that you are viewing this from your local drives will have an effect (doubtful), but if you have access to a HTTP server you might want to try putting it on there and see if anything changes.

May 24 '09 #6

mahmoodn

In the picture I opened one file with three browsers at the same time. I don't know what is the problem but if I use validation as you said, maybe the problem will show itself.

May 24 '09 #7

Atli

5,058

Expert 4TB

@mahmoodn
Good point. Makes spelling mistakes kind of unlikely.
Doesn't rule out caching problems tho. I'm not quite sure what effect loading pages from the local file system has on those sort of issues.

May 24 '09 #8

atlanteavila

You could be calling background.jpg and the title of the actual image could be background.JPG this could be the issue here... Let me know if this helped.

May 26 '09 #9

mahmoodn

No the file name is "background.jpg". I am validating the page now. I get 50 errors!! and 4 warnnings!! so maybe correcting all errors results in showing the background image in IE. I don't know but maybe firefox ignores some errors (!)

At this point I am working around with an error that don't understand:
Line 6, Column 69: end tag for "meta" omitted, but OMITTAG NO was specified
…content="text/html; charset=utf-8…

The line is:

Expand|Select|Wrap|Line Numbers

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >

I tried to add </meta> to close it but I get the same error. Anybody knows?

May 26 '09 #10

Atli

5,058

Expert 4TB

It should be:

Expand|Select|Wrap|Line Numbers

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Your doctype specifies this as a XHTML page, which means tags should use XML-style markup. All XML nodes should be closed, whereas certain HTML tags can be left open.
(The <br> tag, for instance, must be <br /> in XHTML)

May 26 '09 #11

mahmoodn

Yes thank you. I was thinking about HTML tags... I get more errors like this and now the errors reduced to 27 !

I also get some errors relating "character "<" is the first character of a delimiter but occurred as data". This is because I used alot of '<' and '<=' signs in my functions like: "for ( z = 1; z <= 1000; z++ ) {".

So it seems that it can not diffrentiate '<' sign with '<' for tags. I searched and some suggest that placing javascript function in a seperate file. How can I do that?

May 26 '09 #12

Atli

5,058

Expert 4TB

Take your JavaScript code and put it into a new file, something like "scripts.js".
Then you use the <script> tags to import them into your HTML file.

For example:

File: scripts.js

Expand|Select|Wrap|Line Numbers

 
function doSomething() {

  alert("This is a message");

}

File: index.html

Expand|Select|Wrap|Line Numbers

 
<html>

  <head>

    <title>Test</title>

    <script type="text/javascript" src="scripts.js"></script>

  </head>

  <body>

    <button onclick="doSomething();">Do Something</button>

  </body>

</html>

The <script> tag imports the JavaScript in the file into the HTML document, just as if it was written directly into it, and allows the <button> to call the function declared in the JavaScript file.

May 26 '09 #13

mahmoodn

I don't know if XHTML is really suitable for me. I read somewhere that

First of all, don't use XHTML on the Web unless you're serving it as an application of XML to specific user agents, like mobile devices. The Web needs less pseudo-XHTML, not more.

If I want to rool back to normal HTML labguage, what should I do? I created the page in adobe dreamweaver (blank page). Should I remove

Expand|Select|Wrap|Line Numbers

 <!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">

I think all of the errors I get are related to applying traditional HTML tags in an XHTML code. Here are the errors:

document type does not allow element "div" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag
<div align="left">

the name and VI delimiter can be omitted from an attribute specification only if SHORTTAG YES is specified
<option selected >Very low</option>

end tag for "span" omitted, but OMITTAG NO was specified
</label>

XML Parsing Error: Specification mandate value for attribute selected
<option selected >Very low</option>

XML Parsing Error: Opening and ending tag mismatch: span line 65 and label
</label>

May 26 '09 #14

Atli

5,058

Expert 4TB

If you want to use HTML rather than XHTML, then you should be using a HTML doctype. Like:

Expand|Select|Wrap|Line Numbers

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 

It's a more relaxed standard, so it may cause less errors when validating.

The most important thing you need to do is make sure start tags have matching end tags, and that they are closed in the right order.

For example:

Expand|Select|Wrap|Line Numbers

 
<!-- This will cause an error: -->

<option selected><span>Daddarada</option>
 
<!-- As will this: -->

<option selected><span>Daddarada</option></span>
 
<!-- It should look like: -->

<option selected="selected"><span>Daddarada</span></option>

May 26 '09 #15

mahmoodn

I changed to normal HTML. Still get some errors multiple times. They are:
document type does not allow element "DIV" here; missing one of "APPLET", "OBJECT", "MAP", "IFRAME", "BUTTON" start-tag

Expand|Select|Wrap|Line Numbers

 <form id="form1" name="form1" method="post" action="">

  <p>

    <label>
 
    <div align="left">

      <fieldset>

      <legend><span class="style2">Environment</span></legend>

      <div align="left">

        <input type="radio" name="Environment" value="1" id="Environment_0" >

      <span class="style2">Residential</span> </div>

      <div align="left"><input type="radio" name="Environment" value="2" id="Environment_1" >

        <span class="style2">Official</span></div>

      <div align="left"><input type="radio" name="Environment" value="3" id="Environment_2" >

        <span class="style2">Industrial</span></div>

</fieldset>

      <p align="left" class="style2">Please insert the following information:</p>

...

and following the above code I get:
document type does not allow element "LABEL" here

Expand|Select|Wrap|Line Numbers

 <label>

  <div align="center" class="style2">Velocity (m/s)&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;

    <select name="V" id="V">

      <option selected >Very low</option>

      <option>Low</option>

      <option>Medium</option>

      <option>High</option>

      <option>Very high</option>

    </select>

May 27 '09 #16

Markus

6,050

Expert 4TB

Block-level elements such as <div>, <fieldset>, etc., should not be nested inside inline-level elements such as <p>, <span>,
<label>, etc.

May 27 '09 #17

Ciary

247

Expert 100+

that was exacly what i was about to say :) are you sure you're not a psychic :p

anyway,
to make sure you get no errors. maybe change this:

Expand|Select|Wrap|Line Numbers

 ...

      <option selected='true' >Very low</option> 

      <option>Low</option> 

      <option>Medium</option>

...

May 27 '09 #18

mahmoodn

@Markus
so what is the alternative?

@Ciary
That did not work and caused one more error!

May 30 '09 #19

Markus

6,050

Expert 4TB

The alternative is to not nest block-level elements inside inline-level elements. ;)

I have no idea why you're putting a <select> and <div> inside a <label>. Labels should be used like so:

Expand|Select|Wrap|Line Numbers

 
<label for="username">Username:</label> <input type="text" id="username" />

Clicking on 'Username:' would put focus on the input element whose 'id' attribute matches it's 'for' attribute.

May 30 '09 #20

Atli

5,058

Expert 4TB

@mahmoodn
@Markus
Exactly. There isn't really any point in putting block elements into inline elements.
So the solution is simple: don't do it.

If you think you need to do it, you are probably misunderstanding how the tags you are using are supposed to be used.

May 30 '09 #21

by: Markus Mohr | last post by:

Hi, everyone, I have a special problem: For every monitor resolution in 200 pixel steps from 800 to 1600 pixels I have an image to be shown as centered background-image. Those images all...

Javascript

Background with

by: Wilhelm Kutting | last post by:

Hi i got the problem to get a horizontal css-menu working with background image. if i use display:block; under #list a, the image is shown but the list is vertical. When i use...

HTML / CSS

How to eliminate Tiling of windows forms background images

by: Ron Holmes | last post by:

I want to place a background image on a windows form. Is there a way to prevent the image from Tiling without using an image box resized to the size of the form? I am using Visual Studio 2003...

.NET Framework

Treeview background image

by: naamad | last post by:

Hi, My problem seems to be simple but after reading and investigating a little I realize it is quite complex: I have a treeview derived control, and I want this tree view to be shown with a...

C# / C Sharp

background-image problem while using CSS for aspx page

by: Nilesh | last post by:

I am using background-image attribute in a CSS file and linking the CSS file to aspx page. But strangly, background-image attribute is not working for relative URL. e.g. If I apply following css...

ASP.NET

Background image position and <pre>/<code> tag question

by: Schraalhans Keukenmeester | last post by:

I am building a default sheet for my linux-related pages. Since many linux users still rely on/prefer viewing textmode and unstyled content I try to stick to the correct html tags to pertain good...

HTML / CSS

background image wrapped weirdly

by: Wes Groleau | last post by:

Any kind soul feel like ending my efforts to figure out why two images are removing the top few rows of pixels but repeating them at the bottom? http://www.northwestallentrails.org/ Looks the...

HTML / CSS

background-image getting cut off outside original window display

by: KNDesign | last post by:

I've set a background image to repeat-y and at 100% height. It appears fine when I open the window, but when I resize to a smaller height so that I must scroll down to see the rest, the background...

HTML / CSS

Can't update foreground panel from background thread

by: =?Utf-8?B?R3JlZyBMYXJzZW4=?= | last post by:

I'm trying to figure out how to modify a panel (panel1) from a backgroundworker thread. But can't get the panel to show the new controls added by the backgroundwork task. Here is my code. In...

C# / C Sharp

background-image is shown in firefox and internet explorer diffrently

by: oranoos3000 | last post by:

hi i'd like to set background-image of submit button to a picture with gif extension i set style="background-color:url(images/back.gif)" in input tag with this work this button in firefox is shown...

HTML / CSS

Wordpress or something else?

by: Faith0G | last post by:

I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

Content Management Systems

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

General

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Javascript

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

background image is not shown in IE

Similar topics