HTML - Inconsistent Display Between Browsers
Hello all,
This is my first post to this forum. I hope somebody can help me with the two problems I am having because I have tried to solve them for hours and have not gotten anywhere. I just don't have enough knowledge so your help would be appreciated. Here is the link to a demonstration page I created: http://sikhfaith.com/demo/ In Firefox 2.0, the huge header picture is displayed flush with the top of the page, as I want it to be. Yet in IE 7.0, there is a small white gap above the header. I can't seem to figure out how to get rid of it in IE so that the display is consistent between browsers. Second, in IE 7.0, you can see the menu bar I created which is flush with the bottom of the header picture as I intended. Yet in Firefox 2.0, this menu bar is hidden BEHIND the header picture. Does anyone have a solution to this? Thank you. Similar TutorialsHi guys I have a pic in my templates folder with the html document in the the same folder. So what i want to do is add the picture to the HTML document so that it appears on the browser. surely this code should work but at the moment it is not? <img src=/"templates"/"dog.jpg"> HELP huntergraphics.org I have just finished coding this website from scratch. It displays correctly in Chrome and Safari, but IE and Firefox add weird borders around my pictures and throw off my alignment. What causes this and how do I fix it? I'm having trouble making IE display the content the same in other browsers the same. Like google chrome and firefox. Do I have to use css for this. Here is my website address: http://www.con10th.com This url : http://www.lincolnsrealdeals.com/nav5c.html has passed validation and renders the way I need it to on firefox, but not on ie8. The problem is that the hover over "By Location" renders the notation: "Where do you want to buy it?" under all the navigation when it's meant to render just to left of "By Location" as it does with firefox. I thought that the notation's appearance under all the navigation was a clue, but it's no help for me . What do you think? Code: \<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="description" content="Save money" /> <META http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>savebop </title> <style type="text/css"> body{font-family:arial;} a{color:blue;text-decoration:none;font-size:150%; width:200px;} a.one:visited {color:blue;} a.one:hover {color:red;} table.menu { width:200px; font-size:75%; visibility:hidden; } </style> <script type="text/javascript"> function showmenu(elmnt) { document.getElementById(elmnt).style.visibility="visible"; } function hidemenu(elmnt) { document.getElementById(elmnt).style.visibility="hidden"; } </script> </head> <body> <table > <tr> <td onmouseover="showmenu('location')" onmouseout="hidemenu('location')" > <a class="one" target="_blank" style="outline:none;position:absolute;left:120px;top:220px;" href="jf3.php">By Location</a> <table style="position:absolute;left:285px;top:221px;" class="menu" id="location" > <tr><td onmouseover="showmenu('location')" onmouseout="hidemenu('location')" class="menu"><a class="one" target="_blank" href="jf3.php">Southpointe</a></td></tr> <tr><td onmouseover="showmenu('location')" onmouseout="hidemenu('location')" class="menu"><a class="one" target="_blank" href="jf3.php">Williamsburg</a></td></tr> <tr><td onmouseover="showmenu('location')" onmouseout="hidemenu('location')" class="menu"><a class="one" target="_blank" href="jf3.php">40th & Old Cheney</a></td></tr> <tr><td onmouseover="showmenu('location')" onmouseout="hidemenu('location')" class="menu"><a class="one" target="_blank" href="jf3.php">56th & Old Cheney</a></td></tr> <tr><td onmouseover="showmenu('location')" onmouseout="hidemenu('location')" class="menu"><a class="one" target="_blank" href="jf3.php">14th & Pine Lake</a></td></tr> <tr><td width="65px" style="position:absolute;left:30px;top:210px;" onmouseover="showmenu('location')" onmouseout="hidemenu('location')" class="menu" > Where do you want to buy it?</td></tr> </table> </td> </tr> </table> </body> </html> Hi guys, I have a problem with table widths used to arrange content on a website. Why am I not using DIVs? Because it's too time consuming at the moment to convert it over, and my client is not familiar with DIVs and has no time to learn it. So I have to stick to using tables for him to maintain on his own. Here's a quick rundown on my table layout. ----------------------------- |TD1-------------|TD1a****| ------------------ |TD2-------------|********| ------------------ |TD3-------------|********| ------------------ |TD4-------------|********| |Table 2----------|********| ------------------------------ |TD5-------------|********| ------------------------------ That's my attempt to illustrate my layout. I'm using * and - as fillers, the editor removes all the empty spaces... My problem is, TD1 to TD3 and TD5 aligns nicely vertically - they all have the same / correct width. However, TD4 with a table inside is slight shorter in width than it should. About 1 or 2 px. The following shows the screenshots. zoomed in.... I need to get that TD4 with the table inside to have the same width as the others. I have tried removing all BORDER and BORDERCOLOR codes from all the table tags, no use. I tried using both CSS and the table tag WIDTH to control it, still doesn't work. Need suggestions!! Please click here to see my code. It's a little messy... http://www.thienkaiwei.com/index7.html Hi guyz, i have a query Mouse over the datagrid cell display tooltip or panel to display information but only using HTML and CSS not using javascript. can anyone help me. because im gonna use it on htmleditor on c# desktop application thax before I just read a link from a web mag, and found a pretty smart service: 1. Go to http://browsershots.org/ 2. Select the OS/Browsers you want to check against 3. Select the "user" options 4. Submit your site 5. Get a set of images for each browser to see what it looks like Pretty cool, huh? Now you don't have to install every browser known to man What would the script be to check which browser you are using. I want a script to check if the webpage is being viewed by iPhone safari, not sure how to code it but I want it to do this: website/index.php: If iPhone Safari. go to;"mobile.website.com" And in mobile.website.com I will have a CSS for mobiles. I cant figure out why my website footer looks different in internet explorer compared to all the other browsers. IE makes the footer look off. Can someone please help me with this. www.pricedrightcleaningequipment.com thanks so much First I want to thank you for letting me be a part of this great forum. Now about the problem. My site looks good on IE browser but with firefox it looks strange, if you look at http://www.akuttpost.no/psykoseschizofreni.htm you may notice that the menu is lower than the middle page. How do I fix this? Is there a way to adjust this so that what looks on IE will be the same with all sorts of browsers? I use dreamweaver and claris 3.0 I am having some problems. I am redesigning a site and It looks good in firefox, but when viewed in IE the spacing is off. I like the way it is looking in firefox, but not in IE. Any ideas?? http:// www .integratedpeaksolutions.com/New/Site/ I have recent designed a website inAdobe fireworks then slices then exported it. (So it is in tables). I slice a 1 pixel image of the right side of the image to set as my background (repeat x). So I also set the top margin of the whole layout to 0 pixels. But it seems different browsers have a difference view of what 0 pixels is. Does anyone no away arround this? I have this login on a website i'm doing, in Firefox, Opera & Safari the two text fields and the login button are aligned to the very left of the page but in IE the text boxes only stay about 15px further to the right. This means they are out of line with other elements on the page Can anyone tell from this code below what i'm doing wrong or do you need more code to go on. <form name=login> <table width=200 border=0 align="left" cellpadding=3> <td><input type=text name=username></td></tr> <td><input type=text name=password></td></tr> <tr><td colspan=2 align=left><input type=button value="Login!" onClick="Login()"></td></tr> </table> </form> cheers I built this page and I'm noticing it works fine in Dreamweaver browser but not in opera and safari and IE? What am I doing wrong? http://www.rendemolition.com/patio1.html When checking if a site shows correctly, which browsers should I try? I usually check on IE5 and NETSCAPE similar version... Thanks Hi. I am working on a website, basically made in HTML and CSS. I am pretty far, but when look at my website in Safari and Internet Explore, my menu makes a break line for every button I have made. When I look in firefox the menu goes straight? Anybody who know what I need to do, to be able to see the same thing in each browser? Here is my menu code: <ul id="nav"> <div id="menu"> <li><a id="menutext" href="home.html">HOME</a></li> <li><a id="menutext" href="artists.html">ARTISTS</a></li> <li><a id="menutext" href="releases.html">MUSIC</a></li> <li><a id="menutext" href="news.html"> NEWS</a></li> <li><a id="menutext" href="aurtv.html">VIDEOS</a></li> <li><a id="menutext" href="photos.html">PHOTOS</a></li> <li><a id="menutext" href="about.html">ABOUT</a></li> <li><a id="menutext" href="contact.html">CONTACT</a></li> </div> </ul> Thanks. Sup bro's Jow checkit, me and my homies 'r like building this website fo the rappin we do. But when us is like checkin it on the firefox browser its like all messed know what im sayin. On The other one its like real tight, but this is some weird stuff goin on. I is not into the webstuff man, too complicated. But I was just thinkin you bro's could tell me wassup with this browser stuff. peace out man, Lil' B Hello, I'm using FCK Editor in my web appliaction. When I try to insert pictures in text I'm using one table with align="left". Also under the pictures i have a description of the picture. In FireFox everything is fine and description is under the picture, but in IE description of the picture is on the right site. Here is the HMTL code that FCK Editor use when pictures are inserted: HTML Code: <table style="width: 144px; height: 209px" cellspacing="1" cellpadding="1" align="left" border="0"> <tbody> <tr> <td style="text-align: center"><img style="width: 146px; height: 157px" alt="" hspace="5" align="left" vspace="5" border="1" src="/_userfiles/image/Ronaldo.jpg" /><br /> <span style="color: rgb(153,51,0)">Test test tes</span><br /> </td> </tr> </tbody> </table> <p>This is some <strong>sample text</strong>. This is some <strong........ U can see what I get on my web site: http://www.macedonium.org/Macedonium...id=229&tid=876 See it in FireFox and in IE Thanks for the help |