I took the lesson from Maxdesign on using lists for navigation.
At any rate I have the site complete and working well in most browsers except that in IE5 the arrow next to the links appears under the text rather than next to it.
What did I muss up? Don't suggest the Tantek hack because I will change the design rather than use the hack if I can.
html (<!-- m --><a class="postlink" href="http://www.newbookdesigns.com">http://www.newbookdesigns.com</a><!-- m -->)
css (<!-- m --><a class="postlink" href="http://www.newbookdesigns.com/newbook.css">http://www.newbookdesigns.com/newbook.css</a><!-- m -->)
Thanks for your help.Originally posted by lindamulder
I took the lesson from Maxdesign on using lists for navigation.
At any rate I have the site complete and working well in most browsers except that in IE5 the arrow next to the links appears under the text rather than next to it.
What did I muss up? Don't suggest the Tantek hack because I will change the design rather than use the hack if I can.
html (<!-- m --><a class="postlink" href="http://www.newbookdesigns.com">http://www.newbookdesigns.com</a><!-- m -->)
css (<!-- m --><a class="postlink" href="http://www.newbookdesigns.com/newbook.css">http://www.newbookdesigns.com/newbook.css</a><!-- m -->)
Thanks for your help.
Try using left center for background image positioning rather than em offsets.
and
1. don't use px for font sizing
2. allow your layout to adjust to the users font setting
Here is what I get when trying to increase your microfonts to something I can comfrotably read on 1600x1200 resolution monitor: <!-- w --><a class="postlink" href="http://www.vladdy.net/tests/nbd.jpgOriginally">www.vladdy.net/tests/nbd.jpgOriginally</a><!-- w --> posted by Vladdy
Try using left center for background image positioning rather than em offsets.
What does "left center" mean?
Thanks for the other, by the way, I am aware of the change in appearance when using larger font sizes. I've also been under a huge time constraint and it's listed on the "to do" list.Check the background-position property:
<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/colors.html#background-propertiesYes">http://www.w3.org/TR/CSS21/colors.html# ... pertiesYes</a><!-- m -->, that's right. I got a little sloppy when writing it up based on what I'd read at the Maxdesign.
Yes, this is correct:
'background'
Value: [<'background-color'> || <'background-image'> || <'background-repeat'> || <'background-attachment'> || <'background-position'>] || inherit
And I now have the corrected values for the 'background position' written in percentages as specified in the page from the w3c:
<percentage> <percentage>
With a value pair of '0% 0%', the upper left corner of the image is aligned
with the upper left corner of the box's padding edge. A value pair of '100% 100%' places the lower right corner of the image in the lower right corner of padding area. With a value pair of '14% 84%', the point 14% across and 84% down the image is to be placed at the point 14% across and 84% down the padding area....
If only one percentage or length value is given, it sets the horizontal position only, and the vertical position will be 50%. If two values are given, the horizontal position comes first. Combinations of keyword, length and percentage values are allowed, (e.g., '50% 2cm' or 'center 2cm' or 'center 10%'). For combinations of keyword and non-keyword values, 'left' and 'right' may only be used as the first value, and 'top' and 'bottom' may only be used as the second value. Negative positions are allowed.
I have:
#nav2 li {
padding-left: 10px;
background: url(images/arrow1_off.gif) no-repeat 0 60%;
It still does not display correctly in IE5.My thought was that IE5.0 (I assume you are talking about 5.0) would do better with % than ems. Guess I was wrong.
Personally, I do not even bother sending a stylesheet to IE5.0 - its support of CSS is so bad and usage rather low and declining, so that I find it not worth spending my time on hacking my layout for it (5.5 and 6.0 are bad enough as is).You could force IE6 to act like IE5 with QUIRK mode, then redesign until it works in that flavour. But of course, then it may not look good elsewhere. It's easier just to hack it to work in the browsers you want...
There are basically 2 or 3 hacks that can make one style sheet work in the vast majority of browsers used by the living world. Depends on what you need to achieve.
At any rate I have the site complete and working well in most browsers except that in IE5 the arrow next to the links appears under the text rather than next to it.
What did I muss up? Don't suggest the Tantek hack because I will change the design rather than use the hack if I can.
html (<!-- m --><a class="postlink" href="http://www.newbookdesigns.com">http://www.newbookdesigns.com</a><!-- m -->)
css (<!-- m --><a class="postlink" href="http://www.newbookdesigns.com/newbook.css">http://www.newbookdesigns.com/newbook.css</a><!-- m -->)
Thanks for your help.Originally posted by lindamulder
I took the lesson from Maxdesign on using lists for navigation.
At any rate I have the site complete and working well in most browsers except that in IE5 the arrow next to the links appears under the text rather than next to it.
What did I muss up? Don't suggest the Tantek hack because I will change the design rather than use the hack if I can.
html (<!-- m --><a class="postlink" href="http://www.newbookdesigns.com">http://www.newbookdesigns.com</a><!-- m -->)
css (<!-- m --><a class="postlink" href="http://www.newbookdesigns.com/newbook.css">http://www.newbookdesigns.com/newbook.css</a><!-- m -->)
Thanks for your help.
Try using left center for background image positioning rather than em offsets.
and
1. don't use px for font sizing
2. allow your layout to adjust to the users font setting
Here is what I get when trying to increase your microfonts to something I can comfrotably read on 1600x1200 resolution monitor: <!-- w --><a class="postlink" href="http://www.vladdy.net/tests/nbd.jpgOriginally">www.vladdy.net/tests/nbd.jpgOriginally</a><!-- w --> posted by Vladdy
Try using left center for background image positioning rather than em offsets.
What does "left center" mean?
Thanks for the other, by the way, I am aware of the change in appearance when using larger font sizes. I've also been under a huge time constraint and it's listed on the "to do" list.Check the background-position property:
<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/colors.html#background-propertiesYes">http://www.w3.org/TR/CSS21/colors.html# ... pertiesYes</a><!-- m -->, that's right. I got a little sloppy when writing it up based on what I'd read at the Maxdesign.
Yes, this is correct:
'background'
Value: [<'background-color'> || <'background-image'> || <'background-repeat'> || <'background-attachment'> || <'background-position'>] || inherit
And I now have the corrected values for the 'background position' written in percentages as specified in the page from the w3c:
<percentage> <percentage>
With a value pair of '0% 0%', the upper left corner of the image is aligned
with the upper left corner of the box's padding edge. A value pair of '100% 100%' places the lower right corner of the image in the lower right corner of padding area. With a value pair of '14% 84%', the point 14% across and 84% down the image is to be placed at the point 14% across and 84% down the padding area....
If only one percentage or length value is given, it sets the horizontal position only, and the vertical position will be 50%. If two values are given, the horizontal position comes first. Combinations of keyword, length and percentage values are allowed, (e.g., '50% 2cm' or 'center 2cm' or 'center 10%'). For combinations of keyword and non-keyword values, 'left' and 'right' may only be used as the first value, and 'top' and 'bottom' may only be used as the second value. Negative positions are allowed.
I have:
#nav2 li {
padding-left: 10px;
background: url(images/arrow1_off.gif) no-repeat 0 60%;
It still does not display correctly in IE5.My thought was that IE5.0 (I assume you are talking about 5.0) would do better with % than ems. Guess I was wrong.
Personally, I do not even bother sending a stylesheet to IE5.0 - its support of CSS is so bad and usage rather low and declining, so that I find it not worth spending my time on hacking my layout for it (5.5 and 6.0 are bad enough as is).You could force IE6 to act like IE5 with QUIRK mode, then redesign until it works in that flavour. But of course, then it may not look good elsewhere. It's easier just to hack it to work in the browsers you want...
There are basically 2 or 3 hacks that can make one style sheet work in the vast majority of browsers used by the living world. Depends on what you need to achieve.