I have a HTML file with inline CSS:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Page 1</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<DIV style="position:relative;width:612;height:792;">
<STYLE type="text/css">
.ft0{font-size:108px;font-family:Helvetica;color:#000000;}
.ft1{font-size:16px;font-family:Times;color:#000000; }
</STYLE>
</HEAD>
<BODY bgcolor="#A0A0A0" vlink="blue" link="blue">
<DIV style="position:absolute;top:457;left:225"><nobr><span class="ft0">Sample</span> </nobr></DIV>
<DIV style="position:absolute;top:62;left:241"><nobr><span class="ft1"><b>HTML</b></span></nobr></DIV>
</BODY>
</HTML>
I am trying to parse the inline CSS using Ruby's css_parser library. Note that the inline CSS has 2 classes .ft0 and .ft1.
My code is:
require 'css_parser'
parser = CssParser::Parser.new
parser.load_file!('filename.html')
puts parser.to_s
Which outputs:
<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">\n<HTML>\n<HEAD> \n<TITLE>Page 1</TITLE>\n<META http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">\n<DIV style=\"position:relative;width:612;height:792;\">\n<STYLE type=\"text/css\">\n.ft0 {\nfont-size: 108px; font-family: Helvetica; color: #000000;\n}\n.ft1 {\nfont-size: 16px; font-family: Times; color: #000000;\n}\n"
when I do:
parser.find_by_selector(".ft0")
it returns an empty array.
It appears as though css_parser is seeing the entire string
<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">\n<HTML>\n<HEAD>\n<TITLE>Page 1</TITLE>\n<META http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">\n<DIV style=\"position:relative;width:612;height:792;\">\n<STYLE type=\"text/css\">\n.ft0
as the selector instead of just the class .ft0
Is there a way that I can fix this, so that it just finds the class .ft0?
CssParser doesn't find the target in HTML, it only wants a style-sheet definition. You need to parse the CSS from the HTML then pass it to CssParser.
This might get you started:
require 'nokogiri'
require 'css_parser'
html = '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Page 1</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<DIV style="position:relative;width:612;height:792;">
<STYLE type="text/css">
.ft0{font-size:108px;font-family:Helvetica;color:#000000;}
.ft1{font-size:16px;font-family:Times;color:#000000; }
</STYLE>
</HEAD>
<BODY bgcolor="#A0A0A0" vlink="blue" link="blue">
<DIV style="position:absolute;top:457;left:225"><nobr><span class="ft0">Sample</span> </nobr></DIV>
<DIV style="position:absolute;top:62;left:241"><nobr><span class="ft1"><b>HTML</b></span></nobr></DIV>
</BODY>
</HTML>
'
doc = Nokogiri::HTML(html)
stylesheet = doc.at('style').content
parser = CssParser::Parser.new
parser.add_block!(stylesheet)
puts parser.find_by_selector(".ft0")
Which outputs:
font-size: 108px; font-family: Helvetica; color: #000000;
Related
I have the css code below but it doesn't apply the css to html in general only to h1 and h3 i have used the same type of looking code before but it worked
html {
text-align:center;
border:25px dotted #ff5c33;
background-color:#00b300;
color:#ff5c33;
font-family:Arial;
}
h1 {
background-color:#ff5c33;
color:#00b300;
}
h2 {
background-color:#ff5c33;
color:#00b300;
}
html is as follows I could not find a error in it.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Official Volleball</title>
<link href="VolleyB/CssforVB.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Official volleyball team score</h1>
<h3>Wins:1 Losses:0</h3>
<h2>Number of spikes by shawn</h2>
<h4>Spikes:3</h4>
</body>
</html>
You're applying styles to html that you appear to be wanting applied to body.
Change html to body in your CSS so that the styles apply to the correct element.
body { /* Change html to body */
text-align:center;
border:25px dotted #ff5c33;
background-color:#00b300;
color:#ff5c33;
font-family:Arial;
}
h1 {
background-color:#ff5c33;
color:#00b300;
}
h2 {
background-color:#ff5c33;
color:#00b300;
}
I'm using HTML_EXTRA_STYLESHEET option to override default css rules. I can easily override some rules like span.mlabel or .SelectItem but .SREntry can't be overriden for some reason. In Firebug it's like my new rule never existed.
Css rules that I'm using:
.SREntry {
font-size: 10pt;
}
span.mlabel {
font-size: 11pt;
}
.SelectItem {
font-size: 10pt;
}
.SREntry is responsible for formatting search box results. It's defined in search.css and it seems that no rule from this file can be overriden.
Why is that I can override rules defined in doxygen.css but not in search.css?
[EDIT] Link to generated documentation. It uses a custom css file Custom.css with described above rules.
If you look closer to html that generated by search.js at runtime you will find out that
<iframe id="MSearchResults"> block contains another section of html document with
its own <head> section.
That is why you can't override this style.
<!--
HTML header for doxygen 1.8.7
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="cursor: auto ! important;">
<head>
... removed some html here ...
<script src="search/search.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="search/search.css"></link>
<link type="text/css" rel="stylesheet" href="custom.css"></link>
</head>
<body>
<div id="top"></div>
<div id="MSearchSelectWindow" onkeydown="return searchBox.OnSearchSelectKey(event)" onmouseout="return searchBox.OnSearchSelectHide()" onmouseover="return searchBox.OnSearchSelectShow()"></div>
<!--
iframe showing the search results (closed by defa…
-->
<div id="MSearchResultsWindow" style="display: block; top: 182px; left: 236px;">
<iframe id="MSearchResults" frameborder="0" name="MSearchResults" src="javascript:void(0)">
#document
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<meta content="text/xhtml;charset=UTF-8" http-equiv="Content-Type"></meta>
<meta content="Doxygen 1.8.7" name="generator"></meta>
<link href="search.css" type="text/css" rel="stylesheet"></link>
<script src="all_1.js" type="text/javascript"></script>
<script src="search.js" type="text/javascript"></script>
</head>
<body class="SRPage">
... and so on...
You can fix this with either modifying search.css somehow or using
this kind of code in custom js file with MutationObserver or setInterval based solution. Notice the ../ in path, you need to go one level up to find correct css.
var cssLink = "../custom.css"
var searchDocument = document.getElementById("MSearchResults")
.contentWindow.document;
var head = searchDocument.getElementsByTagName("head")[0];
var customStyle = searchDocument.createElement("link");
customStyle.setAttribute("href", cssLink);
customStyle.setAttribute("type", "text/css");
customStyle.setAttribute("rel", "stylesheet");
head.appendChild(customStyle);
I can't set the font-size of a text input from the style sheet. However, it works fine by setting the style attribute.
This works:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text-htmlcharset=utf-; 8" />
<title>Test</title>
<style type="text/css">
#about {
}
</style>
</head>
<body>
<input id="about" type="input" value="anything" style="font-size:21pt;" />
</body>
</html>
This does not work (font-size is ignored):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text-htmlcharset=utf-; 8" />
<title>Test</title>
<style type="text/css">
#about {
font-size:21pt;
}
</style>
</head>
<body>
<input id="about" type="input" value="anything" />
</body>
</html>
What am I missing? Surely, you're not expected to use inline style for all text inputs? That seems pretty tacky and redundant in some cases. Thanks a bunch!
Change <style type="text/javascript"> to <style type="text/css">
You are confusing the browser because it is looking for JavaScript code, but you are feeding it CSS. <script> tags should be used for javascript, and <style> tags for CSS.
Your style block has a type of text/javascript. Remove that and it'll work fine.
OK so uh.. it seems like XHTML Transitional doesn't wanna take 0 padding...
Help? :|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Tadah</title>
<style>
body {
width:1440px;
}
* {
margin:0;
padding:0;
}
img {
margin:0;
padding:0;
width:144px;
height:90px;
}
</style>
</head>
<body>
<img src="http://www.gravatar.com/avatar/63ba857eda5875ce057cffd1adf960d3?s=128&d=identicon&r=PG" /><br />
<img src="http://www.gravatar.com/avatar/63ba857eda5875ce057cffd1adf960d3?s=128&d=identicon&r=PG" />
</body>
</html>
The space between the images isn't coming from padding, it is coming from line-height. If you set line-height: 0; in the block that contains the images then they'll fit together without any space between them.
Using <br/> to stack images like that probably isn't the best approach anyway. You might have better luck with explicit positioning or sized <div> elements with background images. What will work best really depends on your specific situation though.
It's legal to nest SVG documents inside XHTML documents; but is it legal to nest XHTML documents inside other XHTML documents in the same fashion?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sup</title>
</head>
<body>
<h1>Hello World!</h1>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Nested document</title>
</head>
<body>
<p>This is a sample</p>
</body>
</html>
</body>
</html>
No, the html element is only allowed as root element of the document.
You can, using <iframe> (though not recommended and should be avoided).