Forum Moderators: not2easy
When I use a style.css file, the page format is the same
except that there is a 10 pixel space on the top and bottom
of the browser window where the background shows through.
Any ideas why this may be happening?
Thanks
Try this in your CSS and see if it makes a difference:
html, body {
margin: 0; padding: 0;
}
If not, strip HTML and CSS down to the problem and post the relevant code (test ready).
body,
html {
margin:0;
padding:0
color:#000;
background:#DDDDDD;
font-family:"Arial, Sans-Serif";color:#404040;
font-size: 98%;
}
I have an image that is 890pix wide by 14pix high. My template is 750pix wide. I tried the usual of changing the <body> tag to <body background="edge.gif"> . The gif shows the rolled edge but it is not on the body of the template but all the way to the left of the browser window. Should I ask this question elsewhere or might you have an answer for this too?
Thanks Again
A semi-colon is required after all declarations in a declaration block except for the last. e.g.,
body {
color: #faebd7;
background-color: #000;
margin: 2em
}
Personal preference, but I always use a semi-colon - with exception.
.........................
As minor nits, I would make a few minor changes.
1) Lowercase and shorthand - background-color: #ddd;
2) font-family:"Arial, Sans-Serif";
This quoting structure does validate with W3C. (To my surprise. Obviously I have an academic shortcoming and to need to look at the specification/recommendation more carefully.)
{font-family: Arial, sans-serif;} would be a much more common declaration.
W3C - font-family: [w3.org]
.........................
3) I would declare {font-size: 100%;} in the body, and THEN make the 98% declaration in a wrapper <div> or some such with a class or id. Anything declared in the body is 'global'. Global declarations, and certainly anything unusual in one, could cause problems as the site grows. For example, right now
p {
color: red;
}
might suit your purposes - but this would be a declaration made on every paragraph that reads that stylesheet. That could cause problems later. More flexible options would be to class or id the odd declaration, or at least call it within a <div> that has class or id;
.some-div p {
color: red;
}
I have to knock out some 'pay the bills work' right now, but will come back and look at the question if not answered in the meantime.
Note that most of my previous post was a matter of preference and/or 'informational meandering'. Only the missing semi-colon is critical.
A font family is a list of font separated by commas.
The fonts themselves only need to get quotes when they have a space in their name.
So to give an example:
font-family: "Gill Sans", helvetica, sans-serif;
The last font should be one of the list of generic fonts that all browsers will have and support the are listed in the w3.org material: serif ; sans-serif ; cursive; fantasy and monospace. Generic fontnames are keywords and should never be quoted.
I've never found a reference to how browsers are supposed to match font names we specify and some of the more complex names some fonts do have.
Eg. what happens if we leave off the foundry, should it still match whatever foundry is found on the system or should it not match ?
.....adding a edge.gif image to the left edge of the template.....
This reads like it needs to be declared to the a <div> that directly affects the template - definitely not the <body>.
..............
I have an image that is 890pix wide by 14pix high. My template is 750pix wide.
You mention a left edge - then reference using an image that is {width: 890px;} - note: px; not pix.
I would be quite concerned about the choice and/or editing of the image. You will want to repeat-y: - a vertical repeat to get a 'left edge' effect.
..............
I tried the usual of changing the <body> tag to <body background="edge.gif">
.....but it is not on the body of the template but all the way to the left of the browser window.....
But this is not usual.
1) This is a declaration that you probably want in the external stylesheet, not inline. IF you wanted to do this inline, THEN better to use <body style="background: #comp-color url(edge.gif);">
Even used as is it probably won't work because you will need to control the positioning and the repeat.
2) The image may/probably need to be the background of a wrapper <div> around the template. It is currently positioned to the left edge of the browwer window because you declared it as the background-image: of the <body>, which has {margin: 0; padding: 0;} - It is doing exactly what you have asked.
Did you mean that it is {width: 14px; height: 890px;}? Because if it is really that wide how are you controlling the width? Something doesn't add up.
But are the quotes around the entire declared value 'acceptable'? It validated XHTML Strict. I've never seen a complete font-family: value-declaration wrapped in quotes before. The 'green label' validated page came as a surprise.
Is there a reference for this?
1) The image is 890pixels wide by 14pixels high.
2) When I use it inline(I guess that means on the index.html template) I get the desired effect of the image repeating vertically but as I mentioned, it occurs all the way to the left of the browser. I want it to affect the left edge of the template so it seems that "The image may/probably need to be the background of a wrapper <div> around the template."
3) I tried using your code <body style="background: #comp-color url(edge.gif);"> exactly as it is printed with the proper path to the image so it looked like this <body style="background: #comp-color url(/images/edge.gif);"> and the image did not show up at all. Did I use the code correctly?
4) When you mention controlling the width I don't know the answer other than to say the desired effect occurs but not on the template edge.
5) What code do you suggest I try to get the image on the left template edge?
Thanks for you help,
Peter
