Click here to get back home

2 problems with IE6 rendering

 HomeNewsGroups | Search | About
 comp.infosystems.www.authoring.html    Post an article   get this group's latest topics as an RSS feed add this group's latest topics to your My MSN content add this group's latest topics to your My Yahoo content
Subject Author Date
2 problems with IE6 rendering Mauro Sacchetto 11-10-2007
Posted by Mauro Sacchetto on November 10, 2007, 4:12 am
Please log in for more thread options
Please, see at this address:
http://samiel.netsons.org/teatro2/comenato.html
I've 2 problems with IE6.
1. navigation bar at right has a dark gray background:
however, it doesn't arrive to the footer, but stops a little
after the text, so it is possible to see the black #container.
Morevoer, the border-top line of the footer appers not
at he top of the footer, but of the bottom of navigation bar.
2. in #content, the text arrives at the end of #content
while other browsers leave a bit of space.

/*stili per il layout*/
html,body{margin:0; padding:0;}
body{font-family:"Lucida Sans Unicode",sans-serif; font-size:101.01%;
text-align:center; background:black;}
div#container{width:82%; margin:0 auto; margin-top:2em; text-align:left;
border-right:double #CECECE; border-left:double #CECECE;
background:#323232; color:#BBB; /*url(background.jpeg) repeat-y 80% 0;
display:inline-block;*/}

===========================================================================
/*stili su header*/
div#header{background-color:black; color:white;}
div#header h1{padding:20px 20px 40px 20px; border-bottom:double #CECECE;}

/*stili per la navigazione menu header*/
[cut]

/*stili per il layout*/
div#navigation{float:right; width:20%; height:auto; background:#323232;
color:#CECECE;}
div#content{float:left; width:80%; background:#444444; color:#CECECE;}
div.center img{display:block; margin:0 auto; text-align:center;}

/*stili per #content*/
h1,h2
div#content h1,h2,p{padding:0 25px 0;}
div#content h1,h2{margin-top:1.5em; color:white;}

/*stili per la navigazione*/
div#navigation ul{margin:2em 0 0.5em 0.5em;list-style-type:none;}
div#navigation li{margin:0; padding:0.5em; border-bottom:1px solid #CECECE;
text-align:right;}
div#navigation a{background:#323232; color:#5F5F5F; font:normal bold 1em/1em
arial,sans-serif; text-decoration:none;}
div#navigation a:hover{background:#323232; color:#C1C1C1;
text-decoration:underline;}
div#navigation a#activelink_nv{background:#323232; color:white;
text-decoration:none;}

/*stili su footer*/
div#footer{clear:both; padding:0.5em; background:black; color:#CECECE;
border-top:double #CECECE;}

/*stili caratteri*/
[cut]
===========================================================================

Any suggestion?
Thanx!

M.

Posted by Bergamot on November 10, 2007, 12:38 pm
Please log in for more thread options
Mauro Sacchetto wrote:
>
> http://samiel.netsons.org/teatro2/comenato.html
> I've 2 problems with IE6.
> 1. navigation bar at right has a dark gray background:
> however, it doesn't arrive to the footer, but stops a little
> after the text, so it is possible to see the black #container.
> Morevoer, the border-top line of the footer appers not
> at he top of the footer, but of the bottom of navigation bar.

IE6 has serious problems with positioning, and with floats in
particular. Adding position:relative to a container can resolve many issues.

It can still be very quirky, though, because of its weird "has-layout"
property (look it up for more info). I suggest adding another container
to hold the content and navbar. Then read
http://www.quirksmode.org/css/clearing.html

BTW, why are you using this:
body

There hasn't been any reason to use anything other than 100% for years.
Opera did have some issues with it at one time, but that's ancient
history now.

And this:
div#container {float:left; width:82%; margin:0 auto;}

You can't float it and have it centered at the same time.
Drop the float - you don't need it.

> 2. in #content, the text arrives at the end of #content
> while other browsers leave a bit of space.

That's likely due to margin collapsing. Paragraphs have some default
margins but browsers don't have to agree on how much, or whether to
apply it to the top and/or bottom of the paragraph. Set paragraph
margins specifically if you want.

--
Berg

Posted by Mauro Sacchetto on November 10, 2007, 3:19 pm
Please log in for more thread options
Bergamot wrote:
> IE6 has serious problems with positioning, and with floats in
> particular. Adding position:relative to a container can resolve many
> issues.
For this add didn't solve, and my experience with CSS is very limited,
I adopted a layout with absolute positions, and it solved in any way...

> http://www.quirksmode.org/css/clearing.html
Thanx, printed for a reflexive reading.

> BTW, why are you using this:
> body
> There hasn't been any reason to use anything other than 100% for years.
I red in a how-to about this measure, It sound a few strange to me too...
I read about 76% too as a classical font measure.

> And this:
> div#container {float:left; width:82%; margin:0 auto;}
> You can't float it and have it centered at the same time.
> Drop the float - you don't need it.
Yes, it was a not intelligent trying.


>> 2. in #content, the text arrives at the end of #content
>> while other browsers leave a bit of space.
> That's likely due to margin collapsing. Paragraphs have some default
> margins but browsers don't have to agree on how much, or whether to
> apply it to the top and/or bottom of the paragraph. Set paragraph
> margins specifically if you want.
Ok, I put a definite margin for the last periods
of text.
Thanx!
MS


Posted by GTalbot on November 10, 2007, 7:29 pm
Please log in for more thread options
> Mauro Sacchetto wrote:

[snipped]

> >http://samiel.netsons.org/teatro2/comenato.html

[snipped]

> IE6 has serious problems with positioning, and with floats in
> particular. Adding position:relative to a container can resolve many issu=
es.

Hello Berg,

Adding more css rules or css declarations is never a good
recommendable way to debug or to workaround bugs as these are often
not forward-compatible and these increase complexity, leading and
bringing often other bugs surfacing.

Removing declarations, reducing DOM tree (width and depth), relying on
inheritance and on browser defaults are things I recommend.

The first problem on the web is Internet Explorer 6. People using IE6
should just switch to a better browser otherwise at least upgrade to
IE7

[snipped]

> BTW, why are you using this:
> body
>
> There hasn't been any reason to use anything other than 100% for years.


There are many people or articles recommending all kinds of font-size
values like 100.1%, 100.01%, 101%, etc.. but very few are actually
able to explain and to justify this sort of measure.

E=2Eg.:
"This odd 100.01% value for the font size compensates for several
browser bugs. First, setting a default body font size in percent
(instead of em) eliminates an IE/Win problem with growing or shrinking
fonts out of proportion if they are later set in ems in other
elements."
http://www.communitymx.com/content/article.cfm?page=3D5&cid=3DFAF76


> Paragraphs have some default
> margins but browsers don't have to agree on how much, or whether to
> apply it to the top and/or bottom of the paragraph. Set paragraph
> margins specifically if you want.

Opera 9, Safari 3, Firefox 2, Icab 3 and Hv3 TKHTML alpha 16 (and
other acid2-test-compliant browsers) agree on how much and when to
collapse adjoining margins. The problem is with IE6 and IE7, period. I
have done many testcases on collapsing adjoining margins (and others
like Bruno Fassino, Micah Sittig, Ingo Chao, Alan Gresley, etc) and I
can substantiate my claims.

Again the problem is with buggy browsers like IE6 and IE7. Nobody
should work more than 1 min to cater for an old, buggy, non-compliant
and deprecated browser like IE6.

Regards, G=E9rard
--
Internet Explorer 7 bugs: http://www.gtalbot.org/BrowserBugsSection/MSIE7Bu=
gs/


Posted by Bergamot on November 11, 2007, 1:42 am
Please log in for more thread options
GTalbot wrote:
>
>> IE6 has serious problems with positioning, and with floats in
>> particular. Adding position:relative to a container can resolve many issues.
>
> Adding more css rules or css declarations is never a good
> recommendable way to debug or to workaround bugs as these are often
> not forward-compatible and these increase complexity, leading and
> bringing often other bugs surfacing.

Adding 1 standard property to 1 container hardly constitutes complexity,
or an issue with forward compatibility. It is always wise, however, to
make sure such things don't have negative impacts on browsers that are
better than IE.

> Removing declarations, reducing DOM tree (width and depth), relying on
> inheritance and on browser defaults are things I recommend.

Great. Go for it. If, however, you expect to have something a bit more
stylish than gtalbot.org, you may have to reconsider that position.

> People using IE6
> should just switch to a better browser otherwise at least upgrade to
> IE7

Good luck with that, too. IE7 requires minimum Windows XP, which a lot
of people still don't have. I'm no IE lover, but I'm of the opinion that
it's bloody arrogant of web authors to tell their visitors what browser
they should be using.

>> BTW, why are you using this:
>> body
>>
>> There hasn't been any reason to use anything other than 100% for years.
>
> "This odd 100.01% value for the font size compensates for several
> browser bugs.

The strange percentage value was specific to some old version of Opera.
I don't recall the details except that it had trouble with 100%. It's
ancient history now.

> First, setting a default body font size in percent
> (instead of em) eliminates an IE/Win problem

100% does this just as well.

>> Paragraphs have some default
>> margins but browsers don't have to agree
>
> Opera 9, Safari 3, Firefox 2, Icab 3 and Hv3 TKHTML alpha 16 (and
> other acid2-test-compliant browsers) agree on how much and when to
> collapse adjoining margins. The problem is with IE6 and IE7, period.

IE being different in this respect is not a bug. There is no spec that
says how much or where margins go. It's nice that some browsers agree,
but it's not a requirement, nor should you count on it.

--
Berg

Similar ThreadsPosted
problems with iframe rendering November 24, 2004, 3:42 pm
Rendering problems with Mac Firefox and Layers December 5, 2005, 3:44 pm
improper rendering October 26, 2004, 6:30 am
Strange rendering? December 10, 2004, 10:54 am
Re: Is this a bug in form rendering? May 23, 2006, 2:53 pm
Re: Is this a bug in form rendering? May 24, 2006, 7:53 pm
Re: Is this a bug in form rendering? May 24, 2006, 7:57 pm
XHTML rendering on browser July 11, 2004, 10:40 pm
Web service -> IIS and Apache rendering November 15, 2004, 10:59 am
Opera rendering problem? January 31, 2008, 12:42 pm

Our other projects:

Art Dolls, Fairies and Mermaids - Sunnyfaces.net

Roy's Linux, Programming and Search Engines messages

1-Script XML SitemapXML Sitemap