Re: [css-d] Misalignment in IE6

[Usamah M. Ali]

On Wed, Oct 14, 2009 at 5:06 PM, David Laakso
wrote:

>
> The target selector for IE/6 is .grid_16. The star hack reinforces the
> ruleset for IE/6. And the margin amendments position it horizontally.
>
> * html .grid_16 {
> display: inline;
> float: left;
> position: relative;
> margin-left: /*10px*/13px;
> /*margin-right: 10px;*/
> }
>
> reference: 
>
> ~d
>
> Okay, what I basically did is wrapping the following snippet in a
conditional comment and places it below the  element of the main
960.css file:

* html .grid_16 {
  display: inline;
  float: left;
  position: relative;
  margin-left: 10px;
  margin-right: 10px;
}

It worked like a treat and the misalignment on the page edges all has gone.
Two questions though:

1) How could one determine the problematic element(s)? I know it's a gray
area that requires experience and maybe trial and error, but in this
example, what makes you suspect it's the .grid_16 element(s)?

2) I fail to understand why your solution has successfully worked! I'm
familiar with what hasLayout is, but in the above case, the .grid_16 was
from the beginning having layout through the "float: left" declaration. And
since the original code was served to all browsers, I couldn't understand
why we needed to *reinforce* for IE6 using the star html hack.

For folks who suggested using reset stylesheets, Eric Meyer's reset
stylesheet was already in use.

Regards,
Usamah
__
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] Misalignment in IE6

[Usamah M. Ali]

Hello CSSers,

I'm using Grid 960 for the layout of a website I'm developing. Although Grid
960 initially supports IE6, the layout has some oddities regarding margin
widths which casued misalignments on the page. The page displays perfectly
on Firefox, Opera, Safari, IE7 and IE8.

The link:
http://sidahmed.com.sd

I tried to figure out what causes the issues in IE6 but couldn't. Would
appreciate pointing me in the right direction.

PS: Some design elements are still not worked out on the website, you can
just ignore them.

Regards,
Usamah
__
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] Background position limitations in CSS 2.1

[Usamah M. Ali]

Hello everyone,

There is a fundamental limitation of CSS's property background-position that
becomes apparent and annoying when working with RTL documents. The problem
is that when value lengths to determine the position of an image, the
position is by default calculated from the __top left__ corner of the
element. When working with RTL documents, the desired position is supposed
to work contextually, thus should be calculated from the __top right__
corner of the element.

The workaround this is to use only keyword and percentage values. Negative
values of course, do not work out since they serve a purpose in this regard.

To clarify, consider the following:

HTML (RTL document):

  Item 1
  Item 2
  Item 3


CSS:
#navbar li {
  background-image: url('cool.png');
  background-repeat: no-repeat;
  background-position: 4px center;
  list-style-type: none;
}

Now, since the context is RTL, the background image for every list item
should appear on the right side of it, but it won't because value lengths
are caculated from the top left corner of the element.

If we used:
background-position: right center;

it will work, but we will ose fine-grained styling.

I've tried to declare a direction: rtl; on such elements but it didn't have
any effect.

Does anyone knows if CSS3 has dealt with this limitation?

Regards,
Usamah
__
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] Can I post: Designer wanted mail on this list?

[Usamah M. Ali]

Hello,

Probably not. Quoting from list's policy[1]:

"No solicitations of employment or requests for applications. There
are job boards, Web sites, mailing lists, and other venues for helping
stimulate your local economy. Check them out."

[1]http://css-discuss.org/policies.html

Regards,
Usamah


On Tue, Dec 30, 2008 at 5:19 PM, Ansari Samir  wrote:
> Hi,
>
> I want to know, whether I can post such type of message. As I am running a
> IT company & was having urgent need for good web designers.
>
> Regards,
>
> Ansari Samir.
> __
> 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] opening image in new window

[Usamah M. Ali]

On Tue, Jun 24, 2008 at 3:20 PM, Bob <[EMAIL PROTECTED]> wrote:
> Can anyone recommend some  simple yet elegant code for getting
> document images to open  centered in another  window?
>
> Bob Lines
> __

This a behavioral functionality that should be handled with
JavaScript. CSS concerns about presentation not behavior. You'd better
find the answer in a JavaScript mailing list.

Regards,
Usamah
__
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/

Re: [css-d] identify all text elements and wrapping in screen width

[Usamah M. Ali]

You can use the declaration text-align: justify; on all textual
elements, if that what you mean by your post.

On Fri, Apr 18, 2008 at 2:09 PM, zaheer ahmad <[EMAIL PROTECTED]> wrote:
> hi,
>  i have a requirement to wrap all text elements in the page to the screen
>  width to improve readability on a small screen device like a mobile
>  phone/pda.
>  would like to know if this can be accomplished just with a user agent css
>  - rule to identify all text elements
>  - fit them to the screen width
>  - layout of all other elements should adjust accordingly
>  - any exceptions or usecases that cannot be addressed.
>
>  thanks in advance for any inputs.
>
>  regards,
>  Zaheer
>  __
>  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-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/

Re: [css-d] A weird CSS problem in IE7

[Usamah M. Ali]

On Mon, Mar 10, 2008 at 2:40 AM, Philippe Wittenbergh <[EMAIL PROTECTED]> wrote:
>
>  On Mar 10, 2008, at 12:44 AM, Usamah M. Ali wrote:
>
>  > About havingLayout, doesn't IE7 need it? I thought hasLayout becomes
>  > redundant in IE7, am I mistaken?
>
>  Oh, it definitely needs it, in different ways than IE 6 sometimes, but
>  'hasLayout' is not dead in IE7.
>
>  IE8 will be anther story (hopefully, promised by the IE dev team)), in
>  standard standard mode.
>
>
>
>  Philippe
>  ---

Well, .searchbox is already having layout (position: relative;). I
triggered hasLayout on the .search_top div itself and so far it
appears to solve it.

Many thanks Phillipe.
__
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/

Re: [css-d] A weird CSS problem in IE7

[Usamah M. Ali]

On Sun, Mar 9, 2008 at 2:02 PM, Philippe Wittenbergh <[EMAIL PROTECTED]> wrote:
>

>  You don't provide much as a context; a url or minimised test case
>  perhaps ?
>  A screenshot is hard to debug.
>
>  Intuitively, I'd say, give the parent (.searchbox) 'layout' and see if
>  that helps.
>
>  Philippe
>  ---
>  Philippe Wittenbergh
>  http://l-c-n.com/
>

Thanks Philippe.

Actually the site's URL was in the markup's action attribute, but I
guess nobody notices it:
http://sawa.org.sd

About havingLayout, doesn't IE7 need it? I thought hasLayout becomes
redundant in IE7, am I mistaken?

Regards,
Usamah
__
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] A weird CSS problem in IE7

[Usamah M. Ali]

Hello all,

I'm having a weird CSS behavior that is happening only in IE7. It's a
box that having rounded corners on both top-left & bottom-left sides.
The problem is that one of the rounded corner images always jumps off
its original place and spans into the content area.

Here's a screenshot of the problem for better illustration:
http://img373.imageshack.us/img373/5664/ie7weirdxo6.gif

The small image in the middle is supposed to be in place of the red
circle. The CSS technique is a traditional old approach for achieving
CSS rounded corners:




http://sawa.org.sd/search/"; method="get">







The rounded corner images are applied to .search_top & .search_bottom
as follows:
.search_top {
background:transparent url(../images/tlc.gif) no-repeat left top;
height:15px;
}

.search_bottom {
background:transparent url(../images/blc.gif) no-repeat left bottom;
height:15px;
}

This happens randomly. The page loads once with the image spanning
off, and if I refreshed the page it's back to its original place! Also
it's happening only with the top-left image. While I have no evidence,
I'm 100% it's happening only in IE7, not IE6 (having tested in IE
below 6). Needless to say no such quirks in Firefox or Opera.

Thanks in advance,
Usamah
__
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/

Re: [css-d] new CSS book from O'Reilly Media

[Usamah M. Ali]

On Sun, Mar 2, 2008 at 7:19 PM, Rob Emenecker
<[EMAIL PROTECTED]> wrote:
> Howdy all,
>
>  I see that O'Reilly Media just published "The Ultimate CSS Reference"
>  (Olssen & O'Brien) First Edition (ISBN: 0-9802858-5-2). Have any of you had
>  a chance to review this book? If so, how does it fit/compare to other
>  CSS_reference_ books (e.g., "CSS: The Definitive Guide").
>
>  ...Rib
>
>  
>  Rob Emenecker @ Hairy Dog Digital
>  410.694.3575 (arf) || 410.694.3550 (fax) www.hairydogdigital.com
>
>
>  __
>  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/
>

Hi Rob,

This is a SitePoint book, as you can see from the cover image. The
authors, Tommy Olssen & Paul O'Brien are regular contributors to the
the SitePoint forums.

The good news is that the whole book is available online at:
http://reference.sitepoint.com/css

Enjoy. :)

Regards,
Usamah
__
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/

Re: [css-d] background image issues

[Usamah M. Ali]

On Sun, Mar 2, 2008 at 7:49 AM, Lisa Wilcox <[EMAIL PROTECTED]> wrote:
> Hi have this site
>  http://www.webgirlwebdesigns.com/testing/LehutaSiadak/index.html
>
>  And when you view it, the background doesn't fall down behind the content.
>
>  If anyone has any suggestions, I would appreciate it.
>
>  Thank you,
>
>  Lisa
>
>
>
>
>
>
>
>  __
>  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/
>

You've conflicting CSS files, however, both common.css and screen.css
have a white background color set to the body selector, which is what
your page is showing!

What do you think is wrong?

Regards,
Usamah
__
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/

Re: [css-d] Image Background On Hover Isn't Working

[Usamah M. Ali]

On Wed, Feb 27, 2008 at 6:20 AM, Elli Vizcaino <[EMAIL PROTECTED]> wrote:
> Hello,
>
> The logo "NJ.com" in the upper left in the #topnav div
> isn't swapping out with it's highlighted counterpart
> on hover. Not sure I set the CSS right but that's
> the effect I'm aiming for. Also, the image doesn't
> show up sometimes in Windows FF. Or at least it wasn't
> showing earlier though it seems to be now. Any
> suggestions on how I can get the images to swap out on
> hover for the logo?
>
> http://e7flux.com/new/new.html
>
>
>  
> 
> Looking for last minute shopping deals?
> Find them fast with Yahoo! Search.  
> http://tools.search.yahoo.com/newsearch/category.php?category=shopping
> __
> 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/
>

Hello,

A background image is just that, a _background_ image. You cannot swap
it with the actual image in the markup (i.e. the  element), IMO.

You know, when you encounter such problem when something so trivial
just doesn't work, it's always good to validate both the HTML and CSS.
At times a forgotten closing tag or a closing brace } can you make you
scratch your head for hours trying to solve an issue to no avail. By
looking at your code, you're mistakenly advancing the element's name
before the class selector for the sitelogo class, which is incorrect

You have: li a.sitelogo {...} [Incorrect]
It should be: li sitelogo.a and li sitelogo.a:hover respectivley!

Yet, to achieve the effect you're after, declare the logo image to li
a.sitelogo as well and add a transparent background-color to the 
element so it degrades gracefully.

Hey: I guess you're editing the page while I've been testing and
debugging it, and I can tell that brought me into the greatest
confusion I've had in a while. :D

Regards,
Usamah
__
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/

Re: [css-d] Getting Rid of White Background

[Usamah M. Ali]

On Tue, Feb 26, 2008 at 8:45 PM, Jeff Gates <[EMAIL PROTECTED]> wrote:
> I am trying to port over a menu I have on the main part of my site to a
>  page that is outside the site template. But in adapting the css so the
>  menu text is white I seem to be having a problem with IE6/7. It is showing
>  the whole block as white (the text is there but it, too, is white
>  (which is what I want) and the links are working).
>
>  I've tried commenting out all indications of colored backgrounds in any
>  menu nav element (the menu that appears on the rest of the site has a lot
>  of background: #fff;) but that doesn't seem to help. I don't know where
>  that white background is coming from. Can anyone tell me?
>
>  The page in question: http://inourpath.com/map/maps2.html
>  To see the original menu scroll to the bottom of this page:
>  http://inourpath.com/intro.html
>
>  Any help would be appreciated. Thx.
>
>  Jeff
>
You're trying to comment out CSS style rules by adding a #, which is
illegal and would make more confusion if browsers interpert it as ID
style-hookers! If you want to comment out a syle rule or one of its
declarations do it in the form:

/* property: value; */

In particular you have this in your CSS:

#nav_map .current a { display:block; height:20px; float:left;
#background:#fff; padding:0 10px 0 10px; text-decoration:none;
font-family: Verdana, Arial, sans-serif; font-size: .85em;
font-weight: bold; text-transform: uppercase; text-decoration: none;
border-bottom: none; line-height:20px; letter-spacing: .10em;
white-space:nowrap; #border-right:1px solid #fff; color: #fff;}

Such code is really problematic and before you clean it up, I really
can't help to figure out where the real problem lies.

Regards,
Usamah
__
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/

Re: [css-d] PVII Tab hitting below navigation

[Usamah M. Ali]

On Tue, Feb 26, 2008 at 7:03 AM, Christina Hawkins :: GlobalSpex
<[EMAIL PROTECTED]> wrote:
> http://www.globalspex.com/clients/rosemount/business-banking-savings.php
>
>  Having a heck of a time understanding why my PVII tab is hitting below the
>  navigation in FireFox. In IE it's just fine. (I am also using PVII menu as
>  well.)
>
>  Thank you for any help.
>  Christina
>  http://www.globalspex.com
>

Hello Christina,

This is caused by a clearing  on the upper
. Removing the clearance fixes your issue in Firefox, but I
didn't test how IE and other browsers will behave accordingly.

Regards,
Usamah
__
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/

Re: [css-d] Float Issue In IE

[Usamah M. Ali]

On Tue, Feb 26, 2008 at 7:33 AM, Elli Vizcaino <[EMAIL PROTECTED]> wrote:
> Hello,
>
>  I have a #sidebar div floating left with 2 divs
>  (#topright_content and #bottomright_content) floating
>  right, all contained within a #container div. They
>  appear fine in Safari & FF but in IE7 (haven't checked
>  IE6 but assume it's the same) the divs that are
>  floated right are floating outside of the container.
>  Can someone please explain why this is happening and
>  or suggest a fix:
>
>  http://e7flux.com/new/new.html
>
>  TIA,
>  Elli
>

Hello Elli,

Because you're not using a complete DOCTYPE URI that includes system
identifier, IE is working in Quirks Mode which triggers CSS broken box
model. Update your page markup by adding the system identifier of HTML
4.01 Transitional:

"http://www.w3.org/TR/html4/loose.dtd";

Regards,
Usamah
__
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/

Re: [css-d] Styling DL

[Usamah M. Ali]

On Mon, Feb 25, 2008 at 6:07 PM, Richard Brown <[EMAIL PROTECTED]> wrote:
> Hi All
>
>  On this page:
>  
>  The county entry was riding up into the city field. I added clear:left
>  into the dl class so that it didn't do it but I am a bit concerned
>  that it might not be correct.
>
>  Have I stored up problems for myself please? Is there a better way to
>  style this list please?
>
>  Thanks. Css is at:
>  
>  --
>  Kind regards
>  Rich
>

Hi Rich,

First of all your markup for definition lists is incorrect. You should
declare the  tag only once. Just as you do with ordered and
unordered lists.


title
content
title 2
 content 2
title 3
content 3
...
...


As about styling the list, your approach is OK, just add a
non-breaking space ( ) where you have empty fields (like city in
your example) so as to prevent occupying its space by other elements.

Regards,
Usamah
__
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/

Re: [css-d] Font name

[Usamah M. Ali]

Hello,

Looks like a Trebuchet MS variant. I don't know, however, how that
relates specifically to CSS? You'll get definite answer to that
question in graphics-related mailing lists or forums.

Regards,
Usamah

On Mon, Feb 25, 2008 at 5:21 PM, Mário Gamito <[EMAIL PROTECTED]> wrote:
> Hi,
>
>  Does anyone know the font name that is used in this picture ?
>
>  http://www.absinto.org/einstein.010.png
>
>  I'd like to use it in a site, but I can't figure out what it is.
>
>  Any help would be appreciated.
>
>  Warm Regards,
>  Mário Gamito
>  __
>  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-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/

Re: [css-d] position:absolute bottom:0 not at the bottom

[Usamah M. Ali]

>  Usamah: Removing the font-size declaration did not fix the issue when
>  testing with different fonts and Browser-text-zoom settings. It depends
>  on the resulting height of the box, but I cannot control that because of
>  the flow of text.
>

I see. What about the negative margin on the span? It works fine for me!

Usamah
__
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/

Re: [css-d] IE7 auto centering on zoom

[Usamah M. Ali]

On Sun, Feb 24, 2008 at 6:18 PM, Ren Jonsin <[EMAIL PROTECTED]> wrote:
> This user has a vision problem and the zoom makes everything bigger.  It's
> not happening when you increase the text size, it's when you use the zoom
> feature in the right side of the status bar. Text resize works fine on all
> browsers, but the zoom is where the problem shows up.
>
> Thanks
> Ren
>
>

Oh, I see. Thanks for clarifying.

I did some searching and it indeed looks like another IE flawed
feature. Just for testing, try to remove the DOCTYPE declaration from
the page markup and see if this solves the issue.

I would second David's advice though: this is the best time to advice
that user to switch to a better browser. Opera has loads of useful
features for people with special needs. He/she will going to love it.

Regards,
Usamah

Regards,
Usamah
__
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/

Re: [css-d] IE7 auto centering on zoom

[Usamah M. Ali]

On Sun, Feb 24, 2008 at 4:57 PM, Ren Jonsin <[EMAIL PROTECTED]> wrote:
> Hi all,
>
>  I had a reader send me an email yesterday complaining that when he uses the
>  zoom feature in IE7 on my site, http://www.frontstretch.com the horizontal
>  scroll it cr4eates keeps automatically centering on the the page.  Even if
>  he holds the scroll to the left or right, it wants to bounce back to the
>  center.  He says that it doesn't happen on any other site.  I confirmed that
>  this was happening, but can't figure out how to stop IE7 from acting that
>  way. Is there anything I can do using CSS that would stop this?
>
>  Thanks!
>  Ren Jonsin

Hi,

I can't reproduce this on IE7. I've zoomed the text to larger and
largest and all seem fine and OK!

Could you please explain more what the problem exactly is? Also try to
disable any toolbars or add-ons you may have installed and see if the
problem persist.

Regards,
Usamah
__
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/

Re: [css-d] Floated blockquote nested inside li in IE6/IE7 with RTL layout

[Usamah M. Ali]

On Sun, Feb 24, 2008 at 4:46 PM, Gunlaug Sørtun <[EMAIL PROTECTED]> wrote:
>
>  Only solution that seems to work reliably in IE/win without really
>  changing the underlying markup, is to add a div as "style-hook"...
>
>  
>  
>  
>  ...
>  
>  
>  ...
>  
>

Perfect! Thanks Gunlaug.

Do you have any idea what this bug is all about?

Regards,
Usamah
__
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/

Re: [css-d] Slide show in a single picture frame

[Usamah M. Ali]

Hello,

Take a look at SmoothGallery 2.0:
http://smoothgallery.jondesign.net/

It's an elegant JavaScript slideshow script that is based on mootools
framework. I would highly recommend it over a Flash-based one. It's is
accessible, crawlable by search engines and produces
Standards-Compliant code and yet is open source. All these are not
possible with a Flash-based slideshow.

For a typical live example of what you're trying to do, SmoothGallery
is used in Microsoft's Expression website:
http://www.microsoft.com/expression/

Regards,
Usamah

On Sun, Feb 24, 2008 at 7:35 AM, [EMAIL PROTECTED] <[EMAIL PROTECTED]> wrote:
> Is it possible ti create a slide show with in a single picture frame
> on a web site.
> I'm in the design stage and I'm wanting to have a series of images,
> changing every 4 or 5 seconds. changing with in one picture frame. I
> know you can do this with flash and a time line.
> Is it possible with css.
>
> Thanks in advance
>
> chris
>
> __
> 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-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] Floated blockquote nested inside li in IE6/IE7 with RTL layout

[Usamah M. Ali]

Hello all,

I'm having a problem with floated blockquotes nested inside 
elements within a RTL layout. RTL layout in the sense of adding
dir="rtl" to the  element. Check a live example of the problem:

http://sawa.org.sd/testimonials/zuhair-alsarraj-alsudani-part-one

The list item's square is being shifted off to the right in IE7 and
disappears in IE6. The problem simply doesn't happen when using a
 instead of a ! The page looks fine & consistent
across all browsers except IE.

I suspected a hasLayout issue, but I couldn't spot what is triggering
it in order to fix it.

/*
If you view the page in Firefox, you'll see that the first two 
elements of the list are completely spanning off the content area.
This is irrelevant to the problem here; it's a floating bug (the ) in Firefox which happens also only with RTL layouts!
It has been confirmed by the Mozilla developers and is supposed to be
fixed in Firefox 3.
*/

Thanks in advance,
Usamah M.
__
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/

Re: [css-d] position:absolute bottom:0 not at the bottom

[Usamah M. Ali]

On Sun, Feb 24, 2008 at 12:39 PM, Ingo Chao <[EMAIL PROTECTED]> wrote:
>
>
>  There is a 1px gap below the red block that is absolutely positioned
>  (bottom:0) inside its containing black block.
>
>  (In case you cannot see the gap, change the text zoom.)
>
>  Both should be equal in height. The height is determined by font metrics
>  only, but both, black and red, have the same metrics (I think).
>
>  Tried a couple of fixes, inluding giving a line-height, paddings,
>  margins, vertical-align and all I can think of.
>
>  But once it is fixed, it breaks with another line-height/font/text-zoom
>  setting.
>

Hello,

I think this has to do with setting the font size on the body to 100%,
because IE6 will have issues in rounding the font sizes of OTHER
relative measures. Remove the font-size declaration from the body
selector and the 1px jog is gone. If you set it to em (to match that
of the parent's div it will also work. Setting it to points (pt) also
works. :)

Apart from all that, setting a margin-bottom: -1px on the span
selector perfectly removes the 1px jog without breaking any others
elements on the page. And since this an IE6 bug (I see no 1px jogging
in IE7), you can target it via a conditional comment specific to IE6.

Regards,
Usamah
__
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/

Re: [css-d] Background URL width and height

[Usamah M. Ali]

On Sun, Feb 24, 2008 at 12:19 AM, Hayden's Harness Attachment
<[EMAIL PROTECTED]> wrote:
>
>  Is it possible to control the width and height of a background URL using 
> CSS? I have a CSS file with "background: 
> URL(http://www.choroideremia.org/images/curve.gif) no-repeat 115px 0;".
>
>  Angus MacKinnon

Hello Angus,

If I understood you clearly, you mean controlling width and height of
a background image that is declared in CSS, not a URL's width and
height.

In that case you the simple answer is you can't. You can, however,
declare width and height dimensions in the same style rule that the
background image is being applied to. CSS allows you to control the
position of background images NOT their dimensions.

For example:

#header {
background: url(path/to/image.gif) no-repeat top left;
width: 100%;
height: 120px;
}

If image.gif is, say, 100px x 60px, then having height: 120px and
width: 100% allows the full image to be displayed. If you have had
something like:

#header {
background: url(path/to/image.gif) no-repeat top left;
width: 100%;
height: 40px;
}

then image.gif will be cut 20px from its bottom. If you declared your
CSS as follows:

#header {
background: url(path/to/image.gif) no-repeat bottom left;
width: 100%;
height: 40px;
}

your image will be cut 20px from its top.

So CSS background properties allow you to control the position of the image.

As a last note, the actual CSS for controlling background image
position is background-position.

Regards,
Usamah
__
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/

Re: [css-d] Need Image to Overflow Bounds

[Usamah M. Ali]

Hello,

Absolute positioning the image might work. I gave it a try in Firebug
and it worked but needs tidying up I guess.

Just out of curiosity, what are using overflow: hidden for?

Regards,
Usamah

On Sat, Feb 23, 2008 at 2:17 AM, Chris Akins <[EMAIL PROTECTED]> wrote:
> I'm working with one of Georg's flexible layouts and have modified it a bit
>  for my site needs.  One thing I can't get my head around is how to have one
>  image be able to overflow it's boundaries since the div it's in has
>  'overflow:hidden' declared.
>
__
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/

Re: [css-d] graphics align right in table cells

[Usamah M. Ali]

Hello bbxrider,

First of all, please don't cross post on this list. Send a single
email for every issue and reply on the same message with any upcoming
fedback or communication.

Now, about your inquiry, it's clear that you're using very incorrect
syntax on your CSS. Actually you're mixing between CSS properties and
HTML attributes, In your CSS there are many instances like this:

.text_cell {
   text-align: left;
   height="87";
   width="250";
   valign="middle";
}

A correct CSS syntax of a styling rule is property: value;

Equal signs are not used anywhere in CSS.

Also, there's no valign property in CSS; that's an HTML attribute. The
equivalent CSS property is vertical-align.

I suggest that you revise the basics of CSS programming, before you go
any further with your CSS development. Check out
http://www.w3schools.com/css/default.asp

Best regards,
Usamah

2008/2/22 bbxrider <[EMAIL PROTECTED]>:
> thanks for the reply, but that didn't work, i'm trying another post with
>  more info
>
>  "Gunlaug Sørtun" <[EMAIL PROTECTED]> wrote in message
>  news:[EMAIL PROTECTED]
>
>
> > bbxrider wrote:
>  >
>  >> http://www.westernstatesglass.com/1navDoc_wsgIndustryLinks/document_view
>  >
>  >> i'm missing something, am trying to get the logo pics to align right
>  >> so they are closer to the text of the link
>  >
>  > You mean like...
>  >
>  > 
>  >
>  > ...?
>  >
>  > Add...
>  >
>  > 
>  > .logo_cell {
>  >text-align:right;
>  >height: 87px;
>  >width: 250px;
>  > }
>  > 
>  >
>  > ...in the head of the page in the iframe.
>  >
>  > regards
>  > Georg
>  > --
>  > http://www.gunlaug.no
>  > __
>  > 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-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-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/

Re: [css-d] IE problems regarding height of DIV

[Usamah M. Ali]

IE is targeted with a 30px top padding in the conditional comments of IE:

Re: [css-d] Background not extending to whole ul? - Prob v simple!

[Usamah M. Ali]

>  #thumbnails ul {list-style:none; padding:0; margin:0; width:216px;
>  height:144px; background-color:#333; border:1px solid #666;
>  position:relative; }
>

The height property value is too small for including all the thumbs.
You have every thumb's height equals 60px so 3 rows of thumbs needs at
least 180px height without margin, padding, borders, etc. I tried
height: 220px and it worked well, but you could alter it as you wish.
Try:

#thumbnails ul {
background-color:#33;
border:1px solid #66;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0pt;
height:220px;
padding:0pt;
position:relative;
width:216px;
}
__
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/

Re: [css-d] Markup for image URL in CSS rule

[Usamah M. Ali]

Once you grasped the basic concept of using background images, then
it's a matter of trial & error until you get the perfect look you're
after. Try changing the background position to left top or left bottom
or applying padding the  links in the CSS or a combination of all
these and others.

Good luck,
Usamah

On Fri, Feb 22, 2008 at 12:54 AM, Big Moxy <[EMAIL PROTECTED]> wrote:
> Great! Thank you! Is it possible to get the text positioned so that it
>  aligns with the bottom of the image?
>
__
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/

Re: [css-d] Markup for image URL in CSS rule

[Usamah M. Ali]

On Fri, Feb 22, 2008 at 12:34 AM, Big Moxy <[EMAIL PROTECTED]> wrote:
> Thank you for the correction, Usamah! I also added height:37px to ensure the
>  full image was being displayed. What do I do about the extra image behind
>  the image "title"? It's not even full-size?
>
>  Regards,
>  Tim
>

You have this in the CSS:

a {
color: #3F2C57;
background: inherit;
text-decoration: none;
}

a:hover {
color: #808080;
background: inherit;
}

Remove the two background: inherit instances.

Usamah
__
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/

Re: [css-d] Markup for image URL in CSS rule

[Usamah M. Ali]

On Fri, Feb 22, 2008 at 12:06 AM, Big Moxy <[EMAIL PROTECTED]> wrote:
> Great catch Cory! I don't think background image is the right solution
>  though. Look at it now. www.zanalysts.net
>
>  Tim
>
>
>
I'm very sorry, but the background positioning should be left center
NOT center center.

When you do this, the image is perfectly put on the left and the link
next to it, but you would see duplicated image because you're setting
the anchor to inherit the background properties of its parent, which
is the div contacting the background image.

I altered these in Firebugand it looks just perfect.

Usamah
__
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/

Re: [css-d] Markup for image URL in CSS rule

[Usamah M. Ali]

On Thu, Feb 21, 2008 at 11:54 PM, Cory Shubert
<[EMAIL PROTECTED]> wrote:
>
>  >h4 {
>  >background: transparent url("/images/windows-logo.gif") no-repeat
>  center center;
>  >padding-left: 42px;
>   >}
>
>  Question on markup code in CSS.  I have seen markup as above, where the
>  image tag inside parenthesis has quotation marks and sometimes without.
>
>  Which is it, q.marks or not?
>
>  Thanks,
>
>  Cory

Firstly, I would like to note that CSS in NOT a markup language; it's
a styling language. If you have some images for presentatioal purposes
then they should be in the CSS. Images that are part of the content
are the ones that should be marked up. An example, an image of Hillary
Clinton on a newpaper website is content, and therefore should be
marked up with HTML's element img:



An image of say, "Email this article" link is presentational as it's
not part of the content, and therefore should go in the CSS:

Send Article

CSS could be:

a {

background: url(email.gif) no-repeat top left;
padding-left: 12px;
}

Using double or single quotations or not using them at all doesn't
make a difference but for IE5 for Mac which doesn't support single
quotes.

Usamah
__
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/

Re: [css-d] alignment problem on Firefox

[Usamah M. Ali]

On Thu, Feb 21, 2008 at 11:51 PM, Big Moxy <[EMAIL PROTECTED]> wrote:
> I'm sorry but that didn't work. The image is not displaying now.
>
>

Try using the absolute path to the image and don't forget the left padding.

h4 {
background: transparent url(http://absolute/path/to/the/image)
no-repeat center center;
left-padding: 42px;
}

Usamah
__
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/

Re: [css-d] alignment problem on Firefox

[Usamah M. Ali]

>  Your approach is complicating the matters for you. You should be using
>  background images instead of putting presentational images right into
>  the markup. Instead of having:
>
>alt="windows logo" src="/images/windows-logo.gif"/>
>  ASP.NET 3.5 Hosting
>
>  you could have:
>
>  ASP.NET 3.5 Hosting
>
>  and have the following in the CSS:
>
>  h4 {
>  background: transparent url("/images/windows-logo.gif") no-repeat center 
> center;
>  }
>
>  This is the minimal code needed, but of course you could play on the
>  CSS as much as you wish to get the needed effect with precise detail
>  level.
>
>  Usamah
>

I'm sorry; I forgot to declare the left padding on the level 4 heading:

h4 {
background: transparent url("/images/windows-logo.gif") no-repeat center center;
padding-left: 42px;
 }

Just ditch the floating altogether. It's not needed.

Usamah
__
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/

Re: [css-d] alignment problem on Firefox

[Usamah M. Ali]

>  Can someone please help me with the alignment of the list items on the right
>  hand side of the page? I set padding-left: 42px to the list items and as you
>  can see the graphic extends below the title and therefore the padding on the
>  list item pushes the first couple to the left and out of alignment.
>
>
>
Your approach is complicating the matters for you. You should be using
background images instead of putting presentational images right into
the markup. Instead of having:


ASP.NET 3.5 Hosting

you could have:

ASP.NET 3.5 Hosting

and have the following in the CSS:

h4 {
background: transparent url("/images/windows-logo.gif") no-repeat center center;
}

This is the minimal code needed, but of course you could play on the
CSS as much as you wish to get the needed effet with precise detail
level.

Usamah
__
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/

Re: [css-d] Float list items

[Usamah M. Ali]

>
>  My normal approach would be something like...
>
>  
>  item 1   price1
>  item 2   price2
>  item 3   price3
>  
>
>  li {text-align: right;}
>  li span {float: left;}
>
>  ...as CSS can only target elements, not the content within them ... at
>  least not yet.
>

My normal approach would be using a table. ;~)

Usamah
__
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/

Re: [css-d] divs not centering in Firefox

[Usamah M. Ali]

On Thu, Feb 21, 2008 at 8:17 PM, Cory Shubert <[EMAIL PROTECTED]> wrote:
> Hi list memebers, maybe someone can help me figure out why this won't
>  work in Firefox but does in IE6.
>
>  This is splash page that is called via Java in a booking process..
>
>  CSS:
>
>  

Re: [css-d] Making an RTL version of Deco (Drupal Theme)

[Usamah M. Ali]

Hello Farid,

Switching an LTR layout to RTL should be straightforward. Vision-wise,
it's typically and literally as mirroring the layout. Every single
left-aligned element should be right-aligned and vice versa. Here's a
list of important things to consider:

1) The most important step is switching the direction in the markup.
This is basically done by adding the dir="rtl" attribute to the 
element. This is a W3C recommendation that the directionality of web
page should be declared in the markup.

2) Since you're using a CSS-based layout, then you should be changing
the directionality aspects of the presentation. Every left-floated
element should be right-floated and vice versa. It's VERY important
here to pay careful attention to adjust the padding and margin values
to match with the direction. If you've an image that is left-floated
and had a right margin, then it should be right-floated and has a left
margin.

3) Specifically relating to the above point, you should pay attention
that the shorthand form of CSS declarations for padding, margin is on
the form: top, right, bottom, left. I see this causing confusion to
many beginners.

4) Background images should be also inherit the new directionality. If
you something like this:
background: #fff url(image.gif) repeat-x top left;
it now should be:
background: #fff url(image.gif) repeat-x top right;
Unless of course it's strictly intended to be on that exact position.

5) Some time you may want to edit the actual graphics of your layout
to make them compatible with an RTL layout. For example, if you a
faux-column background image that is 160px wide and has a drop-shadow
effect on the right, you should use your graphics editor to
horizontally flip it.

6) Use text-align: right, instead on all text-related declarations.

7) There are some issues and bugs that you'll encounter, but most of
them are trivial IMO. For example, there's no way to support external
links styling in RTL layouts, because almost all browsers fail to
apply correct padding and margin to inline elements. Also, Firefox (to
my surprise :)) has some really annoying and severe bugs in rendering
RTL layouts, one of which affects lists that are set to be displayed
inline, a technique commonly used in constructing CSS-based
navigation. If your site's userbase consists mostly of Firefox users,
you'll have to pay more attention to what techniques you're applying.

That what came to my mind really now. I'll add to it if I got something else.

Good luck,
Usamah



On Feb 19, 2008 1:32 AM, Farid Jamea <[EMAIL PROTECTED]> wrote:
> Deco (http://drupal.org/project/deco) is a drupal theme which I'm
> thinking about using in my next project. However, I'll be using it
> with a "right to left" language; so, basically I'll need everything
> adjusted for this.  I tried to play around with css rules, but
> eventually I gave up :-)
> I was wondering if anybody else has used this theme modified for an
> rtl language? or can give me some general hints to start...
> There is a demonstration page here: http://www.kvw.be/deco/
> This is my humble try so far: http://peyvasteh.com/
> Thanks
> __
> 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-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/