Re: [css-d] The holy grail
That would definitely be the Holy Grail... Stoopid IE. Let each browser express itself differently, as long as each is standards compliant and plays well with others. I find, at least so far, that with the exception of IE6, if I build standardized code that validates, I can get it to display almost exactly the same on every browser. Usually. Theresa On Nov 8, 2009, at 6:55 PM, Colin (Sandy) Pittendrigh wrote: The holy grail is that place we'll all be to (soon, I think) when we can finally stop worrying, thinking about and dealing with IEsicks. -- /* Colin (Sandy) Pittendrigh --oO0 */ __ 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] strange behavior in IE 7
hello i have this page: http://test3.dekkers.net/test.htm in IE 7 when i hover over the table, some or all of the other table cells (accept for the right ones that should) light up in red. i know it's the first rule causing the problem since when i remove it it stops. the question is why does it happen even though the first rule has nothing to do with the page here? this markup is a part of a complete page where i need the rule. any ideas ? thanks Ido __ 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] why does Firefox add padding?
I have tried this page in Chrome, Safari, IE6, and Firefox. In the first three browsers I get the result I expect, but Firefox is doing its own thing. http://www.mcmullincreative.com/crows/ The wide column is divided into identical sections. Each section has an image floated left, and a title and description to the right. The words This is the title are supposed to be aligned with the top of each image. In Firefox, I am seeing an additional 20px of padding on the top, which pushes the title, and everything else, down. It is no longer flush with the top of the image. I can't seem to figure out how to fix it. Any help would be appreciated. Thanks. Russ __ 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] why does Firefox add padding?
r...@catjuggling.com wrote: In Firefox, I am seeing an additional 20px of padding on the top, which pushes the title, and everything else, down. It is no longer flush with the top of the image. I'm having a little success with it when I float the parent A tag as well as the IMG tag (.content-item img). This will require some tweaks to the margin and padding of those two tags but this suggestion may get you moving in the right direction. -Adam Ducker (http://adamducker.com) __ 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] why does Firefox add padding?
-Original Message-
From: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of r...@catjuggling.com
Sent: Monday, November 09, 2009 12:30 PM
To: CSS-D
Subject: [css-d] why does Firefox add padding?
I have tried this page in Chrome, Safari, IE6, and Firefox. In the first
three browsers I get the result I expect, but Firefox is doing its own
thing.
http://www.mcmullincreative.com/crows/
The wide column is divided into identical sections. Each section has an
image floated left, and a title and description to the right. The words
This is the title are supposed to be aligned with the top of each image.
In Firefox, I am seeing an additional 20px of padding on the top, which
pushes the title, and everything else, down. It is no longer flush with the
top of the image. I can't seem to figure out how to fix it. Any help would
be appreciated. Thanks.
--
The extra padding is coming from the rule in line 122
.sidebar-item h3, p, a {
padding: 3px 19px;
}
The link is getting some height that floats over to the text, and is going
above the heading. If you remove the padding from the style, it stops. I
don't know why. I'll leave that to more experienced people on the list.
It's all well illustrated in Firebug.
---Tim
__
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] why does Firefox add padding?
On Mon, Nov 9, 2009 at 12:29 PM, r...@catjuggling.com wrote: I have tried this page in Chrome, Safari, IE6, and Firefox. In the first three browsers I get the result I expect, but Firefox is doing its own thing. http://www.mcmullincreative.com/crows/ The wide column is divided into identical sections. Each section has an image floated left, and a title and description to the right. The words This is the title are supposed to be aligned with the top of each image. In Firefox, I am seeing an additional 20px of padding on the top, which pushes the title, and everything else, down. It is no longer flush with the top of the image. I can't seem to figure out how to fix it. Any help would be appreciated. Thanks. Russ __ 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/ the image inside of your href tag is floated but the link isn't. you have to float the link so it will contain the image. check in firebug and when you mouse over the a tag in the html section of firebug it'll highlight it for you and you'll see the problem. cheers, jeff __ 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] The holy grail
Apparently, Micro$oft IS complying with standards but it is their standards they are complying with NOT international standards. When they brought out IE8, they said they are doing us all a favor by trying to comply with international standards. I guess they are still trying but NOT hard enough! --- On Mon, 11/9/09, Theresa Mesa trixiesirishe...@gmail.com wrote: From: Theresa Mesa trixiesirishe...@gmail.com Subject: Re: [css-d] The holy grail To: Colin (Sandy) Pittendrigh sandy.pittendr...@gmail.com Cc: css-d@lists.css-discuss.org Date: Monday, November 9, 2009, 3:38 AM That would definitely be the Holy Grail... Stoopid IE. Let each browser express itself differently, as long as each is standards compliant and plays well with others. I find, at least so far, that with the exception of IE6, if I build standardized code that validates, I can get it to display almost exactly the same on every browser. Usually. Theresa On Nov 8, 2009, at 6:55 PM, Colin (Sandy) Pittendrigh wrote: The holy grail is that place we'll all be to (soon, I think) when we can finally stop worrying, thinking about and dealing with IEsicks. -- /* Colin (Sandy) Pittendrigh --oO0 */ __ 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] why does Firefox add padding?
In IE7 and FF 3.5.3 I see the pages identical. The right side image is slightly above compared to left side images. On the left side there is a heading Category Title which is pushing the contents down. Is it what you are asking about. --- On Mon, 11/9/09, r...@catjuggling.com r...@catjuggling.com wrote: From: r...@catjuggling.com r...@catjuggling.com Subject: [css-d] why does Firefox add padding? To: CSS-D css-d@lists.css-discuss.org Date: Monday, November 9, 2009, 5:29 PM I have tried this page in Chrome, Safari, IE6, and Firefox. In the first three browsers I get the result I expect, but Firefox is doing its own thing. http://www.mcmullincreative.com/crows/ The wide column is divided into identical sections. Each section has an image floated left, and a title and description to the right. The words This is the title are supposed to be aligned with the top of each image. In Firefox, I am seeing an additional 20px of padding on the top, which pushes the title, and everything else, down. It is no longer flush with the top of the image. I can't seem to figure out how to fix it. Any help would be appreciated. Thanks. Russ __ 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] why does Firefox add padding?
I was making changes to the page, so you probably saw my update, rather than the original problem. I changed it back to what it was. I found a workaround, but I still don't know why only Firefox is adding 20 extra pixels of padding. Here is an image that should help illustrate my point: http://www.mcmullincreative.com/crows/crows.gif It is a combination of 4 screen shots to show how Firefox renders the page in a different way than the three other browsers. In IE7 and FF 3.5.3 I see the pages identical. The right side image is slightly above compared to left side images. On the left side there is a heading Category Title which is pushing the contents down. Is it what you are asking about. __ 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] why does Firefox add padding?
The wide column is divided into identical sections. Each
section has an
image floated left, and a title and description to the right.
The words
This is the title are supposed to be aligned with the top
of each image.
Mockup.css has
.content-item h3 {
padding: 20px 0px 3px 0px;
}
I used firebug to find that rule and disable it and the heading moves up
to the top.
Mark
__
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] why does Firefox add padding?
Thanks for taking the time to sort this out, Adam. I knew it had to be
something I was doing. Working around the problem wasn't going to satisfy
me. I wanted to know the root cause and you helped me see it. Thanks!
Russ
First of all you have an issue with your CSS that may or may not be a
misunderstanding on your part.
.sidebar-item h3, p, a {
padding: 3px 19px 3px 19px;
}
Did you mean to apply that style to just the H3 tags inside .sidebar-item,
and to all P and A tags on the page?
__
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] why does Firefox add padding?
On Nov 10, 2009, at 4:51 AM, Climis, Tim wrote:
The extra padding is coming from the rule in line 122
.sidebar-item h3, p, a {
padding: 3px 19px;
}
The link is getting some height that floats over to the text, and is
going above the heading. If you remove the padding from the style,
it stops. I don't know why. I'll leave that to more experienced
people on the list.
The a is an inline element that gets 3px top- and bottom-padding and
generates a line box. It thus does takes up space. But the actual
content of the link a, an image, is floated and moved to the left in
the containing block.
What Firefox does seems completely correct to me.
Float the a, move the styling from the img to the a and you
should be good to go.
Philippe
---
Philippe Wittenbergh
http://l-c-n.com/
__
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] why does Firefox add padding?
Thanks for the reply, Mark. I can't disable the rule because then it wouldn't look right in Chrome, Safari, and IE6. It was pointed out to me that one of the rules in my sidebar is adding the extra padding. I hadn't thought to look there. I used firebug to find that rule and disable it and the heading moves up to the top. Mark __ 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] CSS Style to a Form and Events Calendar Alignment
Possible OT: Question #1: I've got a Wordpress site running the Enhanced WP-Contact Form and wonder if anyone know how I'd style it so that the text boxes are all aligned? Out of the box after adding the email address the fields seem unstructured, no pun at the plugin, but I'm not strong at adding to the style sheet. So I'm hoping someone would let me know what changes I'd make? Question #2: In this particular theme I notice that the event calendar widget aligns to the bottom left instead of the center like the other plugins. I've checked the style sheets of the pplugin and the theme to no luck so I'm wondering if this could be an issue with the plugin? Any responses appreciated. __ 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/
