|
HTML - Shifting Images In Ie And Firefox On Pc
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... Similar TutorialsI'm having some trouble with my site. Some images at the bottom are shifting when using IE. On Safari, it looks fine. Just wondering if anyone can help... Here is the site: http://www.ballermag.com/ and here is the code: <td width="100" valign="top"><a href="http://www.ballermag.com/blog/?cat=40" target="_blank"><img src="img/duzzblog.jpg" alt="Duzzyduzz" width="100" height="66" hspace="5" align="left" border="0" /></td> <td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="2"> <tr> <td valign="top" class="video01"></td> </tr> <tr> <td valign="top"><span class="style4">■■■■■■■■</span></td> </tr> </table></td> </tr> </table></td> <td><table border="0" cellspacing="0" cellpadding="3"> <tr> <td width="100" valign="top"><a href="http://www.ballermag.com/blog/?cat=21" target="_blank"><img src="img/jessblog.jpg" alt="J-Dimes" width="100" height="66" hspace="5" align="left" border="0" /></td> <td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="2"> <tr> <td valign="top" nowrap="nowrap" class="video01"></td> </tr> <tr> <td valign="top"><span class="style4">■■■■■■■■</span></td> </tr> </table></td> </tr> </table></td> <td><table border="0" cellspacing="0" cellpadding="3"> <tr> <td width="100" valign="top"><img src="img/what.gif" alt="Who's next?" width="100" height="66" hspace="5" align="left" border="0" /></td> <td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="2"> <tr> <td valign="top" nowrap="nowrap" class="video01"></td> </tr> <tr> <td valign="top"><span class="style4">■■■■■■■■</span></td> </tr> </table></td> I'm building a webpage for this nonprofit company and after moving data over from the old website to my newly created site it looks fine in Firefox but shifts halfway down the page. I am using dreamweaver to make the site. any ideas why? Here's a sample of what I mean: http://www.doornetwork.org/test/s_week.htm other pages look fine like this: http://www.doornetwork.org/test/miami.htm the original site has them set correctly like this: http://www.doornetwork.org/d_week.htm I didn't make the old site and am a relatively amateur website maker. Any help would be grateful. edit: a few friends have confirmed it looks right in Opera and IE7 This is really strange. Normally I would expect to see something like this happening on pure CSS sites, but this is a good old fashioned table-based layout. If you go to: url and try to click on any of the menus, you'll see the menu item below it moves up. Also if you click on the logo it jumps down to the menu area? Very bizarre and have never seen this behavior in the 10 years I've been coding. Any insight would be greatly appreciated :-) 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? 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?? 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 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>
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 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 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 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 Hi, I have a problem which I can't seem to sort out at all. When I add an image to a website page which I am trying to create the page shifts about half a centimetre to the left. The page can't be getting wider, as the grey fading off sections on the left and the right are one image (which is around 800x1 pixel in size), so things such as the blue navigation bar would start to overlap the grey image if it was doing that. All the other (so far blank) pages on the website all stay in the same place. I just think it looks bad when you are browsing when the page shifts - especially if more pictures end up on further pages, and so every time you click onto a new page it shifts to a new area of the screen! Has anyone else had this problem before and know any way of resolving it? Kind Regards. Matt 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 I am working on http://kintetaylor.com/smc/ The site displays fine in Firefox and Safari but in Internet Explorer (the bane of my existence) everything is shifted down This is how it should look. Can anyone tell me what is going on? 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 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. I am still new to html so still learning the ropes. Heres what i have, im trying to get the gallery image next to the home image, instead its right below it by X pixels.. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head><title> Profile</title></head> <body background="white"> <table cellpadding="0" cellspacing="0" border="0" align="center" > <tr> <td valign="top" width="94" height="42" > <div style=" margin-right:600px; margin-top:150px "><img src="images/home.jpg" alt="" border="0"></div> </td> </tr> <tr> <td valign="top" width="94" height="42" > <div style=" margin-right:600px; margin-top:150px "><img src="images/gallery.jpg" alt="" border="0"></div> </td> </tr> </body> </html> I'm currently in the process of rebuilding my website and I'm having some trouble. I'm looking to get the page to look like this: http://img170.imageshack.us/img170/5833/designwh9.png This is what I'm at right now: http://www.bclw.ca/content/index2.html The buttons (unlike in the image design) are not touching each other. Is there a way to do this only using HTML? Or am I going to have to purchase one of those Website Design programs? Thanks for any help you can give! I need to display 40-50 images, one at a time, with a forward and backward button. No timer. Seems easy enough, but I don't know how to do it. Any tips would be greatly appreciated. |
|||||||