[css-d] Problem with floated links at right of page in FF
I've been working on this site, my site, in short spurts between other projects and could be doing something entirely wrong. The site uses floats to place main navigation list links with background images at both the top of the page and for project links in the sidebar div to the right of the main_content div on the projects page: http://www.hadseldesign.com/projects.html . Here's my problem, when you click on a link in either the main navigation or the sidebar links FF places a faint dotted line around the link that extends all the way across the page to the left side. It is intended as an indication that the link is actively selected, but it is very distracting, especially with the sidebar links where it runs over the page's main content. I'm wondering if there's some way I can avoid it. The stylesheet that controls the main navigation is at: http://www.hadseldesign.com/common/main_nav.css and the one for the project links is under /* Project page styles */ toward the bottom of http://www.hadseldesign.com/common/main.css . Thanks, Janie __ css-discuss [EMAIL PROTECTED] 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] Float problem in IE
It's not a good CSS day for me. My site was working fine in IE6 7 until I started cleaning some things up today. I received some help from Ingo earlier, adding overflow: hidden to the main_nav's ul li a styles to fix a problem in FF, but I don't think that has anything to do with the new problem, because it still exists if I remove the attribute. Here's my second problem of the day: the floated main navigation links are dropping down incrementally in IE 6, and are doing the same in IE 7, but also hiding all but the top link in IE 7 behind an image in the div below. The problem exists throughout the site. Here's the link: http://www.hadseldesign.com , and here's the main navigation style sheet: http://www.hadseldesign.com/common/main_nav.css . I've checked the site in latest versions of Firefox (Windows XP and Mac OSX), Safari, and Opera on Mac OSX, and I don't see any problems. Thanks again, Janie __ css-discuss [EMAIL PROTECTED] 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: Absolute Position Problem with IE
Glenn writes: IE places the MENU div inside my containing DIV
Hi Glenn,
You have declared the menu div as absolutely positioned, but haven't
declared top and left coordinates. You also have a problem with the content
on IE moving over into the blue area of the background when the browser
window is resized.
I would avoid absolutely positioning the menu div and instead opt for
floating it left. I've changed your #divMenu and #divContentSection divs to
the following, which seems to work. I haven't tested this in anything other
than FF and IE. Hopefully it works in other browsers.
#divMenu
{
border:1px dotted black;
width:110px;
float: left;
text-align: right;
min-height:100%;
}
#divContentSection
{
border:1px dotted red;
width:500px;
margin:0 auto;
position:relative;
min-height:100%;
}
~Janie
__
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] Is it possible - Image scaling with CSS in liquid layout
Thanks to all for the great comments and ideas. I especially appreciate Roger's low-vision perspective (I'm beginning to belong to that club, as well), his development guidelines (70 - 150%) and the info on zoom. My judgements regarding which technique to use to scale images to text-size would depend on the audience, layout requirements, how large a site, etc. If the images degrade too much by using the em method to resize them according to text size, and the site is too large to spend the time and resources creating different image versions, I think using a php-driven graphics program to create images on the fly sounds interesting. I don't think I'd want to resort to Flash, if the images are critical to navigation, because of accessibility issues (hope I'm not opening a can of worms with that comment). A non-flash site would most likely have to be created anyway. If the site is small enough to make it practical, I think a good solution for today is to create links to small, medium or large font and image style sheets, if the audience warrants. Scaling the image text headers so that they look okay with reasonably large or small text without allowing the browser to resize and distort them would require the least amount of hassle--simplicity is often the best solution. For the background-image, I think using a regular image along with z-index to place it behind the text and using the em method to resize it along with the text-size might work if the image doesn't have too much detail (say a ghosted one) and doesn't degrade too much when browser-resized. As for using SVG's in the future--I can't wait!!! Thanks again, Janie __ 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] Is it possible - Image scaling with CSS in liquid layout
On 6Aug2005, Roger wrote: You can size an img element using em or % just like any other element. Hi Roger and J, I did some testing and put together the following sample page using em: http://www.hadsel-design.com/CSSimg_proportion.htm or the shortened url: http://url123.com/sps67 . I'd like to point out that there are some image quality issues with allowing the browser to resize images according to the user's text-size settings and ask how one would go about detecting the user text size (if that's even possible) so that pre-optimized images could be used according to size ranges. I haven't posted to this or any other mail list before, so please forgive any errors in my post. I'm not sure whether this post will make it into the thread. I doubt it because it doesn't look like a usual reply-to message in my g-mail interface. I can't find any quoted text (I put the above in). Thanks, Janie __ 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] Is it possible - Image scaling with CSS in liquid layout
On 8/7/05, Roger Roelofs [EMAIL PROTECTED] wrote: The quality issues you've observed are the downside of this technique, although the quality on your test page was better than I expected when I looked at it in firefox. [...] Preparing multiple images is so much work I've never pursued this idea. I agree, Roger. In fact, I should also mention that a curved image isn't exactly a fair test. I was thinking of using the em method for some image font headers, but they look particularly bad, even without resizing. They are large enough that they look okay in conjunction with text that has been resized within reasonable bounds (IE's large/small settings, for example). FF and Netscape users can resize text to much larger/smaller proportions using Cntrl+ + or - keystrokes, but that begs the question: Just how much resizing should we cater to when working with ems? I think I'm going to stick with my absolutely-sized image font headers and hope that those users with indefinite resizing capabilities will apply them judiciously. Thanks, Janie __ 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/
