Re: [css-d] IE8 rendering of text looks garbled at W3C and other sites

[David Laakso]

Robert Lane wrote:
> I just upgraded to IE8 and am noticing weird issue on many sites I visit. 
>
> The W3C site is a case in point: 
> http://www.w3.org/TR/CSS21/visudet.html#float-width
>
>   


No issue whatsoever with that particular page here in XP IE/8.








__
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] trying to learn to make css menu

[Scott Brasted]

Greetings,

FILES:
1. see existing javascript menu: www.stpeterswestfield.org/index.php
2. new draft menu test page: www.stpeterswestfield.org/test_menu.php 
with include on line 25 that has php include call to:
www.stpeterwestfield.org/php/includes_php/st_peters_menu_inc.php where 
menu html is located
3. main site css: st_peters.css
4. menu css: st_peters_menu.css

I am trying to learn to make menus using only css. I have always used 
javascript menus in the past, but I have been recently become convinced 
that there are enough people who, for whatever reason, do not have js 
enabled and will not see my truly fabulous menus.

So, I have taken a design I like from googling css menus and looking at 
a LOT of examples. I have taken one I like and have begun to modify it 
for my uses. I have figured a lot of it out, but I am relatively new to 
css and some of these things are still a little mysterious.

The most puzzling right now for me is a common problem with css menus. 
Javascript allows a timeout while moving the mouse so you can physically 
  separate the menus and submenus and not have the submenu disappear as 
you move the mouse from menu to menu. css does not allow that.

The thought I had is to use the box model to my advantage and figure out 
a way to use padding margin and border to allow what appears like a gap 
between the menus and submenus but in reality it would be some 
combination of padding, margin and border in the background color that 
allows the menus to touch but you would not see it.

First, I would guess that I am not the first person to think that I can 
do this at all. Is it possible? If so, does anyone know what combination 
I would need to get the blank pretend space?

Second, if it is possible, I am having difficulty figuring out where in 
the menu css to put this. As you will see, the author of the original 
did not comment the code at all. I have been accused of over commenting, 
but at least I can find what I am looking for. My brain hurts.

And maybe third, is this a good way to approach a css menu?

Thanks for the help.

Best,
-- 
Scott Brasted
Brasted House Creative Ideas
sc...@brastedhouse.com
716-753-6926


__
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] Creating your own stylesheet for a website

[David Laakso]

david wrote:
>   
>> Atkinson, Sarah wrote:
>> 
>>> I go to a website fairly regularly and their styles are horrible. It's just 
>>> too painful for me to look at anymore. Is there away for me to create a 
>>> Stylesheet for it and have my browser automatically override there styles? 
>>> I know to many of you this might sound horrible but don't worry no 
>>> designers feelings will get hurt... I'm sure that no designers were used in 
>>> making the site. 
>>>   
>> I go to lots of those. No time to create a user style sheet for each.
>> My fast and dirty method makes the hideous and grotesque instantly 
>> readable, functional, and usable:
>> Opera browser>view>style>user mode.
>> 
>
> Firefox with Web Developer Toolbar: Ctrl-Shift-L turns off all stylesheets.
>
> Or you could think of it as an opportunity to redesign it a bit yourself 
> and maybe approach them about doing it for a fee ...
>
>   


Approach them for doing it for a fee? Seeing as most of them are my own 
sites that will hardly do.
~d
PS I hate the Firefox Web Developer Toolbar.
__
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] formatting a Ul to not wrap around a floated image

[Alan Gresley]

Robert Lane wrote:
[...]
> But, the issue I have is this:
> 
> * An unordered list starts about 2/3 of the way down alongside an
>   image that floats left
> * The list has 8 items
> * Items 1-4 flow along the right side of the image
> * Items 5-8 are below the bottom edge of the image - so they flow to
>   the left margin of the containing div below the image.
> 
> Ideally I would like to have all the 8 bullets stay lined up in a 
> straight line and leave white space below the image until the end of the 
> UL bullet list items.
> 
> Is there a  way to do this using CSS?
> 
> Basically my code is set up like this:
> 
>  Some Heading Text<<< Note the img tag is 
> inside the h1 tag
>  Some Heading Text 
>  Some paragraph text 
>  Some Heading Text 
> 
>  List item 1 
>  List item 2 
>  List item 3 
>  List item 4 
>  List item 5 
>  List item 6 
>  List item 7 
>  List item 8 
> 
> 
> The image tag is inside the  tag  and then has styles of:
> margin: 0px 24px 0px 0px;
> display: block;
> float: left;
> height: 100%
> 
> The UL has styles of:
> list-style-position: inside;
> list-style-type: square


This bug can be fixed if you give the the image (the floated object) a 
width. The bug is only present when the float has a auto width.




Then you wouldn't have to hack Firefox.


-- 
Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
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] css or javascript hacks for firefox

[Alan Gresley]

Gunlaug Sørtun wrote:
>>> BTW: which known bug? Just in case there are better options.
> 
>> namely bug 50630: float should be as high as previous line box 
>> https://bugzilla.mozilla.org/show_bug.cgi?id=50630
> 
> That bug is indeed old and well known, and has caused problems all
> along. Don't know of any option but to hack back and forth between old
> and new Geckos for that bug.
> 
> Problem is: one has to hack older Gecko version with a fix (lift float)
> and new versions with the correct value, and it is always unsafe to hack
> new versions.
> 
> 
> This reduced hack should otherwise work, at least back to Fx 1.5 (not
> thoroughly tested)...
> 
> @-moz-document url-prefix() {
> :root>body ELEMENT-SELECTOR {/* fix old Gecko */}
> :root>body:not(:nth-child(0)):only-of-type>*|*:not(|*)
> ELEMENT-SELECTOR {/* correct value for new Gecko */}
> }
> 
> Good thing is: the hack won't affect non-Gecko browsers.
> Bad thing is: it isn't anywhere near "safe" since one has to hack all
> 3.1+ versions back to standard float-alignment now that the bug is fixed.
> At some point in the near or more distant future one may have to delete
> the entire hack, to avoid getting caught up in a hacking-race caused by
> future development of Gecko and/or CSS standards.
> 
> regards
>   Georg


If this is this bug




then it is also present in Safari (3.2.2). Hacking Firefox 3 is 
dangerous since particular bugs have been fixed with this version but 
the hacks are more specific (targeting or filtering) to Gecko engine 
versions. There is many of them. Anyway how can you hack a fix for this bug?

I would think that changing the order of the markup may be better. Can 
this structure be changed Robert?


-- 
Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
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] Creating your own stylesheet for a website

[david]

David Laakso wrote:
> Atkinson, Sarah wrote:
>> I go to a website fairly regularly and their styles are horrible. It's just 
>> too painful for me to look at anymore. Is there away for me to create a 
>> Stylesheet for it and have my browser automatically override there styles? I 
>> know to many of you this might sound horrible but don't worry no designers 
>> feelings will get hurt... I'm sure that no designers were used in making the 
>> site. 
> 
> I go to lots of those. No time to create a user style sheet for each.
> My fast and dirty method makes the hideous and grotesque instantly 
> readable, functional, and usable:
> Opera browser>view>style>user mode.

Firefox with Web Developer Toolbar: Ctrl-Shift-L turns off all stylesheets.

Or you could think of it as an opportunity to redesign it a bit yourself 
and maybe approach them about doing it for a fee ...

-- 
David
gn...@hawaii.rr.com
authenticity, honesty, community
__
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] IE8 rendering of text looks garbled at W3C and other sites

[Robert Lane]

I just upgraded to IE8 and am noticing weird issue on many sites I visit. 

The W3C site is a case in point: 
http://www.w3.org/TR/CSS21/visudet.html#float-width

When I open this in IE8 The text looks only "partially rendered" - faint 
- like you would see from an old style platen press where there wasn't 
enough ink.  The text is all there but it is faint and the characters 
look "broken" - choppy, etc.

This is the same if I choose IE7 mode or IE8 mode with the zoom at 100% 
and text size of medium.

If I click the zoom and increase it to 125% or 150% the text looks 
normal.  At 100% if I set the text size to "larger" it will also look 
correct. 

I have tried changing my display settings related to font smoothing and 
use of clear type and those do not seem to have an impact. 

Is there something we are going to need to do in our CSS styles to 
override this and make sure the text doesn't look hacked up in IE8? 

Anyone else seen this/figured out what is going on here?

Thanks


__
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] How to make rounded corners box with one image?

[Dan King]

Hi Brian,

Thank you for the link to your blog post. Your method explanation is well put 
together and clear. Unfortunately, however, it's not quite what I'm looking 
for. 

I found an example online: 
http://modxcms.com/about/blog/rthrash/simple-rounded-corner-css-boxes.html that 
seemingly matches what I'm looking for. The concept is clear, but I need some 
help in figuring out how to determine margins/padding for the respective image 
used. If you or anyone else has used or understands the method demonstrated in 
the link provided, could you help clarify how to determine the needed 
margins/padding? Thanks.

Regards,
Dan



- Original Message 
From: "Jones, Brian" 
To: "css-d@lists.css-discuss.org" 
Sent: Friday, May 1, 2009 1:57:22 PM
Subject: Re: [css-d] How to make rounded corners box with one image?


Hi Dan,

Here's a recent post I wrote on our web design blog here at University of 
Alabama:  

http://webtide.wordpress.com/2009/04/21/one-way-to-do-rounded-rectangles-with-css-background-images/

I don't know if it would match what you are looking for because it's more than 
one image - but it's 2 instead of 4.  It's pretty simple and seems to be 
working fine unless I missed something in my testing.

Hope this helps.

Brian  

Brian Jones
Web Communications Specialist
The University of Alabama
bjo...@ur.ua.edu
205.348.8315

> -Original Message-
> From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-
> discuss.org] On Behalf Of Dan King
> Sent: Friday, May 01, 2009 12:25 PM
> To: css-d@lists.css-discuss.org
> Subject: [css-d] How to make rounded corners box with one image?
> 
> 
> I'm relatively new to css and for the past few weeks, I've been trying to
> create a rounded corners box with one image. I've searched online but
> nothing I've found so far clearly explains how to use one image to create
> the rounded corners box. They all suggest to use four 'hooks' i.e. divs
> and use background positioning to give each of the hooks a background
> position of a corner. While I understand the concept, I'm at a loss for
> moving thehooks into proper position using margins/padding.
> 
> I'd like to learn/figure out how to logically/mathematically determine how
> much margin/padding to use in order to position the background image
> properly to create the rounded corners effect.  Currently, I've been
> guessing/checking.
> 
> I was able to piece together from web searches html and css for a round
> corners box. The end product does create a rounded corners box but, the
> css used causes issues when floating the containing div and more
> importantly, I don't understand how it works/comes together.
> 
> Below is the html and css for the rounded corners box. If anyone could
> review the code and help me understand how to properly (with clean and
> simple css) put together a rounded corners box it would be appreciated.
> 
> Thanks.
> 
> HTML:
> 
> 
> Title
> 
> 
> Content
> 
> 
> 
> CSS:
> ..profileBox, .profileBox .title, .profileBox .title h3, .profileBox
> .content {
> background: #FF url(../images/rd_indigo_box.png) no-repeat 100% 100%;
> }
> 
> ..profileBox{
> min-width: 225px;
> max-width: 500px;
> margin: 10px 5px;
> padding: 0 10px 0 0;
> }/* Bottom right */
> 
> ..profileBox .title{
> background-position: 100% 0;
> margin: 0 -10px 0 0;
> padding: 0 10px 0 0;
> max-height: 4.5em;
> overflow:hidden;
> } /* Top right */
> 
> ..profileBox .title h3{
> background-position: 0 0;
> float:left;
> color:#FF;
> margin: 0;
> padding: 8px 15px 16px;
> } /* Top left */
> 
> ..profileBox .content{
> background-position: 0 100%;
> margin: 0;
> padding: 5px 5px 10px 15px;
> overflow: hidden;
> } /* Bottom left */
> 
> -Dan
> 
> 
> 
> 
> 
> __
> 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-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-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] css or javascript hacks for firefox

[Gunlaug Sørtun]

Alan Gresley wrote:

> If this is this bug

> 

Although dealing with vertical alignment of floats, our test case isn't
revealing just one bug.

Reordering the markup is the old solution, and it'll still work -
if that's an option.

Another option is to absolute position relevant elements, thus avoid old
float-alignment bugs altogether.


To return to what appears to be the original poster's case:

...a fix for older Geckos will make it appear like this...
Page: 
CSS: 

Yes, it is backwards (hacking both old and new Gecko versions). I've
also ignored very old Geckos completely.
However, when dealing with a case that falls apart when subjected to the
slightest amount of font resizing in any browser anyway, such a solution
doesn't really add serious problems.

The best solution is always to leave new browser versions alone - not
hack them, but if that's not an option...

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] css or javascript hacks for firefox

[Gunlaug Sørtun]

>> BTW: which known bug? Just in case there are better options.

> namely bug 50630: float should be as high as previous line box 
> https://bugzilla.mozilla.org/show_bug.cgi?id=50630

That bug is indeed old and well known, and has caused problems all
along. Don't know of any option but to hack back and forth between old
and new Geckos for that bug.

Problem is: one has to hack older Gecko version with a fix (lift float)
and new versions with the correct value, and it is always unsafe to hack
new versions.


This reduced hack should otherwise work, at least back to Fx 1.5 (not
thoroughly tested)...

@-moz-document url-prefix() {
:root>body ELEMENT-SELECTOR {/* fix old Gecko */}
:root>body:not(:nth-child(0)):only-of-type>*|*:not(|*)
ELEMENT-SELECTOR {/* correct value for new Gecko */}
}

Good thing is: the hack won't affect non-Gecko browsers.
Bad thing is: it isn't anywhere near "safe" since one has to hack all
3.1+ versions back to standard float-alignment now that the bug is fixed.
At some point in the near or more distant future one may have to delete
the entire hack, to avoid getting caught up in a hacking-race caused by
future development of Gecko and/or CSS standards.

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] Div Not Expanding

[Philippe Wittenbergh]

On May 2, 2009, at 4:02 PM, Jennifer Knowles wrote:

> David Laakso wrote:
>> The "frame" does enclose everything providing you view the page in a
>> window 1280 or wider.
>> div.rounded {
>>min-width:1200px; <-- :: add ::
>> }
>>
>
> Thanks David.  I could do that, but on other pages where the content  
> is
> wider such as
> http://www.moonlightportraits.com/portfolio/main.php?g2_itemId=12&g2_imageViewsIndex=1
> I was hoping to have the "frame" around the entire enlarged  
> content..  I
> could just set a higher min-width, but then the other generated pages
> (like http://www.moonlightportraits.com/portfolio/main.php? 
> g2_itemId=11
> ) will have too big of a "frame".  Maybe this is the best I can hope
> for.  Thanks.

Try
div.rounded {
float:left;
width:auto; /* 

Re: [css-d] Div Not Expanding

[Jennifer Knowles]

David Laakso wrote:
> The "frame" does enclose everything providing you view the page in a 
> window 1280 or wider.
> div.rounded {
> min-width:1200px; <-- :: add ::
> }
>   

Thanks David.  I could do that, but on other pages where the content is 
wider such as
http://www.moonlightportraits.com/portfolio/main.php?g2_itemId=12&g2_imageViewsIndex=1
I was hoping to have the "frame" around the entire enlarged content..  I 
could just set a higher min-width, but then the other generated pages 
(like http://www.moonlightportraits.com/portfolio/main.php?g2_itemId=11 
) will have too big of a "frame".  Maybe this is the best I can hope 
for.  Thanks.
>
>
>
>
>
>
>
>
>
> __
> 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-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/