|
HTML - Trouble With Ie Browser/ Images Shifting
I'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> Similar TutorialsHello, 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 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 :-) Hi everyone. I am a pretty experienced html-er. I've been doing it for many years, so I'm very familiar with basics, etc. I've run into this problem before in the past, but it is haunting me again and driving me nuts. All my folders are fine with respect to the structure of my code. I am having trouble with SOME of my .jpg images showing both remotely and on my uploaded webpages. These troublesome images show up when I edit them, ie. in my editing software. However, when I put them in their respective image folders and write my html, they do not show up in the browser. I absolutely know my source code is fine. I absolutely know the .jpg file(s) are named correctly. But some of them just won't show up. I looked at the details on the properties for these pictures and the ones that will not appear have camera make/model embedded in the information. I've tried to remove the information, but it still isn't making a difference. I've tried to convert the images again into .jpg format, but it is also not making a difference. I'm currently running Windows 7, but had this problem with WinXP in the past as well. Have any of you had this problem? I'm so frustrated! The photos are of products from my manufacturer. However, like I said, they have no trouble displaying while in my editing software and in the actual image folders themselves. It's only when I call them into my html document that they disappear. Grr! Please take a look at the image I attached to this post. If you look closely, you can tell that the bottom half of the lightbulb, the "Imaginit" title, and the yellow bar to the left of that is all one image file. Above that is a larger image (part of which has the top half of the lightbulb) that spans the whole page. I'm sure you can tell by the break in the lightbulb and the white borders around the image where this question is going... I'm trying to get rid of those breaks. Currently, the large image on top is in its own span tag. Below that everything else is organized in a table structure. I've messed with border-collapse: collapse, tried setting the margins to negative values (of em, px, & pt), set border widths to 0. Nothing gets rid of those spaces. Setting the background color for the cells I think would work, but the problem there is that the bottom-half-lightbulb/Imaginit image's cell is set to colspan=2, rowspan=2. Is it possible to have the image just be "laid" over four individual cells? Just a thought. I'm doing this in Visual Studio 2005/ASP.NET if that helps any. Thanks for anyone's help. I am having trouble getting an image to line up in a cell so that the text aligns left and the image directly to the right of it to match the other cells. http://smartvending.com/testindex.html Can anyone see what is wrong with the code that is preventing the Coin Counters & Sorters gray box from allowing anything to align closer to the right side of the box matching the other cells? Any help is greatly appreciated! Thanks I am having problems viewing any images on the browser and don't know why so I am starting from scratch. I have placed an image titled "jesus.jpg" into a folder named "church" on my C drive, the relative path is C:/mike'sdocs/websites/church just to be sure I checked the image's properties and it confirms the image is a jpg file, I copied this image into Apache's htdocs folder where I placed the index file and this is all I am getting, the pic itself does not show, all I am seeing where the image should be is a rectangular bordered box on a transparent background with a small icon of a dog-eared page with 3 colored tiny symbols in it, what could be wrong here please? This is not an Apache issue, I was getting this same problem before just using Firefox's browser and I was told to install a webserver which is why I installed apache which is working fine as I can see any changes made to the text on my index page in Notepad. The code I am using is: <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> <img src="jesus.jpg" width="144" height="50" /> </body> </html> Hello All, I cant seem to lock a form and images in a browser, I have all center and when it opens it remains centered but when I shrink the browser window the images/form moves... My CSS is <style type="text/css"> <!-- body { background-image: url(); margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin: 0; padding: 0; } --> </style></head> <style type="text/css"> <!-- #centerDIV0 { width: 100%; text-align: justify; overflow: hidden; position: absolute; margin: 0px; padding: 0px; left: 0px; top: 0px; right: 0px; bottom: 0px; visibility: visible; background-image: url(CS_bkgd.jpg); background-repeat: repeat; } #centerDIVX { text-align: center; overflow: hidden; position: absolute; margin: 0px; padding: 0px; vertical-align: middle; z-index: 2; left: 0px; top: 0px; right: 0px; bottom: 0px; width: 100%; } #centerDIVZ { z-index: 2; overflow: hidden; position: absolute; font-family: Arial, Helvetica, sans-serif; font-size: 14px; text-align: center; vertical-align: middle; left: 0px; top: 0px; right: 0px; bottom: 0px; margin-top: 380px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; visibility: visible; padding-top: 0px; padding-bottom: 0px; padding-left: -300px; } --> </style> And Html is... <body> <div id = "centerDIV0"> </div> <div id="centerDIVX"><img src="CS_bkgd.gif"/></div> <div id="centerDIVZ" bgproperties="fixed"> <form action="mailto:tastetation301@yahoo.com" method="post" enctype="text/plain" onsubmit="location.href='thanks.html'"> <p><br/> <strong>Name:</strong> <input type="text" STYLE="color: #FFFFFF; font-family: Verdana; font-size: 12px; background-color: #000000;" size="0" maxlength="50" align="justify"/> <br/> <strong>Email: </strong><input type="text"STYLE="color: #FFFFFF; font-family: Verdana; font-size: 12px; background-color: #000000;" size="0" maxlength="50" align="justify"/> </p> <input type="submit" value="Submit"/><input type="reset" value="Reset"> </form> </div> </body> </html> THANKS FOR YOUR ASSISTANCE!!!! How do I stop images/pictures from moving when a browser window is resized? The images/pictures move underneath the navigation buttons when it is resized..........Thank You Here is the website. www.prasse.com So I know if you use "%" to define your height and width with tables that it allows you the table to resize based upon a users browser size. My question is how can you do this with images? I tried setting my height and width for my image using "%" but then my image just becomes overly stretched. My professor said that I should create a table and than place the image within the table, and then set the table height and width using "%". The code below is what I tried. It didn't work though. Any ideas on how to do this? Code: <body>
<table width="100%" height="100%" border="0">
<tr>
<td height="100%" width="100%"><p align="center"><img src="images/Banner.png" align="center" class="source-image" /></p></td>
</tr>
</table>
</body>
Thank you for your help! 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 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 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? First, I'm no expert, but I can work my way around a bit of HTML If you're familiar with myspace pages, great! I'm working on a band profile, which is trickier than a user profile (at least, if you want it to look legit): http://www.myspace.com/489097511 It still needs a lot of work, but the reason I'm looking for help is the bottom of the page (user information, online now, last logged in, general info...etc) I'm curious as to how I can place a layer over it, on which I can post whatever I want I can't seem to get a div to cover that area, and if I do, it only ever appears under all the info I want to cover. Any help is much appreciated! I am currently working on a website for my fraternity and am using geocities as a temp service to get my site correct before I get a .org name. For some reason Internet Explorer won't show anything, but when you use Mozilla it shows up just fine. I checked to see if it was just geocities that was messed up, but it did the same thing with cjb.net, so I'm stumped. I don't know what's wrong with my code, everything seems fine, there's no deprecated tags or anything of that nature. Here's a link to the website. Any help would be greatly appreciated. Dear friends i have in big trouble. so i want yours help. i make one website. i put there many HTML codes. i put there .. not image click HTML code .. now when i configuration my main page the HTML codes not opend. but i do inside pages configurations. but i put ,,, not image click HTML code ,,, on main page so i want give me HTML code i put on my site. they all HTML code stoped working or dead .when i delet ... not image click HTML code ... after i remove HTML stoped working code. i hope some 1 help me awatings yours Basically, I am making a website for someone but I am having a bit of DIV trouble. The part I am having trouble with is the content box. I have a content box that I need to be fixed (width) and it needs to stretch vertically when there is content on the page that will overfill the original page. There is then a div under this content which is a footer type image. This needs to move down when the content fills the above box.. I can't get this too work, all it does is strech horizontally, and when I stretch it vertically it just shows up blank... Any ideas? I have a website I dedicated to my daughter. I host on godaddy. I downloaded the guestbook and finally got it to where when you click submit it goes from the addentrty screen to the guestbook so you can view what others write. Only problem is it doesnt add the text from addentry to the guestbook page. the website: www.rosenbaumfamily.com following is the code from the two pages. I know a little about html but i cant seem to find whats missing. I put *** next tot eh lines I think need to be altered.: addentry code <html> <head> <title>Guestbook - Add Entry</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body bgcolor="#FFCCCC" link="#003399" topmargin="15"> <form method="post" action="guestbook.html"> <p align="center"> <font color="#0000FF"><a href="addentry.html"> <!--webbot bot="Navigation" S-Type="sequence" S-Orientation="horizontal" S-Rendering="graphics" B-Include-Home="FALSE" B-Include-Up="FALSE" U-Page="sid:1001" S-Theme="Ice 0000" startspan --><a href="../../index.htm"><img src="../../_derived/index.htm_cmp_Ice000_hbtn.gif" width="154" height="37" border="0" alt="Home" align="middle"></a> <a href="../../family.htm"><img src="../../_derived/family.htm_cmp_Ice000_hbtn.gif" width="154" height="37" border="0" alt="See My Family" align="middle"></a> <a href="../../about%20me.htm"><img src="../../_derived/about%20me.htm_cmp_Ice000_hbtn.gif" width="154" height="37" border="0" alt="About Me" align="middle"></a> <img src="_derived/addentry.html_cmp_Ice000_hbtn_p.gif" width="154" height="37" border="0" alt="Sign My Guestbook" align="middle"><!--webbot bot="Navigation" i-checksum="59646" endspan --></a></font></p> <table border="0" cellspacing="0" cellpadding="2" align="center" width="95%"> <tr> <td height="44" colspan="2" bgcolor="#FFCCCC"> <p align="center"><font size="7" face="Vivaldi"><font color="#003399"> Fallons Guestbook</font></font></td> </tr> <tr> <td width="99%"> <p align="center"> <font face="Verdana, Arial, Helvetica, sans-serif" size="1">Please leave us a note so that we know you visited our site.</font></p> <p align="center"> <font face="Verdana, Arial, Helvetica, sans-serif" size="1">Love Dara, Adam, and Fallon</font></td> <td width="1%" align="right"> </td> </tr> <tr> <td colspan="2" height="27"><font face="Verdana, Arial, Helvetica, sans-serif"><img src="point2.gif" width="9" height="9"><a href="guestbook.html"><font size="1"><b>Back to Guestbook</b></font></a><b><font size="1"> | <img src="point2.gif" width="9" height="9"><a href="http://localhost/cgi-bin/guestbook.html?admin=enter">Administration</a></font></b></font></td> </tr> <tr> <td colspan="2"> <table border="0" cellspacing="1" cellpadding="4" width="95%" bgcolor="#FFCCCC"> <tr> <td colspan="2" bgcolor="#00FFFF"><b><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Sign the Guestbook:</font> <input type="hidden" name="add" value="new"> </b></td> </tr> <tr> <td bgcolor="#EFEFEF" width="179"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Name*:</font></td> <td bgcolor="#EFEFEF" width="460"> <input type="text" name="username" size="40" maxlength="40"> </td> </tr> <tr> <td bgcolor="#EFEFEF" width="179"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">E-mail:</font></td> <td bgcolor="#EFEFEF" width="460"> <input type="text" name="email" size="40" maxlength="40"> </td> </tr> <tr> <td bgcolor="#EFEFEF" width="179"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Homepage:</font></td> <td bgcolor="#EFEFEF" width="460"> <input type="text" name="url" size="40" value="http://" maxlength="45"> </td> </tr> <tr bgcolor="#EFEFEF"> <td width="179"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Your Message*:</font></td> <td bgcolor="#EFEFEF" width="460"> <textarea name="message" cols="40" rows="9" wrap="VIRTUAL"></textarea> </td> </tr> <tr bgcolor="#EFEFEF"> <td width="179"> </td> <td bgcolor="#EFEFEF" width="460"> <a href="guestbook.html"> *** <input type="submit" name="Submit" value="Sign Book"></a> <input type="reset" name="Reset" value="Reset"> </td> </tr> </table> </td> </tr> </table> </form> <div align="center"><font face="Arial, Helvetica, sans-serif" color="#CCCCCC" size="1"><b>Guestbook Version 1.5<br> </b></font><b><a href="http://www.proxy2.de"><font face="Arial, Helvetica, sans-serif" color="#CCCCCC" size="1">http://www.proxy2.de</font></a></b></div> </body> </html> guestbook code <html> <head> <title>Guestbook</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> <!-- select { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9pt} input { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9pt} A:hover {text-decoration: underline; color:red;} --> </style> <script language="JavaScript"> <!-- function JumpTo(page) { self.location.replace(page.menu.options[page.menu.selectedIndex].value); } //--> </script> </head> <body bgcolor="#FFFFFF" link="#003399" topmargin="15"> <form> <table border="0" cellspacing="0" cellpadding="2" align="center" width="95%" height="100"> <tr> <td height="44" width="94%"> <p align="left"> <font color="#0000FF"><a href="addentry.html"> <!--webbot bot="Navigation" S-Type="sequence" S-Orientation="horizontal" S-Rendering="graphics" B-Include-Home="FALSE" B-Include-Up="FALSE" U-Page="sid:1001" S-Theme="Ice 0000" startspan --><a href="../../index.htm"><img src="../../_derived/index.htm_cmp_Ice000_hbtn.gif" width="154" height="37" border="0" alt="Home" align="middle"></a> <a href="../../family.htm"><img src="../../_derived/family.htm_cmp_Ice000_hbtn.gif" width="154" height="37" border="0" alt="See My Family" align="middle"></a> <a href="../../about%20me.htm"><img src="../../_derived/about%20me.htm_cmp_Ice000_hbtn.gif" width="154" height="37" border="0" alt="About Me" align="middle"></a> <a href="addentry.html"><img src="_derived/addentry.html_cmp_Ice000_hbtn.gif" width="154" height="37" border="0" alt="Sign My Guestbook" align="middle"></a><!--webbot bot="Navigation" i-checksum="29614" endspan --></a> &n bsp; &nbs p; </font> <b><font face="Verdana, Arial, Helvetica, sans-serif" size="1"> <a href="/cgi-bin/guestbook.html?admin=enter">Administration</a></font></b></td> <td width="5%" height="44" align="right"> <br> <b><font face="Verdana, Arial, Helvetica, sans-serif" size="1"> </font></b> </td> </tr> <tr> <td width="94%" bgcolor="#FFCCCC"> <p align="center"><font color="#003399" size="7" face="Vivaldi"> Fallons Guestbook</font></td> <td width="5%" align="right"> </td> </tr> </table> <table border="0" cellspacing="1" cellpadding="5" align="center" width="82%"> <tr bgcolor="#BCBCDE"> <td width="32%" bgcolor="#00FFFF"><font face="Verdana, Arial, Helvetica, sans-serif" size="2"><b>Name</b></font></td> <td width="40%" bgcolor="#00FFFF"><font face="Verdana, Arial, Helvetica, sans-serif" size="2"><b>Comments</b></font></td> </tr> <!--begin --> </table> <table width="95%" border="0" cellspacing="1" cellpadding="3" height="35" align="center"> <tr valign="top"> **** <td> </td><href="addentry.html"> </tr> </table> <div align="center"><b> <font face="Arial, Helvetica, sans-serif" size="1" color="#CCCCCC"> <a href="mailto:hockeyman9474@aol.com?subject=from rosenbaumfam.com">contact webmaster</a></font></b></div> </form> </body> </html> First I want to say that this forum is great and has been alot of help. I also want to thank bsxiong for his help already. If I could send you a beer electronically, I sincerely would. I had two problems initially, and one has been fixed very easily. Thank you. However, the solution to the other still eludes me. I don't have the page on the domain yet, and can't until it's finished. I uploaded the link to geocities so that you can see the page. I didn't include the style sheet, but hopefully this gives the general layout of the page. http://www.geocities.com/thecyberrev/newly.html On the page, there is a pic to the left below the top banner. Below the pic is the bold text, "Home". Below that text is a thin divider line and more text that reads, "Building organizations that build lives.". Basically all I am trying to do is move the text, Home to the left of the pic and enlarge it so as to act as a title for the page. (This would below the blue header banner in the large white blank area) Everything I seem to do either puts the text just below or just above the pic. What am I doing wrong? I think it's something very simple but it's eluding me. Please excuse my ignorance. Any advise would be greatly appreciated. I'm having trouble getting the same look for my site in both Firefox and IE. Currently, the site looks great in Firefox. It looks just as I would like it. The nav links are all lined up on the left, and the login area is nice. However, when I view it in IE, things are different. The nav links all seem to be centered somehow, causing them to not line up very well. The login area is not as tidy either - the text input boxes are different sizes, even though they are both marked to hold 10 characters. Anyone have any idea how I can get the look that is working in Firefox to also work in IE? The website URL is www.learn-korean-now.com Thanks. I built my page using Firefox to view it and it looks how I want it but in IE (and possibly all other browsers?) it doesn't look right. My html and css validates (with W3C), so I guess I'm relying on a Firefox bug or something. Here's the page: individual.utoronto.ca/nicolemorgan One of the problems seems to be that in Firefox, on my web page, a certain table cell is defined by the width of the top cell in the same column and wraps its contents (which is text), whereas in IE the width definition isn't recognized and the text isn't wrapped. My temporary solution is to manually break the lines of text so that they fit within the cell dimensions, but this feels messy. (The column in question is where the tan-coloured blocks are on the left side of the page.) Other problems are that some of the cells don't line up, and there is a thin line between two certain cells in IE but not Firefox. Is there some basic principle I'm missing, or is my code just messy, or what? |
|||||||