[WSG] IE 6 Nightmares
Hello,
I've been racking my brain trying to solve a CSS problem and I was hoping
somebody here can point me in the right direction. I'm developing a site
that has to work in all modern browsers and IE 6. Here is the link to a
sample page:
http://www.jasonbyer.com/dev/new/
The problem that I'm having is that currently the page looks fine in IE 6
but in Firefox the navigation doesn't extend the entire width of the screen.
Here is my sample code for the content area:
!- content--
div
!-begin left nav--
div id=leftnav/div
!-end left nav--
!-begin main content--
div id-mainContent
!-main nav--
div id=ddtopmenubar class=mattblackmenu
ul
lia href=
rel=ddsubmenu1 class=new_iconNew/a/li
lia href=
class=search_iconSearch/a/li
lia href=
rel=ddsubmenu2 class=help_iconHelp/a/li
/ul
/div
!-end main nav--
/div
!-end main content--
div style=clear: both;/div
/div
!-end content--
Here is the CSS code for the div's
#leftnav {
width: 180px;
float: left;
display: inline;
height: 1%;
/* reduce the float drop issue in IE */
border-right-width: 2px;
border-right-style: solid;
border-right-color: #999;
}
#mainContent {
background: #FFFfff;
display: inline;
float: left;
}
.mattblackmenu ul{
margin: 0;
padding: 0;
font: bold 12px Verdana;
list-style-type: none;
background: url(../images/nav/mainnav_bg.gif);
overflow: hidden;
width: 100%;
height: 28px;
background-repeat: repeat-x;
-webkit-box-shadow: 0px 4px 1px #c0c0c0;
-moz-box-shadow: 0px 4px 1px #c0c0c0;
box-shadow: 0px 4px 1px #c0c0c0;
}
One thing that I did notice was that when I removed the float:left from the
#mainContent id then the navigation is stretched correctly in Firefox but
the main content moves below the left nav. Has anyone experienced this
problem before? Or does anyone have any suggestions?
Thanks
__
Jason Byer
http://www.jasonbyer.com
mailto:ja...@jasonbyer.com
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
[WSG] Re: WSG Digest
Hi Jason,
It looks like you need to set a width on #mainContent. The tricky part comes
in deciding what to set this width as. If you set a width on it of something
like 800px (assuming your screen is large enough), and then adjust that
width greater and smaller, you should be able to see how it affects the
width of the navbar in Firefox.
However, because #leftnav has a width in pixels, you'll either need to fix
the width of #mainContent also in pixels (and make a judgement call on how
wide that should be), or change the width of both #leftnav and #mainContent
to percentages, and then that will work for any width screen size.
Also, if you do set a width for #mainContent, that should stop dropping down
in Firefox if you remove the float:left;
Hope this helps!
Rachael .
On 28 April 2010 09:08, wsg@webstandardsgroup.org wrote:
*
WEB STANDARDS GROUP MAIL LIST DIGEST
*
From: Jason Byer ja...@jasonbyer.com
Date: Tue, 27 Apr 2010 18:05:30 -0400
Subject: IE 6 Nightmares
Hello,
I've been racking my brain trying to solve a CSS problem and I was hoping
somebody here can point me in the right direction. I'm developing a site
that has to work in all modern browsers and IE 6. Here is the link to a
sample page:
http://www.jasonbyer.com/dev/new/
The problem that I'm having is that currently the page looks fine in IE 6
but in Firefox the navigation doesn't extend the entire width of the
screen.
Here is my sample code for the content area:
!- content--
div
!-begin left nav--
div id=leftnav/div
!-end left nav--
!-begin main content--
div id-mainContent
!-main nav--
div id=ddtopmenubar class=mattblackmenu
ul
lia href=
rel=ddsubmenu1 class=new_iconNew/a/li
lia href=
class=search_iconSearch/a/li
lia href=
rel=ddsubmenu2 class=help_iconHelp/a/li
/ul
/div
!-end main nav--
/div
!-end main content--
div style=clear: both;/div
/div
!-end content--
Here is the CSS code for the div's
#leftnav {
width: 180px;
float: left;
display: inline;
height: 1%;
/* reduce the float drop issue in IE */
border-right-width: 2px;
border-right-style: solid;
border-right-color: #999;
}
#mainContent {
background: #FFFfff;
display: inline;
float: left;
}
.mattblackmenu ul{
margin: 0;
padding: 0;
font: bold 12px Verdana;
list-style-type: none;
background: url(../images/nav/mainnav_bg.gif);
overflow: hidden;
width: 100%;
height: 28px;
background-repeat: repeat-x;
-webkit-box-shadow: 0px 4px 1px #c0c0c0;
-moz-box-shadow: 0px 4px 1px #c0c0c0;
box-shadow: 0px 4px 1px #c0c0c0;
}
One thing that I did notice was that when I removed the float:left from the
#mainContent id then the navigation is stretched correctly in Firefox but
the main content moves below the left nav. Has anyone experienced this
problem before? Or does anyone have any suggestions?
Thanks
__
Jason Byer
http://www.jasonbyer.com
mailto:ja...@jasonbyer.com
**
Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
**
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
RE: [WSG] IE 6 Nightmares
Ive been racking my brain trying to solve a CSS problem and I was hoping somebody here can point me in the right direction. Im developing a site that has to work in all modern browsers and IE 6. Here is the link to a sample page: http://www.jasonbyer.com/dev/new/ The problem that Im having is that currently the page looks fine in IE 6 but in Firefox the navigation doesnt extend the entire width of the screen. That's because #mainContent is a float and without a width it shrinkwraps There are many ways to style this, but fwiw I'd not use float on that container, I'd make it a block formatting context (e.g., overflow:hidden;zoom:1) and then go from there. As a side note, there is no need to use height:1% on the side bar (it is a float so it has a layout already) -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] IE 6 Nightmares
To concur with Thierry, the float on #mainContent appears unnecessary on this page. Give it a margin, or padding, to push the content off the left bar and you should be good to go. Regards, Jon Warner http://thepixelforge.net/ On Tue, Apr 27, 2010 at 11:24 PM, Thierry Koblentz thierry.koble...@gmail.com wrote: I’ve been racking my brain trying to solve a CSS problem and I was hoping somebody here can point me in the right direction. I’m developing a site that has to work in all modern browsers and IE 6. Here is the link to a sample page: http://www.jasonbyer.com/dev/new/ The problem that I’m having is that currently the page looks fine in IE 6 but in Firefox the navigation doesn’t extend the entire width of the screen. That's because #mainContent is a float and without a width it shrinkwraps There are many ways to style this, but fwiw I'd not use float on that container, I'd make it a block formatting context (e.g., overflow:hidden;zoom:1) and then go from there. As a side note, there is no need to use height:1% on the side bar (it is a float so it has a layout already) -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] IE 6 Nightmares
To concur with Thierry, the float on #mainContent appears unnecessary on this page. Give it a margin, or padding, to push the content off the left bar and you should be good to go. These two containers are siblings, so if the OP uses padding or margin to push the content off the left bar he will not be able to clear (left) floats in the main section without clearing the sidebar at the same time. This is why I suggested to use overflow/zoom to create a new block formatting context. This article may help understand the issue: http://tjkdesign.com/articles/clearing-floats_and_block-formatting_context.a sp -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
[WSG] .NET Remoting Activex Javascript not working in IE8
Hi All, I have a desktop toolbar, that calls various websites through activex javascript -REMOTING. This works fine in IE6. But active x is not getting invoked in IE8 browser. I have enabled the download of signed and unsigned activex control as suggested in microsoft website, but it does not works. Can any one please help me out. -- Regards, Sivaramakrishnan.S All Sports lovers Visit www.sivaatzen...@blogspot.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] IE 6 Nightmares
I faced several similar problems before, but, to be honest, don't remember exactly what I did. But I can offer some suggestions: make sure that parents have RELATIVE positioning, make sure that all parents are Relative, plus Parents have a fixed height (not percentages) - I know fixed height is bad, but just see if that works, and then base your decisions based on that. Anya V. Gerasimchuk Web Designer, IT - Web Shared Services UNIFI Information Technology agerasimc...@unioncentral.com (513) 595 -2391 Thierry Koblentz thierry.koble...@gmail.com Sent by: li...@webstandardsgroup.org 04/27/2010 08:36 PM Please respond to wsg@webstandardsgroup.org To wsg@webstandardsgroup.org cc Subject RE: [WSG] IE 6 Nightmares To concur with Thierry, the float on #mainContent appears unnecessary on this page. Give it a margin, or padding, to push the content off the left bar and you should be good to go. These two containers are siblings, so if the OP uses padding or margin to push the content off the left bar he will not be able to clear (left) floats in the main section without clearing the sidebar at the same time. This is why I suggested to use overflow/zoom to create a new block formatting context. This article may help understand the issue: http://tjkdesign.com/articles/clearing-floats_and_block-formatting_context.a sp -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** This message may contain confidential information intended only for the use of the addressee(s) named above and may contain information that is legally privileged. If you are not the addressee, or the person responsible for delivering it to the addressee, you are hereby notified that reading, disseminating, distributing or copying this message is strictly prohibited. If you have received this message by mistake, please immediately notify us by replying to the message and delete the original message immediately thereafter. Thank you. *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
[WSG] Re: IE 6 Nightmare
Hello
Thanks everyone for the help. I was able to use Thierry's suggestion and
change my #mainContent div id to the following:
#mainContent {
background: #FFFfff;
display: inline;
overflow: hidden;
zoom: 1;
}
Then I had to add an margin-right: -3px; to my left nav div to solve the IE
3 pixel job bug. Once those were added to my css, my navigation problem in
Firefox was solved. Just noticed that my main content was shifted over to
the left in the mainContent div only in Firefox.but I believe that is a
margin issue.
Thanks for the help everyone!
__
Jason Byer
http://www.jasonbyer.com
mailto:ja...@jasonbyer.com
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] .NET Remoting Activex Javascript not working in IE8
At the risk of sounding nasty, this is a Web Standards Group list... Active X isn't a web standard by any sense of the definition. Maybe a different list may help? On 28 April 2010 11:42, Sivaramakrishnan.S sivaatzen...@gmail.com wrote: Hi All, I have a desktop toolbar, that calls various websites through activex javascript -REMOTING. This works fine in IE6. But active x is not getting invoked in IE8 browser. I have enabled the download of signed and unsigned activex control as suggested in microsoft website, but it does not works. Can any one please help me out. -- Regards, Sivaramakrishnan.S All Sports lovers Visit www.sivaatzen...@blogspot.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
