|
HTML - Website Doesn't Render Correctly In Webkit Browsers
My website doesn't render correctly in the WebKit browsers (Apple Safari and Google Chrome). It works as expected in Firefox, Internet Explorer versions 6 and above, and Opera.
If you click here to view the site, it is the text on the left-hand side underneath the navigation menu that is proving problematic. This text is supposed to appear directly beneath the navigation menu, but when the site is viewed in Safari or Google Chrome, it appears at the very bottom of the page, where the blue background is. I have run the code through the W3C validator and after a bit of alteration, it came back saying there's no errors. What makes it confusing is that I didn't write the code myself and it is mainly table-based (I inherited it from a previous web developer). I am currently working on a brand new layout for the website which will solve the accessibility problem completely, but for the time being we have to continue using the current layout. Does anyone know if there's a quick fix which will get the text on the left-hand side to display correctly in WebKit browsers? This has been bugging me for a while now and I'd really like to get it fixed. Is there anything obvious that I've missed? Thanks in advance for any help. Similar TutorialsI have a wordpress blog in which on the single post page the container div is non-existent and the sidebar and footer go into the content div. The page displays fine in firefox it only has the problem in internet explorer. Any help would be greatly appreciated. Here is an example of the problem: http://purplemushroomreviews.com/gam...mption-review/ Hi, can anyone help me with this? My site shows in firefox but when it is viewed using internet explorer, parts are missing and everything is everywhere. I really hope someone can teach me how to correct it. Site is www.agraphix.com.sg Thanks! ps: i know my html is a mess, i'm not really good at it. =/ Robbie. I'm sure there is a simple answer to this or I hope so. I don't have much computer code experience so I'm just going with trial and error. Anyway, my question is concerning the output of my navigation links. Its setup like this in template <ul> <li>[Navigation]</li> </ul> this outputs a set of about 10 links that look like this in the code ul> <li> link <br/> link <br/> link <br/> </li> </ul> It works but I need the code to look like this for it to function right. ul> <li> link </li> <li> link </li> <li> link </li> </ul> how do i code that using the [Navigation] Variable thanks a ton Hi, I've got a problem with a pre-existing webpage not operating correctly with Internet Explorer. The website is in development to be replaced, but until then I'm stuck keeping it updated and working. Normally I use Google Chrome or Mozilla Firefox for browsing, and didn't notice until today that the page doesn't load correctly with Internet Explorer. The website's basic structure is the header/navigation bar across the top, a left column navigation bar, and then the main/body column on the right. Website: www.hfhsouthcentral.net Issues in Internet Explorer (most likely all related): The site's homepage doesn't load correctly from the base url The links don't operate correctly-instead of opening in the current tab, they either open in a new window or new tab depending on browser default settings The "Home" link simply opens the main body frame for the site home page, as opposed to the complete home page I've tested and verified that the page works incorrectly with IE on different PCs, and displays correctly with other browsers on both PCs and a Mac. The links do work in the primary header/navigation frame as intended with other browsers, but visitors using Internet Explorer receive simply the header/navigation bar when going to the default site. Other things I've attempted to do to fix the issue Using IE's compatibility mode Lowering the security setting Making sure active X was allowed Running IE without any add-ons running Turning off my anti-virus, firewall... I've also flushed the cache and have been testing each change by reloading in IE9 (shift-F5) to verify the problem was still present, and tried running the index.htm file through validator and fixing what it returns as errors (having tested / fixed all of the errors that it returned failed to solve the issue). Tested OSes Windows 7 Home Premium x64 Windows 7 Professional x86 Mac OS X 10.6.3 32-bit Website works with: Google Chrome (12.0.742.122 on Win7 x86 & x64, and OS X) Google Chrome (13.0.782.107 beta-m on Win7 x64) Mozilla Firefox (5.0) (32-bit on Win7 x86, x64) Mozilla Firefox (3.6.18 on OS X) Opera (11.50) (32-bit on Win 7 x64) Safari (4.0.4) (32-bit on OS X) Seamonkey (2.2 on Win 7 x64) Maxthon 3 (3.1.3.2000 Final on Win 7 x64) edit: Seamonkey and Maxthon verified working, though really don't care about supporting them... Website doesn't work with: Internet Explorer 8 (8.0.7600.16385 64-bit on Win7 x64) Internet Explorer 8 (8.0.7600.16385 32-bit on Win7 x64) Internet Explorer 9 (9.0.8112.16421 on Win7 x86) Hey guys, What I am trying to do is align a whole table to the right inside of a td tag of another table. It looks fine in IE, but in firefox it comes out wrong. Any idea what I can do? Here is the code: Code: <table border="1px" style="width: 100%;" id="rptPrintform:alignBtn_pg_id">
<tbody>
<tr>
<td class="alignRight">
Correct
</td>
</tr>
<tr>
<td class="alignRight">
<table border="1px">
<tr>
<td class="alignRight">
Text
</td>
<td class="alignRight">
Text 2
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="alignRight">
Correct
</td>
</tr>
</tbody>
</table>
What I would like is for it to work in firefox the exact same way it works in IE. Thanks, Grae Hi I have tried a lot of things and search the internet for hours regarding this matter... My image background doesn't reapeat in Internet explorer however works fine in any other browsers such as google chrome and firefox. Can you please help me get this fixed? I am new to xhtml and css and really it's really frustrating having this kind of problem. Thank you Website Link: www.pjrazon.co.uk/newlayout/index.html screenshots if it helps: CSS: @charset "utf-8"; * { margin: 0px; padding: 0px; } body { background-color: #CCCCCC; } a:link { color: #ffffff; text-decoration: none; } a:visited {text-decoration: none;} a:hover {color: #b23937;} a:active {text-decoration: none;} #wrapper { width: 1151px; margin-right: auto; margin-left: auto; border-right-width: thin; border-left-width: thin; border-right-style: solid; border-left-style: solid; border-right-color: #999999; border-left-color: #999999; } #wrapper #logo { height: 120px; width: 1151px; } #wrapper #navigation { background-image: url(../images/nav.home.gif); height: 32px; } #wrapper #navigation #navlabel { color: #FFFFFF; padding-top: 5px; padding-left: 125px; } #wrapper #navigation #navlabel #nav li { display:block; width:100px; float:left; list-style:none; } #wrapper #header { height: 391px; background-image: url(../images/welcome.jpg); } #wrapper #mainContent { height: 384px; background-image: url(../images/maincontent.jpg); width: 1151px; } #wrapper #bodyArea #footer { background-image: url(../images/footer.jpg); height: 73px; clear: both; } #wrapper #bodyArea { background: url(../images/bg_bodyarea.jpg) repeat-y; } #wrapper #bodyArea #mainContent #content { display:block; width:400px; float:left; } #wrapper #bodyArea #mainContent #contentwrapper { padding-left: 140px; padding-top: 70px; } 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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Perfect Vision</title> <link href="css/layout.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="logo"><img src="images/header.jpg" alt="logo" /></div> <div id="navigation"> <div id="navlabel"> <ul id="nav"> <li><a href="homepage.html">Home</a></li> <li><a href="profile.html">Profile</a></li> <li><a href="portfolio.html">Portfolio</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div> </div> <div id="header"></div> <div id="bodyArea"> <div id="mainContent"> <div id="contentwrapper"> <div id="content"> <p>August 10 2010</p> <p> </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam semper turpis in tortor interdum sed mattis lectus mollis. Pellentesque laoreet quam et mauris feugiat sit amet eleifend turpis imperdiet. Praesent condimentum libero vitae massa imperdiet pellentesque. Vestibulum et risus dolor, ac tincidunt velit. Maecenas lobortis diam tellus. Suspendisse auctor, velit ut imperdiet semper, erat orci pharetra tortor, venenatis vulputate metus eros ut felis. Cras ullamcorper odio sed felis ornare ultricies. Phasellus porta adipiscing aliquet. Aenean ligula tellus, blandit a pulvinar in, fermentum a erat. Sed arcu nisl, porta eu vestibulum at, luctus sed tellus. Aenean eget quam justo, quis ultricies ante. Vivamus tempor sollicitudin augue ut rhoncus. Sed odio mauris, imperdiet ut elementum vitae, dapibus at quam. Nullam in aliquam sem. Fusce consectetur laoreet elit, non consequat nunc tempus nec. Cras at enim ipsum. Praesent ipsum purus, tempus non sagittis volutpat, fringilla eget mi. Maecenas sed elit est. Morbi facilisis purus eget nunc tincidunt iaculis mattis quam pellentesque. </p> <p> Sed tortor leo, laoreet sit amet mattis a, fermentum in ligula. Sed tempor lacus a lorem fermentum fermentum semper nunc sagittis. Vivamus et est porta purus mollis cursus eget in ante. Sed lacinia, diam in tempor suscipit, turpis enim posuere turpis, sit amet vestibulum quam nulla id elit. Vivamus ultricies tempus mi, non consequat velit mollis id. Curabitur vehicula, turpis id tempor condimentum, sem nulla molestie enim, vel commodo metus ipsum non nisi. Aliquam erat volutpat. Fusce venenatis porttitor massa eget suscipit. Sed purus turpis, iaculis id sollicitudin id, vulputate sit amet velit. Suspendisse sed velit non tellus eleifend venenatis vehicula ut elit. Integer sit amet ullamcorper nulla. </p> <p> Vestibulum dictum ante eu nisl ornare tincidunt. Etiam id risus mauris. Duis nec turpis in neque porttitor euismod sed id odio. Sed molestie urna a magna fermentum egestas. Nulla facilisi. Quisque risus neque, sodales pulvinar rhoncus a, lacinia eget neque. Vivamus vel malesuada nisl. Proin mollis tempor felis id dapibus. Morbi velit mi, aliquet sed malesuada et, blandit vitae eros. Nulla nec lorem quam, eu aliquam sapien. Quisque venenatis, enim non ultricies lobortis, lectus dolor consectetur nulla, eu tincidunt metus enim vitae libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent sit amet neque eu libero commodo condimentum. Fusce hendrerit diam sed libero lacinia nec adipiscing massa posuere. Pellentesque eget libero risus, eget venenatis metus. Morbi quis dolor enim. Cras orci orci, ultrices nec consectetur sed, auctor non leo. Aliquam nec sem erat. Nam ut nunc sed leo tempor pretium. Maecenas sit amet tortor a neque congue iaculis eu in ipsum. </p> </div> </div> </div> <div id="footer"></div> </div> </div> </body> </html> Dear all, i've designed a small web page, where it is well viewed in windows IE and not in other browsers like fire fox and net scape navigator. Can you please suggest a solution for this..... thanks in advance.....! Hi - hope someone can help. I have built a website for a business which I am starting up and I know its very basic! THe problem is that I can view the website fine and so can loads of people, but quite a few can't view it and when they load the index page it just shows a blank screen with the address at the bottom. The website address is www.lagganoutdoor.co.uk - The people who couldn't view it are on pretty recent versions of Explorer. Have I done something completely stupid?! Hope you can help. Thanks, Duncan. My website looks like I want it to in Chrome, Firefox and my Android phone (including the flash banner at the top working properly) - however, in IE the layout is wrong. Also there is no consistency. Sometimes a page will look right then if you load another page and go back to the original one it now looks wrong. The compatibility mode makes it look a bit better but still not correct. It appears that it looked right until I updated flash (because the new flash banner at the top required this) and now the whole site layout is wrong. Any ideas? The website is www.nodj.co.uk if you need to take a look. Thanks in advance! I'm programming my first website for a friend who makes comics and in order to make the border around his comics fit I had to mess with the margins. The website looks great on Mozilla and Chrome, and perfect on Safari, but on IE and Opera the border ends up very skinny and goes through the comic, it also makes the page look enormous. Does anyone know how to remedy this? I think it has to do with the border being around the paragraph rather than the image, but I'm not sure. Any help is greatly appreciated. Right now, once I upload a webpage designed with Netscape composer 7.2 (since it is free) and my own html code inserted occasionally, I verify it looks correct on the following web browsers: IE 8 (32 bit) Firefox Chrome Safari Opera Should I verify it on others, such as IE 7 or IE 6, or is that a waste of time? From my experience, Chrome, Firefox, and Safari usually get it right, and IE 8 and Opera get it right less of the time. How do you verify your website on smart phones and whatever browser they use (Black Berry, iPhone, Palm, Android) without having to buy each one? What about the iPad? Thanks! I designed a website for a client. It shows fine on my mac in Firefox but the CSS isn't loading properly in Windows Browsers because the background and the Link details aren't loading at all. What could be the issue? http://kangazoomparty.com/kangazoom.html This is the website btw. Hello. I have created a website: www.launchtechusa.com It looks fine when you view it through mozilla or safari, but it gets distorted when you view it through internet explorer. Any reasons why this may be happening? Thanks for any pointers you can give! Hey all, I've been trying to fix up my carpet cleaning website. The bee.png image in the top left of my menu bar is giving me problems with older browsers & most hand-held devices, e.g., iTouch, cellphones, etc. Is there any kind of trick (hack) I could use so that it will properly align with all devices? Website: www.honeydocarpetcare.com Also, please let me know if you are noticing things that are out of place. If so, please tell me what browser and version you are using! Thanks all! I just finished the rough draft for my new site. Everything looks fine in DW, but in the browser, it's all messed up! Can someone take a look and help me out? Take a look at the bullets about halfway down. http://nextlevelprofits.com/emailsecretsexposed/ Thank you SO much! What are the common issues with websites not being properly displayed in Firefox? Reason is due to my website being displayed correctly in IE but when switching to Firefox the site suddenly breaks apart. Any ideas? Hello everyone. I have just stumbled across this group whilst investigating an issue I am having with a website, what a great resource you have here. I look after the website for my local volunteer fire brigade and I have maintained it for a number of years without any major problems. However in the last couple of weeks it has become apparent that the website is not loading all of the frames for the pages. This appears to only be an issue when browsing with Internet Explorer, as it all looks fine in Firefox. The website is located at http://www.mvcfs.asn.au/ It is only very basic, as that is my current level of HTML programming, I am considering changing to an alternate web layout program like Wordpress, however I haven't looked too much into the details of it yet. I have tried loading this page in I.E. on a number of different computers and they all suffer the same problem, I am currently using version 8.0.600 right now and it is not working, the Firefox version I am viewing it on is 8.0 and that appears to work ok. Is anyone able to suggest a possible solution to this issue, I haven't made any significant changes to the site in the last couple of weeks, so I am not sure why this problem has suddenly come up. Thankyou for your assistance. Regards Matt Is there code that can detect when your page is being embedded and kill the frame? Oye, I am trying to complete this teeny photo album I've been working on ... and I just about completed .. when I tested the Site in various browsers (mozilla, Explorer 8, Safari, Google Chrome) ... i noticed one of the frames is not showing in Google Chrome. How odd? here is the site: xxx There are three teeny shaded squares in a frame that is designated a height of 70 pixels and a width of i believe 100% ... it is visible on Mozilla, Explorer, Safari ... any ideas? is my source code screwy? Thanks! |
|||||||