Jump to content

Why does my page look ugly in IE but okey in rest of browsers?

rain13

By rain13
in HTML/XHTML

 Share

Recommended Posts

rain13 Member

rain13

Posted
Posted (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?ievsff.png

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 by SoItBegins
Link to comment
Share on other sites
rain13 Member

rain13

Posted
  • Author
Posted

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
Ingolme w3schools Guru

Ingolme

Posted
Posted

<!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.

  • Like 1
Link to comment
Share on other sites
Dreadful_Code Newbie

Dreadful_Code

Posted
Posted (edited)

IE has been the bane of web designers everywhere since the 90's. Welcome aboard!.. :facepalm:

 

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 by Dreadful_Code
Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted

IE has been the bane of web designers everywhere since the 90's. Welcome aboard!.. :facepalm:

 

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
Dreadful_Code Newbie

Dreadful_Code

Posted
Posted (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 by Dreadful_Code
Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted

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
Dreadful_Code Newbie

Dreadful_Code

Posted
Posted

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
Ingolme w3schools Guru

Ingolme

Posted
Posted

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
Dreadful_Code Newbie

Dreadful_Code

Posted
Posted (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 by Dreadful_Code
Link to comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted (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 by thescientist
  • Like 1
Link to comment
Share on other sites
rain13 Member

rain13

Posted
  • Author
Posted

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
rain13 Member

rain13

Posted
  • Author
Posted (edited)

Dont you see it like this:ievsff2.pngOr 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).

ievsff3.png

 

 

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 by SoItBegins
Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted

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
Ingolme w3schools Guru

Ingolme

Posted
Posted

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
rain13 Member

rain13

Posted
  • Author
Posted (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 by SoItBegins
Link to comment
Share on other sites
rain13 Member

rain13

Posted
  • Author
Posted (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 by SoItBegins
Link to comment
Share on other sites
Dreadful_Code Newbie

Dreadful_Code

Posted
Posted

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
rain13 Member

rain13

Posted
  • Author
Posted (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 by SoItBegins
Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...