I'm having troubles accessing the font-weight property with DOM.
html =
(Ltrim
<html>
<head>
<style type="text/css">
#bar{
border: 1px solid black;
}
div {
font-weight: bold;
}
</style>
</head>
<body><div>foo</div><p id="bar">bar</p></body>
</html>
)
doc := ComObjCreate("HTMLfile")
doc.write(html)
msgbox % doc.styleSheets[0].rules[0].style.border ; "black 1px solid"
msgbox % doc.styleSheets[0].rules[1].style.font-weight ; nothing
msgbox % doc.styleSheets[0].rules[1].style["font-weight"] ; "[object]"
Is this supposed to be this way? Or should the last two message boxes show the value "bold"?
The - Minus sign is used in mathematical operations and cannot be used in a variable name, hence the error you are experiencing.
Try something like Object.style.fontWeight="value" as suggested at http://www.w3schools.com/jsref/prop_style_fontweight.asp
Related
I am coding HTML emails and would like to change the font size on mobile. I have used the code that google used as a text but changed it a bit and added font size. Below is the code that I tested. The color changed but the font size did not. Any hints or ideas where I might find an answer?
Thank you in advance for the help, it is muchly appreciated.
Vince
<html>
<head>
<style>
.colored {
color: blue;
}
#body {
font-size: 14px;
}
#media screen and (max-width:500px) {
.colored {
color:red;
}
p {
font-size: 10px;
}
}
</style>
</head>
<body>
<div id='body'>
<p>Hi Pierce,</p>
<p class='colored'>
This text is red if the window width is
below 500px and blue otherwise.
</p>
<p>Jerry</p>
</div>
</body>
</html>
You may just need to add the !important flag.
p {
font-size: 10px!important;
}
HTML CODE:
(Image is present in the right directory)
<html lang="en-US">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<header>
<h1>Sample Header</h1>
</header>
<main>
<article>
<h2>Sample Header 2</h2>
<p>Sample Paragraph 1</p>
<p>Sample Paragraph 2</p>
</article>
</main>
</body>
CSS CODE:
html{
font-family: 'Open Sans', sans-serif;
background-image: url('images/pattern.png');
background-color: burlywood;
}
body {
width: 100%;
max-width: 1200px;
margin: 0 auto;
background-color: white;
position: relative;
}
header {
height: 150px;
}
h1 {
font-size: 50px;
line-height: 140px;
margin: 0 0 0 32.5px;
}
main {
background: #ccc;
}
article {
padding: 20px;
}
h2 {
margin-top: 0;
}
p {
line-height: 2;
}
background-image does not work in the above form,but when the same css-code is included in style tag,background-image works perfectly fine,why not in external stylesheet?
I think this is a path issue for the background-image: url(...). I can't reproduce at the moment because of lacking information but please be aware of your folder structure. When you use <style> for CSS the starting point for the relative path is your root folder (or where the HTML is located).
In case of the style.css the starting point is the folder styles. So mind that in that case the path might have to change. You can use the Firefox developer tools or Chrome developer tools to modify your path on the fly. This way you can easily find out yourself where the issue with the path originates or if the background-image rule was applied properly on your element.
Updated: added links to developer tools (Mozilla, Google)
I have html content that has to start at the absolute top left corner of the page. However, the HtmlConverter automatically adds a 0.5in gap from the top and left side of the pdf page. How do I override this default margin?
You can set the margins of a page through CSS using #page. The following declaration sets all the page-margins to 0, as well as draws a border around paragraphs for visual reference:
#page{
margin:0pt;
}
p{
border-left: solid 2pt blue;
border-top: solid 1pt blue;
border-bottom: solid 1pt blue;
}
Use the following as input:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>margin example</title>
<link href="margin.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>
<p>This page should have the margins set at 0</p>
</div>
</body>
</html>
And you'll see that the paragraph's border is touching the left side of the page, but not yet the top side. That's because the paragraph has some innate margin as a blockelement as well. Setting this to 0 will do the trick:
p{
border-left: solid 2pt blue;
border-top: solid 1pt blue;
border-bottom: solid 1pt blue;
margin-top: 0pt;
}
#page{
margin:0pt;
}
And the output:
I am attempting to use CSS3PIE to round the edges of a select element. I am using the below code and running in IE7. The behaviour I get looks as though there are two rounded nodules in the bottom right of the select element. I would assume somehow the element is attempting to round the edges, but the proportions and/or position are not being passed for the created outer-element correctly. Anyone else have this issue or know how to fix it?
CSS
select
{
behavior: url(http:\\pc-653336\APTEIT\HTC\PIE.htc);
}
select
{
border:1px solid black;
border-radius: 10px;
}
HTML
<html>
<head>
<link rel="Stylesheet" href="test.css" />
</head>
<body>
<div id="divy"><select></select></div>
</body>
</html>
I am encountering issues with aligning a CSS Search Input Box like the Google style one found on this tutorial page.
I have edited the code to suit my design but for some reason I am unable to get this to align properly within the iPhone/iPad with the right element not aligning with the left element at the bottom.
The alignment issue can be seen here
The code is as follows:
HTML:
<div id="search">
<form name="" action="" type="">
<input type="text" name="field" id="field" />
<div id="delete"><span id="x">x</span></div>
</form>
</div>
CSS:
#search {float:left; margin:11px 0 0 156px;}
#field {float:left;width:200px; height:22px; line-height:22px; text-indent:0px; font-family:arial,sans-serif; font-size:12px; color:#999; background: #fff; background:url('search-icon.png') no-repeat left center; padding-left:25px; border:solid 1px #d9d9d9; border-right:none; -webkit-appearance:none; -webkit-border-radius:0px;}
#field:focus {outline:none;}
#delete {float:left; width:16px; height:24px; line-height:22px; padding:0 0 0 6px; font-family:"Lucida Sans", "Lucida Sans Unicode",sans-serif; font-size:14px; background:#FFFFFF; border:solid 1px #D9D9D9; border-left:none; -webkit-appearance:none; -webkit-border-radius:0px;}
#delete #x {color:#999999; cursor:pointer; display:none; }
#delete #x:hover {color:#666666;}
I noticed that changing the height:24px below:
#delete {float:left; width:16px; height:24px; line-height:22px; padding:0 0 0 6px; font-family:"Lucida Sans", "Lucida Sans Unicode",sans-serif; font-size:14px; background:#FFFFFF; border:solid 1px #D9D9D9; border-left:none; -webkit-appearance:none; -webkit-border-radius:0px;}
To height:27px; aligns correctly in Safari on the iPad/iPhone but then doesn't display correctly on IE/FF/Chrome.
Any help would be very much appreciated with this. Thanks
I tested locally it works, if you add the following on top of your page then the problem should be fixed.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Set #delete {height:22px;}
The height on your #field is set to 22px so it must be the same on #delete.
As a side note, I'm sure you do already, but if not, Firebug or Chrome tools can be very helpful in debugging CSS, HTML, Javascript, and much more.
THE FIX
OK. I troubleshooted further for you. This seemed to work for me (and made sense), but I didn't have a good way to test on iOS, so you will have to update the link. For some reason, it was adding padding - 1px - to three sides of the #field form. Try changing #field { padding-left:25px } to #field { padding: 0 0 0 25px; } This should work as long height is set to the same value on both #field and #delete. Let me know if it works, and I'll update my answer.