Re: [css-d] I give up with IE
Ray Pello wrote: Hullo, I have a problem. THis site : www.reginagarde.com looks OKAY to FF but when it comes to ie : when it gets to the product details page (such as : http://www.reginagarde.com/store/show/D231) The layout of the footer got screwed. ... Can anyone help? - Ray Ombilic Hi Ray, Check out a different technique: http://ryanfait.com/sticky-footer/ Position absolute doesn't always work as expected in IE6 :( -Rob __ 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] Cross-browser problem: IE
I have tested my page in all major browsers and it works perfectly in all of them except for IE (I've tested in IE7). Instead of a nice, flat horizontal nav bar, it looks likes steps in IE. See it here: http://lindenamueller.com Is this a hasLayout problem? I'd like to understand why this is happening if possible. :) (I have another question, but I'll wait until this one is solved before asking.) Many thanks, Linden A. Mueller __ 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] Cross-browser problem: IE
Hey Linden, From the brief look, you have the ?xml version=1.0 encoding=UTF-8? at the very top of the code; I recall this points IE in quirks mode. YOu have a CSS validation error too: http://jigsaw.w3.org/css-validator/validator?profile=css2warning=2uri=http%3A%2F%2Flindenamueller.com%2F On Nov 21, 2008, at 12:08 PM, Linden A. Mueller wrote: I have tested my page in all major browsers and it works perfectly in all of them except for IE (I've tested in IE7). Instead of a nice, flat horizontal nav bar, it looks likes steps in IE. See it here: http://lindenamueller.com Is this a hasLayout problem? I'd like to understand why this is happening if possible. :) (I have another question, but I'll wait until this one is solved before asking.) Many thanks, Linden A. Mueller __ 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] Cross-browser problem: IE
And you don't need the bold in the links, you can do that in CSS.
You should do all that in the CSS.
Also you should ot some CSS and apply it to the a tag, not the b tag.
#point li a:hover b, #point li a.current b,
#point2 li a:hover b, #point2 li a.current b {
display:block;
float:left;
cursor:pointer;
/*font-weight:normal;*/
}
#point li a:hover b, #point li a.current b {
background:transparent url(../img/up_arrow.gif) no-repeat center
bottom;
}
#point2 li a:hover b, #point2 li a.current b{
background:transparent url(../img/up_arrow2.gif) no-repeat center
bottom;
}
THis..
#point li, #point2 li {
display:table-cell;
margin:0;
padding:0;
}
You don't usually use table-cell rule like that for menus, use inline
or float.
On Nov 21, 2008, at 12:08 PM, Linden A. Mueller wrote:
I have tested my page in all major browsers and it works perfectly in
all of them except for IE (I've tested in IE7). Instead of a nice,
flat horizontal nav bar, it looks likes steps in IE. See it here:
http://lindenamueller.com
Is this a hasLayout problem? I'd like to understand why this is
happening if possible. :)
(I have another question, but I'll wait until this one is solved
before asking.)
Many thanks,
Linden A. Mueller
__
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] Cross-browser problem: IE
On Fri, Nov 21, 2008 at 18:26, Kevin Evans [EMAIL PROTECTED] wrote:
And you don't need the bold in the links, you can do that in CSS.
You should do all that in the CSS.
Also you should ot some CSS and apply it to the a tag, not the b tag.
I think perhaps because of the type on the above line and the fact
that I don't see what you've changed in the CSS below, I am confused
as to what I need to do to fix the problem.
(I've fixed the CSS error the validator found--none of those #point2
should be in the code, just #point.)
#point li a:hover b, #point li a.current b,
#point2 li a:hover b, #point2 li a.current b {
display:block;
float:left;
cursor:pointer;
/*font-weight:normal;*/
}
#point li a:hover b, #point li a.current b {
background:transparent url(../img/up_arrow.gif) no-repeat center
bottom;
}
#point2 li a:hover b, #point2 li a.current b{
background:transparent url(../img/up_arrow2.gif) no-repeat center
bottom;
}
THis..
#point li, #point2 li {
display:table-cell;
margin:0;
padding:0;
}
You don't usually use table-cell rule like that for menus, use inline or
float.
__
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] Cross-browser problem: IE
The change Kevin is suggesting is to remove the bold (b/b) tags from
your source html (lia class=current
href=index.htmbHome/b/a/li) and comment out (or remove) the
'font-weight:normal;' from your CSS.
---
Alyda
From: Linden A. Mueller [EMAIL PROTECTED]
Date: Fri, 21 Nov 2008 18:40:09 +0100
To: Kevin Evans [EMAIL PROTECTED]
Cc: css-d@lists.css-discuss.org
Subject: Re: [css-d] Cross-browser problem: IE
On Fri, Nov 21, 2008 at 18:26, Kevin Evans [EMAIL PROTECTED] wrote:
And you don't need the bold in the links, you can do that in CSS.
You should do all that in the CSS.
Also you should ot some CSS and apply it to the a tag, not the b tag.
I think perhaps because of the type on the above line and the fact
that I don't see what you've changed in the CSS below, I am confused
as to what I need to do to fix the problem.
(I've fixed the CSS error the validator found--none of those #point2
should be in the code, just #point.)
#point li a:hover b, #point li a.current b,
#point2 li a:hover b, #point2 li a.current b {
display:block;
float:left;
cursor:pointer;
/*font-weight:normal;*/
}
#point li a:hover b, #point li a.current b {
background:transparent url(../img/up_arrow.gif) no-repeat center
bottom;
}
#point2 li a:hover b, #point2 li a.current b{
background:transparent url(../img/up_arrow2.gif) no-repeat center
bottom;
}
THis..
#point li, #point2 li {
display:table-cell;
margin:0;
padding:0;
}
You don't usually use table-cell rule like that for menus, use inline or
float.
__
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] Cross-browser problem: IE
Linden A. Mueller wrote: I have tested my page in all major browsers and it works perfectly in all of them except for IE (I've tested in IE7). Instead of a nice, flat horizontal nav bar, it looks likes steps in IE. See it here: http://lindenamueller.com Is this a hasLayout problem? I'd like to understand why this is happening if possible. :) IE7 and older don't support CSS table, so they're simply lost. This works better... http://www.gunlaug.no/tos/alien/lam/test_08_1121.html ...and I've placed all corrections and additions at the bottom of this stylesheet... http://www.gunlaug.no/tos/alien/lam/test_08_1121_files/style000.css ...and commented them so you get an idea what they're actually doing. BTW: Keep those bs as they are in the nav-list ... easy to spot what they're there for :-) 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-d] Lists, margins, padding in IE
I know that in order to get lists to display the same way in both IE and Firefox, you must explicitly specify both margins and paddings.. However, I've got one list that just isn't behaving. The site I'm working on: http://www.kungfu-silat.com/wp/ (If that doesn't work, use http://www.kungfu-silat.com/ - I hope to get it to the point where I can put the site up live on the root domain today, in which case the /wp/ subdirectory will go away) Specifically, I'm looking at the stats box on the left. In Firefox, it plays nice, with the UL having a 5px margin and 0 padding, and the LI items within having a 3px top-only margin and 0 padding and other margins. In IE7, I'm seeing larger margins and/or padding on both the UL element and the LI elements within, along with a text indent (e.g. one of the lines wrap, and it wraps further left than the initial line). I've tried specifying list-style-position: outside; text-indent: 0; on both the UL and LI definitions, and nothing seems to affect this. I don't have the same problem on other lists on the site (e.g. the Links page is an unordered list of unordered lists and displays as expected in both browsers), but I don't see what I'm doing differently on this list. -- Erik Harrishttp://www.eHarrisHome.com -AIM: KngFuJoe - Yahoo IM: kungfujoe7 - ICQ: 2610172- Chinese-Indonesian Martial Arts Club http://www.kungfu-silat.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/
Re: [css-d] Cross-browser problem: IE
Gunlaug, I sincerely appreciate your detailed answers. Can I ask you a few questions in order to further my understanding of the IE problem? Thanks in advance. Re: the CSS file with the comments: * Could you explain or point me to a site that clearly explains the collapsing margins thing? * IE6/7 don't support CSS table: Thanks. Didn't know that. * trigger 'hasLayout' in IE6/7: I figured it was something to do with hasLayout, but since I don't fully understand that, I wasn't sure what to do to fix this particular problem * What do you mean by cross-browser margins on paragraphs? * Glad to hear that someone saw what the b/b are for! :) Many thanks, Linden __ 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] Cross-browser problem: IE
Linden A. Mueller wrote: * Could you explain or point me to a site that clearly explains the collapsing margins thing? Don't know how clear you'll find the explanation here... http://www.w3.org/TR/CSS21/box.html#collapsing-margins ...but it is the official version. To expand on the solution I used: The problem with margins is that they are invisible - we can only see the effects of having them. If there's no or an illogical effect of declared or otherwise known vertical margins, then the chance is they have escaped their parent - the immediate container - and collapsed into its or another element's vertical margin. IE6/7 contains margins in containers that has a 'hasLayout' trigger applied, while other browsers need a more standardized method. Vertical margins won't escape through paddings greater than zero, so declaring top and bottom paddings on a container will contain vertical margins on its immediate children. * IE6/7 don't support CSS table: Thanks. Didn't know that. Thought so. FYI: IE8 does support CSS table, and will render your page just fine. You can get an idea of CSS support in various IE versions here... http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx * trigger 'hasLayout' in IE6/7: I figured it was something to do with hasLayout, but since I don't fully understand that, I wasn't sure what to do to fix this particular problem Well, a table-cell is a block-element lining up in line - inline, and when we want to mimic that, the 'inline-block' is the closest thing that IE6/7 support. The problem is that IE doesn't really support 'inline-block' properly, so we have to trick it a bit. The 'display: inline-block' acts as a 'hasLayout' trigger, and gives us a block-element with defined area. Any 'hasLayout' trigger will have that effect, but I find 'inline-block' most suited since that's what I wanted as outcome - but IE won't handle the 'inline' part properly. So, in a following and separate rule I declare 'display: inline', and finally IE understands the message: I want a block-element with 'Layout' that lines up in line with the others. (Debugging IE has always been fun... :-) ) * What do you mean by cross-browser margins on paragraphs? IE7 and older have no default top-margin on paragraphs, while all other browsers have one. So relying on defaults gives varying results across browser-land. Better declare our own margins if we want all browsers to render with the same ones. * Glad to hear that someone saw what the b/b are for! :) :-) ... and a b is equivalent to span in most cases, but the former is given default styling for *bold* by most browsers, while the latter has no default styling. 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/
Re: [css-d] Table displays strangely in IE
I guess this is meant by CSS2.1:17.5.3: CSS 2.1 does not define how extra space is distributed when the 'height' property causes the table to be taller than it otherwise would be. That appears to be the explanation. So, obviously, the fix is to set the height of the individual elements so that the overall height of the table is the sum of the heights of its component parts rather than setting the overall height of the table and leaving an element to be filled in as the difference between the overall hight and the total height of other relevant elements. Thanks for the input. I'd say that you nailed it! :) ... doug ... doug __ 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] positioning element correctly for text resizing
I'd like my blockquote to remain at the bottom of the sidebar so I've absolutely positioned it. But when I increase the font size twice there's obviously a problem: http://www.redkitecreative.com/projects/hixon/ Is it possible for me to keep my blockquote where I've placed it yet not have the oversized text flow on top of it? This is a problem I'm having in a few sites so looking forward to an answer... -- Debbie __ 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] positioning element correctly for text resizing
Debbie Campbell wrote: http://www.redkitecreative.com/projects/hixon/ Is it possible for me to keep my blockquote where I've placed it yet not have the oversized text flow on top of it? Like this..? http://www.gunlaug.no/tos/alien/dc/test_08_1122.html http://www.gunlaug.no/tos/alien/dc/test_08_1122_files/styles_h.css Not very practical, but I guess so. 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/
Re: [css-d] Cross-browser problem: IE
Linden A. Mueller wrote: Gunlaug, I sincerely appreciate your detailed answers. Can I ask you a few questions in order to further my understanding of the IE problem? Thanks in advance. Re: the CSS file with the comments: * Could you explain or point me to a site that clearly explains the collapsing margins thing? [..] Many thanks, Linden Hello Linden, here's are a test case showing collapsing margins and the effects of haslayout in IE6 and IE7 with such margins. http://css-class.com/test/bugs/ie/haslayout-margins.htm Please note that IE8b2 has a bug in the second series of test. -- Alan http://css-class.com/ Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo http://www.wearechange.org/ __ 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] IE8b2 min-height preventing margin collapse
Hello all It appears that IE8b2 has a regression from IE8b1 in cases of containers with min-height. IE8b1 showed the bottom margin collapsing through where IE8b2 shows the same bottom margins being contained (liked the effect of haslayout). http://css-class.com/test/css/box/margins/collapsingwithminheight.htm This means that only Firefox shows these test cases correctly according to the wording of the spec. -- Alan http://css-class.com/ Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo http://www.wearechange.org/ __ 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] IE8b2 min-height preventing margin collapse
Glad to see that you are keeping up the good work. I'm working on my new tests on CSS + XML too. bye http://www.css-zibaldone.com http://www.css-zibaldone.com/test/ (English) http://www.css-zibaldone.com/articles/ (English) http://mimicry.css-zibaldone.com/ (Blog) http://www.flickr.com/photos/gabrieleromanato/ (Flickr) __ 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/
