I have been trying to validate my CSS, and the following lines continually return the error Parse Error [empty string]
.content { width:80%; text-align:center; margin-left:auto; margin-right:auto;
max-width:400px; border-width:4px; border-style:solid; border-color:#339900;
padding:5px; margin-top:10px; margin-bottom:10px; border-radius:20px;
background-color:#ccffcc; }
#side_link { position:fixed; bottom:5px; right:-4px;
background-image:url('img/FruitfulLogo.png'); height:29px; width:22px;
border-style:solid; border-width:2px; border-bottom-left-radius:5px;
border-top-left-radius:5px; border-color:#F90; background-color:#FF9; }
#side_link:hover { background-image:url('img/FruitfulLogo_over.png'); }
Am I missing something really obvious or really obscure?
Apparently, the border-radius throwing a Parse Error [empty string] is a bug in the W3C CSS validator.
See http://www.w3.org/Bugs/Public/show_bug.cgi?id=11975 .
You're using css3 elements while this is still just a draft. The w3 validators aren't yet equiped to deal with a lot of the new properties and attributes and they'll spew out errors on perfectly valid css in some cases. This is one of them.
Just give them a year-or more- to patch things up. Until then, use your own judgement, css is relatively simple syntax wise.
As #BoltClock commented as well, this appears to be a validator bug.
Take out your border-radius items in .content and #side_link and it validates fine. As far as I can see, they are correct.
.content {
margin:10px auto;
padding:5px;
border:4px solid #390;
border-radius:20px;
width:80%;
max-width:400px;
background-color:#cfc;
text-align:center;
}
#side_link {
position:fixed;
bottom:5px;
right:-4px;
width:22px;
height:29px;
border:2px solid #F90;
border-radius:5px 0 5px 0;
background-color:#FF9;
background-image:url('img/FruitfulLogo.png');
}
#side_link:hover {
background-image:url('img/FruitfulLogo_over.png');
}
I'm going to concur that the validator is going nuts, because when I input the above, it shows the errors. But then you have to note that below the errors it outputs all of the above and says "all this stuff is valid."
I put it throught the W3C validator and this is what I got back.
3: .content - Property border-radius doesn't exist in CSS level 2.1 but exists in : 20px 20px
7: #side_link - Property border-bottom-left-radius doesn't exist in CSS level 2.1 but exists in : 5px 5px
8: #side_link - Property border-top-left-radius doesn't exist in CSS level 2.1 but exists in : 5px 5px
When checking the CSS3 version it's the same line numbers.
Related
so im having this issue with my CSS, im trying to write my CSS code the normal way like this, but i want it vertical
.topic_row {
height:60px;
}table
.reputation {
right:0px;
position:absolute;
.topic_row {
height:60px;
}table
.reputation {
right:0px;
position:absolute;
.rep_bar {
background:#FFF;
font-size:1.1em !important;
-moz-border-radius-topleft:5px;border-radius-topleft:5px;
-webkit-border-top-left-radius:5px;
padding:0px;
right:10px;
bottom:45px;
position:absolute;
width:150px
.rep_bar
ul {
margin-top:8px;
float:left
.rep_bar ul
li {
float:left;
margin:0
2px
p.rep_highlight {
float:left;
display:inline-block;
margin:5px
10px 10px 10px;
background:#D5DEE5;
color:#1d3652;
padding:5px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-border-radius:5px;
font-size:0.8em;
font-weight:bold;
text-align:center
p.rep_highlight
img{
margin-bottom:4px
.reputation{
float:none;
text-align:center;
/*margin-left:10px;*/
margin-right:10px
.reputation.negative, .members
li.negative{
background:#b82929;
color:#fff
.reputation.zero{
background:#CCC;
color:#6e6e6e
But i want it vertical since my style for the forums only accepts vertical for some reason, so i need it all the code formated in a straight line like this:
.pun .fakeform{PADDING:20px 20px 15px 20px}
And i do not know how to format it like this, so if someone has the time, and effort to format all of the code above to a straight vertical line i'd appriciate it!
Thank you.
Something like stylelint with the --fix option should solve your issue. See https://stylelint.io/user-guide/rules for documentation on all stylelint rules.
Here, the following stylelint rules would be most relevant:
block-opening-brace-newline-before: never-multi-line
block-opening-brace-newline-after: never-multi-line
block-closing-brace-newline-before: never-multi-line
block-closing-brace-newline-after: never-multi-line
Relevant stylelint documentation pages:
Stylelint configuration guide
Stylelint CLI / Stylelint editor plugins
Stylelint CLI's autofix switch (--fix)
I'm trying to figure out why images seem to jumble around in IE versus Chrome.
Alas, its an ancient public school CMS (we're talking early 00's), and I'm certainly no programmer, rather just a hobbyist trying to juggle the CSS and HTML.
I hope I can get a few pointers. I assume Its about floating the right DIV containers, to get it to render right. The entire thing litteralky exploded when I went to create the overlay text.
CSS can be seen below. Page source can be viewed outside of the CMS frame-template here.
Cheers, Trin
#persongalleri
{
margin-left:5px;
overflow:hidden;
}
img.person /* til personalesiden */
{
width:80px;
height:auto;
border:1px solid #000;
}
div.personwrap
{
float:left;
position:relative;
margin:2px;
}
div.undertekstkasse
{
position:absolute;
bottom:1px;
left:0px;
width:100%;
background-color:black;
font-family: 'Verdana, Arial, Helvetica';
font-size:14px;
font-weight:bold;
color:white;
opacity:0.6;
filter:alpha(opacity=60);
}
p.undertekst
{
padding:6px;
margin:0px;
text-align:center;
}
Its very difficult to spot but all the photos are slightly different heights, so you are getting this strange looking behavour when you float them. If you put a fixed height on the .personwrap then this will solve your layout issues.
div.personwrap {
height: 105px;
margin: 2px;
position: relative;
float:left;
}
You could also remove the float, and just add display: inline-block
I have a strange CSS issue, I'm not quite sure how to fix this.
When I press the "Sign In" button on my website and I start to type in the Username, the header goes up. I really don't know what is causing this.
Any ideas?
Thanks!
Here is some code:
The form:
.tooltip-wrap {
position: fixed;
display:none;
}
.tooltip-wrap .corner {
position:relative;
z-index:100;
margin-left:-5px;
width:0;
height:0;
border:5px solid transparent;
border-bottom-color:#fff;
}
.tooltip-text {
float:left;
margin-left:-50%;
padding:1em 15px;
background:#fff;
color:#333;
}
This is the part that goes up:
.header-navigation.back {
z-index:-1;
position:absolute;
margin-left:0;
margin-top:-6px;
border:none;
display:block; height:137px; width:1171px; padding:0px; outline:none; text-indent:-9999px;
background-image:url('xhttp://frenchegg.com/images/backmenu.png');
}
You need to click on Username and start typing something.
Very strange bug, and I can't explain what's going on. But it is related to your div.header-navigation.back. If you remove that, the behaviour disappears.
As far as I can tell, you are only using that element for your background image, so it's not a good idea to include it in the markup anyway. If you amend your .site-header you can achieve the same effect without the extra div:
.site-header {
background: #0894ff url('http://frenchegg.com/images/backmenu.png') 50% 20px no-repeat;
background: url('http://frenchegg.com/images/backmenu.png') 50% 20px no-repeat,
linear-gradient(to bottom, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0) 100%);
}
I couldn't quite work out what you're trying to achieve with your gradient, but the idea would be to provide multiple backgrounds for those browsers that support them, with a fallback to a solid colour.
Change the line-height of the input box - fixes the issue.
HTML to change:
<input type="text" id="text-user" name="user_login" value="Username" style="
line-height: 15px;
">
CSS:
#text-user{
line-height: 15px;
}
The reason is because the line-height of the input was much smaller without text, than it was with text. So when you typed something into the box, the line-height expanded which is what caused the header to be pushed up.
Edit
I see you're having no luck with the code, so do these two more things and you're sure to be up and running - it's working here for me.
Remove the following from .site-header:
padding: 2em 0;
Next, change the row style to look like this:
.row{
margin: 0 auto;
padding: 0 30px;
width: 1171px;
height: 137px;
}
I think the solution is along these lines:
Set .header-wrap to have overflow:visible (well, remove overflow hidden!) - this will mean you have to slice those character graphics to have flat bottoms.
Then, change .tooltip-wrap to be position:absolute;z-index:2; (not fixed).
I also noticed that you have the placeholder polyfill in your head. This means you could use that attribute on the input rather than value; like so:
<input type="text" name="user_login" placeholder="Username">
Very cute site!
You could give it a z-index instead of a fixed position, and give it an absolute position.
I'd like to style one span element generated by Rich faces:
<td class="rf-tb-itm" id="j_idt7:logoutLink_itm">
<span class="topmenulink" id="j_idt7:logoutLink">Logout</span>
</td>
I can't match for the whole id because the part before the semicolon can differ. For testing I wrote
span[id="j_idt7:logoutLink"] {
padding:2pt 10pt !important;
border:1px solid transparent;
color:grey;
}
and it matches.
This matches too:
td > span {
padding:2pt 10pt !important;
border:1px solid transparent;
color:grey;
}
But why does not match this (in latest Firefox and Opera)
span[id*="logoutLink"] {
padding:2pt 10pt !important;
border:1px solid transparent;
color:grey;
}
or this?
span[id$="logoutLink"] {
padding:2pt 10pt !important;
border:1px solid transparent;
color:grey;
}
Any ideas?
I know what's going on. It's an RichFaces problem. The CSS EL Parser doesn't recognize CSS3. See the JBoss output:
08:54:18,235 WARNING [org.richfaces.log.Resource] (http--0.0.0.0-8080-6) Problem parsing 'css/default.ecss' resource: Error in attribute selector. Invalid token "*". Was expecting one of: <S>, "=", "]", "~=", "|=".
08:54:18,236 WARNING [org.richfaces.log.Resource] (http--0.0.0.0-8080-6) Problem parsing 'css/default.ecss' resource: Ignoring the whole rule.
It works when I use a "real" CSS file and not this EL CSS.
<container>
<element1>
</element1>
<element2>
</element2>
</container>
#container {
position:absolute;
right:33px;
top:15px;
}
#element1 {
position:relative;
float:right;
height:31px;
background:url(../main_bg.gif) repeat-x top left;
border: 1px solid #6a6a6a;
clear:both;
}
#element2 {
position:relative;
float:left;
clear:both;
background-color:#f8f0ce;
border-left:1px solid #6a6a6a;
border-right:1px solid #6a6a6a;
border-bottom:1px solid #6a6a6a;
}
The reason your container seems to be displayed as wide as it content in other browser is because it is out of the "body" and displayed in "nothing" (ence, as wide as its content). IE6/7 seems to treat this differently.
I do not have your issue in IE8, so I suppose you want this for IE6 or 7. It also seems you want 2 box, one under each other (clear).
From the code and the style you supplied, it seems we could simply get rid of the floating and put a text-align:right.
Would this solution work for you?
It does not work in IE6 however.
This one does however, but require a <br /> (and display:inline. Thanks #kei for the suggestion.)