header margin question

[michaelbr]

I'm using Sigil 0.6.0, WinXP. I have a very simple text for testing and this is what happened:
1) I loaded 1st my CSS file
2) linked the CSS to my html file (by right click on the html file and Link Stylesheet...
3) enter this simple test text
header 1
header 2
header 3
4) when I highlighted the header 1, then clicked on the h1 button on the menu, the text changed according to what specified in my CSS
5) the same happened when I did the same with header 2 (assigned to h2)
6) but when I tried to assign h3 to header 3, there's a margin before the header, I tried to add

margin-before=0em;

to no avail.
7) then I went to Preview View and found that there's

-webkit-margin-before: 1em;

. It seems this code is from Sigil, how can I get rid of it or remove it?

[theducks]

Originally Posted by michaelbr

I'm using Sigil 0.6.0, WinXP. I have a very simple text for testing and this is what happened:
1) I loaded 1st my CSS file
2) linked the CSS to my html file (by right click on the html file and Link Stylesheet...
3) enter this simple test text
header 1
header 2
header 3
4) when I highlighted the header 1, then clicked on the h1 button on the menu, the text changed according to what specified in my CSS
5) the same happened when I did the same with header 2 (assigned to h2)
6) but when I tried to assign h3 to header 3, there's a margin before the header, I tried to add

margin-before=0em;

to no avail.
7) then I went to Preview View and found that there's

-webkit-margin-before: 1em;

. It seems this code is from Sigil, how can I get rid of it or remove it?

margin-top
margin-bottom
margin-right
margin-left
the webkit ones don't affect all devices

[Doitsu]

Originally Posted by michaelbr

7) then I went to Preview View and found that there's

-webkit-margin-before: 1em;

. It seems this code is from Sigil, how can I get rid of it or remove it?

AFAIK, Sigil never adds -webkit style parameters to a stylesheet.
Can you post your stylesheet or the section that defines the h1, h2, h3 styles that Sigil supposedly changed?

[michaelbr]

Originally Posted by Doitsu

AFAIK, Sigil never adds -webkit style parameters to a stylesheet.
Can you post your stylesheet or the section that defines the h1, h2, h3 styles that Sigil supposedly changed?

Thanks Doitsu for your reply, sorry I forgot to include my CSS, here it is

/* Style Sheet for ePub Books */
/* Set margins at 2% (This gives a white border around the book) */

body {margin-left:2%;
    margin-right:2%;
    margin-top:2%;
    margin-bottom:2%;}

/* Text indent will make a paragraph indent, like putting a tab at the beginning of each new paragraph
The margin settings get rid of the white space between paragraphs, again so it looks more like a book
The text-align line justifies the margins. If you don't want them justified, change it to left, or remove
 that line. You don't have to specify a font, but you can */

p {text-indent: 1.0em;
    margin-left:0;
    margin-right:0;
    margin-top:0;
    margin-bottom:1.0em;
    text-align: left;
    font-family:"Arial";}
.noMargin {
	margin-left:0;
    margin-right:0;
    margin-top:0;
    margin-bottom:0em;}
.noMarginIndent {text-indent: 0em;
	margin-left:0;
    margin-right:0;
    margin-top:0;
    margin-bottom:0em;}
.noIndentWithMargin {text-indent: 0em;
	margin-left:0;
    margin-right:0;
    margin-top:0;
    margin-bottom:1.0em;}
.code {text-indent: 0em;
	font-family: "Times New Roman";
	margin-bottom:0em;
	background-color:#CCCCCC;}
.quote {text-indent: 0em;
	font-family: "Arial";
	font-style: italic;
	font-size: 0.8em;
	background-color:#CCCFFF;
	}

/* Here we make our headings centered
We've also made the headings the same font as the body text */

h1 { text-align: center;
	margin-bottom:0em;
    font-family:"Arial";
	font-weight: bold;
	font-size: 1.2em;}
h2 { text-align: left;
	margin-bottom:0em;
    font-family:"Arial";
	font-style: italic;
	font-weight: bold;
	font-size: 1.1em;}
h3 { text-align: left;
	margin-bottom:0em;
    font-family:"Arial";
	font-weight: bold;
	font-size: 1em;}
h4 { text-align: left;
	margin-bottom:0em;
	text-indent: 0.5em;
    font-family:"Arial";
	font-weight: bold;
	font-size: 1em;}
h5 { text-align: left;
	margin-bottom:0em;
	text-indent: 1em;
    font-family:"Arial";
	font-weight: bold;
	font-size: 1em;}

/* ordered list spec*/
ol {margin-top:0;
	margin-left: -1em;
	list-style-position: outside;}

/* unordered list spec*/
ul {margin-top:0;
	margin-left: -1em;
	list-style-position: outside;}

/* image text wrap*/
img.floatRightClear {
	float: right; 
    clear: right; 
    margin: 4px; }
img.floatLeftClear {
	float: left; 
    clear: left; 
    margin: 4px; }

[Doitsu]

I tested your style-sheet with a dummy text file and no -webkit style parameters were added. That leaves only the actual .html source file as the culprit.

Most likely the text that you applied the h3 to had already a style assigned to it that was merged with the h3 style.

[michaelbr]

Originally Posted by Doitsu

I tested your style-sheet with a dummy text file and no -webkit style parameters were added. That leaves only the actual .html source file as the culprit.

Most likely the text that you applied the h3 to had already a style assigned to it that was merged with the h3 style.

Thanks Doitsu for your reply, this is step by step what I did:
1) loaded CSS into Sigil by right click Styles folder, then Add Existing Files...., then selected the CSS file in my drive.
2) linked the CSS file into the default blank html file
3) typed the following text into the default blank html file
header 1
header 2
header 3
4) this is the html code for my html file

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!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></title>
  <link href="../Styles/word%20tips.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <h1>1111</h1>

  <h2>2222</h2>

  <h3>3333&nbsp;</h3>
</body>
</html>

and the attached jpeg is what shows in the Preview View window.

I thought maybe my Sigil was corrupted, so I just re-installed it again, still the same, what I'm doing different?

ps: what's user agent stylesheet? the webkit said it belongs to user agent stylesheet and I have no idea where this user agent stylesheet came from!

[meme]

I believe 'user agent' is the software used to display your page. In this case Qt as used by Sigil, but it could be Firefox, IE, or the software on your ereader device.

These settings can, I believe, be overridden if you define them in your stylesheet. You'll also notice they are there if you do not link any stylesheet to your page.

[michaelbr]

Originally Posted by meme

I believe 'user agent' is the software used to display your page. In this case Qt as used by Sigil, but it could be Firefox, IE, or the software on your ereader device.

These settings can, I believe, be overridden if you define them in your stylesheet. You'll also notice they are there if you do not link any stylesheet to your page.

Thanks meme for your reply, sorry I'm lost, I'm just using Sigil to create my "ebook", I'm not using any other apps to display it, as you can see on my previous post, the webkit tag is shown in Sigil. Is there anyway I can remove/deactivate it in my CSS (not just the tag but all of the user agent's stylesheet)? It seems to me that there are a bunch of other tags created by this user agent, it would be simpler just to deactivate it completely in my CSS if possible and I'll define my own tags/rules as needed.

[theducks]

Originally Posted by michaelbr

Thanks meme for your reply, sorry I'm lost, I'm just using Sigil to create my "ebook", I'm not using any other apps to display it, as you can see on my previous post, the webkit tag is shown in Sigil. Is there anyway I can remove/deactivate it in my CSS (not just the tag but all of the user agent's stylesheet)? It seems to me that there are a bunch of other tags created by this user agent, it would be simpler just to deactivate it completely in my CSS if possible and I'll define my own tags/rules as needed.

It is NOT There in the real book. Look in Code view (ONLY)
The inspector (the view YOU showed) is the user Agent. It is overlaying your book, Not inserting.

[michaelbr]

Originally Posted by theducks

It is NOT There in the real book. Look in Code view (ONLY)
The inspector (the view YOU showed) is the user Agent. It is overlaying your book, Not inserting.

Thanks theducks, I see what you mean, I'll check epub I created with other ereaders to see what the difference with Sigil.