Re: [css-d] IE list problem
> div#menu ul.tree {
>float: left;
> }
>
> ...to isolate outer ul containers from their parent - div#menu. That
> will fix indentation/line-up in that IE version.
Thanks Georg! That worked like a dream. But since it took me a little while
to figure out what you were talking about, here's a sum up for anyone who's
interested.
The extra padding was coming from the div#menu. To fix it, I had to float the
list so the padding would happen outside the list _container_ instead of the
list _text_.
---Tim
__
css-discuss [cs...@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] IE list problem
> I use the 'position: relative, left: -1.5em, padding-left: 1.5em' > technique from > > http://csshowto.com/typography/hanging-punctuation-with-css/ > > for full IE compatibility. Not sure if it's better than a negative > left margin but, given IE's tendency to screw negative margins up, I > suspect this is a safer IE-6 solution. > > - Bobby That's a much nicer solution and obviates the need for the extra style sheet, though I confess I don't fully understand how it works. I need to get my head round the -1.5em/+1.5em trick. But the example page from the csshowto http://csshowto.com/examples/hangingpunctuation.html shows a weird example and I can't see why one would want to achieve that, except in the case of a ul with no markers. Hanging punctuation is tolerable sometimes, but hanging numbers or bullets seem hideous to me. Peter H. __ css-discuss [cs...@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] IE list problem
Climis, Tim wrote:
> I just noticed this today, and I can't figure out what's going on. It
> looks right in FF and IE8. But in IE7, all the menu text is indented
> from the graphic.
>
> http://www.indiana.edu/~intlserv/
Can't analyze it in depth because scripts don't survive download, but
for IE7, add...
*:first-child+html>body div#menu ul.tree {
float: left;
}
...to isolate outer ul containers from their parent - div#menu. That
will fix indentation/line-up in that IE version.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [cs...@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] IE list problem
--- On Fri, 3/27/09, Peter Hammarling wrote: > It gives a negative left margin to > ul's and ol's. I > couldn't find another way to make list items line up > with the rest of > the text although I'd tried all combinations of margin > 0 and padding 0. I use the 'position: relative, left: -1.5em, padding-left: 1.5em' technique from http://csshowto.com/typography/hanging-punctuation-with-css/ for full IE compatibility. Not sure if it's better than a negative left margin but, given IE's tendency to screw negative margins up, I suspect this is a safer IE-6 solution. - Bobby __ css-discuss [cs...@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] IE list problem
Those who know more can probably tell you what's going on and give a more elegant solution, but I solved your very problem a few days ago with a conditional comment for IE only pointing to a separate, IE7 and down, style sheet. It gives a negative left margin to ul's and ol's. I couldn't find another way to make list items line up with the rest of the text although I'd tried all combinations of margin 0 and padding 0. Peter H. > I just noticed this today, and I can't figure out what's going on. > It looks right in FF and IE8. But in IE7, all the menu text is > indented from the graphic. > > http://www.indiana.edu/~intlserv/ > > The margins and padding are all explicitly set, I think. My only > guess currently is that the text is bumping itself out of the way of > the background image, but I can't imagine why that would be. > > ---Tim Climis > Computer Coordinator > International Services __ css-discuss [cs...@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] IE list problem
I just noticed this today, and I can't figure out what's going on. It looks right in FF and IE8. But in IE7, all the menu text is indented from the graphic. http://www.indiana.edu/~intlserv/ The margins and padding are all explicitly set, I think. My only guess currently is that the text is bumping itself out of the way of the background image, but I can't imagine why that would be. ---Tim Climis Computer Coordinator International Services __ css-discuss [cs...@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] Re: css-d] IE list problem
Jon Stephenson wrote: "I am working on a site where I have to build 2 copies one in html using tables for layout and one using divs for layout. The only common element is the let nav that is built using an unordered list but I am having trouble with it in IE. My test build is at http://www.shi-ni.com/Flora-Rose.html it looks great but in IE it seems to have some extra space at the bottom of the list items." Jon - when I checked it out in IE6, on hover the links jumped which seems to be due to borders not showing correctly. Try changing the " border: XXpx" to "border-width: XXpx" (both in your a and a:hover). This will render your border correctly. I'm guessing that as you also defined border-top-color / border-style etc. the shorthand border command isn't working in IE. Hope it helps, Edith Karnitsch (Newbie to the list & just trying to keep my sanity whilst re-designing a site in CSS which works in IE and Firefox :) __ 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] IE list problem
> I have moved from web design to web development 18 months ago
> and I seem to
> have gotten more then a little rusty in my css. I am working
> on a site where
> I have to build 2 copies one in html using tables for layout
> and one using
> divs for layout. The only common element is the let nav that
> is built using
> an unordered list but I am having trouble with it in IE. My
> test build is at
> http://www.shi-ni.com/Flora-Rose.html it looks great but in
> IE it seems to
> have some extra space at the bottom of the list items. I am sure I am
> missing something simple any help would be appreciated. Thanks
> Jon Stephenson
Jon-
I assume the example above is the "tables" version of the layout. :-)
First, you need to validate your XHTML.
http://validator.w3.org/check?verbose=1&uri=http%3A//www.shi-ni.com/Flora-Ro
se.html
Once you've done that, you can validate your CSS as well, using the W3C
validator:
http://jigsaw.w3.org/css-validator/
One thing I noticed right off is that you cannot use numbers as names (or
the beginnings of names) for IDs.
Even though you're using tables for layout here, I would still advise you to
use CSS for as much styling as you can. For instance, take the BODY tag. You
have:
In CSS you could instead have:
body {
margin:0;
padding:0;
background-color: #fff;
}
Once you've validated the XHTML and the CSS, see where you stand with your
problem. If its still there, post to the list again and we'll all take a
look and try to help you as best we can.
Good luck
Regards,
Ron
__
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] IE list problem
I have moved from web design to web development 18 months ago and I seem to have gotten more then a little rusty in my css. I am working on a site where I have to build 2 copies one in html using tables for layout and one using divs for layout. The only common element is the let nav that is built using an unordered list but I am having trouble with it in IE. My test build is at http://www.shi-ni.com/Flora-Rose.html it looks great but in IE it seems to have some extra space at the bottom of the list items. I am sure I am missing something simple any help would be appreciated. Thanks Jon Stephenson __ 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/
