CSS Errors/Hacks and W3C Validation - css

I have the following lines (separate) in a stylesheet I am reviewing:
.Ex1.Ex2 {
color:#333;
font-family:Verdana,Arial,sans-serif;
font-size:9pt;
font-weight:bold;
margin:24px 0 5px;
border-bottom:1px solid #333
}
{
background-color:#ffe;
border:1px solid #aaa;
color:#000;
font-family:Verdana,Arial,sans-serif;
font-size:9pt;
height:auto;
margin-top:5px
}
and
.box_title_container {
height:29px;
width:225px;
margin:0 auto;
background:url(../best_images/boxts.gif);
repeat-x
}
When passing through the W3C Validator both return parsing errors. Since the person who created the stylesheet had much more experience than myself regarding CSS, I might believe that those are two types of hacks for crossbrowsing compatibility, but i couldn't google (it 's a verb now right?) anything related to this.
As for the first line it has two enclosing set of properties and the second has an isolated repeat-x value (and this "error" is repeated across the following 5 or 6 lines).
Could someone tell me if those were made with some sort of purpose or are plain errors?
Thanks in advance!

In your first CSS block, you must indicate an ID, a class or an HTML element for the second {}
.Ex1.Ex2 {
color:#333;
font-family:Verdana,Arial,sans-serif;
font-size:9pt;
font-weight:bold;
margin:24px 0 5px;
border-bottom:1px solid #333 /* missing ;*/
}
#IDneeded .CLASSneeed {
background-color:#ffe;
border:1px solid #aaa;
color:#000;
font-family:Verdana,Arial,sans-serif;
font-size:9pt;
height:auto;
margin-top:5px /* missing ;*/
}
For the 2nd one, "repeat-x" is a value for "background" not a CSS property, just move the ;
.box_title_container {
height:29px;
width:225px;
margin:0 auto;
background:url(../best_images/boxts.gif) repeat-x;
}

Related

Chat with php and ajax with bug design css

I work in a new project, I´m doing the "chat part" a one-to-one chat.. with php and ajax.
I´m new of css stuff.. while I was testing the code, I found a problem:
The text does not go down and continues skipping over design, I put an image for better understanding.
The css code:
.login_form {
border: 1px solid #AAA;
padding:10px;
}
h3 {margin-top:3px;}
.chat_main {
border:1px solid #AAA;
-moz-box-shadow:0 0 10px #ccc;
-webkit-box-shadow: 0 0 10px #ccc;
width:350px;
padding:10px;
background:#f3f3f3;
}
.message {
border:1px solid #AAA;
margin:4px;
padding:5px;
-moz-border-radius:7px;
-webkit-border-radius:7px;
background:#ffffff;
}
.textf {-moz-box-shadow:0 0 10px #CCCCCC;
-webkit-box-shadow:0 0 10px #CCCCCC;
border:1px solid #CCCCCC;
height:40px;}
.submit {
-moz-border-radius:7px;
-webkit-border-radius:7px;
background:#F3F3F3;
border:1px solid #CCCCCC;
font-size:16px;
font-weight:bold;
height:35px;
margin-left:10px;
padding:5px;
}
.message span {
font-size:10px;
color:#888;
margin-left:10px;
}
.submit_form {
margin:10px 0px;
}
Hope u can help me, I think it´s a simple error design that I don´t know because I´m new in design stuff.
Use exact words instead of spam words like aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa this is not a word that why you are facing this issue.
Even If you want to use like this then you can use overflow-wrap: break-word;
You can use word-break:break-all; property or word-wrap:break-word; property:
For example :
div {
width: 200px;
border: 2px solid #CCC;
word-wrap: break-word;
}
<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

Style for all inputs except for ones with a specific class

I have a CSS style defined for all inputs with type text on the page. I'm using the Spectrum Color Chooser on part of my page, and this is implemented onto the page using
<input type="text" class="basic" />
I'm trying to override the "global" styling that I've applied to all inputs of type text using the following, but it's not working:
input[type=text]:not([class=basic]), select {
height:28px;
border:1px solid #c5d1db;
padding-left:5px;
padding-right:5px;
color:#627686;
font-size:13px;
box-shadow:inset 0 4px 5px 0 #ebebeb;
margin:0;
}
Is there a way to override this?
I really fail to see the issue here, isn't this the point of CSS specificity? http://jsfiddle.net/calder12/GBH8b/
input[type=text]{
height:28px;
border:1px solid #c5d1db;
padding-left:5px;
padding-right:5px;
color:#627686;
font-size:13px;
box-shadow:inset 0 4px 5px 0 #ebebeb;
margin:0;
}
input[type=text].basic{
height:18px;
border:1px solid #000;
padding-left:5px;
padding-right:5px;
color:#627686;
font-size:13px;
margin:0;
}
The CSS code posted works, affecting fields not in the class, on supporting browsers (including modern browsers in general, but excluding IE 8 an older).
It does not affect fields that are in the class, obviously. But replacing an existing rule that applies to all input fields by this more restricted rule would make a difference.
Just Declare !important as it will override the main.
input[type=text]:not([class=basic]), select {
height:28px !important;
border:1px solid #c5d1db;
padding-left:5px;
padding-right:5px;
color:#627686;
font-size:13px;
box-shadow:inset 0 4px 5px 0 #ebebeb;
margin:0;
}

CSS: Generated content applied to blockquote only gets applied to first instance?

This CSS creates a nice effect when applied against a single blockquote within the content its attached to.
However, when there is more than one blockquote, everything works except the generated content.
In other words, the quote symbol is only applied to the first instance of the blockquote.
blockquote{
border:1px solid #ccc;
border-width:1px 0;
margin:20px 0;
padding: 2px 10px;
padding-left:50px;
font-style:italic;
font-size:1.2em;
font-weight:bold;
quotes:'\201C';
clear:both;
}
blockquote:before{
content:open-quote;
font-size:5em;
position:absolute;
color:#ccc;
margin:0 0 0 -45px;
font-family:georgia,serif;
font-style:normal;
font-weight:normal
}
Update: Thanks to Alex Morales, the issue is resolved by adding:
blockquote:after{content:close-quote;position:absolute;visibility:hidden;}
Change your first statement to:
blockquote {
border:1px solid #ccc;
border-width:1px 0;
margin:20px 0;
padding: 2px 10px;
padding-left:50px;
font-style:italic;
font-size:1.2em;
font-weight:bold;
quotes:'\201C''\201C';
}
See jsFiddle demo
You need to apply the close-quote for the :after pseudo-element. This should take care of your issue.
Here's some sample code:
blockquote:after{
content:close-quote;
font-weight:bold;
font-size:5em;
position:absolute;
color:#ccc;
margin:0 0 0 45px;
font-family:georgia,serif;
font-style:normal;
font-weight:normal
}

IE7 missing element background image

I have a big problem to make my site comp. with older browsers.
I use label+input text on many parts of my site. Somewhere IE7 did not show the background of the label.
The css of the label for login:
label[for="login"] {
-moz-border-radius:5px 0 0 5px;
-moz-border-radius:5px 0 0 5px;
-webkit-border-radius:5px 0 0 5px;
background:url(moduletable_header_color.png) repeat-x left bottom;
border-bottom:#b3aba4 1px solid;
border-left:#b3aba4 1px solid;
border-radius:5px 0 0 5px;
border-right:#b3aba4 1px solid;
border-top:#b3aba4 1px solid;
color:#fff;
display:block;
float:left;
font-family:'TitilliumText22LMedium';
font-size:12px;
font-weight:bold;
height:25px;
line-height:25px;
margin:0;
padding-bottom:0;
padding-left:10px;
padding-right:10px;
padding-top:0;
text-shadow:1px 1px 0 black;
width:140px;
}
I use this same code an other page for an other label:
.formField label {
-moz-border-radius:5px 0 0 5px;
-webkit-border-radius:5px 0 0 5px;
background:url(moduletable_header_color.png) repeat-x left bottom;
border-bottom:#b3aba4 1px solid;
border-left:#b3aba4 1px solid;
border-radius:5px 0 0 5px;
border-right:#b3aba4 1px solid;
border-top:#b3aba4 1px solid;
color:#fff;
display:block;
float:left;
font-family:'TitilliumText22LMedium';
font-size:12px;
font-weight:bold;
height:25px;
line-height:25px;
margin:0;
padding-bottom:0;
padding-left:10px;
padding-right:10px;
padding-top:0;
text-shadow:1px 1px 0 black;
width:140px;
}
And the 2nd is work well. The first work well on other browsers.
What should be wrong? Im pullin out my hair..
I hope, IE7 won't support Attribute selectors (label[for="login"]). When I check with w3c it will work if we put doctype.
Here is the example:-
http://www.w3schools.com/css/tryit.asp?filename=trycss_attselector_value
More details Here
http://www.w3schools.com/css/css_attribute_selectors.asp
Yes, it is not supporting
[for="login"]
To make it work in IE7 and compliant browsers, use this selector:
label[for="login"], label[htmlFor="login"]
For details on this IE7 bug, see: http://reference.sitepoint.com/css/attributeselector#compatibilitysection
IE7 doesn't let you select labels with the 'for' attribute. Other attributes work, but trying to select an element either of these ways won't work:
label[for=test],
label[for] {
/* THIS CODE WILL BE IGNORED */
}
You'll have to select the element another way, such as with an ID or a class instead.
IE7 also has problems using attributes for the selections of other elements. For example, trying to do table th[cellpadding=0] as a selector won't work either.

List Items turned into float:left blocks look strange in IE6

I have a UL that looks like this:
<ul class="popular-pages">
<li>California</li>
<li>Michigan</li>
<li>Missouri</li>
<li>New York</li>
<li>Oregon</li>
<li>Oregon; Washington</li>
<li>Pennsylvania</li>
<li>Texas</li>
<li>Virginia</li>
<li>Washington</li>
</ul>
And CSS that looks like this:
ul.popular-pages li a {
display:block;
float:left;
border-right:1px solid #b0b0b0;
border-bottom:1px solid #8d8d8d;
padding:10px;
background-color:#ebf4e0;
margin:2px; color:#526d3f
}
ul.popular-pages li a:hover {
text-decoration:none;
border-left:1px solid #b0b0b0;
border-top:1px solid #8d8d8d;
border-right:none;
border-bottom:none;
}
So it's working fine in modern browsers, but it's looking like this in IE6. Any suggestions?
The reason for your layout is probably because you have the float on the anchor, move it to the list-item instead.
ul.popular-pages li {
float: left;
}
Since you're not setting any width in your LI's, I suggest skipping the float and set display: inline on your LI's instead, if you want them on a row.
Adjust with padding/margin to get appropriate spacing between them, and line-height to get correct behaviour for any eventual 2nd line.
That way you won't have problem with your UL not taking up space, without the need of a hidden clear-element at the end of the list (which is your other alternative)
What DOCTYPE are you using? DOCTYPE has an impact on how browsers render.
try use this CSS hack for IE6.
*html ul.popular-pages li a {
display:block;
float:left;
border-right:1px solid #b0b0b0;
border-bottom:1px solid #8d8d8d;
padding:10px;
background-color:#ebf4e0;
margin:2px;
color:#526d3f
}
*html ul.popular-pages li a:hover {
text-decoration:none;
border-left:1px solid #b0b0b0;
border-top:1px solid #8d8d8d;
border-right:none;
border-bottom:none;
}
then adjust your CSS definition for IE6
You're floating your elements, so their parent needs to clear/reset the flow via the clearfix 'hack'.

Resources