1. Home
  2. Forums Index
  3. Browser Side / HTML 7:11 am May 1, 2026

Forum Moderators: open

Message Too Old, No Replies

Help with HTML! works in most browsers but not IE

I'm new to coding and don't know how to fix it :/

         

pickle

6:08 pm on Apr 3, 2011 (gmt 0)

10+ Year Member



I've been coding a website in notepad and it has been going fine until now. I have hit a road block in the fact that I finally got a div to overlay a background image and the background will stretch to all monitors and the body(div) will center. I am willing to entirely change the coding if anyone knows how to accomplish this. I want the final site to look something like the Dewalt web site [dewalt.com...]

also if you have any suggestions to things that I should change in my coding I would appreciate them because I'm new to coding and this is my first web site!

here is my code 


<html>
<head>
<link rel="stylesheet" type="text/css" href="CSS.css" />
</head>
<body>
<div id="bg"><img src="background.jpg"></div>

<div id="body">
<h1>My Site</h1>
<table class="tab">
<tr>
<td><a href="My site.html">Home</a></td>
<td><a href="My site 2.html">Forms</a></td>
<td><a href="http://www.google.com/">Google</a></td>
<td><a href="http://www.google.com/">Google</a></td>
</tr>
</table>

</div>
</body>
</html>


and here is my CSS 


#bg { 
 position: fixed; 
 margin: 0px; 
 border: 0px; 
 padding: 0px; 
 left: 0px; 
 top: 0px; 
 width: 100%; 
 height: 100%; 
 overflow: hidden; 
 z-index: -1; 
} 
#bg img { 
 width: 100%; 
} 

#body { 
 margin: 0 auto;
 top: 0%;
 width: 900px; 
 height:98%; 
 padding: 0px; 
 z-index: 1;
 background-color: 9C0011; 
 -moz-opacity: 0.6;
 filter: Alpha(Opacity=60);
 opacity:0.60;
 -khtml-opacity:0.60;
} 
h1 {
 background-image:url('banner-with-logo.jpg');
 background-repeat:no-repeat;
 color:transparent;
 font-size:36pt;
 height: 75px;
 width: 900px;
}
hr {
 color:black;
}
table.tab {
 background-color: white;
 width: 900px;
 border: 6px inset red;
 cellspacing: 0;
 cellpadding: 0;
}
table.tab td{
 border: 2px solid red;
 width: 75px;
 align: center;
 text-align: center;
}
a:link {
 color:black;
}
a:visited {
 color:black;
}
a:hoover {
 color:blue;
}
a:active {
 color:blue;
}


Thanks for your help!

tedster

12:02 am on Apr 4, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Is there a reason why you applied the main background image to a div rather than to the <body> element?

webprutser

12:05 am on Apr 4, 2011 (gmt 0)

10+ Year Member



I don't understand exactly what your problem is, but let's start with the following. Your background.jpg as well as your background color can be put in the CSS:

body {
background-image: url(background.jpg);
background-repeat: no-repeat;
background-position: top center;
background: 9C0011;
-moz-opacity: 0.6;
filter: Alpha(Opacity=60);
opacity:0.60;
-khtml-opacity:0.60;
}

Your table is in fact a list. It could be something like this:
<ul>
<li><a href="My site.html">Home</a></li>
<li><a href="My site 2.html">Forms</a></li>
<li><a href="http://www.google.com/">Google</a></li>
<li><a href="http://www.google.com/">Google</a></li>
</ul>

You can add styling for your ul to the CSS file (now put in div #body).

What could be very convenient is using a html-editor. I use PSPAD, it's free and it offers different tools and options e.g. the html check and highlighting of your code, which makes life a lot easier compared to notepad (I started that way as well).

OK, back to your question: is it functioning at all, just not in Internet Explorer? I have no experience with opacity, but it's something I want to use in future, so your question/problem is wellcome. :-)

webprutser

12:16 am on Apr 4, 2011 (gmt 0)

10+ Year Member



Your color is missing #, so it will never work. It should be #9C0011.

webprutser

2:11 am on Apr 4, 2011 (gmt 0)

10+ Year Member



Have tested some things, looked at the DeWalt website and at their code, did some reading, but up till now haven't figured out what the trouble is with Internet Explorer. From what I have read and seen the "filter: alpha(opacity=60)" should do the job, but not on my computer. I even don't succeed in getting the color on top of the background. That does work well in Firefox, but als in Firefox the code needs some help as I haven't been able to let it cover the whole screen.
It's pretty late over here, so I call it a day. Maybe some other people jump in on this one, if not I will look to it tomorrow, but my experiences at this forum are very good. You won't be left alone and somehow the problem will be fixed.

Some remarks on your coding: a file name like "My site.html" is not advisable. Try not to use spaces and keep it lowercase. my_site.html and my_site_2.html would be better. A background-image in CSS has no quotes (single quotes are not used in html either, but double quotes):
h1 {
background-image:url(banner-with-logo.jpg);

My (ict) brother always advises me to use _ instead of -, has to do something with how a server handles things and chances on causing problems (lower case and underscore is what he always tells me ..., I'm no expert, just doing what my brother advises me, so for what it's worth ....)

I posted this piece of CSS earlier, but it wasn't working like I expected:
body {
background-image: url(background.jpg);
background-repeat: no-repeat;
background-position: top center;
background: #9C0011; /* mark the # that I now added */
-moz-opacity: 0.6;
filter: Alpha(Opacity=60);
opacity:0.60;
-khtml-opacity:0.60;
}

Had to put the background color in a div, otherwise the background image came on top of the color, which is in fact logic. I should have thought of that.

This piece of CSS:
padding: 0px;
left: 0px;
top: 0px;
I assume you mean padding-left and padding-top by left and top. Since all values are 0px, you can leave them out because you specified padding: 0px; When no additional value is added, it means that all 4 padding values (top, left, bottom and right) are 0px.

I hope you don't mind me being teacher-like. I am a student myself, have a lot to learn yet. There might be more to tell about table and no-table lay-out (not by me however, for it has still many secrets), but maybe it's better to get your opacity layer working first.

tedster

4:22 am on Apr 4, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



lower case and underscore is what he always tells me

Lower case - yes. Underscore - no, not for search engines, at least. See this Matt Cutts article, for just one example: Dashes vs. underscores [mattcutts.com]

[edited by: tedster at 5:22 pm (utc) on Apr 4, 2011]

webprutser

12:51 pm on Apr 4, 2011 (gmt 0)

10+ Year Member



I'll send him the link and ask his opinion about this, will let you know. As far as I can remember his advise had to do with the way servers are handling things, but I could be wrong of course.

Have no time yet to test more opacity stuff, but did a quick google. Found this piece of information:

But simply setting the filter/opacity value in IE isn’t enough. Turns out that IE requires an element to be positioned in order for filter/opacity to work. If your element doesn’t have a position you can work around this by adding ‘zoom: 1‘ to your CSS. There are other hacks to deal with this, zoom was the one I picked and it seems to work well enough.

pickle

11:15 pm on Apr 4, 2011 (gmt 0)

10+ Year Member



I probably should have mentioned this earlier, the background div for the background image was used to make the background image stretch to fit any browser/screen. The body div was made to but the body elements in and I wanted the body div to be translucent colored and contain all the content of the page. So all in all I want to have a body with content that is translucent in color to show some of the background image while being centered on every screen and I want the background image to stretch to any screen.

@tedster: because I googled how to make make sure that the background image stretches to any screen

@webpruster: I originally had the background image there but I wanted to make it fit any screen thats why it is now a div with those specific settings, is there a way to make it do that in CSS? and do I really want a list because the table is meant to be used as navigational tabs? Thanks for all the other little helpful hints too.

Thanks all for the great help so far!

webprutser

1:14 am on Apr 5, 2011 (gmt 0)

10+ Year Member



A list is often used to make a menu. You can add dropdown menu's if you like, use images for navigation, etc.
Here you will find some information on the use of a list for navigation, html as well as CSS:http://www.w3.org/Style/Examples/011/firstcss.en.html

Then the transparency. I am rather busy at the moment, but tried to find some more information. No time is left for testing, but if you could do the testing that would solve it for the moment.
I found this link on using transparency:
[domedia.org...]

It uses the CSS property rgba, rgb is red/green/blue and a is for alpha channel.
According to the writer his solution works in all browsers.
I checked what was written about it in my CSS Cookbook and indeed found the use of rgba for transparency of background-colors, but according to my book Internet Explorer needed some help.

This was the code given for Firefox:
#number4 {
background-color: rgb(255,255,0);
background-color: rgba(255,255,0,.4);
}

And for Internet Explorer this piece of code should be added:
<!--[if IE]>
<style type="text/css">
#number4 {
background-color: transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66ffff00,endColorstr=#66ffff00);
zoom: 1;
}
</style>
<![endif]-->

The last piece of code is inline-style, so should be put in the header of your html file, not in your CSS file. It specifies the CSS if Internet Explorer is used as a browser.
The "zoom:1" I found earlier is part of this code, I noticed.

Maybe you can do some testing and let me know what the results are.
#4 is the name of the div used in this sample, of course you can change that into the name you use.
One more remark: normally a color specification starting with # has 6 digits, the 8 digits I used is no typing error. It's a string of the color code plus 2 digits for transparency.

webprutser

8:45 pm on Apr 5, 2011 (gmt 0)

10+ Year Member



@tedster, regarding underscores and dashes:
I checked with my brother. His advise of using underscores has its origin in his own preference. From a server point of view using _ or - makes no difference.
Looking at the point discussed in the article you referred to, he agreed with that vision if SEO optimized urls is what you're after and your url is a good description of the content.

pickle

2:22 am on Apr 7, 2011 (gmt 0)

10+ Year Member



Thanks! This has helped a ton! The transparency issue is solved! I also was able to make the page look right in IE. I also found a forum that made it so that I was able to center the div in IE. The next problem that I need to take on is making the background resize to fit every screen if you could help me with that I think I will have all of my problems resolved! Here is my current 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="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>My Site</title>
<link rel="stylesheet" type="text/css" href="CSS.css" />
<!--[if IE]> 
<style type="text/css"> 
#body { 
 margin: 0 auto;
 top: 0%;
 width: 900px; 
 height:98%; 
 padding: 0px; 
 z-index: 1;
 background-color: transparent; 
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99990009,endColorstr=#99990009); 
 zoom: 1; 
} 
</style> 
<![endif]--> 
</head>
<body>
<div id="body">
<h1>My Site</h1>
<table class="tab">
<tr>
<td><a href="my_site.html">Home</a></td>
<td><a href="my_site_2.html">Forms</a></td>
<td><a href="my_site_3">Glove Straps</a></td>
<td><a href="my_site_4">Products</a></td>
</tr>
</table>





</div>
</body>
</html>

and here is the updated CSS for it 

#body { 
 width: 900px;
 margin-left: auto;
 margin-right: auto;
 top: 0%; 
 height:98%; 
 padding: 0px; 
 z-index: 1;
 background-color: rgb(153,0,0); 
 background-color: rgba(153,0,0,.4); 
} 
body { 
 background-image: url(background.jpg); 
 background-repeat: no-repeat; 
 background-position: top center; 
} 
h1 {
 background-image:url(banner-with-logo.jpg);
 background-repeat:no-repeat;
 color:transparent;
 font-size:36pt;
 height: 75px;
 width: 900px;
}
table.tab {
 background-color: white;
 width: 900px;
 border: 6px inset red;
 cellspacing: 0;
 cellpadding: 0;
}
table.tab td{
 border: 2px solid red;
 width: 75px;
 height: 10px;
 align: center;
 text-align: center;
}
a:link {
 color:black;
}
a:visited {
 color:black;
}
a:hoover {
 color:blue;
}
a:active {
 color:blue;
}


Thanks again for all of the help you have been great!

webprutser

8:57 am on Apr 7, 2011 (gmt 0)

10+ Year Member



This is becoming an interesting story.
When you remove the <div id="body">, and </div>, and add this id to your body tag: <body id="body"> your screen will be filled with a transparent reddish color. If you put it in the div of your table, only the background color of the table will have the specified color.
However, I seem to be unable to get things working in IE, neither your code, nor mine. I altered your color code into 99000009, otherwise it's nearly black, but nothing works. Which IE version do you use?

webprutser

9:33 am on Apr 7, 2011 (gmt 0)

10+ Year Member



Sorry, my answer was confusing. I misunderstood the string. Thought first 6 digits were color, than 2 digits for opacity, but it's opacity first and then 6 color digits.
According to my CSS book, however, 40% opacity is code 66, 99 is 60 percent.Not that I got it working now. :-(

pickle

11:37 pm on Apr 7, 2011 (gmt 0)

10+ Year Member



I have been using IE 8. Here is a screen shot of what it looks like [picasaweb.google.com ]

webprutser

1:15 pm on Apr 8, 2011 (gmt 0)

10+ Year Member



Still no transparency on the whole screen. And this is your html part?:
<body id="body">

<h1>My Site</h1>
<table class="tab">
<tr>
<td><a href="my_site.html">Home</a></td>
<td><a href="my_site_2.html">Forms</a></td>
<td><a href="my_site_3">Glove Straps</a></td>
<td><a href="my_site_4">Products</a></td>
</tr>
</table>
<div id="transparent">
<p>small test to see what happens here </p>

</div>
</body>

Note that I added the element <p> and as you can see the transparent color behind that element is coming from id=transparent:
#transparent {
background-color: green;
position: relative;
opacity: .4;
filter: alpha(opacity=40);
}

I had posted something else, though, but must have forgotten the submit button, it's not in this thread. I would like to know how it works on your computer, so I'll post it again. I did some more reading and testing and came accross this page on opacity: [quirksmode.org...]

When I test this page in Firefox it works as expected and it also does in IE. However, as soon as I copy the source and put the exact same code in a new html-file I have an odd problem. It still works in Firefox, but doesn't in IE. I can't think of any reason why and am very curious what's the result on your computer.

webprutser

1:41 pm on Apr 8, 2011 (gmt 0)

10+ Year Member



I realize you wonder how to view and copy source of this internet page, so I think it is a good time to mention another tool that might make your webdevelopers-life easier. It's the web developers add-on of Firefox: [addons.mozilla.org...]
It offers you a lot of possibilities. An other one that is useful is Firebug, also a Firefox add-on: [addons.mozilla.org...]
Both can be very convenient when you are testing files and trying to find out why elements behave the way they do and not the way you expected them to do. Nevertheless ... this opacity item is still not solved, part of the problem is the tools that are in Internet Explorer are giving me a hard time. In Firefox I often use "inspect element" to see where lay-out of a certain element comes from, but as an unexperienced IE user I'm struggling with how to let this browser give me more of this kind of information. Maybe I should try to find the answer on that question in order to have the main question answered, I have the feeling by now I'm running around in circles.

webprutser

1:58 pm on Apr 8, 2011 (gmt 0)

10+ Year Member



I should have thought of this earlier ...
All right, this one explains the way the developers tools, that are standard in IE8, works [msdn.microsoft.com...]
and within a minute I discovered what was in front of me all the time. :-)
Next to the styling that is given in the html file also a CSS file is used and some of the styling information is inherited from the CSS file, thus explaining the difference I talked about above. Will look into it further, hope this will lead to the final solution. I have the feeling we have all the pieces by now, "just" a matter of connecting the dots.

webprutser

4:42 pm on Apr 8, 2011 (gmt 0)

10+ Year Member



an update:
I think we are on the same level now.
I discovered that the odd effects I was experiencing were caused probably by (the combination of IE8 and?) Vista.
Testing on a different computer learnt me that the above mentioned page of which I copied the source was working like I expected, using Windows 7. The solution I suggested to you of putting the id in the body instead in a div of the table was working in Firefox but has the effect you have shown me on that picture when used in IE.
If this is solved, the entire problem is solved.
I have an online website with a background color that covers the entire screen, also in IE, so I expect the solution to be within reach now. Hope to be back with the final code soon.

webprutser

2:19 am on Apr 9, 2011 (gmt 0)

10+ Year Member



I would love to have given you an entire code that works. Somehow I got lost in reading and testing too much today. I don't seem to get Firefox (!) working properly. The opacity has a dark side: it is inherited by all children. Don't know what you know about inheriting of css-specs, but as far as opacity is concerned, the text inherits the opacity set upon a parent no matter what you put in a separate id. I have read quite some work-arounds but haven't got it working. I had it working in IE, as this is the most easy to deal with as far as this aspect is concerned, but I lost my well-working piece of IE somewhere (not deleted, but by now I have a complete mess of different files and need to have a clear mind to sort things out, no hope at that today anymore. :-)

Something else, that might interest you more, is I have a working full screen transparent background (but the text is transparent too, need to figure out what part I have to swap for some earlier code).
It's not a "decent" piece of code, but I couldn't find anything better than simply add a wide "width" and a high "height" to the div that contains the background color. For testing purposes I used width=3000px and height=1500px. Haven't looked into the dimensions of the larger screens nowadays, don't know exactly where we are, but that's easy to find.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / HTML 7:11 am May 1, 2026