|
HTML - Issues With Images With Firefox And Ie
Using the following code column within my datagrid. It gives me different results within firefox and IE. It should show some text and then the image should appear after the text. Within IE 7 it works fine but within firefox 3.6.10 the image is directly over the text. I'm not using a CSS file. This is a page I inherited and I'm asked to fix this. Any help would be appreciated.
Code: <asp:templatecolumn headertext="Name" headerstyle-width="90px" sortexpression="varName">
<itemtemplate>
<asp:label width="10" id="lblName" runat="server">
<%# DataBinder.Eval(Container.DataItem,"varName")%>
</asp:label>
<img src='/Images/Info16x16.gif' border=0 />
</itemtemplate>
</asp:templatecolumn>
Similar TutorialsHi! I've got this header image. It has a width of 1440px. I want it to be centered even if the size if my screen is 1024px in width. Can someone please tell me what's the best way to fix this? Regards, Mayhem Hello, Having issuse with the browsers. Firefox I am all good but when I look at IE7 one page stops reading my CSS. I have NO idea y. PLEASE HELP!!! Hello, My website works fine in IE but when i open it in Firefox the small square images don't show up - can anyone give advice on what is causing this and a fix for it? http://www.turbulenceurbanwear.com/leilani.htm Thanks for your help Hi guys, I've been working on a website for a friend for a while now and thought I had it complete. That was until I opened it with IE! Things don't look right in IE - and also IE crashes when some pages are loaded. Any chance you could look at this page: http://www.flatvision.name/de/index.php in both IE & Firefox and offer some advice as to why it does what it does? Thanks very much - help and advice much appreciated. ! Leigh I know that means I have some errors in my code, but Im having trouble spotting them. The background isnt working right in Firefox and Opera. Link: http://killinghookers.net (Code has been changed slightly. View the source on the page for the latest code) For some reason as well, the copyright information isnt staying at the bottom of the page but is floating left of the main content under the right nav column. After messing around this is what I have: HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Title" content="RSGOD.NET HOME" />
<meta name="author" content="I Hate My User Name">
<title>RSGOD.NET HOME</title>
<link href="master.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="page">
<div id="logo"></div>
<div id="nav">
<ul>
<li><a href="/" title="Home">Home</a></li>
<li><a href="http://www.killinghookers.net/forum" title="Visit The Forum">Forum</a></li>
<li><a href="#" title="#">Nav Item</a></li>
<li><a href="#" title="#">Nav Item</a></li>
<li><a href="#" title="#">Nav Item</a></li>
<li><a href="#" title="#">Nav Item</a></li>
</ul>
</div>
<div id="side_left">
<div id="side_cat_title">
Navigation
</div>
<font color="#000099"><p>Home</p></font><br />
<p><b>Other Important Sections:</b></p>
<p> · <a href="http://www.killinghookers.net/forum" title="forum">Forum </a></p>
</div>
<div id="center">
<div id="cat_title">
News
</div>
Here's some news :)
</div>
<div id="side_right">
<div id="side_cat_title">
Useful Links
</div>
<p>· <a href="http://www.killinghookers.net/forum/index.php?act=Reg&CODE=00" title="Register to Enjoy the Benifits of Killing Hookers!"> Register </a></p>
<p>· <a href="http://www.killinghookers.net/forum/index.php?act=UserCP&CODE=00" title="Visit Your Profile"> My Controls </a></p>
<p>· <a href="http://www.killinghookers.net/forum" title="Visit the Forum"> Forum </a></p>
<p>· <a href="http://www.killinghookers.net/forum/index.php?showforum=36" title="Need a Game? Visit the Games Section!"> Game Downloads </a></p>
<p>· <a href="http://www.killinghookers.net/forum/index.php?showforum=39" title="Visit for the Best Movies!"> Movies </a></p>
<p>· <a href="http://www.killinghookers.net/forum/index.php?autocom=market" title="Market"> Store </a></p>
<p>· <a href="http://www.killinghookers.net/forum/index.php?autocom=sotw" title="Sig Of the Week"> Sig of the Week </a></p>
<p>· <a href="http://www.killinghookers.net/forum/index.php?showforum=7" title="Visit for Awesome Music!"> Music Downloads </a></p>
</div>
<div id="footer">
<p>
©2007 Killing Hookers.net
<br />
Coding Help (Lots!) by <a href="http://bbmodding.com/about.php" title="I Hate My User Name's Website">I Hate My User Name</a> <- Super Tech :)
</p>
</div>
</div>
</div>
</body>
</html>
Code: /*
+---------------------------------------------------------------+
| |
| CSS and HTML Designed by I Hate My User Name |
| Contact: ihatemyusername [at] hotmail.com |
| Do not reuse without my permission! |
| |
+---------------------------------------------------------------+
*/
body {
margin: 0px;
padding: 0px;
height: 100%;
/*Have to reset those terrible browser defaults*/
background-color: black;
width: 940px;
margin-left: auto;
margin-right: auto;
}
#wrapper {
width: 940px;
height: 100%;
margin-left: auto;
margin-right: auto;
/*Creates our fixed width and the margins center it*/
background-image: url("images/wrapper.png");
/*Borders*/
}
#page {
width: 922px;
height: 100%;
margin-left: auto;
margin-right: auto;
/*This has the actual page centered between the borders*/
background-color: black;
font-family: verdana;
font-size: 12px;
color: white;
}
#logo {
width: 922px;
height: 200px;
background: url("images/logo.png");
}
#nav {
width: 922px;
height: 28px;
background: url("images/nav_bg.png");
border-top: 1px solid #808080;
border-bottom: 1px solid #808080;
font-family: verdana;
font-size: 12px;
color: black;
background-color: white;
}
#nav ul {
margin: 0px;
list-style: none;
display: block;
float: left;
padding-left: 0px;
margin-left: 0px;
}
#nav li {
margin: 0px;
list-style: none;
display: block;
float: left;
width: 99px;
height: 22px;
padding-top: 6px;
padding-left: 0px;
margin-left: 0px;
border-right: 1px solid #808080;
text-align: center;
}
#nav a {
color: #333333;
text-decoration: none;
}
#nav a:hover {
color: black;
text-decoration: underline;
}
#side_left {
float: left;
width: 150px;
height: auto;
margin-top: 10px;
margin-left: 5.5px;
margin-right: 5.5px;
background-color: white;
color: black;
}
#center {
float: left;
width: 596px;
height: auto;
margin-top: 10px;
background-color: white;
color: black;
}
#side_right {
float: left;
width: 150px;
height: auto;
margin-top: 10px;
margin-left: 5.5px;
margin-right: 5.5px;
background-color: white;
color: black;
}
#cat_title {
width: 591px;
height: 19px;
background: url("images/cat_title.png");
font-size: 12px;
padding-top: 5px;
padding-left: 5px;
border-bottom: 1px solid #808080;
}
#side_cat_title {
width: 150px;
height: 19px;
background: url("images/side_cat_title.png");
font-size: 12px;
padding-top: 5px;
border-bottom: 1px solid #808080;
text-align: center;
}
#footer {
width: 940px;
height: 28px;
margin-left: auto;
margin-right: auto;
/*Creates our fixed width and the margins center it*/
background-image: url("images/footer_bg.png");
}
#footer p {
text-align: center;
font-family: verdana;
font-size: 10px;
color: white;
/*Borders*/
vertical-align: bottom;
height: 28px;
}
Help much appreciated. I was making the template for my friend and didnt realize the Firefox bug. Hi Everyone- I'm hoping someone out there might be able to solve a problem I've been having with my site for a number of years. The site was designed for IE but with the growing popularity of Firefox and Safari (to name a few), I want to insure that it works properly with those browsers. For the most part, it does -- except when displaying a background image in a table. For example - look at this page: http://www.cygnus-x1.net/links/rush/...anentwaves.php When viewed in I.E., the grey background image with the woman displays properly, as does the full image of the album cover within. However when viewed in Firefox or Safari, the background image repeats near the bottom for about 20 pixels. The problem also exists on a page like this one: http://www.cygnus-x1.net/links/rush/lyrics.php Where the brown background image which includes the words "Rush Lyrics" displays properly in I.E. but seems to repeat for 20 pixels in FF. This one's been driving me crazy for years and, due to some recent changes I've been making, it's come back to haunt me. If anyone has any suggestions as to why this is happening and what I can do to remedy it, I would greatly appreciate it... Thanks so much. Hi, I'm just learning html and I'm creating my website in Frontpage 2003. I looked in IE6 and my individual pages are exactly how I want them to look. However, viewing the same pages in Firefox presents me with a problem I'm not sure how to correct. It has to do with the center table. I originally copied and pasted the contents from Excel into the table (which I think was a mistake now). My workaround to this was copying and pasting the contents in the table into Notepad; and also shortening the length of each line; and then re-pasting the contents back into the table. It looks o.k. in Firefox but the alignment is no longer "justified". Can someone please tell me what I should be doing in the html code here? To see what I mean please open the link below in both IE and Firefox. http://www.prosperityteachers.com/ne...ew_thought.htm Much appreciated! Hi - I got a small issue with onmouseover and clickable area on images in Firefox. Things work fine in IE but don't work correctly in Firefox. With firefox there seems to be dead areas where there shouldn't be dead and detects mouseovers were it shouldn't. Same goes goes for clickable area of the button image. Go here and click on the one button - http://www.agile-x.com/bridgeway/ then try the buttons at the bottom of the window that pops up in Firefox and IE. Thanks. Hey all, I was wondering if anybody had any pointers on this website I've been building. It looks alright so far in Firefox, but I've had some issues in IE. The link is: http://www.totaros.com/totaros new/index.html Specifically, -The image distortion on the menubar-what are the best types of images to save these as for compatibility in IE? -The menubar not resizing in IE with different resolutions -Aligning text next to pictures (such as on the Entertainment page). This works in FF, but not in IE. -Any other problems noticed. Thank you! Hello, I am building a website for a local organization from an HTML template, and am having issues with images shifting to the right in IE, Firefox and other browsers on PC. I am working on a Mac and the images appear as they should on Mac browsers, but are shifted a few pixels to the right on PC browsers. Changing the pixel alignment from top and left of the page doesn't solve my problem because then the images will appear too far to the left on a Mac. Here are examples of two pages. Everything else appears as it should on PC browsers, except for the images. http://www.chuffed.ca/BIAWebsite/renaissance.html http://www.chuffed.ca/BIAWebsite/events.html Thanks in advance for any ideas that might be able to help me out... This is the webpage I'm updating for someone: http://savannahrhythms.ca/events.html In Firefox it looks perfect but in IE, two random images on the left side cannot show and the big poster on the right isn't flush with the top... WHAT DO I DO TO FIX THIS PLEASE?? I've just come to do my new site, but for some reason I can't get the site to display properly in Firefox 2.0.0.1. The images aren't working properly, the banner image I have put in place works fine in IE, displays in Opera (I'm still working on the layout), but won't display at all in Firefox. If I use the developer toolbar on my page, it reports as a broken image, but I click the link and the image displays. The alt text appears in my layout, which is more confusing. But I can't find a solution for this. It's nothing to do with the markup, I've tried displaying the image in a completely blank page, still nothing. I have a U3 drive, it has Firefox 1.5 loaded on it, the image displays fine in there. Any ideas? http://www.hypersonicscream.com - Can anyone let me know if it's a problem with my copy of Firefox? Hi, I was wondering why I am getting a gap in firefox right below the flash header, along with by the "welcome to our company", "about our company", "company news", and "client login" images? This doesnt happen in IE, or other browsers. My website is www.niveosoft.com Hi, Im a bit of an amateur and for some reason I cant get an image to display in firefox, but its fine in explorer.... Does anyone know why this might be? Thanks Aly_ve Hey, Whever I try to view a page in firefox there are weird gaps in between images where as in IE 6+ it shows up perfectly. I figured the problem lies in all the spacer images: <td> <img src="images/spacer.gif" width="1" height="16" alt=""></td> if I get rid of it - the results are picture perfect in Firefox and Safari - however now IE6+ will give simiar problems Is there way I can get it working in all the browsers??? Thanks, Ali I have a set of images on my webpage in a grid that are links to other pages. ON safari these images apear 'normal', but on firefox they have a grey outline them, it's something to do with them being links but i'm not sure how to sort it out. Any ideas? Thanks Dyfrig I have a set of images on my webpage in a grid that are links to other pages. ON safari these images apear 'normal', but on firefox they have a grey outline them, it's something to do with them being links but i'm not sure how to sort it out. Any ideas? Thanks Dyfrig Google chrome, IE 7 and 8, and i think Opera all load the images fine. but Firefox (latest version) just does not load all of them. I refresh the page and it loads the ones that did not load before but still has some unloaded. Can some one please explain to me or help me on this? i have been pulling my hair out Thanks for help people, photos should be below. The first one is the Firefox one. Also here is a link to the page: http://www.dubbest.com/index%20MAIN.htm I have a problem with Firefox. Although I am using set no border on a href and img tags I still get a border. Other browsers don't have this. This is my code, I've set the link border and image border to orange and pink dotted lines to show the black solid line. When I set these to no border the black line remains. Quote: <html> <head> <style> A:link, A:visited, A:active, A:hover { outline: none; background:none; border:5px dotted orange; padding: 0;text-decoration:none} img { border:5px dotted pink; display:block; margin:0; padding;0; } </style> </head> <body> <a href="/" > <img src="./img/bretzy-wht.gif" > text </a> </body> </html> You can see it live he http://tetsuo.gol.ad.jp/bretzy/new.html Thanks in anticipation. Brett Hi, I am designing my first website by teaching myself HTML using google, etc, so I am very new to designing from scratch (without using Dreamweaver, etc). My webpage is not online yet, so I can't post a link - sorry! First, I am using .png image files which look great in Google Chrome, but when I check my page in IE, the images look horrible - very pixelated. Why is that, and is there a way to fix them? My only thought would be to use a "smoothed out" image such as a .jpg, however that might make the problem even worse. Second, I am using frames and in my main frame I'm using a table with text on the left column and an image on the right column. Again, in Google Chrome it looks great with the text at the very top of the frame/table, but in Firefox, there is tons of space at the top of the table which makes the text too "tall" for the window, and a scroll bar is necessary. I hope I've explained this properly and would greatly appreciate your help - I have many more questions as well! Thanks so much, Kristen |
|||||||