Re: [css-d] Put gap in list styled for navigation IE problems
> Thanks Christian > > That fixed it. I can't figure out why, though. Is there some connection > between specifying width and border display? Or is it just an IE thing? > Anyway, you sorted it out in the nick of time. I owe you. > The problem was that IE doesn't support display:border, but it does usually mimic the behavior if you use width:100%. And the reason why this worked, has something to do with the list items overflowing their containers, or something... I just know that the list item that broke into two lines was the culprit. It needed the "block" width to display right. Just send the latte through e-mail, thanks. Always happy to help. -- -- C Montoya rdpdesign.com ... liquid.rdpdesign.com ... montoya.rdpdesign.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Put gap in list styled for navigation IE problems
Thanks Christian
That fixed it. I can't figure out why, though. Is there some connection
between specifying width and border display? Or is it just an IE thing?
Anyway, you sorted it out in the nick of time. I owe you.
Paul
Christian Montoya wrote:
>>First - big thanks to everyone who replied on this one (see below). In
>>
>>the end I went with two lists, seemed most "correct" and put a
>>margin-bottom in to separate them.
>>
>>However, when I view this in IE6/XP, the line dividing the top two links
>>disappeared. everything else checks out fine - but no line there. I
>>can't see anything in there to cause this, and it doesn't happenn FF/NN.
>>If anyone could suggest a fix, I'd get them a latte. Site launch is on
>>Monday ;-)
>>
>>Link: http://www.digitalbeginnings.shef.ac.uk
>>css: http://www.digitalbeginnings.shef.ac.uk/css/index.css
>>
>>I've tried to keep the code fairly clean and easy to read. let me know
>>if you think not.
>>
>>
>>
>
>This is what I did:
>
>#sidenav li {
> list-style-type: none;
> margin: 0px;
> text-align: center;
> padding: 0;
> display: block;
> border-bottom-width: 1px;
> border-bottom-style: solid;
> border-bottom-color: #ccc;
> color: #036;
>width:100%; /* SEE THIS? */
>}
>
>Did that work?
>
>--
>--
>C Montoya
>rdpdesign.com ... liquid.rdpdesign.com ... montoya.rdpdesign.com
>
>
>
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Put gap in list styled for navigation IE problems
> First - big thanks to everyone who replied on this one (see below). In
>
> the end I went with two lists, seemed most "correct" and put a
> margin-bottom in to separate them.
>
> However, when I view this in IE6/XP, the line dividing the top two links
> disappeared. everything else checks out fine - but no line there. I
> can't see anything in there to cause this, and it doesn't happenn FF/NN.
> If anyone could suggest a fix, I'd get them a latte. Site launch is on
> Monday ;-)
>
> Link: http://www.digitalbeginnings.shef.ac.uk
> css: http://www.digitalbeginnings.shef.ac.uk/css/index.css
>
> I've tried to keep the code fairly clean and easy to read. let me know
> if you think not.
>
This is what I did:
#sidenav li {
list-style-type: none;
margin: 0px;
text-align: center;
padding: 0;
display: block;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #ccc;
color: #036;
width:100%; /* SEE THIS? */
}
Did that work?
--
--
C Montoya
rdpdesign.com ... liquid.rdpdesign.com ... montoya.rdpdesign.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Put gap in list styled for navigation IE problems
First - big thanks to everyone who replied on this one (see below). In the end I went with two lists, seemed most "correct" and put a margin-bottom in to separate them. However, when I view this in IE6/XP, the line dividing the top two links disappeared. everything else checks out fine - but no line there. I can't see anything in there to cause this, and it doesn't happenn FF/NN. If anyone could suggest a fix, I'd get them a latte. Site launch is on Monday ;-) Link: http://www.digitalbeginnings.shef.ac.uk css: http://www.digitalbeginnings.shef.ac.uk/css/index.css I've tried to keep the code fairly clean and easy to read. let me know if you think not. TIA Paul P.S.: Apologies to Steve for sending this to him instead of the list. A slip of the mouse. Steve Clason wrote: > On 10/26/2005 6:01 PM Paul Jinks wrote: > >> I've got a that I've styled as a nav bar. Fine. My client has >> now asked to have a gap the width of 1 list item to separate the last >> two list items as they are links to external sites. If you want to >> take a look, go to: http://www.digitalbeginnings.shef.ac.uk > > > > >> I'm missing something really obvious, right. But what? > > > I believe I'd go with two lists. > __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Put gap in list styled for navigation
On 10/26/2005 6:01 PM Paul Jinks wrote: I've got a that I've styled as a nav bar. Fine. My client has now asked to have a gap the width of 1 list item to separate the last two list items as they are links to external sites. If you want to take a look, go to: http://www.digitalbeginnings.shef.ac.uk I'm missing something really obvious, right. But what? I believe I'd go with two lists. -- Steve Clason Web Design and Development Boulder, Colorado, USA www.topdogstrategy.com (303)818-8590 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Put gap in list styled for navigation
> I tried throwing the baby out with the bath water
Poor baby! How could you throw him out?
> I'm missing something really obvious, right. But what?
Did you try using padding?
#external { padding-top:1em; }
Also, I recommend putting the external links in a second UL, since
using CSS to differentiate them from the internal links only helps
visual users. You could do:
one
two
External links:
one external
two external
#ext { visibility:hidden; } /* or whatever to hide visually but not
from other agents */
#external { padding-top:1em; }
--
--
C Montoya
rdpdesign.com ... liquid.rdpdesign.com ... montoya.rdpdesign.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Put gap in list styled for navigation
Hi
I've got a that I've styled as a nav bar. Fine. My client has now
asked to have a gap the width of 1 list item to separate the last two
list items as they are links to external sites. If you want to take a
look, go to: http://www.digitalbeginnings.shef.ac.uk
Here's the basic code:
xhtml
Home
Background to the study
Research Aims and Questions
Methodology etc
css
ul.sidenav {
width: 150px;
margin-top: 0px;
margin-bottom: 0;
margin-left: 0;
position: relative;
margin-right: 447px;
padding: 0px 0px 175px;
background-image: url(../images/sponsors.gif);
background-repeat: no-repeat;
background-position: center bottom; etc
}
#sidenav ul{
margin: 0;
padding: 0;
}
#sidenav li {
list-style-type: none;
margin: 0px;
text-align: center;
padding: 0;
}
All I have to do, I thought was introduce a class extLinks:
li.extLinks {
margin-top: 10px;}
yet when I apply this to the first external link, nothing happens.
OK, so I tried introducing a with two s one on top of the other. Still
nothing.
I'm missing something really obvious, right. But what?
TIA
Paul
http://www.pauljinks.co.uk
{
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
