Re: [css-d] text position in unordered list
> And, moment of discovery for me...when 10px of padding is added to move the
> text over, 10px must be subtracted from the container, to keep it the same
> width.
The way it is configured now, right. There have been a few discoveries
since those menus were released (although they are still great
examples and quite workable). #navcontainer doesn't need a width or
anything else and the styles can be deleted (unless there is a
specific need for a width or a margin-right to achieve part of your
layout design so it gives you some flexibility). Move the fixed width
to the LI. Below should be /everything/ you require to make it work:
#navcontainer ul {
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}
#navcontainer li {
width: 166px;
overflow: hidden;/*to make links full width in IE*/
}
#navcontainer a {
display: block;
padding: 3px;
margin: 3px 0;/*added to show how to add vertical space*/
background-color: #036;
border-bottom: 1px solid #eee;
}
#navcontainer a:link, #navlist a:visited {
color: #EEE;
text-decoration: none;
}
#navcontainer a:hover {
background-color: #369;
color: #fff;
}
/*IF supporting IE6 then add the following also*/
* html #navcontainer a {
height: 1%;/*kills whitespace between list items but you can probably
get away with leaving this out*/
}
Now you can alter the padding as you see fit without having to
calculate new widths every time and the width of the link IS the width
of the LI item.
HTH
--
/*Mark
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE7 absolute position hasLayout issue
After I sent that previous message I put the html at the top of the container div rather than the bottom, and now it works. Thanks again! Angela On Fri, Jul 29, 2011 at 3:06 PM, Tom Livingston wrote: > This is a screen of my XP, IE 7 VMWare test. I just made a local copy > of your file by View Source. Might need tweaks, but looks right, no? > > On Fri, Jul 29, 2011 at 2:03 PM, Angela Jordan > wrote: > > Thanks Tom. I did try that, if you check the page again you'll see > #primary > > before the close of #container, but as far as I can tell it still doesn't > > show up in IE7. Did you change any of the CSS? > > > > Angela > > > > On Fri, Jul 29, 2011 at 10:42 AM, Tom Livingston > wrote: > >> > >> On Fri, Jul 29, 2011 at 11:05 AM, Angela Jordan > > >> wrote: > >> > I'm pretty sure this is a hasLayout issue since it appears in IE7 and > no > >> > other browsers I've looked at (not testing for IE6), but I've tried > half > >> > a > >> > dozen fixes to no avail. I would really appreciate your input! > >> > > >> > -- > >> > Angela Jordan > >> > > >> > This is the page: http://mobilebotanicalgardens.org/wordpress/ > >> > > >> > The div in question is div id="primary", and the containing div is > >> > "main" > >> > > >> > > >> > > >> > >> > >> Got it to work by placing #primary inside #container. You'd need to > >> tweak a little. > >> > >> HTH > >> > >> -- > >> > >> Tom Livingston | Senior Interactive Developer | Media Logic | > >> ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com > > > > > > > > -- > > Tom Livingston | Senior Interactive Developer | Media Logic | > ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com > __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] text position in unordered list
On Jul 29, 2011, at 2:09 PM, Tom Livingston wrote: The bg color and border are on the , so when you add margin, it's sliding the a over which is exactly what you want, but the bg color and border are moving too. And, moment of discovery for me...when 10px of padding is added to move the text over, 10px must be subtracted from the container, to keep it the same width. J __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] text position in unordered list
On Jul 29, 2011, at 2:13 PM, Tom Livingston wrote: Adding the padding is more user-friendly as it keeps the entire width of a menu item clickable. Otherwise a user would have to make sure they clicked right on the text as it would be the only linked area. displayed as block allows it's padding to be part of the clickable area. that is a *great* thing to know! John __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] text position in unordered list
OK..."and" not "are" I knew what you meant. :-) J On Jul 29, 2011, at 2:11 PM, John wrote: That's exactly what your previous post said...made sense to me. J On Jul 29, 2011, at 2:09 PM, Tom Livingston wrote: Correction: The bg color and border are on the , so when you add margin, it's sliding the a over which is exactly what you want, but the bg color and border are moving too. sorry. Time for decaf I guess. On Fri, Jul 29, 2011 at 5:03 PM, John wrote: On Jul 29, 2011, at 2:00 PM, Tom Livingston wrote: OK, maybe not. Changing the padding works, like padding: 3px 0 3px 30px; glad to hear you say that! yes, padding does work...I guess maybe that's even more insight into the block nature such that margin moves the whole thing, whereas padding...uh...pads the content? thank you! John __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ -- Tom Livingston | Senior Interactive Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] text position in unordered list
That's exactly what your previous post said...made sense to me. J On Jul 29, 2011, at 2:09 PM, Tom Livingston wrote: Correction: The bg color and border are on the , so when you add margin, it's sliding the a over which is exactly what you want, but the bg color and border are moving too. sorry. Time for decaf I guess. On Fri, Jul 29, 2011 at 5:03 PM, John wrote: On Jul 29, 2011, at 2:00 PM, Tom Livingston wrote: OK, maybe not. Changing the padding works, like padding: 3px 0 3px 30px; glad to hear you say that! yes, padding does work...I guess maybe that's even more insight into the block nature such that margin moves the whole thing, whereas padding...uh...pads the content? thank you! John _ _ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ -- Tom Livingston | Senior Interactive Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] text position in unordered list
On Jul 29, 2011, at 2:00 PM, Tom Livingston wrote: OK, maybe not. Changing the padding works, like padding: 3px 0 3px 30px; glad to hear you say that! yes, padding does work...I guess maybe that's even more insight into the block nature such that margin moves the whole thing, whereas padding...uh...pads the content? thank you! John __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] text position in unordered list
given the code below, how is the text positioned within the containers?
I've tried inserting margin-left values in every one of the divs
below, and the only result is that the entire menu moves to the right!
I thought it might be #navlist, but that governs the position of the
whole thing, too. this code is taken from:
http://css.maxdesign.com.au/listamatic/vertical08.htm
thank you in advance!
John
HTML
Item one
Item two
Item three
Item four
Item five
CSS
#navcontainer { width: 200px; }
#navcontainer ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}
#navcontainer a
{
display: block;
padding: 3px;
width: 160px;
background-color: #036;
border-bottom: 1px solid #eee;
}
#navcontainer a:link, #navlist a:visited
{
color: #EEE;
text-decoration: none;
}
#navcontainer a:hover
{
background-color: #369;
color: #fff;
}
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE7 absolute position hasLayout issue
Thanks Tom. I did try that, if you check the page again you'll see #primary before the close of #container, but as far as I can tell it still doesn't show up in IE7. Did you change any of the CSS? Angela On Fri, Jul 29, 2011 at 10:42 AM, Tom Livingston wrote: > On Fri, Jul 29, 2011 at 11:05 AM, Angela Jordan > wrote: > > I'm pretty sure this is a hasLayout issue since it appears in IE7 and no > > other browsers I've looked at (not testing for IE6), but I've tried half > a > > dozen fixes to no avail. I would really appreciate your input! > > > > -- > > Angela Jordan > > > > This is the page: http://mobilebotanicalgardens.org/wordpress/ > > > > The div in question is div id="primary", and the containing div is "main" > > > > > > > > > Got it to work by placing #primary inside #container. You'd need to > tweak a little. > > HTH > > -- > > Tom Livingston | Senior Interactive Developer | Media Logic | > ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com > __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE7 absolute position hasLayout issue
On Fri, Jul 29, 2011 at 11:48 AM, "G.Sørtun" wrote:
> On 29.07.2011 17:05, Angela Jordan wrote:
>>
>> I'm pretty sure this is a hasLayout issue since it appears in IE7
>> and no other browsers I've looked at (not testing for IE6), but I've
>> tried half a dozen fixes to no avail.
>>
>> http://mobilebotanicalgardens.org/wordpress/
>
> IE7, and older, tend to mess up if you put an absolute position element
> directly after a float in source-code.
>
> As for fixes...
>
> #container {
> width:999px;
> float:left;<-- delete.
> }
>
> ...will work.
>
> Putting a dummy-element between the float and AP elements will also work...
>
>
>
>
>
>
> regards
> Georg
>
Even better. :-)
--
Tom Livingston | Senior Interactive Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE7 absolute position hasLayout issue
On 29.07.2011 17:05, Angela Jordan wrote:
I'm pretty sure this is a hasLayout issue since it appears in IE7
and no other browsers I've looked at (not testing for IE6), but I've
tried half a dozen fixes to no avail.
http://mobilebotanicalgardens.org/wordpress/
IE7, and older, tend to mess up if you put an absolute position element
directly after a float in source-code.
As for fixes...
#container {
width:999px;
float:left;<-- delete.
}
...will work.
Putting a dummy-element between the float and AP elements will also work...
regards
Georg
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE7 absolute position hasLayout issue
On Fri, Jul 29, 2011 at 11:05 AM, Angela Jordan wrote: > I'm pretty sure this is a hasLayout issue since it appears in IE7 and no > other browsers I've looked at (not testing for IE6), but I've tried half a > dozen fixes to no avail. I would really appreciate your input! > > -- > Angela Jordan > > This is the page: http://mobilebotanicalgardens.org/wordpress/ > > The div in question is div id="primary", and the containing div is "main" > > > Got it to work by placing #primary inside #container. You'd need to tweak a little. HTH -- Tom Livingston | Senior Interactive Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] parse error on *html
On 29/07/2011 6:36 PM, Mark Henderson wrote: Philippe wrote: In a decent browser, it won't select anything and nothing though... That hack relies on the fact that the simple little mind of IE 6&7 ‘thinks’ there is an element that wraps around the root element (html). Of course there is none. And Alan responded: This is not correct. For IE6 and earlier, there is an element outside . [..] This means that IE6- sees this. ... Perhaps this comes down to interpretation. Putting things in a different light, let's assume that Philippe was talking with regards to the specifications (that's how I took it) and they say that html _IS_ the root. http://www.w3.org/TR/html4/struct/global.html#h-7.3 http://en.wikipedia.org/wiki/HTML_element#Document_structure_elements So it doesn't matter that the IE developers forgot they had implemented some hidden node outside of, to my mind what Philippe said /was/ still correct. Just an opinion. I should have said that it is not completely correct about there being no node wrapping around in IE6-. The rest of what Philippe said is correct. -- Alan Gresley http://css-3d.org/ http://css-class.com/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] parse error on *html
That is what I meant. "if you know it is correct" as in 'I know it's there and why'. I guess I could have been clearer. Sent from my iPhone On Jul 29, 2011, at 4:17 AM, "Philip TAYLOR (Webmaster, Ret'd)" wrote: > > > > Tom Livingston wrote: > > > Though I'm rusty on *HTML hacks- havent used one in years - > > the validator is a tool, not law. If you know that is correct > > and need it for a fix, then it's fine. > > With respect, the validator is more likely to know if something > is "correct" than a mere human; I would be inclined to rephrase > your observation along the lines of : > > > the validator is a tool, not law. If you need it for a fix, > > then go ahead and use it, but be aware that the validator > > told you it was an error for a very good reason. > > Philip Taylor > __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] parse error on *html
Philippe wrote: > In a decent browser, it won't select anything and nothing though... > That hack relies on the fact that the simple little mind of IE 6& 7 > ‘thinks’ there is an element that wraps around the root element > (html). Of course there is none. And Alan responded: > This is not correct. For IE6 and earlier, there is an element outside > . [..] > This means that IE6- sees this. > > > ... > > Perhaps this comes down to interpretation. Putting things in a different light, let's assume that Philippe was talking with regards to the specifications (that's how I took it) and they say that html _IS_ the root. http://www.w3.org/TR/html4/struct/global.html#h-7.3 http://en.wikipedia.org/wiki/HTML_element#Document_structure_elements So it doesn't matter that the IE developers forgot they had implemented some hidden node outside of , to my mind what Philippe said /was/ still correct. Just an opinion. -- /*Mark __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] parse error on *html
Tom Livingston wrote: > Though I'm rusty on *HTML hacks- havent used one in years - > the validator is a tool, not law. If you know that is correct > and need it for a fix, then it's fine. With respect, the validator is more likely to know if something is "correct" than a mere human; I would be inclined to rephrase your observation along the lines of : > the validator is a tool, not law. If you need it for a fix, > then go ahead and use it, but be aware that the validator > told you it was an error for a very good reason. Philip Taylor __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
