[css-d] Question about validation
I have the following;
#footer a:link {
background-color : transparent;
color : #ff;
}
I use the W3C CSS Validation and it gives the warning;
Line : 211 (Level : 1) You have no background-color with your color :
#footer a:link
And yet there is a background-color, it's just transparent. I understand
that it is only a warning, but does the validator not recognize
transparent as a color? I have several of the background-color warnings,
but I am supposing that the css is still valid, right?
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] 2 column layout confusion SOLVED
[snip] ...stuff... [/snip] I removed postion: fixed; from #header and it appears to have fixed the problem in FF. In IE it leaves the rightContent div slightly lower than the leftContent div which can either be fixed with a or clear:both (as suggested by Mark). Thanks all! __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] 2 column layout confusion
[snip] There is no guarantee on any public forum that anyone is going to agree with you, or your client, on anything-- least of all, on matters of taste. You post and you take your chances with the replies. As for myself, I feel that the practical use of CSS /sometimes/ needs to be tempered with plain common sense. [/snip] That is true, but it has nothing to do with the problem at hand. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] 2 column layout confusion
[snip] I think the problem is that you need to delete that gross image and make believe it never happened. There is no need to re-invent the wheel. There are numerous layouts on the Wiki < http://css-discuss.incutio.com/ >that are known to work. Pick one that suits your need(many of the 3 col layouts are easily converted to 2 cols). [/snip] Whoa! Gross image? There is some positive re-enforcement there! (FYI, the image was provided to me, I don't really have a choice on that. And if I had created the image I would be totally insulted.) I have looked at several 2 and 3 column layouts and have made use of those that I know to work in other situations. The new things here are the header and footer. It would appear that the header is the major cause of the problem, but it is designed that way so that additional elements can be layered on top of the image. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] 2 column layout confusion
[snip] Sorry, replied a bit too fast there and didn't see the problem with Firefox! Have you read http://css-discuss.incutio.com/? page=EmulatingFixedPositoning which relates to the problems associated with position:fixed? The margin-top on #content doesn't appear in http:// www.sigmaphinothing.org/css/test.css - is that where you're testing? [/snip] No, I am testing locally. I just put that up so that you guys could take a look. I will read the page that you suggested. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] 2 column layout confusion
Howdy gurus,
I am still working on the same design and now have a problem with 2
column layout. In FF the tops of the left column and right column are
somewhere above the bottom of header. In IE I had to add a
Phone - Quick Users Guide
7940 User's
Guide
7912 User's
Guide
VoIP User's Instructions
#content {
background: transparent;
font-size: 0.8em;
height: auto;
text-align: justify;
padding: 0;
z-index: 0;
}
#content div.leftContent {
float: left;
width:185px;
padding-left: 5px;
}
#content div.rightContent{
margin: 0px 40px 0px 210px;
}
I think that the problem is that I am attempting a reasonably complex
layout without all of the CSS knowledge that I need to do so. Can
someone show me the error of my ways? Thanks! Here is the test URL...
http://www.sigmaphinothing.org/voip.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Why the gap?
[snip] I'm sure you mean Firefox? That's the same one I have, and it works here. [/snip] I got it now, I hadn't upload the CSS to all of the places I was looking. *urp* The only tricky little thing is that the footer is below the scrollbar on FF when the browser is not maxed. It is OK in Opera and IE. Thanks for all of your help! __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Which browser do I design for?
The past several days have brought much frustration and leads me to the question, which browser do I design for? I have been designing web sites for over 10 years (I have a programming background) and I have been using CSS, fairly basically, for the past several years. During most of that time I was designing for web applications where I could control the browser being used. Now I am back into the public domain and checking layouts in what I consider to be the three most popular web browsers (IE, Mozilla, Opera). Of course designs are much more complex in this day and age and the advent of CSS means very good things for designers. I remember when mark-up would not render the same in all browsers (and still does not in some cases). At the risk of igniting a holy war I am curious about what others here do. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Why the gap?
[snip] Which Mozilla is that? It does work in mine (1.7.5 for Linux), as well as in Firebird (pre-FF), *and* in Opera (8.5) on Windows, IE6, IE7, Firefox: [/snip] Mozilla 1.5.0.1 (windows) Opera 8.52 (windows) I don't have a linux box set up with a monitor where I can check it from there. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Why the gap?
[snip] Thanks for the insight. These fixes do not work in Mozilla however, the right iamge is still not visible. I'll keep hacking away.[/snip] Also, these fixes do not work in Opera and there are other problems there. Crud. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Why the gap?
[snip]
To make it appear in other browsers, add a width to #header, and
put a colon in the margin-left 270px for div.right ;-)
The 3px gap is the 3px jog bug, which can be remedied either by
the way you did it, or else like so:
/* \*/
* html #header div.right{
position:relative;
left:-3px;
}
[/snip]
Thanks for the insight. These fixes do not work in Mozilla however, the
right iamge is still not visible. I'll keep hacking away.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Why the gap?
[snip]
Difficult to tell with nothing more than the CSS code.
How about a url, so that we can see the HTML code as well as the
"circumstances"?
[/snip]
http://www.sigmaphinothing.org/template.html
Is the one with the
/* hide from other browsers \*/
* html .left {margin-right: -3px;}
* html .right {margin-left: 0;}
/* end hide */
Which works in IE. http://www.sigmaphinothing.org/template2.html has
that section removed from its CSS and you can see a 3px gap between
images. Look at this in almost any other browser and you do not see the
right image at all.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Why the gap?
[snip] Difficult to tell with nothing more than the CSS code. How about a url, so that we can see the HTML code as well as the "circumstances"? [/snip] I will try to post it in a bit. The HTML is... __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Why the gap?
I have done some searching and head scratching over this one for a
couple of days now. I have the following;
/* header */
#header {
position: fixed;
height: auto;
}
#header div.left {
background-image:
url(../grfx/1280_header_left_anim_out_only.gif);
background-repeat: no-repeat;
float: left;
width: 270px;
height: 165px;
}
#header div.right {
background-image: url(../grfx/1280_header_right.gif);
background-repeat: no-repeat;
height: 165px;
margin-left 270px;
padding: 0;
}
/* hide from other browsers \*/
* html .left {margin-right: -3px;}
* html .right {margin-left: 0;}
/* end hide */
Now, this probably demonstrates my amateur status with CSS, even though
I have been using it for several years now, I am no guru.
Anyhow, without the "hide from other browsers" section in IE there is a
3px gap between the left and the right image. (I have the images as
backgrounds because other items will be placed in front of them). In
Mozilla the right image doesn't show up at all. Am I doing something
terribly wrong where lining up two images is concerned? I would like to
do it without tables and I would like it to look fine in a majority of
browsersis that asking too much?
I feel like such an id10t at this point.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
