Re: [css-d] Misalignment in IE6
On Wed, Oct 14, 2009 at 5:06 PM, David Laakso
da...@chelseacreekstudio.comwrote:
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: http://www.satzansatz.de/cssd/onhavinglayout.html
~d
Okay, what I basically did is wrapping the following snippet in a
conditional comment and places it below the link 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
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
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):
ul id=navbar
liItem 1/li
liItem 2/li
liItem 3/li
/ul
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?
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 ansarisa...@gmail.com 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] identify all text elements and wrapping in screen width
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
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
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
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:
div class=searchbox
div class=search_top/div
div class=search_content
form action=http://sawa.org.sd/search/; method=get
input type=text name=q value= size=17/
input type=submit value=Search id=submitSearch//p
/form
/div
div class=search_bottom/div
/div
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
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
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] Getting Rid of White Background
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] Image Background On Hover Isn't Working
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 img 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 img
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] Font name
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] Styling DL
On Mon, Feb 25, 2008 at 6:07 PM, Richard Brown [EMAIL PROTECTED] wrote: Hi All On this page: http://www.weada.co.uk/members/uzella-court-antiques/ 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: http://www.weada.co.uk/wp-content/themes/brownsite/style.css -- Kind regards Rich Hi Rich, First of all your markup for definition lists is incorrect. You should declare the dl tag only once. Just as you do with ordered and unordered lists. dl dttitle/dt ddcontent/dd dttitle 2/dt dd content 2/dd dttitle 3/dt ddcontent 3/dd ... ... /dl As about styling the list, your approach is OK, just add a non-breaking space (nbsp;) 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] Float Issue In IE
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] PVII Tab hitting below navigation
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 br class=p7TPclear on the upper div. 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] position:absolute bottom:0 not at the bottom
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/
[css-d] Floated blockquote nested inside li in IE6/IE7 with RTL layout
Hello all, I'm having a problem with floated blockquotes nested inside li elements within a RTL layout. RTL layout in the sense of adding dir=rtl to the html 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 div instead of a blockqoute! 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 li elements of the list are completely spanning off the content area. This is irrelevant to the problem here; it's a floating bug (the div class=biblo) 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] Slide show in a single picture frame
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/
Re: [css-d] Floated blockquote nested inside li in IE6/IE7 with RTL layout
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... li div class=emphasisLeft blockquote p.../p /blockquote /div span.../span /li 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] IE7 auto centering on zoom
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] IE7 auto centering on zoom
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] position:absolute bottom:0 not at the bottom
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] Background URL width and height
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] Background not extending to whole ul? - Prob v simple!
#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] IE problems regarding height of DIV
IE is targeted with a 30px top padding in the conditional comments of IE:
!--[if IE]
style type=text/css
/* place css fixes for all versions of IE in this conditional comment */
.thrColFixHdr #sidebar2, .thrColFixHdr #sidebar1 { padding-top: 30px; }
Remove that top padding and you're fine.
Usamah
On Thu, Feb 21, 2008 at 9:57 AM, Erland Flaten [EMAIL PROTECTED] wrote:
Hello I am in urgent need to fix a strange gap problem.
I dont understand why I get a big white gap on top of the picture. The
gap is between the bottom of the header and on top the image. Looks OK
in Firefox exept that there is a smaller gap between the header in the
textarea. This problem is also on IE.
__
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
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...
http://www.gunlaug.no/tos/alien/bbx/test_08_0220.html
...?
Add...
style type=text/css
.logo_cell {
text-align:right;
height: 87px;
width: 250px;
}
/style
...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] Need Image to Overflow Bounds
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] divs not centering in Firefox
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:
style type=text/css
#splash {
width:100%;
margin:0 auto;
margin-top:60px;
text-align:center;
}
It could be that the latter margin-top declaration is overwriting the
former one.
You should have margin: 60px auto 0 auto;
Firefox is more strict that IE6 in these issues.
__
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
My normal approach would be something like...
ul
lispanitem 1/span price1/li
lispanitem 2/span price2/li
lispanitem 3/span price3/li
/ul
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] alignment problem on Firefox
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:
divimg width=32 height=30 class=image title=Image
alt=windows logo src=/images/windows-logo.gif/
a class=title href=/windows/ASP.NET 3.5 Hosting/a/div
you could have:
h4a class=title href=/windows/ASP.NET 3.5 Hosting/a/h4
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] alignment problem on Firefox
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:
divimg width=32 height=30 class=image title=Image
alt=windows logo src=/images/windows-logo.gif/
a class=title href=/windows/ASP.NET 3.5 Hosting/a/div
you could have:
h4a class=title href=/windows/ASP.NET 3.5 Hosting/a/h4
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
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] Markup for image URL in CSS rule
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:
img src=hillary.jpg alt= title=Hillary Clinton /
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:
a href=article.php?send_articleSend Article/a
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] Markup for image URL in CSS rule
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
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 a 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] Making an RTL version of Deco (Drupal Theme)
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 html 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/
