rain13 Posted July 7, 2013 Share Posted July 7, 2013 (edited) Hello.I am facing some problems with html. At the top I have firefox (and it also looks so in other browsers) and the bottom one is IE.Problem is that with IE font is bold and title bar is too tall. (almost no white space between tabs and this blue title bar.) Could anyone tell me how I could fix this please? Here is my test.css body { font: 13px arial, helvetica, sans-serif; }td.this { font: 13px arial, helvetica, sans-serif; } #header ul { list-style: none; padding: 0; margin: 0; } #header li { float: left; border: 1px solid #307C99; border-bottom-width: 0; margin: 0 1 0 0; } li.Selected { position: relative; top: 1px; background-color: #dbedff; } li.NotSelected { position: relative; top: 1px; background-color: #99ccff; } #content { border: 1px solid #307C99; clear: both; background-color: #dbedff; }TABLE,TR,TD,BODY,SELECT,INPUT,BUTTON,TEXTAREA{font-size :12px }a{ text-decoration: none; color: #0011ff;} And here is my html <html><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="./test.css"></head><body><div style="text-align: left; width: 100%; background-color: #99ccff"><div style="float:right; text-align: left;"><span>Some text</span></div><h1>Title</h1></div><div id="header"><ul id="TabTop"><li class="Selected"><a href="?id=1">TAB1</a></li><li class="NotSelected"><a href="?id=3">TAB2</a></li><li class="NotSelected"><a href="?id=10">TAB3</a></li><li class="NotSelected"><a href="?id=12">TAB4</a></li></ul></div><div id="content"> <table style="text-align: left; width: 100%;" border="0" cellpadding="2" cellspacing="2"> <tbody> <tr> <td style="vertical-align: top; width: 200px;"> <a href="#">Link1<br></a> <a href="#">Link2<br></a> <a href="#">Link3<br></a> </td> <td style="vertical-align: top;">Sample text<br> </td> </tr> </tbody> </table></div><br></body></html> Thanks in advance. Edited July 7, 2013 by SoItBegins Link to comment Share on other sites More sharing options...
Ingolme Posted July 7, 2013 Share Posted July 7, 2013 Your HTML needs to be fixed before being considered valid. You also need a <!DOCTYPE> declaration in order to make Internet Explorer behave. Make sure your HTML is valid here: http://validator.w3.org Link to comment Share on other sites More sharing options...
rain13 Posted July 7, 2013 Author Share Posted July 7, 2013 Thanks for quick response. I couldn't come up with anything better than <!DOCTYPE html>.That solved title bar problem, but font is still bold in IE. And it also removed 1px white space between tabs and now I have one 2px line between 2 tabs (its actually 2 different lines of course but it visually looks as one now). Link to comment Share on other sites More sharing options...
Ingolme Posted July 7, 2013 Share Posted July 7, 2013 <!DOCTYPE html> works as it's the HTML 5 doctype. Unfortunately, I can't find anything in the code you've shown that could make the text bold in Internet Explorer. One problem in your CSS is forgetting to specify units for the non-zero value in this line: margin: 0 1 0 0; If you could show a link to the working page I'd be able to find the problem quickly. 1 Link to comment Share on other sites More sharing options...
Dreadful_Code Posted July 8, 2013 Share Posted July 8, 2013 (edited) IE has been the bane of web designers everywhere since the 90's. Welcome aboard!.. Piece of advice: Build and test in IE first. Yeah, it's miserable to do that.. but as a general rule of thumb: if if looks decent in IE, it'll look wonderful in chrome and firefox. Edited July 8, 2013 by Dreadful_Code Link to comment Share on other sites More sharing options...
Ingolme Posted July 8, 2013 Share Posted July 8, 2013 IE has been the bane of web designers everywhere since the 90's. Welcome aboard!.. Piece of advice: Build and test in IE first. Yeah, it's miserable to do that.. but as a general rule of thumb: if if looks decent in IE, it'll look wonderful in chrome and firefox. That is a bad idea. If it looks decent in IE it could possibly be a total mess in other browsers. Because Internet Explorer is the odd one out, you should get your page to look right in other browsers first and then make small tweaks to get it to look right in Internet Explorer, using conditional comments to load IE stylesheets, for example. Link to comment Share on other sites More sharing options...
Dreadful_Code Posted July 8, 2013 Share Posted July 8, 2013 (edited) That is a bad idea. If it looks decent in IE it could possibly be a total mess in other browsers. Because Internet Explorer is the odd one out, you should get your page to look right in other browsers first and then make small tweaks to get it to look right in Internet Explorer, using conditional comments to load IE stylesheets, for example. Oh brother. First of all, IE isn't the "odd one out". Opera is. IE is the lowest common denominator. It lacks a lot of the wonderful CSS specs we've been enjoying in Chrome and Firefox for years. So why not start with IE? You know that if it works in IE8, it'll rock in a webkit based browser. It's called designing with progressive enhancement. Get the basic features working, then add your fancy schmancy stuff later. Edited July 8, 2013 by Dreadful_Code Link to comment Share on other sites More sharing options...
Ingolme Posted July 8, 2013 Share Posted July 8, 2013 I'm just bringing up general conventions that web developers follow and the reasons why they're followed. Standards compliant browsers all render websites the same way. A lot of sites that look great in Internet Explorer could appear to be a mess in other browsers. Internet Explorer isn't t he "lowest common denominator" in the way that it's the one that makes pages look worst, it's just different which means that pages that look good in it look bad in other browsers, pages that look good in other browsers look bad in it. Though recent versions are much closer to standards than versions 8 and under. Link to comment Share on other sites More sharing options...
Dreadful_Code Posted July 8, 2013 Share Posted July 8, 2013 Standards compliant browsers all render websites the same way. That's not true. This forum would be empty if that were the case. Standards compliant browsers render html specs defined by the w3c consortium. How they do it is up to the browser vendor, and how & when the elements get rendered are remarkably different, as are their rendering engines. Can you please provide a link of a website that looks great in IE8, but terrible in Firefox/Chrome? Conversely, I've can easily give you 10 sites that look good in firefox/chrome but terrible in IE: the topic this thread is about anyway. Link to comment Share on other sites More sharing options...
Ingolme Posted July 8, 2013 Share Posted July 8, 2013 I'm not assuming they use the same procedures to get the job done, I'm saying that the end result, in theory, should be the same as the W3C says. Yes, the website looks wrong in Internet Explorer, and the problem should be quite simple to solve. Once the website is properly working in other browsers only minor changes need to be done to get it to work in Internet Explorer. The problem now is that text is appearing bold where it shouldn't be. This appears more likely to be a mistake in the code rather than an Internet Explorer bug. Until I see the actual page in question and inspect the DOM I cannot pinpoint the core of the problem. Link to comment Share on other sites More sharing options...
Dreadful_Code Posted July 8, 2013 Share Posted July 8, 2013 (edited) Okay, I can agree with that. My guess is an unclosed bold or header tag somewhere in the code - or a misplaced { in the stylesheet. Chrome and Firefox tend to 'automagically' fix invalid markup when possible, whereas IE doesn't. Edited July 8, 2013 by Dreadful_Code Link to comment Share on other sites More sharing options...
thescientist Posted July 8, 2013 Share Posted July 8, 2013 (edited) Not to ratchet up the debate, but I also adhere to Ingolme's workflow, of developing for a browser like Chrome, and then making the minor adjustments that get it in shape for IE. Since IE has gotten progressively better over the years, there's been less of this patch work to be done, even in IE8 if you follow basic development best practices * use a strict DTD * use well structured, semantic markup * make sure your markup is valid * use a CSS reset rule you can get something workable right from the start. Any inconsistencies I've encountered can usually just be handled with some simple CSS. Edited July 8, 2013 by thescientist 1 Link to comment Share on other sites More sharing options...
rain13 Posted July 8, 2013 Author Share Posted July 8, 2013 Thanks again Ingolme. I also figured that <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> didnt work for IE but <!DOCTYPE html> worked. Could <!DOCTYPE html> cause any problems for older browsers that doesnt support html 5? If you could show a link to the working page I'd be able to find the problem quickly. I am currently hosting it in localhost because it's easier to edit files thatway. I guess the saved page should do the same. Actually the code I posted here is already minimal code. I will upload it somewhere when I get chance to. However if you are lucky you might be able to get in http://62.65.214.232/a/lib/acp.php?id=12&a=MANAGE_SETTINGS with user: test and password: test .Here's acp.zip zip file demonstrates that with IE "Allow BBCode" and "If set to yes, bbcode will be parsed" are both bold but with firefox only "Allow BBCode" is bold (as it should be)Other problem with page attached and linked page is that with IE you will only see submit button. with firefox you will also see form itself. However when you save page and then open that saved file (from zip) then IE also shows form, but it doesn't show it when you view it directly from server. Link to comment Share on other sites More sharing options...
dsonesuk Posted July 8, 2013 Share Posted July 8, 2013 try <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Link to comment Share on other sites More sharing options...
rain13 Posted July 8, 2013 Author Share Posted July 8, 2013 That didn't change anything. IE still shows it bold + form still doesn't get built in IE. Link to comment Share on other sites More sharing options...
Ingolme Posted July 8, 2013 Share Posted July 8, 2013 I downloaded your file acp.zip and tested the page and I don't see any bold text where it shouldn't be. Link to comment Share on other sites More sharing options...
rain13 Posted July 8, 2013 Author Share Posted July 8, 2013 (edited) Dont you see it like this:Or this difference between IE and FF (which can be only see when you look it directly from server and which somehow gets fixed as you save page to disk). I am trying to get it up somewhere more accessible place than my home computer as soon as possible, but until that all I can show you is these 2 pictures. Edited July 8, 2013 by SoItBegins Link to comment Share on other sites More sharing options...
Ingolme Posted July 8, 2013 Share Posted July 8, 2013 I tested in Internet Explorer versions 7 through 10 without that problem appearing. But it's probably an unclosed tag, scan your code carefully for unclosed <b> tags. Copy the source code of the page when you see the problem and post it here. Link to comment Share on other sites More sharing options...
rain13 Posted July 8, 2013 Author Share Posted July 8, 2013 Just wondering that if there is unclosed tag, then shouldn't FF also display it all bold? See first screenshot on my previous post. Link to comment Share on other sites More sharing options...
Ingolme Posted July 8, 2013 Share Posted July 8, 2013 There's no standard as to how browsers should handle incorrect HTML. It seems Firefox closes the </b> tag when it finds a </td> meanwhile Internet Explorer might just wraps everything with the <b> tag as long as its not closed. Link to comment Share on other sites More sharing options...
rain13 Posted July 9, 2013 Author Share Posted July 9, 2013 (edited) I did not have any unclosed <b> tag there but what I found was that as soon as I changed. body { font: 13px arial; } to body { font: 13px; } The bold text problem was gone.Edit: found solution: TABLE,TR,TD,BODY,SELECT,INPUT,BUTTON,TEXTAREA{font:11px Tahoma;color:#000} A little googling revealed that arial is known to be overweight with IE.Edit2:I figured the cause of my form problem too: hGeneral= document.getElementById("BOARDSETTINGS");alert("1");hGeneral.innerHTML = "<tr><td>hello</td></tr>";alert("2"); Code execution actually never reaches to alert("2"); however it does in FF.IE says: SCRIPT600: Invalid target element for this operation.acp.php?id=12&a=MANAGE_SETTINGS, line 176 character 1 however I have <table id="BOARDSETTINGS"></table> above javacript. Any ideas what might cause that? Edited July 9, 2013 by SoItBegins Link to comment Share on other sites More sharing options...
rain13 Posted July 9, 2013 Author Share Posted July 9, 2013 (edited) Ok so here is minimal code that demonstrates the problem. Run it with IE first and then with any other browser. What you can see is that in IE you will see empty page, in other browsers you would see "hello" <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <meta content="text/html; charset=UTF-8" http-equiv="content-type"> <title>Title</title></head><body><table id="BOARDSETTINGS"></table><script language="javascript" type="text/javascript">hGeneral= document.getElementById("BOARDSETTINGS");hGeneral.innerHTML = "<tr><td>hello</td></tr>";</script></body></html> And here is quick fix for IE <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <meta content="text/html; charset=UTF-8" http-equiv="content-type"> <title>Title</title></head><body><table id="BOARDSETTINGS"></table><script language="javascript" type="text/javascript">function setTBodyInnerHTML(tbody, html) { var temp = tbody.ownerDocument.createElement('div'); temp.innerHTML = '<table>' + html + '</table>'; tbody.parentNode.replaceChild(temp.firstChild.firstChild, tbody);}hGeneral= document.getElementById("BOARDSETTINGS");setTBodyInnerHTML(hGeneral,"<tr><td>hello</td></tr>")</script></body></html> Which shows that IE really is the worst nightmare of web developer. Edited July 9, 2013 by SoItBegins Link to comment Share on other sites More sharing options...
Dreadful_Code Posted July 9, 2013 Share Posted July 9, 2013 I don't see a BuildTable() function declared anywhere in the above example, so I'm not sure how it could work on any browser. Can't help you there. However, In answer to your question in the example above the above example: "Code execution actually never reaches to alert("2"); however it does in FF." The reason your code sample doesn't reach the second alert is because alert() is blocking the other elements from loading in the other browsers. Javascript is singlethreaded. Alert() stops javascript in its tracks. It just may be that FF is loading a little more than the other browsers the microseconds before firing the alert() function. Try console.log() and compare the difference. Link to comment Share on other sites More sharing options...
rain13 Posted July 9, 2013 Author Share Posted July 9, 2013 (edited) Thanks for pointing out that. Forgot to add BuildTable() here. Previous post edited in order to have example for those who have same problem. BuildTable() It just returns html. The reason your code sample doesn't reach the second alert is because alert() is blocking the other elements from loading in the other browsers. Javascript is singlethreaded. Alert() stops javascript in its tracks. It just may be that FF is loading a little more than the other browsers the microseconds before firing the alert() function. Try console.log() and compare the difference. Wrong. Yes it is singlethreaded but wonce you click ok the code execution continues. The innerHTML property is read-only on the col, colGroup, frameSet, html, head, style, table, tBody, tFoot, tHead, title, and tr objects. http://msdn.microsoft.com/en-us/library/ms533897%28VS.85%29.aspx Edited July 9, 2013 by SoItBegins Link to comment Share on other sites More sharing options...
dsonesuk Posted July 9, 2013 Share Posted July 9, 2013 IE (less than IE10) is very particular on how you create and add elements to table, first rule: there MUST be tbody, this will cause conflict as you are not appending to table now, you are appending to tbody. options: hGeneral= document.getElementById("BOARDSETTINGS");var tbody = document.createElement('TBODY'); //required for IEhGeneral.appendChild(tbody);trow = document.createElement('tr');tbody.appendChild(trow);tdcell = document.createElement('td');trow.appendChild(tdcell);tdcell.innerHTML="hello";//OR//text = document.createTextNode("hello")//tdcell.appendChild(text); Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now