|
HTML - Image Appears Using Firefox But Not Ie9
First of all, thanks for taking the time to read. I've relatively no experience with web design, and so I'm trying to figure things out myself. It's worked so far with the exception of this little issue:
I've downloaded an HTML template from a site and have tampered with it in Notepad for a bit. As the subject says, I'm having trouble displaying an image using IE9 while the image in questions appears properly using Firefox. I've looked up a few possible reasons so far and none of them seem to be the cause for the problem. I've checked that the dimensions for the picture in question are not in the code, which I've heard is sometimes a problem with IE while Firefox avoids that altogether. In either case, I've made sure the picture I'm replacing in the template is the same size in pixels. Second, I've also made sure the .jpg is not saved in CKNY, and that it's in fact an RGB file. Before I go on further, please let me know what other info you might need to solve this and where I can post which parts of the code you might need. Thanks again! Similar TutorialsWell title says it all, when I try to do an image and have it linked some where a blue box will appear around it only on firefox and IE, not on Opera. How do I get rid of it??? I am using Dreamweaver Help PLEASE! Hi There Guys, I have a problem! Ive added a background to my site that I want to appear like so fixed center no-repeat. You can see the code below. But for some reason it doesnt line up with the top of my site. It is being pushed down a whole 108px??? You can see from the site how this looks... www.hogansfarm.ie/index.php. To be honest its my first time using fixed center no-repeat so im hoping someone else might have hand this issue and may know whats wrong. You can see the the image there should be no gap http://www.hogansfarm.ie/images/stripe_wide.jpg Thanks for your help! Kat body { background: #1f1e1e url(http://www.hogansfarm.ie/images/stripe_wide.jpg) fixed center no-repeat; color: #000000; font-family: arial, helvetica, sans-serif; font-size: 100.1%; padding: 0px; text-align: center; margin: 0px; padding: 0px; } Hello, I am pretty new to the whole html world so forgive me if this is a simple problem. I have look all over for a post explaing this problem but i haven't found anything. I am making a site for a friend using Dreamweaver. I know i know, i regret not coding it from scratch but its too late now. Anyways I have a pretty good page layout going now but I have ran into a problem with loading my images. On my home page an image in a table nested inside another table will load when viewing in safari but seems to disappear in firefox. What is going on? Its a pretty simple piece of code. I place; <img src="Pictures/RDV couplepalm.jpg" width="200" height="" style="float:right; padding: 8px; margin-left:10px; margin-bottom: 10px" / inside of a paragraph in a row of a table. I have rewritten the code for this image, copied it from a working image and screwed around with the table heights (although I wasn't too sure what i was doing). What else should I try? I have attached screen shots of the site in both browsers a copy of the problem jpeg aswell as a copy of the html. Any information anyone could givee me would be REALLY appreciated! Thank you. This is probably somethign simple but I have spent hours trying to figure it out and I just can't. Look at this page: http://69.63.144.35 In Firefox, it's perfect. In IE, you will notice that the table to the right shifts down a little bit. No matter what, I cannot seem to get these lined up in IE. Why would firefox show them aligned and IE not? Any ideas? Hi, I just set up this site: salemnhconservation.org The birch tree on the left hand side under the navigation doesn't look right in Firefox but looks fine in Safari. It is way too far down the page... it should sit right under the navigation buttons. The picture of the lake is in one cell (colspan 2). The navigation is in one cell on the next row. The tree is a background image of a cell in the next row. The page content is in one cell (rowspan 2). The cell that the navigation is in is much to tall in Firefox, but I'm afraid to add a height attribute because I think the height of each navigation button varies from browser to browser. I think it would be safer to find a way to eliminate the space below the navigation. Any suggestions? Also, on an unrelated note, does this site fit in an 800x600 resolution without having to scroll horizontally? Thanks! Good morning! I have a new website, shopcheesecakery.com, and I've written html code for years on forums, and as an ebay seller. I jsut can't figure out this new problem, though On the website, when I upload the index.html file through the ftp client, the page appears as raw code. I have pasted the info onto my ebay me page, and it works fine. Into several html practice pads online, it works fine. Into an ebay listing, it works fine. My hosting company says it's a problem with my code, but I just don't see how that can be, since it works elsewhere. They say they are unable to help, and sent me off with a "good luck!" HELP!!!!!!!!! Hello I thought my site was good to go until I viewed it on a pc. I took a look at it in IE on a pc and noticed outlines around the graphic nav. Do I need to add a bit of code somewhere? I'm attching a screenshot and below is my url to the site. thanks! http://www.bru.us.com html: <!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" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>BRU</title> <link rel="stylesheet" type="text/css" href="bru.css" /> <script type="text/javascript"> var revert = new Array(); var inames = new Array('about','contact'); // Preload if (document.images) { var flipped = new Array(); for(i=0; i< inames.length; i++) { flipped[i] = new Image(); flipped[i].src = "nav/"+inames[i]+"2.gif"; } } function over(num) { if(document.images) { revert[num] = document.images[inames[num]].src; document.images[inames[num]].src = flipped[num].src; } } function out(num) { if(document.images) document.images[inames[num]].src = revert[num]; } </script> </head> <body> <div id="header"> <img src="images/global/logo_gold.gif" /> </div> <div id="navigation"> <IMG SRC="nav/design.gif"/><br> <a href="tg_moodboard.html"class="catlink">TowerGroup</a><br> <a href="cbuy_moodboards.html"class="catlink">Click&Buy</a><br> <a href="mca_home.html"class="catlink">MCA</a><br> <a href="incretin_home.html"class="catlink">Incretin Forum</a><br> <a href="fifa.html"class="catlink">FIFA World Cup</a><br> <a href="psr.html"class="catlink">PSR</a><br> <a href="baraclude_banner.html"class="catlink">Baraclude</a><br> <a href="forest.html"class="catlink">Forest</a><br><br> <IMG SRC="nav/other.gif"/><br> <a href="divided.html"class="catlink">Divided</a><br> <a href="india_photos.html"class="catlink">Photography</a><br><br> <a href="about.html"> <img src="nav/about1.gif" name="about" onMouseOver="over(0)" onMouseOut="out(0)"> </a><br> <a href="contact.html"> <img src="nav/contact1.gif" name="contact" onMouseOver="over(1)" onMouseOut="out(1)"></a><br> </div> <div id="subnav"> <ul> <li><a href="tg_moodboard.html">Mood Boards</a></li> <li><a href="tg_direction_a.html">Home A</a></li> <li><a href="tg_direction_b.html">Home B</a></li> <li><a href="tg_sublevel.html">Sublevel</a></li> </ul> </div> <div id="portfolio"> <IMG SRC="images/towergroupmarketing/tw_moodboard.jpg"/>     </div> <div id="description"> <h1>TowerGroup / Moodboard</h1> <p> When TowerGroup came to us and talked about what they felt differentiated them from other financial institutions, one thing that stood out to me, was that they wanted to communicate that they're analysts are hands-on and accessible. To express this concept in a website, I thought mixing hand-drawn illustrations with photographs would help give the site a more personable feel. </p> </div> <!--Content--> <div style="position:absolute; top:474px; left:499px;"></div> </body> </html> css: body { font-family: sans-serif; background-color: #ffffff; font-size: 11px; margin: 0px; } #description { background: #ffffff; font-family: sans-serif; padding: 10px; line-height: 14px; margin: 0px 10px 10px 20px; } #portfolio { background: #ffffff; padding: 3px; margin: 0px 10px 10px 10px; } #header { position: absolute; top: 0px; background-color: #ffffff; margin: 20px; height: 80px; padding: 10px; } #subnav { background: #ffffff; padding: 0px; margin: 0px 0px 0px 0px; line-height: 10px; } #navigation { background: #ffffff; padding: 10px; margin: 0px 10px 10px 20px; } h1 { font-size: 16px; font-family: sans-serif; line-height: 24px; color: #000000; margin: -1px 0px 0px 0px; padding:0; } p { margin: 0px; padding: 0px; } a:link { font-family: sans-serif; font-size: 11px; color: #5b5b5b; text-decoration: none; line-height: 11px; font-family: arial, serif; } a:visited { font-family: sans-serif; color: #5b5b5b; font-size: 11px; text-decoration: none; line-height: 11px; font-family: arial, serif; } a:hover{ font-family: sans-serif; color:#C1A62E; font-size: 11px; text-decoration: none; background-color: line-height: 11px; font-family: arial, serif; } a.catlink:link { font-family: sans-serif; color: #5b5b5b; font-size: 11px; line-height: 14px; margin:0; padding:0; font-family: arial, serif; } a.catlink:visited { font-family: sans-serif; color: #5b5b5b; font-size: 11px; line-height: 14px; margin:0; padding:0; } a.catlink:hover { background-color:#C1A62E; font-family: sans-serif; color: #C1A62E; font-size: 11px; line-height: 14px; margin:0; padding:0; } .navheader1 { color: #C1A62E; font-size: 12px; line-height: 19px; margin:0; padding:0; } .navheader2 { color: #5b5b5b; font-size: 11px; line-height:17px; font-family: Georgia, "Times New Roman", Times, serif; margin: 20px 20px 30px 0px; padding:0; } a1:link { color: #5b5b5b; font-size: 11px; line-height:17px; font-family: Georgia, "Times New Roman", Times, serif; margin: 20px 20px 30px 0px; padding:0; } ul { margin: 0 0px 0 0; padding: 17px 10px 10px 2px; } li { display: inline; margin: 0 8px 0 0; padding: 0 0 0 10px; background: url(images/global/icon_asterisk.gif) no-repeat center left; } #description { position: absolute; top: 125px; left: 140px; width: 270px; } #navigation { position: absolute; top: 125px; width: 110px; } #subnav { height: 30px; position: absolute; top: 125px; margin-left: 475px; width: 3200px; } #portfolio { position: absolute; top: 160px; margin-left: 475px; width: 3400px; } Hi everyone, I've just designed a site for a friends parents, im not great with this kind of stuff but they are absolutely useless with computers so there is no point in asking them how they designed the site originally. It appears it was done as some kind of wordpress site, when i view the source I get... "<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!-- Generated by Avanquest Technology v:7.1. For information please visit: http://www.avanquestusa.com/ -->" ...however this is where the issue lies. When I log into the site on my FTP client nothing is there, there are no files or webpages or anything on there yet the site is still working, even when I try and upload my "index.html" file it doesnt cause the site to stop working and be replaced by mine. Is it possible for me to delete the old site completely so that I can upload the new one via FTP? Many thanks in advance for the replies! piratesholdem.com I'm trying to put in an iFrame in the center from which the rest of the site revolves, but even though it appears, it doesn't fill up the whole box/cell. The whole site is arranged with tables . Here's the code so far. <td width="576" rowspan="11"><p align="center"> <iframe src="News.htm" name="Name" width="100%" height="100%" align="top"></iframe> Hi, I saw uses a skill to provide a greater depth of informations as users browse for movies. When a customer hovers over the graphic for a movie, the movie ID is sent to their central servers, and a bubble appears that provides more details about the movie. Again, the page is not refreshed, and the specifics for each movie aren't found in hidden form fields. This approach allows Netflix to provide more information about its movies without cluttering its pages. Now I am maintaining a web site which hosts on a H-Sphere panel. I want to adopt this way in my website. Could you please provide me any idea? Thanks Can someone please help? I've spent hours of time trying to fix this tiny problem. It's not online yet, so you'll have to use the text. I attached them to this thread. The CSS belongs in a folder called "css_js". The "index" should be renamed html, and the osrfd should be renamed css. In short, the bar at the bottom of the page is the issue. It works fine in IE, but not in Firefox. I can't seem to get my image map to work in FF, it works fine in IE. Also, can I do things with the CSS hover attribute with image maps? Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Pl3x.net Introduction </title>
<!-- Link to external stylesheet -->
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div class="intro">
<img src="images/IntroAni.gif" class="intro" usemap="#navmap" />
<map id="navmap" name="planetmap" class="navmap">
<area shape="rect" href="#" class="n1" coords ="0,0,100,100" />
<area shape="rect" href="#" class="n2" />
<area shape="rect" href="#" class="n3" />
<area shape="rect" href="#" class="n4" />
</map>
</div>
</body>
</html>
Code:
div.intro { margin: auto; height: 500px; width: 500px; }
map.navmap { border: 0px; }
img.intro { border: 0px; }
Hi, I'm probably missing something really obvious, but I'm having a stumbling block on why for this page, you can see the image with the wreath when viewing it in Firefox, but not in Internet Explorer. I always use Firefox, but my bosses tend to use IE 6, so they were confused on why they couldn't see the image today. I also can't see the image in IE 7. Can someone take a look at this page: http://www.robotsandcomputers.com/robots/index.htm in both IE and Firefox and tell me why the images in the right hand side of the screen are larger in IE than in Firefox? I have been through the code and I can cannot figure it out.. Thanks Oh, and something else... On the menu at the top of the page. On that page you notice (in Firefox) that the menu spans the entire screen. But if you click on any other link on that menu, then the menu bar is centered. I removed the <p></p> tags in the menu on the first page because in IE they were adding way too much space above and below the menu links. Is there anyway to center those links (like they are on all the other pages) but still have IE display them correctly? I hope that makes sense.... Thanks.... http://www.eczaderm.com/ I have an iframe that is linked to source.html and that source.html has a swf gallery in it. As you can see in this example the top menu stays behind the flash gallery. I tried with giving iframe z-index:-1 but it didin't work. How can I fix this ? Ups I figured the solution that wmode must set to transparent . Thanks anyway Hi everyone, I am very new to designing web pages and HTML. I wrote a basic code for my test page, but when I upload it to the server and go to the link, it adds a bunch of crap. Check it out: garrettspctexperience.com. I've tried a few things to correct it, but nothing I've done works. I'm using TextEdit to write the code. Any help would be greatly appreciated. Thanks -Garrett Hello all, I'm new to the forum and to blogengine.net and i'm currently constructing a website for a charity event. All is going smoothly apart from one thing; the blog appears on every additional page i've created! Its using the standard theme, I cant find the code which causes this. How do I make each page static? I can provide any other information you may need. I've obviously already searched the site as well as google but surprisingly I couldn't find an answer! For example, here is the code copied from a page that was created, and since only had a banner added; _______________________________________________ <%@ Page Language="C#" AutoEventWireup="true" CodeFile="gallery.aspx.cs" Inherits="_gallery" %> <%@ Register Src="User controls/PostList.ascx" TagName="PostList" TagPrefix="uc1" %> <asp:Content ID="Content1" ContentPlaceHolderID="cphBody" Runat="Server"> <img src="http://www.400in4.co.uk/content/pics/titleboxes/Gallery.jpg" alt=""/> <br /><br /> <div id="divError" runat="Server" /> <uc1ostList ID="PostList1" runat="server" /> <blogostCalendar runat="server" ID="calendar" EnableViewState="false" ShowPostTitles="true" BorderWidth="0" NextPrevStyle-CssClass="header" CssClass="calendar" WeekendDayStyle-CssClass="weekend" OtherMonthDayStyle-CssClass="other" UseAccessibleHeader="true" Visible="false" Width="100%" /> </asp:Content> _______________________________________________ anything there that would 'turn off' the blog showing on this particular page? Thanks in advance Dave I'm trying to create a list of archived dates so that when you click one of the dates, a list of posts from that date drop down right under it (without leaving the webpage) Can anyone help me figure out how to do this? Thanks! Hello. Im beginner in html. I have icon and when i click on it, a link will open. I would allso like to do this: when mouse is on the icon - a textbox will appear with a text "NEW product!". The Textpox shoud not be any larger that the text itself and i like to know how to position the textbox. I hope it should be simple. Can someone please give me an example code? Thank u! |
|||||||