RE: [WSG] CSS navigation pushing contents of next div over in IE6
Read: http://www.positioniseverything.net/explorer/threepxtest.html
-Original
Message-
From:
listdad@webstandardsgroup.org [mailto:[EMAIL PROTECTED] On Behalf Of David Sam Butler
Sent: Tuesday, 6 June 2006 4:00 PM
To: wsg@webstandardsgroup.org
Subject: [WSG] CSS navigation
pushing contents of next div over in IE6
Hi All,
I'm trying to implement a CSS/_javascript_
dropdown navigation (as shown at the seminars recently) and all's well in IE7,
firefox and safari, though in IE6 the navigation div pushes the content of the
adjoining div over to the right by a few pixels. I've tried to adjust the
padding, width and margin of all the elements but it's still happening. anyone
got any ideas:
http://www.riverview.nsw.edu.au/_bib/kaz/about.html
#leftNav {
padding:0;
margin:0;
float:left;
width:150px;
}
#navigation
{
margin: 0;
padding:0;
list-style-type: none;
background-color:transparent;
}
#navigation li {
display: inline;
}
#navigation li a {
display: block;
font-family: Arial Narrow, Arial, Helvetica sans-serif;
color: #404142;
text-decoration: none;
font-weight: bold;
padding: 5px 0 5px 5px;
margin:0;
border-bottom: 1px solid #fff;
}
#navigation ul {
margin: 0;
padding: 0;
list-style-type: none;
}
#navigation.js ul {
display: none;
}
#navigation li.open ul {
display: block;
margin:0;
padding:0;
border-bottom:1px solid #fff;
}
#navigation li#wines ul a {
padding: 3px 0 3px 6px;
margin:0;
color: #404142;
font-family: Helvetica, Arial Narrow, Arial, sans-serif;
font-size: 90%;
font-weight: normal;
background-color:#C4C5C6;
border-bottom:1px solid #D1D2D3;
}
#navigation li a:hover {
color: #fff;
background-color:#A2A2A2;
}
#navigation li#wines ul a:hover {
background-color:#f0f0f1;
}
#content {
background-color:#fff;
margin-left:150px;
padding: 5px 5px 5px 10px;
}
thanks for any help...!
sam
**The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help**
**The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help**
RE: [WSG] CSS navigation pushing contents of next div over in IE6
Also, if you want some great inspiration
for designing a wine website, check out:
http://www.palliser.co.nz/
S
-Original
Message-
From:
listdad@webstandardsgroup.org [mailto:[EMAIL PROTECTED] On Behalf Of David Sam Butler
Sent: Tuesday,
6 June 2006 4:00
PM
To: wsg@webstandardsgroup.org
Subject: [WSG] CSS navigation
pushing contents of next div over in IE6
Hi All,
I'm trying to implement a
CSS/_javascript_ dropdown navigation (as shown at the seminars recently) and
all's well in IE7, firefox and safari, though in IE6 the navigation div pushes
the content of the adjoining div over to the right by a few pixels. I've tried
to adjust the padding, width and margin of all the elements but it's still
happening. anyone got any ideas:
http://www.riverview.nsw.edu.au/_bib/kaz/about.html
#leftNav {
padding:0;
margin:0;
float:left;
width:150px;
}
#navigation
{
margin: 0;
padding:0;
list-style-type: none;
background-color:transparent;
}
#navigation li {
display: inline;
}
#navigation li a {
display: block;
font-family: Arial Narrow, Arial, Helvetica sans-serif;
color: #404142;
text-decoration: none;
font-weight: bold;
padding: 5px 0 5px 5px;
margin:0;
border-bottom: 1px solid #fff;
}
#navigation ul {
margin: 0;
padding: 0;
list-style-type: none;
}
#navigation.js ul {
display: none;
}
#navigation li.open ul {
display: block;
margin:0;
padding:0;
border-bottom:1px solid #fff;
}
#navigation li#wines ul a {
padding: 3px 0 3px 6px;
margin:0;
color: #404142;
font-family: Helvetica, Arial Narrow, Arial, sans-serif;
font-size: 90%;
font-weight: normal;
background-color:#C4C5C6;
border-bottom:1px solid #D1D2D3;
}
#navigation li a:hover {
color: #fff;
background-color:#A2A2A2;
}
#navigation li#wines ul a:hover {
background-color:#f0f0f1;
}
#content {
background-color:#fff;
margin-left:150px;
padding: 5px 5px 5px 10px;
}
thanks for any help...!
sam
**The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help**
**The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help**
Re: [WSG] CSS navigation pushing contents of next div over in IE6
David Sam Butler wrote: Hi All, I'm trying to implement a CSS/javascript dropdown navigation (as shown at the seminars recently) and all's well in IE7, firefox and safari, though in IE6 the navigation div pushes the content of the adjoining div over to the right by a few pixels. I've tried to adjust the padding, width and margin of all the elements but it's still happening. anyone got any ideas: 3px Jog Bug: http://www.positioniseverything.net/explorer/threepxtest.html N ___ Omnivision. Websight. http://www.omnivision.com.au/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] CSS navigation pushing contents of next div over in IE6
hm. OK, so I've given my content div a margin-left: 160px; (10 more than the width of the leftNav div) but although it stops the problem it moves that whole div to the right 10px and obviously that's not what i want. I take it there's something I'm not quite getting with this, any more nudges in the 'right' direction...?
http://www.riverview.nsw.edu.au/_bib/kaz/about.html
I was given another 'hack' (detailed bottom) which worked fine and as you can see only has two extra attributes.
#leftNav {float:left;width:150px;}
* html #leftNav { margin-right: 10px; }
* html #content { height: 1%; margin-left: 0; }
#content {background-color:#fff;margin-left: 160px;padding: 5px 5px 5px 10px;}
thehack belowworks..!!
#content {background-color:#fff;margin-left: 150px;padding: 5px 5px 5px 10px;/margin-left: 0px;/float: right; }
**The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help**
RE: [WSG] CSS navigation pushing contents of next div over in IE6
It looks like youve got things
backwards on it, your overriding the * html #content hack with the rule
underneath it.
Move the #content up above the * html
hacks so it is directly below the #leftnav rule, that way IE will read the
hacks and overrule the original #content margins etc.
-Original
Message-
From:
listdad@webstandardsgroup.org [mailto:[EMAIL PROTECTED] On Behalf Of David Sam Butler
Sent: Wednesday,
7 June 2006 8:47
AM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] CSS navigation
pushing contents of next div over in IE6
hm. OK, so I've given my
content div a margin-left: 160px; (10 more than the width of the leftNav div)
but although it stops the problem it moves that whole div to the right 10px and
obviously that's not what i want. I take it there's something I'm not quite
getting with this, any more nudges in the 'right' direction...?
http://www.riverview.nsw.edu.au/_bib/kaz/about.html
I was given another 'hack'
(detailed bottom) which worked fine and as you can see only has two extra
attributes.
#leftNav {
float:left;
width:150px;
}
* html #leftNav {
margin-right: 10px;
}
* html #content {
height: 1%;
margin-left: 0;
}
#content {
background-color:#fff;
margin-left: 160px;
padding: 5px 5px 5px 10px;
}
thehack
belowworks..!!
#content {
background-color:#fff;
margin-left: 150px;
padding: 5px 5px 5px 10px;
/margin-left: 0px;
/float: right;
}
**The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help**
**The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help**
RE: [WSG] CSS navigation pushing contents of next div over in IE6
thanks for that. I'm really getting more confused as I've played around and now although it 'works' it looks nothing like the 'original' hack. I've had to put a -3px margin to the floated div to pull the content div back over to the leftNav div, whereas the hack said to set this to margin-right: 0; . Also what about the two commented lines on the #content selector, that works no drama but does anyone have any thoughts on it's origins etc
http://www.riverview.nsw.edu.au/_bib/kaz/about.html
#leftNav {float:left;width:150px;}
#content {background-color:#fff;margin-left: 150px; /*it made no difference setting this attribute to 160px or 150px!padding: 5px 5px 5px 10px;/*margin-left: 0px;/float: right; */}
/*Hide from IE5-mac. Only IE-win sees this. \*/
* html #leftNav { margin-right:-3px; /*this pulled my content div back over to the 'edge' of the leftNav div } * html #content { height: 1%; margin-left: 0; }/* End hide from IE5/mac */
[EMAIL PROTECTED] 7/06/2006 9:32 am
It looks like you've got things backwards on it, your overriding the * html #content hack with the rule underneath it.
Move the #content up above the * html hacks so it is directly below the #leftnav rule, that way IE will read the hacks and overrule the original #content margins etc.
-Original Message-From: listdad@webstandardsgroup.org [mailto:[EMAIL PROTECTED] On Behalf Of David Sam ButlerSent: Wednesday, 7 June 2006 8:47 AMTo: wsg@webstandardsgroup.orgSubject: Re: [WSG] CSS navigation pushing contents of next div over in IE6
hm. OK, so I've given my content div a margin-left: 160px; (10 more than the width of the leftNav div) but although it stops the problem it moves that whole div to the right 10px and obviously that's not what i want. I take it there's something I'm not quite getting with this, any more nudges in the 'right' direction...?
http://www.riverview.nsw.edu.au/_bib/kaz/about.html
I was given another 'hack' (detailed bottom) which worked fine and as you can see only has two extra attributes.
#leftNav {float:left;width:150px;}
* html #leftNav { margin-right: 10px; }
* html #content { height: 1%; margin-left: 0; }
#content {background-color:#fff;margin-left: 160px;padding: 5px 5px 5px 10px;}
thehack belowworks..!!
#content {background-color:#fff;margin-left: 150px;padding: 5px 5px 5px 10px;/margin-left: 0px;/float: right; }
__ScanningofthismessageandadditionofthisfooterisperformedbySurfControlE-mailFiltersoftware.**The discussion list for http://webstandardsgroup.org/See http://webstandardsgroup.org/mail/guidelines.cfmfor some hints on posting to the list getting help** **The discussion list for http://webstandardsgroup.org/See http://webstandardsgroup.org/mail/guidelines.cfmfor some hints on posting to the list getting help**
**The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help**
RE: [WSG] CSS navigation pushing contents of next div over in IE6
Youve got a whole bunch of hacks in
there now, Id say theyre conflicting with each other. Strip it
out and replace with:
#floatbox {
float: left;
width: 150px;
}
#content {
background-color :
#fff;
margin-left :
150px;
padding : 5px 5px 5px
10px;
}
/* Hide from IE5-mac.
Only IE-win sees this. \*/
* html #floatbox {
margin-right:
10px;
}
* html #content {
height: 1%;
margin-left: 0;
}
/* End hide from IE5/mac
*/
-Original
Message-
From:
listdad@webstandardsgroup.org [mailto:[EMAIL PROTECTED] On Behalf Of David Sam Butler
Sent: Wednesday, 7 June 2006 10:25
AM
To: wsg@webstandardsgroup.org
Subject: RE: [WSG] CSS navigation
pushing contents of next div over in IE6
thanks for that. I'm really getting
more confused as I've played around and now although it 'works' it looks
nothing like the 'original' hack. I've had to put a -3px margin to the floated
div to pull the content div back over to the leftNav div, whereas the hack said
to set this to margin-right: 0; . Also what about the two commented lines on
the #content selector, that works no drama but does anyone have any thoughts on
it's origins etc
http://www.riverview.nsw.edu.au/_bib/kaz/about.html
#leftNav {
float:left;
width:150px;
}
#content {
background-color:#fff;
margin-left:
150px; /*it made no difference setting this attribute to 160px or 150px!
padding: 5px 5px 5px 10px;
/*margin-left: 0px;
/float: right; */
}
/*Hide from IE5-mac. Only IE-win
sees this. \*/
* html #leftNav {
margin-right:-3px;
/*this pulled my content div back over to the 'edge' of the leftNav div
}
* html #content {
height: 1%;
margin-left: 0;
}
/* End hide from IE5/mac */
[EMAIL PROTECTED] 7/06/2006 9:32 am
It looks
like you've got things backwards on it, your overriding the * html #content
hack with the rule underneath it.
Move the
#content up above the * html hacks so it is directly below the #leftnav rule,
that way IE will read the hacks and overrule the original #content margins etc.
-Original
Message-
From:
listdad@webstandardsgroup.org [mailto:[EMAIL PROTECTED] On Behalf Of David Sam Butler
Sent: Wednesday, 7 June 2006 8:47
AM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] CSS navigation
pushing contents of next div over in IE6
hm. OK, so I've given my
content div a margin-left: 160px; (10 more than the width of the leftNav div)
but although it stops the problem it moves that whole div to the right 10px and
obviously that's not what i want. I take it there's something I'm not quite
getting with this, any more nudges in the 'right' direction...?
http://www.riverview.nsw.edu.au/_bib/kaz/about.html
I was given another 'hack'
(detailed bottom) which worked fine and as you can see only has two extra
attributes.
#leftNav {
float:left;
width:150px;
}
* html #leftNav {
margin-right: 10px;
}
* html #content {
height: 1%;
margin-left: 0;
}
#content {
background-color:#fff;
margin-left: 160px;
padding: 5px 5px 5px 10px;
}
thehack
belowworks..!!
#content {
background-color:#fff;
margin-left: 150px;
padding: 5px 5px 5px 10px;
/margin-left: 0px;
/float: right;
}
__
Scanningofthismessageandadditionofthisfooterisperformed
bySurfControlE-mailFiltersoftware.
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help**
**The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help**
RE: [WSG] CSS navigation pushing contents of next div over in IE6
yeah, i tried that earlier and it gives me a 3px gap between the leftNav (floated div) and the content (adjoining div), that's when I set the hack for the leftNav to:
* html #leftNav {margin-right: -3px }
which brings the #content back next to the floated #leftNav.
sam
[EMAIL PROTECTED] 7/06/2006 11:24 am
You've got a whole bunch of hacks in there now, I'd say they're conflicting with each other. Strip it out and replace with:
#floatbox {
float: left;
width: 150px;
}
#content {
background-color : #fff;
margin-left : 150px;
padding : 5px 5px 5px 10px;
}
/* Hide from IE5-mac. Only IE-win sees this. \*/
* html #floatbox {
margin-right: 10px;
}
* html #content {
height: 1%;
margin-left: 0;
}
/* End hide from IE5/mac */
-Original Message-From: listdad@webstandardsgroup.org [mailto:[EMAIL PROTECTED] On Behalf Of David Sam ButlerSent: Wednesday, 7 June 2006 10:25 AMTo: wsg@webstandardsgroup.orgSubject: RE: [WSG] CSS navigation pushing contents of next div over in IE6
thanks for that. I'm really getting more confused as I've played around and now although it 'works' it looks nothing like the 'original' hack. I've had to put a -3px margin to the floated div to pull the content div back over to the leftNav div, whereas the hack said to set this to margin-right: 0; . Also what about the two commented lines on the #content selector, that works no drama but does anyone have any thoughts on it's origins etc
http://www.riverview.nsw.edu.au/_bib/kaz/about.html
#leftNav {float:left;width:150px;}
#content {background-color:#fff;margin-left: 150px; /*it made no difference setting this attribute to 160px or 150px!padding: 5px 5px 5px 10px;/*margin-left: 0px;/float: right; */}
/*Hide from IE5-mac. Only IE-win sees this. \*/
* html #leftNav { margin-right:-3px; /*this pulled my content div back over to the 'edge' of the leftNav div } * html #content { height: 1%; margin-left: 0; }/* End hide from IE5/mac */
[EMAIL PROTECTED] 7/06/2006 9:32 am
It looks like you've got things backwards on it, your overriding the * html #content hack with the rule underneath it.
Move the #content up above the * html hacks so it is directly below the #leftnav rule, that way IE will read the hacks and overrule the original #content margins etc.
-Original Message-From: listdad@webstandardsgroup.org [mailto:[EMAIL PROTECTED] On Behalf Of David Sam ButlerSent: Wednesday, 7 June 2006 8:47 AMTo: wsg@webstandardsgroup.orgSubject: Re: [WSG] CSS navigation pushing contents of next div over in IE6
hm. OK, so I've given my content div a margin-left: 160px; (10 more than the width of the leftNav div) but although it stops the problem it moves that whole div to the right 10px and obviously that's not what i want. I take it there's something I'm not quite getting with this, any more nudges in the 'right' direction...?
http://www.riverview.nsw.edu.au/_bib/kaz/about.html
I was given another 'hack' (detailed bottom) which worked fine and as you can see only has two extra attributes.
#leftNav {float:left;width:150px;}
* html #leftNav { margin-right: 10px; }
* html #content { height: 1%; margin-left: 0; }
#content {background-color:#fff;margin-left: 160px;padding: 5px 5px 5px 10px;}
thehack belowworks..!!
#content {background-color:#fff;margin-left: 150px;padding: 5px 5px 5px 10px;/margin-left: 0px;/float: right; }
__ScanningofthismessageandadditionofthisfooterisperformedbySurfControlE-mailFiltersoftware.
**The discussion list for http://webstandardsgroup.org/See http://webstandardsgroup.org/mail/guidelines.cfmfor some hints on posting to the list getting help** **The discussion list for http://webstandardsgroup.org/See http://webstandardsgroup.org/mail/guidelines.cfmfor some hints on posting to the list getting help**
__ScanningofthismessageandadditionofthisfooterisperformedbySurfControlE-mailFiltersoftware.**The discussion list for http://webstandardsgroup.org/See http://webstandardsgroup.org/mail/guidelines.cfmfor some hints on posting to the list getting help** **The discussion list for http://webstandardsgroup.org/See http://webstandardsgroup.org/mail/guidelines.cfmfor some hints on posting to the list getting help**
**The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help**
