[WSG] Re: IE 6 Nightmare plus new margin problem
Hello again,
I stated earlier that after I got help on my previous IE6 problem that my
mainContent div was shifted over to the left in Firefox.
http://www.jasonbyer.com/dev/new/
So I tried adding a margin-left: 181px since the width of the left nav div
is 180px. That worked in Firefox but of course it messed up the design in
IE 6. I even tried adding relative position to the div's as someone
suggested earlier with no luck. Here is a layout of my div's with the
modified css id's.
!- content--
div
!-begin left nav--
div id=leftnav/div
!-end left nav--
!-begin main content--
div id-mainContent /div
!-end main content--
div style=clear: both;/div
/div
#leftnav {
width: 180px;
float: left;
display: inline;
border-right-width: 2px;
border-right-style: solid;
border-right-color: #999;
margin-right: -3px;
}
#mainContent {
background: #FFFfff;
display: inline;
overflow: hidden;
zoom: 1;
position: relative;
}
Any suggestions on this bug?
__
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] 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: 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
***
