Re: [css-d] IE8 stylesheet doesn't work even in the head tag
OK, I've made some progress.
Now I just want a text link with a hover state. For some reason, it ignores the
hover state in the Conditional Comment in the head. No amount of clearing the
cache seems to help.
To prevent the logo from hugging the top, I had to repeat the styles for it. Is
that a clue? The slider wrapper is off to the right, no matter what...
(I did a test without a lot of the other code. Same result:
http://www.caramiadesign.com/fredio_last/indexTEST.html)
Happy Holiday
Steve
http://www.caramiadesign.com/fredio_last/
Here's the Conditional stylesheet:
!--[if IE 8]
style type=text/css
#logo h1{
position : absolute;
top : 0; left : 0;
margin : 0px 0 0 0;
padding : 0;
width : 128px;
height : 127px;
background : url('images/logo.png') center no-repeat;
}
#topnav {
margin : 17px 0px 0 520px;
position: relative; z-index: 100;
width: 295px; height: 67px; }
#topnav a{
color : #fff;
text-decoration : none;
font-size : 20px;
}
#topnav a:hover{
font-size:20px;
color:#FF7B0B;
}
.slider-wrapper{ margin:5px auto 0 -40px; text-align: left}
/style
![endif]--
On Dec 24, 2012, at 12:01 AM, Philippe Wittenbergh wrote:
Le 24 déc. 2012 à 09:49, Steve Caramia st...@caramiadesign.com a écrit :
So I'm ready to make the link text only, but that's not working either.
http://www.caramiadesign.com/fredio_last/index.html
….
#topnav a:link{
/*… */
height:100%; /* ---*/
}
#topnav a:hover{
/* … */
height:100%; /* ---*/
}
I haven't looked at that site in IE 8, what follows are just a couple of
ideas.
1. in your IE 8 stylesheet, you specify (twice !) a height:100%; that doesn't
have any effect as the parent element has a height of auto. But who know,
maybe IE 8 treats it as height: 0… Delete.
2. the parent element (header) of your #topnav is positioned relative.
Possibly IE 8 is incorrectly layering #topnav behind the header. Try adding
'position: relative' to #topnav (and eventually: z-index: 1;)
I seem to recall having some issue with that in a much more complex set up.
Philippe
--
Philippe Wittenbergh
http://l-c-n.com
¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!
CARAMIA DESIGN 510.525.4525 caramiadesign.com
¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE8 stylesheet
Hi everybody,
I want to fix the IE8 problems with an ie8-specific stylesheet.
So I put this in the head (just before /head):
!--[if IE8]
link rel=stylesheet type=text/css href=ie8.css /
![endif]--
That file is on the same level as the index. I put this spec to test in ie8.css:
body {
background:none;
width : 100%;
font-family: Georgia, sans-serif;
text-align : center;
}
And no change.
What am I doing wrong?
http://www.caramiadesign.com/fredio_last/
Steve
(sorry -- all the css is minified: Cloudflare)
¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!
CARAMIA DESIGN 510.525.4525 caramiadesign.com
¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE8 stylesheet doesn't work even in the head tag
I've got this in my head tag.
!--[if IE8]
#topnav {margin : 17px 0 0 500px;}
#topnav a:link{
font-size:20px;
padding: 11px 65px 15px 25px;
background : url('images/buttonoff.png') no-repeat;
width: 295px;
height:42px;
display:block
}
#topnav a:hover{
font-size:20px;
padding: 11px 65px 15px 25px;
background : url('/images/buttonon.png') no-repeat;
width: 295px;
height:42px;
display:block
}
body {
background:none\9;
width : 100%;
font-family: Georgia, sans-serif\9;
text-align : center;
}
![endif]--
/head
...and still no changes. I see the updated code when I View Source. What do I
need to do to make this alternative style sheet work?!
(Also this oddness: If I empty the cache, it works ok for a couple of pages
(the orange button appears), but then it disappears, and the layout breaks.)
Thanks for any help!
Steve
¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!
CARAMIA DESIGN 510.525.4525 caramiadesign.com
¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!
__
css-discuss [css-d@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] IE8 stylesheet doesn't work even in the head tag
Yes!
Thank you!
On Dec 23, 2012, at 3:16 PM, Gail Issen wrote:
Change !--[if IE8]
to
!--[if IE 8]
And see whether this helps. (Note the space between IE and 8)
Gail
Gail W. Issen
http://www.xpertwebs.com
http://www.xpertmarks.com
Tel: 713-721-6868
Cell: 713-501-2302
Fax : 713-721-0145
-Original Message-
From: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Steve Caramia
Sent: Sunday, December 23, 2012 4:35 PM
To: CSS Discuss
Subject: [css-d] IE8 stylesheet doesn't work even in the head tag
I've got this in my head tag.
!--[if IE8]
#topnav {margin : 17px 0 0 500px;}
#topnav a:link{
font-size:20px;
padding: 11px 65px 15px 25px;
background : url('images/buttonoff.png') no-repeat;
width: 295px;
height:42px;
display:block
}
#topnav a:hover{
font-size:20px;
padding: 11px 65px 15px 25px;
background : url('/images/buttonon.png') no-repeat;
width: 295px;
height:42px;
display:block
}
body {
background:none\9;
width : 100%;
font-family: Georgia, sans-serif\9;
text-align : center;
}
![endif]--
/head
...and still no changes. I see the updated code when I View Source. What do
I need to do to make this alternative style sheet work?!
(Also this oddness: If I empty the cache, it works ok for a couple of pages
(the orange button appears), but then it disappears, and the layout breaks.)
Thanks for any help!
Steve
¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!
CARAMIA DESIGN 510.525.4525 caramiadesign.com
¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!
__
css-discuss [css-d@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/
¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!
CARAMIA DESIGN 510.525.4525 caramiadesign.com
¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!
__
css-discuss [css-d@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] IE8 stylesheet doesn't work even in the head tag
Yes! Thank you, too! Now we're getting somewhere... On Dec 23, 2012, at 3:28 PM, Barney Carroll wrote: The CSS needs to be contained in a style element. -- Regards, Barney Carroll barney.carr...@gmail.com +44 7429 177278 barneycarroll.com ¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡! CARAMIA DESIGN 510.525.4525 caramiadesign.com ¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡! __ css-discuss [css-d@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] IE8 stylesheet doesn't work even in the head tag
OK, as I said, we're getting somewhere: it's recognizing some of the styles,
but the big orange button is still invisible.
So I'm ready to make the link text only, but that's not working either.
http://www.caramiadesign.com/fredio_last/index.html
!--[if IE 8]
style type=text/css media=screen
#topnav {margin : 17px 0 0 500px;}
#topnav a:link{
font-size:20px;
padding: 11px 65px 15px 25px;
background : url('images/buttonoff.png') no-repeat;
width: 295px;
height:100%;
display:block
}
#topnav a:hover{
font-size:20px;
padding: 11px 65px 15px 25px;
background : url('/images/buttonon.png') no-repeat;
width: 295px;
height:100%;
display:block
}
/style
![endif]--
On Dec 23, 2012, at 3:28 PM, Barney Carroll wrote:
The CSS needs to be contained in a style element.
--
Regards,
Barney Carroll
barney.carr...@gmail.com
+44 7429 177278
barneycarroll.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE8 off to the right
Hi everybody, Is this the double-margin bug? In IE8, my content hugs the right margin. I tried adding display:inline. Any other suggestions? Thank you! Steve http://www.caramiadesign.com/fredio_new/about.htm ¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡! CARAMIA DESIGN 510.525.4525 caramiadesign.com ¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡! __ css-discuss [css-d@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] IE8 off to the right
Hi David, Good to hear from you! First, I only mentioned that because Dreamweaver (CS6) suggested it in the Browser Compatibility tab. No mention of 8. And I don't compress my files. I think that's a Bluehost/Cloudflare thing. The good news is: the site is off my server and on the client's. With the same issues: http://www.fredio.com/ Thanks, Steve On Dec 21, 2012, at 4:50 PM, David Laakso wrote: On Fri, Dec 21, 2012 at 3:54 PM, Steve Caramia st...@caramiadesign.com wrote: Hi everybody, Is this the double-margin bug? In IE8, my content hugs the right margin. I tried adding display:inline. Any other suggestions? Thank you! Steve re: http://www.caramiadesign.com/fredio_new/about.html I think the doubled-margin bug is an IE/6 rather than an iE/8 issue. Suggestions... 1/ Validate the CSS as best you can [see parse errors]. 2/ It will be easier for someone on the list to debug your page if you *do not* compress the CSS. 3/ And post again with corrections... Best, David Laakso -- Chelsea Creek Studio http://ccstudi.com ¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡! CARAMIA DESIGN 510.525.4525 caramiadesign.com ¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡! __ css-discuss [css-d@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] IE8 off to the right
But I only have one media query (on the home page [or it was, I ned to put it
back])
style type=text/css media=screen
@media only screen and (max-width: 1300px) {
.nivoSlider {
position:relative;
width:700px;
height:auto;
overflow: hidden;
margin: 0 auto
}
}
/style
On Dec 21, 2012, at 5:29 PM, Philippe Wittenbergh wrote:
Le 22 déc. 2012 à 05:54, Steve Caramia st...@caramiadesign.com a écrit :
Is this the double-margin bug? In IE8, my content hugs the right margin. I
tried adding display:inline. Any other suggestions?
http://www.fredio.com/
I suspect this may have something to do with it. You have rules that override
that, nested inside media queries, but IE 8 and lower do not understand those
(no support for media queries).
#content {
margin: 0px 10%;
text-align: left;
width: 90%;
}
Philippe
--
Philippe Wittenbergh
http://l-c-n.com
¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!
CARAMIA DESIGN 510.525.4525 caramiadesign.com
¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE8 problems
http://www.fredio.com/
OK, now it's on the server. IE9 looks great, but 8 has that to the right
problem and my image-replacement button has disappeared.
the css for that:
#topnav {margin : 17px 0 0 500px;}
#topnav a:link{
font-size:20px;
padding: 11px 65px 15px 25px;
background : url('../images/buttonoff.png') no-repeat;
text-indent: -px;
width: 295px;
height:42px;
display:block
}
#topnav a:hover{
font-size:20px;
padding: 11px 65px 15px 25px;
background : url('../images/buttonon.png') no-repeat;
text-indent: -px;
width: 295px;
height:42px;
display:block
}
I suspect it doesn't like this (which plays nice with everyone else:
#topnav a, #logo h1{
border:0; font: 0/0 a;
text-shadow: none;
color: transparent;
background-color: transparent;
}
Thanks for any wisdom.
On Dec 21, 2012, at 4:50 PM, David Laakso wrote:
On Fri, Dec 21, 2012 at 3:54 PM, Steve Caramia st...@caramiadesign.com
wrote:
Hi everybody,
Is this the double-margin bug? In IE8, my content hugs the right margin. I
tried adding display:inline. Any other suggestions?
Thank you!
Steve
re: http://www.caramiadesign.com/fredio_new/about.html
I think the doubled-margin bug is an IE/6 rather than an iE/8 issue.
Suggestions...
1/ Validate the CSS as best you can [see parse errors].
2/ It will be easier for someone on the list to debug your page if you
*do not* compress the CSS.
3/ And post again with corrections...
Best,
David Laakso
--
Chelsea Creek Studio
http://ccstudi.com
¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!
CARAMIA DESIGN 510.525.4525 caramiadesign.com
¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!
__
css-discuss [css-d@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] IE8 off to the right
Ah yes. I thought I was so clever to start with a Fluid Grid. As it turns out,
that's not at all important to this client!
I might try deleting that stylesheet and adjusting everything that shifts as a
result. What a pain!
On Dec 21, 2012, at 5:29 PM, Philippe Wittenbergh wrote:
Le 22 déc. 2012 à 05:54, Steve Caramia st...@caramiadesign.com a écrit :
Is this the double-margin bug? In IE8, my content hugs the right margin. I
tried adding display:inline. Any other suggestions?
http://www.fredio.com/
I suspect this may have something to do with it. You have rules that override
that, nested inside media queries, but IE 8 and lower do not understand those
(no support for media queries).
#content {
margin: 0px 10%;
text-align: left;
width: 90%;
}
Philippe
--
Philippe Wittenbergh
http://l-c-n.com
¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!
CARAMIA DESIGN 510.525.4525 caramiadesign.com
¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE8 off to the right
Hi everybody, Is this the double-margin bug? In IE8, my content hugs the right margin. I tried adding display:inline. What else should I do? Thank you! Steve http://www.caramiadesign.com/fredio_new/about.htm ¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡! CARAMIA DESIGN 510.525.4525 caramiadesign.com ¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡! __ css-discuss [css-d@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] Centering Responsive Content
Hi everybody, I started a site last night using a Fluid Grid Layout template in DW CS6. It'll be a very simple site, but for some reason I can't center the content. I don't want to start from scratch because I think the template features will come in handy later on. All I'd like to do is center the body content on the desktop screen. Any ideas? Thanks! Steve http://www.caramiadesign.com/fredio/ ¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡! CARAMIA DESIGN 510.525.4525 caramiadesign.com ¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡! __ css-discuss [css-d@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] Centering the nav: EASY one. FIXED
On Fri, Jul 15, 2011 at 5:34 AM, Steve Caramia [EMAIL-REMOVED] wrote: This one's reeeally easy, but ALWAYS hangs me up. This time I'll tape the answer to my forehead so I don't forget! Why doesn't margin: 0 auto center the nav bar here? text align: center doesn't work either. http://www.theeyecam.com/eyecam2/index.htm the css: http://theeyecam.com/eyecam2/SpryAssets/SpryMenuBarHorizontal.css Since its (default) display is block, it takes up the full width of the containing element. margin: 0 auto would center it, if it was smaller than the nav that contains it. To make it the same size as its contents, either add up the widths of the elements it contains (560px) and set a fixed width, or set its display value to inline-block. In other words, both Micky Hulse and David Laakso were right, but they told you how to fix it. I wanted to answer you question about why it wasn't centered. -- Ghodmode http://www.ghodmode.com/blog Perfect! Thanks for the explanation Ghodmode!! __ css-discuss [css-d@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] Centering the nav: EASY one. ?
This one's reeeally easy, but ALWAYS hangs me up. This time I'll tape the answer to my forehead so I don't forget! Why doesn't margin: 0 auto center the nav bar here? text align: center doesn't work either. http://www.theeyecam.com/eyecam2/index.htm the css: http://theeyecam.com/eyecam2/SpryAssets/SpryMenuBarHorizontal.css Thank you! Steve __ css-discuss [css-d@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] Centering the nav: EASY one. ?
Oops, sorry Jay, it looks centered because I added 220px to the left margin. Any ideas? BTW, I'm glad you were able to see it in IE8. I'm having a Friendly Error problem with IE. But that's another issue... It looks centered in Mozilla Firefox version 5 and IE8. See this picture: http://content.screencast.com/users/JT19560819/folders/Jing/media/65697f4c-dd5d-4fef-b81b-9edfe84681f4/2011-07-17_0137.png I also tested in compatibility mode and it looks the same as in previous two browsers. hth This one's reeeally easy, but ALWAYS hangs me up. This time I'll tape the answer to my forehead so I don't forget! Why doesn't margin: 0 auto center the nav bar here? text align: center doesn't work either. http://www.theeyecam.com/eyecam2/index.htm the css: http://theeyecam.com/eyecam2/SpryAssets/SpryMenuBarHorizontal.css Thank you! Steve __ css-discuss [css-d@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] Centering the nav: EASY one.
This one's reeeally easy, but ALWAYS hangs me up. This time I'll tape the answer to my forehead so I don't forget! Why doesn't margin: 0 auto center the nav bar here? text align: center doesn't work either. http://www.theeyecam.com/eyecam2/index.htm the css: http://theeyecam.com/eyecam2/SpryAssets/SpryMenuBarHorizontal.css Thank you! Steve __ css-discuss [css-d@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 stylesheet with Google fonts doesn't validate?
I'm trying Google fonts for the first time. Looks wonderful in
everything except (mac) Firefox 3.5 and 3.6, really big in IE7, and
(win) FF3.6 and 4, and IE7.
I tried asking FF, but the chat volunteer said if the CSS doesn't
validate (which it doesn't), then fix it. It validates only when I
delete the Google font name ('PT Sans'). I can't find any wisdom about
this anywhere. I've tried validating for both level 2.1 and 3.
Am I missing something?
Steve
http://geekosystemscom.ipage.com/
http://geekosystemscom.ipage.com/geekostyles.css
__
css-discuss [css-d@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 stylesheet with Google fonts doesn't validate?
Not really.. The google code is css3 and the w3c validator checks
for 2.1.
If you change the profile=css21 in the validator url to
profile=css3 it will
validate..
Gerhard
Yes, I tried. But it still comes back with an error.
I tested just this:
body {
font: 65%/1.4 PT Sans Trebuchet MS, Arial, Helvetica, sans-serif;
background: #d9ebd5 url(images/body_bg.jpg) repeat-x;
margin: 0; padding: 0; color: #333;
}
And got this:
W3C CSS Validator results for TextArea (CSS level 3)
Sorry! We found the following errors (1)
URI : TextArea
2 body Value Error : font Too many values or values are not
recognized : 65%/1.4 PT Sans Trebuchet MS,Arial,Helvetica,sans-
serif 65%/1.4 PT Sans Trebuchet MS,Arial,Helvetica,sans-serif
And the Error in Firefox when I try the page says this:
Warning: Expected end of value but found 'Trebuchet MS'. Error in
parsing value for 'font'. Declaration dropped.
Source File:
file:///Volumes/Hi%20MAC%20Too/Users/stevecaramia/Desktop/geekosystems_/geekostyles.css
Line: 3
Line 3, of course, is font: 65%/1.4 PT Sans Trebuchet MS, Arial,
Helvetica, sans-serif;
Again, if I delete PT Sans, if validates just fine.One step
forward. 3/5ths of a step back.
http://geekosystemscom.ipage.com/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS stylesheet with Google fonts doesn't validate?
On May 26, 2011, at 4:52 PM, Tim Climis wrote: On Thursday, May 26, 2011 7:31:25 pm Steve Caramia wrote: Line 3, of course, is font: 65%/1.4 PT Sans Trebuchet MS, Arial, Helvetica, sans-serif; Again, if I delete PT Sans, if validates just fine.One step forward. 3/5ths of a step back. There should be a comma between PT Sans and Trebuchet MS, just like there's one between Trebuchet and Arial, Arial and Helvetica, and Helvetica and sans-serif. ---Tim Holy crap. It's always the punctuation!! Thank you both! FYI, it validated for CSS 2.1, too. http://geekosystemscom.ipage.com/ ¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡! CARAMIA DESIGN 510.525.4525 caramiadesign.com ¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡! __ css-discuss [css-d@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] Footer ul menu problems in HTML5 in IE 7 and 8, 100% fixed!
Yes, indeed. And I'd heard about that fix, but forgot.
Thanks so much for the reminder!
http://geekosystemscom.ipage.com/
You missed the second part of my reply, I think. For IE you need to
use javascript to force IE to ‘understand’ those elements, as Remy
Sharp explains in the link above.
This boils down to adding this to your page(s)
script type=text/javascript src=http://html5shim.googlecode.com/svn/trunk/html5.js
/script
Philippe
--
Philippe Wittenbergh
http://l-c-n.com/
You use the HTM5 ‘footer’ element. IE 9 do not understand or know
about that element, and treat it as an inline element (Gecko based
browsers based on Gecko 1.9.2 - Fx 3.6.x - or older have the same
problem, btw).
For those Gecko based browsers, the solution is rather easy: add
footer {display: block; }
to you stylesheet.
For IE, you’ll need to use javascript, see
http://remysharp.com/2009/01/07/html5-enabling-script/
Philippe
--
Philippe Wittenbergh
http://l-c-n.com/
Really simple site. Thought I'd try html5, but there's something
wrong with my code at the bottom of my pages, so that the ul menu
goes off, and loses it's formatting completely in IE 7 and 8.
http://geekosystemscom.ipage.com/
http://geekosystemscom.ipage.com/geekostyles.css
Steve
__
css-discuss [css-d@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] Footer ul menu problems in HTML5 in IE 7 and 8
Really simple site. Thought I'd try html5, but there's something wrong with my code at the bottom of my pages, so that the ul menu goes off, and loses it's formatting completely in IE 7 and 8. http://geekosystemscom.ipage.com/ http://geekosystemscom.ipage.com/geekostyles.css Steve __ css-discuss [css-d@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] Footer ul menu problems in HTML5 in IE 7 and 8, 90% fixed
Thank you Philippe!
I saw the problems in the other browsers and assumed that if I fixed
IE, it might fix them too. As it turned out, your solution worked like
a charm except for, wait for it... IE 7 and 8.
What else should I do?
http://geekosystemscom.ipage.com/
http://geekosystemscom.ipage.com/geekostyles.css
You use the HTM5 ‘footer’ element. IE 9 do not understand or know
about that element, and treat it as an inline element (Gecko based
browsers based on Gecko 1.9.2 - Fx 3.6.x - or older have the same
problem, btw).
For those Gecko based browsers, the solution is rather easy: add
footer {display: block; }
to you stylesheet.
For IE, you’ll need to use javascript, see
http://remysharp.com/2009/01/07/html5-enabling-script/
Philippe
--
Philippe Wittenbergh
http://l-c-n.com/
Really simple site. Thought I'd try html5, but there's something
wrong with my code at the bottom of my pages, so that the ul menu
goes off, and loses it's formatting completely in IE 7 and 8.
http://geekosystemscom.ipage.com/
http://geekosystemscom.ipage.com/geekostyles.css
Steve
__
css-discuss [css-d@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] Footer placement in FF
Hi again. This time, IE is NOT the issue. I want the footer to hug the bottom. It worked before, and it's fine in everything except FF! I know the code isn't identical (even though the layouts are very similar), but what gives? I want the pattern to bleed off the bottom. This worked: http://www.duclauddesign.com/ This doesn't: http://www.lankforddesign.com/ Steve PS: Be careful when designing for other designers. They procrastinate JUST LIKE YOU DO! __ css-discuss [css-d@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] Footer placement in FF - FIXED!
Thanks Chetan! It worked! (I think -- still a little funky in Browserlab, but it looks great in FF4 windows in Parallels on my mac.) http://www.lankforddesign.com/ On Apr 28, 2011, at 11:58 PM, Chetan Crasta wrote: On Fri, Apr 29, 2011 at 12:04 PM, Steve Caramia st...@caramiadesign.com wrote: This worked: http://www.duclauddesign.com/ This doesn't: http://www.lankforddesign.com/ Both pages have problems, and not just in Firefox. When the browser window height is around 600px the layout breaks. For a sticky footer (footer that stays at the bottom), try the technique described here: http://www.cssstickyfooter.com/using-sticky-footer-code.html Regards, Chetan Crasta ¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡! CARAMIA DESIGN 510.525.4525 caramiadesign.com ¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡! __ css-discuss [css-d@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] Footer placement in FF - FIXED!
Great! Thanks for cleaning up my code. I'm a little confused, though.
The Sticky Footer page specifically says NOT to add margin values on
the top and bottom.
Using top and bottom margins inside some elements may push your footer
down by that margin height, perhaps in a header or the wrap or main
div's themselves. Instead use padding to create spacing inside the
element. You'll notice this is happening if your page has little
content so that the footer should be on the bottom but you see that
your window scroll bar on the side indicates that it is sitting a bit
below the window bottom. Go find the offending top or bottom margin
and switch it to padding.
But it looks good now!
http://www.lankforddesign.com/
On Apr 29, 2011, at 12:28 PM, Chetan Crasta wrote:
Happy to help. There are some minor problems with the CSS. I suggest
you do this:
#nav {display:block; height:60px; margin: 40px auto 0; width: 725px; }
#content {
background-color: #FFFBEA;
border-color: #DFDFDF #99 #66 #CC;
border-style: solid;
border-width: 1px;
margin: 60px auto 40px;
padding: 0;
width: 700px;
}
position:relative should be rarely used because it can cause problems.
Also, ccing your emails to the list is a good idea because it may help
someone else who has a similar problem.
Regards,
Chetan Crasta
On Sat, Apr 30, 2011 at 12:23 AM, Steve Caramia st...@caramiadesign.com
wrote:
Thanks Chetan! It worked! (I think -- still a little funky in
Browserlab,
but it looks great in FF4 windows in Parallels on my mac.)
http://www.lankforddesign.com/
On Apr 28, 2011, at 11:58 PM, Chetan Crasta wrote:
On Fri, Apr 29, 2011 at 12:04 PM, Steve Caramia st...@caramiadesign.com
wrote:
This worked: http://www.duclauddesign.com/
This doesn't: http://www.lankforddesign.com/
Both pages have problems, and not just in Firefox. When the browser
window height is around 600px the layout breaks.
For a sticky footer (footer that stays at the bottom), try the
technique described here:
http://www.cssstickyfooter.com/using-sticky-footer-code.html
Regards,
Chetan Crasta
¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?
¡!
CARAMIA DESIGN 510.525.4525 caramiadesign.com
¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?
¡!
¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!
CARAMIA DESIGN 510.525.4525 caramiadesign.com
¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!
__
css-discuss [css-d@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] Horizontal drop-down menu placement: FIXED!
As I went to bed the solution came to me.
CSS:
#nav li.off ul#port, #nav li.on ul#port {
position: absolute;
left: -60px;
height: 30px;
}
#nav li.off ul#about, #nav li.on ul#about {
position: absolute;
left: 70px;
height: 30px;
}
xhtml:
li class=offa href=#PORTFOLIO/a
ul id=port
lia href=#IDENTITY/a/li
li class=btwn_below|/li
lia href=#PUBLICATIONS/a/li
li class=btwn_below|/li
lia href=#EVENTS /a/li
li class=btwn_below|/li
lia href=#WEB /a/li
li class=btwn_below|/li
lia href=#DISPLAY /a/li
/ul
/li
li class=offa href=#ABOUT/a
ul id=about
lia href=#APPROACH/a/li
li class=btwn_below|/li
lia href=#BIO/a/li
li class=btwn_below|/li
lia href=#CLIENTS/a/li
/ul
/li
http://www.caramiadesign.com/md/
YAY!
And I thought this link was in my original post. This is the ALA
article I was taking about.
http://www.alistapart.com/articles/hybrid
¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?
Caramia Design • 510.525.4525 • caramiadesign.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] Horizontal drop-down menu placement
Where did you get that picture of the cochlea? Don't know. Got it from the client. __ 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] Horizontal drop-down menu placement: FIXED!
Thanks for pointing this out. I deleted the container class around the navigation. And David, I don't want to move it to the left. Trying to keep to my client's design. (same with the font) http://www.caramiadesign.com/md/ ¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿? Caramia Design • 510.525.4525 • caramiadesign.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/
[css-d] Horizontal drop-down menu placement
For once, NOT about IE: I built this nav system with the help of an article from the good peeps at A List Apart (no javascript!). Since the whole thing is CSS- driven, is there a way to make the submenus flush right to the nav bar instead of flush left? http://www.caramiadesign.com/md/ and the stylesheet: http://www.caramiadesign.com/md/duclaud_stylesheet.css Thanks! ¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿? Caramia Design • 510.525.4525 • caramiadesign.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/
[css-d] Centering a row of images, clearer
I think this is a simple one: Across the bottom of this page I want a row of logos on a background that extends 100%. I was able to do it with a table. Is there a way to do it in CSS? http://www.caramiadesign.com/kemly/ the markup: div id=logos table width=100% border=0 tr td width=autotd width=210a href=http://www.angieslist.com/angieslist/companylist/seattle/electrical.htm?cid=ssabadge img src=IMAGES/logos/ssa_2009_webbadge.png alt=Angie's List Super Service Award Winner width=130 border=0 //abr / a href=http://www.angieslist.com/angieslist/companylist/seattle/electrical.htm?cid=ssabadge style=color: #FFC; font-size:.8em; font-weight: bold; font-style: italic; text-decoration: none;Electrical in Seattle/a/td td align=left width=166 height=93 bgcolor=#4A6060 img src=IMAGES/logos/ABCMemberLogo-WEB.jpg width=126 height=96//td td width=83 height=93 bgcolor=#4A6060 img src=IMAGES/logos/ logo_bbb2.png alt=Safety Alliance width=64 height=94//td td width=98 height=93 bgcolor=#4A6060img src=IMAGES/logos/ logo_mba.png alt=logo width=94 height=82 / /td td width=146 height=93 bgcolor=#4A6060 img src=IMAGES/ logos/lowerlink-4.gif alt=Safety Alliance//td td width=178 height=93 bgcolor=#4A6060 img src=IMAGES/logos/ leadsafeEPA.png alt=logo / td width=auto /tr /table /div Thank you! ¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿? Caramia Design • 510.525.4525 • caramiadesign.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/
[css-d] Centering a row of images
I think this is a simple one: Across the bottom of this page I want a row of logos on a background that extends 100%. I was able to do it with a table. Is there a way to do it in CSS? http://www.caramiadesign.com/kemly/ and here's the css: http://www.caramiadesign.com/kemly/kemly.css Thank you! ¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿? Caramia Design • 510.525.4525 • caramiadesign.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/
[css-d] IE6 and 7 positioning (what else?)
I think this is an easy one, but I can't find the answer. I've built part of this page in a CSS table to practice that method. Worked fine, except in ie 6 and 7 (as promised). I fixed half of the table, but the images are still not inline. What am I missing? http://www.caramiadesign.com/CNL/ Thank you! ¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿? The World of Caramia Design studio 510/525-4525 cell 415/806-6669 café caramiadesign.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/
[css-d] IE6 hover state
Hello everybody, I've fixed the positioning problems that I always have with IE6 and 7 (yay!), but the hover state issue with IE6 remains. I found the htc hack from http://www.kavoir.com/2009/01/css-selectorhover-hack-for-ie6.html but I don't think I implemented it correctly. Any ideas? http://www.caramiadesign.com/oh/# Thank you! ¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿? The World of Caramia Design studio 510/525-4525 cell 415/806-6669 café caramiadesign.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/
[css-d] Missing divs in IE6 and 7
Slow down and use a little thought and introspection and things will go your way. Yes, of course!! A relative container can contain a relative header. I get it. Then the other elements just fall into place. The lesson: do a wireframe even on a super-simple blocky page like this! Then I got rid of the p tags in the sidebar, and used padding for placement. Now the sidebar in IE6 is happy, but 7 is not. urgh. http://www.caramiadesign.com/CNL/ ¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿? The World of Caramia Design studio 510/525-4525 cell 415/806-6669 café caramiadesign.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/
[css-d] Missing divs in IE6 and 7
You'll need to be more specific. The page looks roughly equivalent in IE/7 and IE/8 on this end. Well, I see that I must have fixed whatever was making that happen. My view of IE6 is in IETester and Abobe BrowserLab. Can they be trusted? Sorry David and thank you SO much for your help. I'd be lost without css-d! Steve __ 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] Current state of navbar not working
VERY simple navigation bar styling that works perfectly on another
site, and that worked in IE yesterday (not today), but never in
FIrefox. I'm stumped. Both html and css code have passed validation.
The problem: http://www.caramiadesign.com/CNL/navbar.htm
The html:
titleUntitled Document/title
/head
body
div id=buttonband
ul
li id=currenta href=#HOME/a/li
lia href=#SECOND PAGE/a/li
lia href=#CONTACT US/a/li
/ul
/div
/body
/html
The css:
#buttonband {
font-family: Tahoma, Geneva, sans-serif;
font-weight: normal;
text-transform: capitalize;
background: url(images/buttonband.jpg) no-repeat top left;
margin: 0px;
padding: 0px;
height: 22px;
width: 913px;
top: 188px;
position: absolute;
}
#buttonband ul{
margin:0;
padding:0;
}
#buttonband li {
font-size:.65em;
display:inline;
line-height:1.3em;
}
#buttonband li a {
background-image:url(images/buttons_off.jpg);
padding-top:5px;
margin:0;
margin-right:2px;
width: 110px;
height:17px;
float:left;
text-decoration:none;
text-align:center;
color:#fff;
letter-spacing:.1em;
}
#buttonband ul li a:hover, #buttonband #current{
background-image:url(images/buttons_on.jpg);color:#FF6;
width:110px; height:17px;
}
#buttonband ul li a:active{
background:url(images/buttons_off.jpg) no-repeat top; color:#369;
width:110px; height:17px;
}
¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?
The World of Caramia Design
studio 510/525-4525
cell 415/806-6669
café caramiadesign.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/
[css-d] Current state of navbar not working
what's not working (seems to work for me in both firefox and IE6) The current state should match the hover state. Is that what you're seeing? __ 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] Current state of navbar not working
#buttonband ul li a:hover, #buttonband #current a{== add a
Yes! That works! Of course I thought I'd tried it already...
Thank you!
¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?
The World of Caramia Design
studio 510/525-4525
cell 415/806-6669
café caramiadesign.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/
[css-d] Missing divs in IE6 and 7
OK, now the tough stuff. In IE6, the header and navbar are gone. In IE7 it's off to the right. I've tested a variety of comments (left them all in, I know), fixed the Double Margin, but what else? Obviously again, I'm not sure what bug I looking to fix here -- http://www.caramiadesign.com/CNL/ -- Steve ¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿? The World of Caramia Design studio 510/525-4525 cell 415/806-6669 café caramiadesign.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/
[css-d] IE6 and 7 horizontal list shift
I've corrected and validated the markup (thanks for the tutorial!) and linked a separate ie css file. But I still can't correct the position problem here in ie6 and 7. http://www.caramiadesign.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] IE6 and 7 horizontal list shift
Good!
Make the following changes to your CSS in the head of the document.
#table ul
{
overflow: hidden; - :: add ::
margin: 22px 0 0 88px; -- :: add ::
padding:0; -- :: add ::
padding: 6px 0 0 0px; :: delete::
}
You can delete the conditional comment and the ie 6/7 style sheet.
It will not be necessary to hack IE 6 or IE 7.
Tested on a local file only in:
IE 6/7/8
Chrome
Opera
FF
SeaMonkey
Safari
Camino
Best,
~d
In-credible! Thank you David!
__
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] IE6 float problem, again
Thank you David and Russ! Both solutions worked perfectly, though Russ's made a bit more logical sense to my newbie head. Steve ¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿? The World of Caramia Design studio 510/525-4525 cell 415/806-6669 café caramiadesign.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/
[css-d] IE6 float problem, again
I thought that I should submit an 800px version of the Zen page I
originally built in a 1000px width, but guess what? lteIE6 has a
problem that it DIDN'T have with the 1000px version!.
I've tried all the fixes I could find (adding a margin of 0 to the
left column, a haslayout comment --) and the middle cleared column
still falls below the floated left column before it.
The original: http://www.caramiadesign.com/zen1000
800px width: http://www.caramiadesign.com/zen (OK in IE7 and 8, and
everything else).
Am I crazy to try to debug for IE6 at this point? This nonsense seems
like trying to master the horse and buggy in 1920!
Here are the two rules in question:
#preamble {
background:url(images/enlightenmentBG.jpg) no-repeat top left;
clear:left;
float:left;
width: 210px;
padding: 0;
margin:0;
}
#supportingText {
float:none;
margin:0px 190px 0 235px;
width:375px;
line-height: 2em;
}
Thank you!
Steve
Caramia Design
studio 510/525-4525
caramiadesign.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/
