I got my site to look the way I want in IE 5.0 and Mozilla. However, now I also have access to IE 6 and when I viewed the site in that browser, it didn't look good.<br />
<br />
My site is here: <!-- m --><a class="postlink" href="http://jkarlsson.netfirms.com/test/index.html">http://jkarlsson.netfirms.com/test/index.html</a><!-- m --> <br />
...and the CSS file is here: <!-- m --><a class="postlink" href="http://jkarlsson.netfirms.com/test/mall.css">http://jkarlsson.netfirms.com/test/mall.css</a><!-- m --><br />
<br />
Does anyone have any idea how to make it look good in IE 6?<br />
<br />
P.S.<br />
The page has been validated with the W3C validator, and all errors found are there because of my webhost putting their banner on top of the page.<!--content-->Don't have access to IE 6 right at this moment, but I assume part of your problems might be this in your page<br />
<br />
<?xml version="1.0" encoding="UTF-8"?><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<br />
<br />
While this is entirely correct, there is an IE 6 bug that makes it parse a STRICT doctype in "quirks"-mode if you place the <?xml?> declaration on the page.<br />
<br />
Since the xml declaration is entirely optional you might as well leave it out to work around this IE/win 6 bug.<br />
As long as you have the XML NameSpace in there as well as a meta tag for the charencoding you will be fine anyway
<br />
<br />
(examples for refereance)<br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><br />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><br />
<br />
Any remaining problems after this change is probably solvable by taking advantage of the IE CSS parsingbugs taht you are already using to some extent.<!--content-->Thanks for that tip Stefan. Actually I took out my XML declaration and the application/xml+xhtml content-type as I was getting XML output instead of HTML, which I thought maybe due to that, but your tip is handy.<!--content-->Have you changed this now as it looks the same in IE6 and Mozilla.<!--content-->Originally posted by Klyve1 <br />
Have you changed this now as it looks the same in IE6 and Mozilla. <br />
<br />
Are you talking to me? If so, no, I haven't changed anything yet and it does not look the same in IE 6 and Mozilla.<br />
<br />
Stefan: You actually helped me with this (about taking advantage of IE CSS parsingbugs) in the old forum. I don't quite remember how it worked, so could you please tell me which value is read by which browser?<!--content-->Stefan: You said that you don't have access to IE 6 at the moment, so I thought I'd post a screenshot showing what the page looks like in IE 6.<!--content-->Originally posted by J.Karlsson <br />
Stefan: You actually helped me with this (about taking advantage of IE CSS parsingbugs) in the old forum. I don't quite remember how it worked, so could you please tell me which value is read by which browser? [/B] <br />
<br />
First you should remove that <xml> declaration as I said.<br />
<br />
Then, in your CSS file you have stuff like<br />
<br />
width:725px;<br />
voice-family:"\"}\""; voice-family:inherit;<br />
width:748px; padding-bottom:4px; }<br />
html>div .sidhuvud { width:748px; }<br />
<br />
The first width value is used by IE/win 5.x<br />
The second width value is used by IE/win 6.x<br />
The third width value is used by eg Mozilla<br />
<br />
Thus if it looking as it should in IE 5 and Mozilla but not IE 6 (after removing the <xml>), change the values in the second place width appears.<!--content-->I've been playing around with this for a while now, and I noticed the following:<br />
<br />
When removing the <xml> tag, in IE6, the big white div and the yellow bar below it (.innehall and .sidfot) jumped down below the left-hand menu. With the <xml> tag, it looked better -- not perfect, but at least the stuff was close to where I want it!<br />
<br />
Another thing was...here's a piece of code by the way (it's the code for the top yellow bar):<br />
<br />
.sidhuvud2<br />
{<br />
width:713px;<br />
voice-family:"\"}\""; voice-family:inherit;<br />
width:702px;<br />
}<br />
html>div .sidhuvud2 { width:713px; }<br />
<br />
When I changed the second width value (702px), the yellow bar got shorter both in IE6 and Mozilla (in IE6 I got the width I wanted, but in Mozilla it was too short).<br />
<br />
I have uploaded the files to my site, and they are at...<br />
<br />
<!-- m --><a class="postlink" href="http://jkarlsson.netfirms.com/test/index.html">http://jkarlsson.netfirms.com/test/index.html</a><!-- m --> -- with <xml> tag<br />
<!-- m --><a class="postlink" href="http://jkarlsson.netfirms.com/test/index-noxmltag.html">http://jkarlsson.netfirms.com/test/index-noxmltag.html</a><!-- m --> -- without <xml> tag<br />
<!-- m --><a class="postlink" href="http://jkarlsson.netfirms.com/test/mall.css">http://jkarlsson.netfirms.com/test/mall.css</a><!-- m --> -- CSS file<br />
<br />
Firstly, let's focus on getting the correct width of the yellow top bar -- I'll come back later with the other problems...<br />
So...any comments?<!--content-->Were getting pure XML output Rick? If that were the case it would be down to your Apache server module set-up.<br />
<br />
If you mean it was severed as XHTML via the browser's non-validating XML-Parser and looked similar to HTML then that's expected<!--content-->Originally posted by J.Karlsson <br />
.sidhuvud2<br />
{<br />
width:713px;<br />
voice-family:"\"}\""; voice-family:inherit;<br />
width:702px;<br />
}<br />
html>div .sidhuvud2 { width:713px; }<br />
<br />
When I changed the second width value (702px), the yellow bar got shorter both in IE6 and Mozilla (in IE6 I got the width I wanted, but in Mozilla it was too short).<br />
<br />
<br />
Crap sorry, I didn't notice you hade made a change in the CSS that breaks it (I just made a cut an paste).<br />
<br />
html>div<br />
should be<br />
html>body<br />
ALWAYS<br />
<br />
ie in your case<br />
html>body .sidhuvud2<br />
or<br />
html>body div.sidhuvud2<!--content-->I think I got it to work now, so...thanks a lot!<!--content-->
<br />
My site is here: <!-- m --><a class="postlink" href="http://jkarlsson.netfirms.com/test/index.html">http://jkarlsson.netfirms.com/test/index.html</a><!-- m --> <br />
...and the CSS file is here: <!-- m --><a class="postlink" href="http://jkarlsson.netfirms.com/test/mall.css">http://jkarlsson.netfirms.com/test/mall.css</a><!-- m --><br />
<br />
Does anyone have any idea how to make it look good in IE 6?<br />
<br />
P.S.<br />
The page has been validated with the W3C validator, and all errors found are there because of my webhost putting their banner on top of the page.<!--content-->Don't have access to IE 6 right at this moment, but I assume part of your problems might be this in your page<br />
<br />
<?xml version="1.0" encoding="UTF-8"?><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<br />
<br />
While this is entirely correct, there is an IE 6 bug that makes it parse a STRICT doctype in "quirks"-mode if you place the <?xml?> declaration on the page.<br />
<br />
Since the xml declaration is entirely optional you might as well leave it out to work around this IE/win 6 bug.<br />
As long as you have the XML NameSpace in there as well as a meta tag for the charencoding you will be fine anyway
<br /><br />
(examples for refereance)<br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><br />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><br />
<br />
Any remaining problems after this change is probably solvable by taking advantage of the IE CSS parsingbugs taht you are already using to some extent.<!--content-->Thanks for that tip Stefan. Actually I took out my XML declaration and the application/xml+xhtml content-type as I was getting XML output instead of HTML, which I thought maybe due to that, but your tip is handy.<!--content-->Have you changed this now as it looks the same in IE6 and Mozilla.<!--content-->Originally posted by Klyve1 <br />
Have you changed this now as it looks the same in IE6 and Mozilla. <br />
<br />
Are you talking to me? If so, no, I haven't changed anything yet and it does not look the same in IE 6 and Mozilla.<br />
<br />
Stefan: You actually helped me with this (about taking advantage of IE CSS parsingbugs) in the old forum. I don't quite remember how it worked, so could you please tell me which value is read by which browser?<!--content-->Stefan: You said that you don't have access to IE 6 at the moment, so I thought I'd post a screenshot showing what the page looks like in IE 6.<!--content-->Originally posted by J.Karlsson <br />
Stefan: You actually helped me with this (about taking advantage of IE CSS parsingbugs) in the old forum. I don't quite remember how it worked, so could you please tell me which value is read by which browser? [/B] <br />
<br />
First you should remove that <xml> declaration as I said.<br />
<br />
Then, in your CSS file you have stuff like<br />
<br />
width:725px;<br />
voice-family:"\"}\""; voice-family:inherit;<br />
width:748px; padding-bottom:4px; }<br />
html>div .sidhuvud { width:748px; }<br />
<br />
The first width value is used by IE/win 5.x<br />
The second width value is used by IE/win 6.x<br />
The third width value is used by eg Mozilla<br />
<br />
Thus if it looking as it should in IE 5 and Mozilla but not IE 6 (after removing the <xml>), change the values in the second place width appears.<!--content-->I've been playing around with this for a while now, and I noticed the following:<br />
<br />
When removing the <xml> tag, in IE6, the big white div and the yellow bar below it (.innehall and .sidfot) jumped down below the left-hand menu. With the <xml> tag, it looked better -- not perfect, but at least the stuff was close to where I want it!<br />
<br />
Another thing was...here's a piece of code by the way (it's the code for the top yellow bar):<br />
<br />
.sidhuvud2<br />
{<br />
width:713px;<br />
voice-family:"\"}\""; voice-family:inherit;<br />
width:702px;<br />
}<br />
html>div .sidhuvud2 { width:713px; }<br />
<br />
When I changed the second width value (702px), the yellow bar got shorter both in IE6 and Mozilla (in IE6 I got the width I wanted, but in Mozilla it was too short).<br />
<br />
I have uploaded the files to my site, and they are at...<br />
<br />
<!-- m --><a class="postlink" href="http://jkarlsson.netfirms.com/test/index.html">http://jkarlsson.netfirms.com/test/index.html</a><!-- m --> -- with <xml> tag<br />
<!-- m --><a class="postlink" href="http://jkarlsson.netfirms.com/test/index-noxmltag.html">http://jkarlsson.netfirms.com/test/index-noxmltag.html</a><!-- m --> -- without <xml> tag<br />
<!-- m --><a class="postlink" href="http://jkarlsson.netfirms.com/test/mall.css">http://jkarlsson.netfirms.com/test/mall.css</a><!-- m --> -- CSS file<br />
<br />
Firstly, let's focus on getting the correct width of the yellow top bar -- I'll come back later with the other problems...<br />
So...any comments?<!--content-->Were getting pure XML output Rick? If that were the case it would be down to your Apache server module set-up.<br />
<br />
If you mean it was severed as XHTML via the browser's non-validating XML-Parser and looked similar to HTML then that's expected<!--content-->Originally posted by J.Karlsson <br />
.sidhuvud2<br />
{<br />
width:713px;<br />
voice-family:"\"}\""; voice-family:inherit;<br />
width:702px;<br />
}<br />
html>div .sidhuvud2 { width:713px; }<br />
<br />
When I changed the second width value (702px), the yellow bar got shorter both in IE6 and Mozilla (in IE6 I got the width I wanted, but in Mozilla it was too short).<br />
<br />
<br />
Crap sorry, I didn't notice you hade made a change in the CSS that breaks it (I just made a cut an paste).<br />
<br />
html>div<br />
should be<br />
html>body<br />
ALWAYS<br />
<br />
ie in your case<br />
html>body .sidhuvud2<br />
or<br />
html>body div.sidhuvud2<!--content-->I think I got it to work now, so...thanks a lot!
<!--content-->