[css-d] H1 Tag top Margin and Browser Issue
I'm trying to move the h1 text main down using top margin just a little and it's not moving Same thing with the contact with email won't move down on the top margin Also If you view the page in Opera the paragraphs under about me are a little squashed especially the sheep word overlaps the W a little. If you view in FF3 there is a huge space between the W and the rest of the text __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] H1 Tag top Margin and Browser Issue
Christopher wrote: I'm trying to move the h1 text main down using top margin just a little and it's not moving Same thing with the contact with email won't move down on the top margin Also If you view the page in Opera the paragraphs under about me are a little squashed especially the sheep word overlaps the W a little. If you view in FF3 there is a huge space between the W and the rest of the text __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ Sorry forgot the link: http://www.walkfar.ca/test/productionsite10.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] H1 Tag top Margin and Browser Issue
--- On Wed, 7/23/08, Christopher [EMAIL PROTECTED] wrote: I'm trying to move the h1 text main down using top margin just a little and it's not moving http://www.walkfar.ca/test/productionsite10.html Christopher, As has already been suggested, until you fully understand the box model - in particular, with respect to collapsing margins, negative margins, and margins on inline elements - your best bet is to simplify your code. You have many cases where there are several nested elements for no obvious reason, each with varying margins set, some of which are collapsing, some of which combine with other margins, etc. For example, div id=locationh1 class=mainlocspan class=maintextstrongMain/strong/span/h1/div can probably all be replaced with the simpler (and much easier to work with): h1Main/h1 You can then apply styles directly to that element, and only need to introduce additional alements if absolutely necessary. I also notice you're using long-hand notation when short-hand would be much easier to work with, for example: border-top-width: 2em; border-right-width: 2em; border-bottom-width: 2em; border-left-width: 2em; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #FF; border-right-color: #FF; border-bottom-color: #FF; border-left-color: #FF; can all be replaced with: border: 2em solid #FF; - Bobby __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] H1 Tag top Margin and Browser Issue
Christopher wrote:
Christopher wrote:
I'm trying to move the h1 text main down using top margin just a
little and it's not moving
Same thing with the contact with email won't move down on the top margin
You are already setting a negative margin on your H1 element:
.mainloc {
margin-top: -27px;
}
To move it down, simply stop moving it up or move it up less.
Also If you view the page in Opera the paragraphs under about me
are a little squashed especially the sheep word overlaps the W a
little. If you view in FF3 there is a huge space between the W and the
rest of the text
You're telling it to be by setting a line height of 16px in your
.aboutmepara style block. To begin with, line-height should not have a
unit attached to it (no em, px, or %, etc.). It's a factor, like
line-height:2 means set the line height at double. You probably want
something like line-height:1.5 for your block.
You are now tied for first with me for number of messages posted to this
list for this month (51 apiece, this email is 52 for me). I regret I
will be unable to offer you any more assistance after this email as it
seems to be enabling rather than assisting.
--Bill
--
/**
* Bill Brown
* TheHolierGrail.com MacNimble.com
* From dot concept...to dot com...since 1999.
***/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] H1 Tag top Margin and Browser Issue
From: Christopher [EMAIL PROTECTED]
I'm trying to move the h1 text main down using top margin just a
little and it's not moving
Same thing with the contact with email won't move down on the top margin
Also If you view the page in Opera the paragraphs under about me
are a little squashed especially the sheep word overlaps the W a
little. If you view in FF3 there is a huge space between the W and the
rest of the text
Christopher,
I checked out your site and tried to find the h1 tag saw that you have a div
tag nested in the h1. Strip out the div and apply the style you want in the
style sheet to the h1 tag. As a matter of fact, you are using a lot of div tags
and custom styles when you should be trying to control the root HTML tags.
When writing CSS, remember the C of CSS -- styles cascade down to the
sub-tags within a section. For example, imagine a div with the id of
leftColumn. All the HTML you put in that div can now be controlled like this:
#leftColumn {
float:left;
width:350px;
}
#leftColumn h1 {
margin:whatever;
border:whatever;
}
#leftColumn.customClass {
padding:whatever;
}
Does that help any? I think that once you structure your HTML and CSS a little
better, you'll have less formatting issues...
Hope that helps,
k.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] H1 Tag top Margin and Browser Issue
Bill Brown wrote:
Christopher wrote:
Christopher wrote:
I'm trying to move the h1 text main down using top margin just a
little and it's not moving
Same thing with the contact with email won't move down on the top margin
You are already setting a negative margin on your H1 element:
.mainloc {
margin-top: -27px;
}
To move it down, simply stop moving it up or move it up less.
Also If you view the page in Opera the paragraphs under about me
are a little squashed especially the sheep word overlaps the W a
little. If you view in FF3 there is a huge space between the W and the
rest of the text
You're telling it to be by setting a line height of 16px in your
.aboutmepara style block. To begin with, line-height should not have a
unit attached to it (no em, px, or %, etc.). It's a factor, like
line-height:2 means set the line height at double. You probably want
something like line-height:1.5 for your block.
You are now tied for first with me for number of messages posted to this
list for this month (51 apiece, this email is 52 for me). I regret I
will be unable to offer you any more assistance after this email as it
seems to be enabling rather than assisting.
--Bill
When I move the .mainloc which is associated with the h1 tag it also
moves the #location id how come?
And I changed the line-height to 1.5 the result was not good, so that
does not work any other suggestions?
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] H1 Tag top Margin and Browser Issue
--- On Wed, 7/23/08, Kevin Doyle [EMAIL PROTECTED] wrote: When writing CSS, remember the C of CSS -- styles cascade down to the sub-tags within a section. Kevin, Whilst you are certainly correct that CSS behaves in this way, it is not due to the 'cascade', which is commonly confused with what you're actually talking about: inheritance. The cascade refers to interactions between the user's and the author's style sheets, and the weighting of style rules. Although there's a strong link between the cascade and inheritance, they are 2 different things, despite the confusing naming. See http://www.w3.org/TR/CSS21/cascade.html#cascade __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] H1 Tag top Margin and Browser Issue
Christopher wrote:
I'm trying to move the h1 text main down using top margin just a
little and it's not moving
Same thing with the contact with email won't move down on the top margin
You are already setting a negative margin on your H1 element:
.mainloc {
margin-top: -27px;
}
To move it down, simply stop moving it up or move it up less.
Also If you view the page in Opera the paragraphs under about me
are a little squashed especially the sheep word overlaps the W a
little. If you view in FF3 there is a huge space between the W and the
rest of the text
You're telling it to be by setting a line height of 16px in your
.aboutmepara style block. To begin with, line-height should not have a
unit attached to it (no em, px, or %, etc.). It's a factor, like
line-height:2 means set the line height at double. You probably want
something like line-height:1.5 for your block.
You are now tied for first with me for number of messages posted to this
list for this month (51 apiece, this email is 52 for me). I regret I
will be unable to offer you any more assistance after this email as it
seems to be enabling rather than assisting.
--Bill
When I move the .mainloc which is associated with the h1 tag it also
moves the #location id how come?
And I changed the line-height to 1.5 the result was not good, so that
does not work any other suggestions?
Christopher,
I recommend doing a little reading on how CSS uses the box model for how it
affects HTML. Until you fully understand how CSS cascades and impacts the HTML,
you're going to continue to have formatting issues...
I also recommend installing a Firefox plug-in called Firebug. It has a really
cool feature that allows you to inspect your CSS and will outline your HTML
using the box model so you can see how things are effected by the CSS.
https://addons.mozilla.org/en-US/firefox/addon/1843
Good luck.
k.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] H1 Tag top Margin and Browser Issue
--- On Wed, 7/23/08, Kevin Doyle [EMAIL PROTECTED] wrote: When writing CSS, remember the C of CSS -- styles cascade down to the sub-tags within a section. Kevin, Whilst you are certainly correct that CSS behaves in this way, it is not due to the 'cascade', which is commonly confused with what you're actually talking about: inheritance. The cascade refers to interactions between the user's and the author's style sheets, and the weighting of style rules. Although there's a strong link between the cascade and inheritance, they are 2 different things, despite the confusing naming. See http://www.w3.org/TR/CSS21/cascade.html#cascade Bobby, I've heard inheritance and cascade used as if they were the same or similar thing... I see now they are definitely not the same thing. Thanks for the link! :-) k. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] H1 Tag top Margin and Browser Issue
Kevin Doyle wrote:
Christopher wrote:
I'm trying to move the h1 text main down using top margin
just a
little and it's not moving
Same thing with the contact with email won't move down on the
top margin
You are already setting a negative margin on your H1 element:
.mainloc {
margin-top: -27px;
}
To move it down, simply stop moving it up or move it up less.
Also If you view the page in Opera the paragraphs under about me
are a little squashed especially the sheep word overlaps the W a
little. If you view in FF3 there is a huge space between the W
and the
rest of the text
You're telling it to be by setting a line height of 16px in your
.aboutmepara style block. To begin with, line-height should not have a
unit attached to it (no em, px, or %, etc.). It's a factor, like
line-height:2 means set the line height at double. You probably want
something like line-height:1.5 for your block.
You are now tied for first with me for number of messages posted to this
list for this month (51 apiece, this email is 52 for me). I regret I
will be unable to offer you any more assistance after this email as it
seems to be enabling rather than assisting.
--Bill
When I move the .mainloc which is associated with the h1 tag it also
moves the #location id how come?
And I changed the line-height to 1.5 the result was not good, so that
does not work any other suggestions?
Christopher,
I recommend doing a little reading on how CSS uses the box model for
how it affects HTML. Until you fully understand how CSS cascades and
impacts the HTML, you're going to continue to have formatting issues...
I also recommend installing a Firefox plug-in called Firebug. It has a
really cool feature that allows you to inspect your CSS and will
outline your HTML using the box model so you can see how things are
effected by the CSS.
https://addons.mozilla.org/en-US/firefox/addon/1843
Good luck.
k.
I did install FireBug, I just would like to solve this, I really have to
get this done ASAP and I have already spent a great deal learning CSS,
sure I don't know it all, yet but I have just
a few things to work out and get solved.
--
*Christopher* - the creative sheep
*animator*///motion graphics artist/\\*web dev*
web: www.walkfar.ca mailto:[EMAIL PROTECTED] email:
[EMAIL PROTECTED] http://www.walkfar.ca/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] H1 Tag top Margin and Browser Issue
Kevin Doyle wrote:
Christopher wrote:
I'm trying to move the h1 text main down using top margin
just a
little and it's not moving
Same thing with the contact with email won't move down on the
top margin
You are already setting a negative margin on your H1 element:
.mainloc {
margin-top: -27px;
}
To move it down, simply stop moving it up or move it up less.
Also If you view the page in Opera the paragraphs under about me
are a little squashed especially the sheep word overlaps the W a
little. If you view in FF3 there is a huge space between the W
and the
rest of the text
You're telling it to be by setting a line height of 16px in your
.aboutmepara style block. To begin with, line-height should not have a
unit attached to it (no em, px, or %, etc.). It's a factor, like
line-height:2 means set the line height at double. You probably want
something like line-height:1.5 for your block.
You are now tied for first with me for number of messages posted to this
list for this month (51 apiece, this email is 52 for me). I regret I
will be unable to offer you any more assistance after this email as it
seems to be enabling rather than assisting.
--Bill
When I move the .mainloc which is associated with the h1 tag it also
moves the #location id how come?
And I changed the line-height to 1.5 the result was not good, so that
does not work any other suggestions?
Christopher,
I recommend doing a little reading on how CSS uses the box model for
how it affects HTML. Until you fully understand how CSS cascades and
impacts the HTML, you're going to continue to have formatting issues...
I also recommend installing a Firefox plug-in called Firebug. It has a
really cool feature that allows you to inspect your CSS and will
outline your HTML using the box model so you can see how things are
effected by the CSS.
https://addons.mozilla.org/en-US/firefox/addon/1843
Good luck.
k.
When I adjust the margins on the .maintext the #location moves too, how
come?
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] H1 Tag top Margin and Browser Issue
Christopher wrote:
I'm trying to move the h1 text main down using top margin
just a
little and it's not moving
Same thing with the contact with email won't move down on the
top margin
You are already setting a negative margin on your H1 element:
.mainloc {
margin-top: -27px;
}
To move it down, simply stop moving it up or move it up less.
Also If you view the page in Opera the paragraphs under about me
are a little squashed especially the sheep word overlaps the W a
little. If you view in FF3 there is a huge space between the W
and the
rest of the text
You're telling it to be by setting a line height of 16px in your
.aboutmepara style block. To begin with, line-height should not have a
unit attached to it (no em, px, or %, etc.). It's a factor, like
line-height:2 means set the line height at double. You probably want
something like line-height:1.5 for your block.
You are now tied for first with me for number of messages posted to this
list for this month (51 apiece, this email is 52 for me). I regret I
will be unable to offer you any more assistance after this email as it
seems to be enabling rather than assisting.
--Bill
When I move the .mainloc which is associated with the h1 tag it also
moves the #location id how come?
And I changed the line-height to 1.5 the result was not good, so that
does not work any other suggestions?
Christopher,
I recommend doing a little reading on how CSS uses the box model for
how it affects HTML. Until you fully understand how CSS cascades and
impacts the HTML, you're going to continue to have formatting issues...
I also recommend installing a Firefox plug-in called Firebug. It has a
really cool feature that allows you to inspect your CSS and will
outline your HTML using the box model so you can see how things are
effected by the CSS.
https://addons.mozilla.org/en-US/firefox/addon/1843
Good luck.
k.
When I adjust the margins on the .maintext the #location moves too, how
come?
Christopher,
Try applying the .maintext class to the h1 tag and drop the span tags in the h1
tag...
k.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] H1 Tag top Margin and Browser Issue
Kevin Doyle wrote:
Christopher wrote:
I'm trying to move the h1 text main down using top margin
just a
little and it's not moving
Same thing with the contact with email won't move down on the
top margin
You are already setting a negative margin on your H1 element:
.mainloc {
margin-top: -27px;
}
To move it down, simply stop moving it up or move it up less.
Also If you view the page in Opera the paragraphs under about me
are a little squashed especially the sheep word overlaps the W a
little. If you view in FF3 there is a huge space between the W
and the
rest of the text
You're telling it to be by setting a line height of 16px in your
.aboutmepara style block. To begin with, line-height should not have a
unit attached to it (no em, px, or %, etc.). It's a factor, like
line-height:2 means set the line height at double. You probably want
something like line-height:1.5 for your block.
You are now tied for first with me for number of messages posted
to this
list for this month (51 apiece, this email is 52 for me). I regret I
will be unable to offer you any more assistance after this email as it
seems to be enabling rather than assisting.
--Bill
When I move the .mainloc which is associated with the h1 tag it also
moves the #location id how come?
And I changed the line-height to 1.5 the result was not good, so that
does not work any other suggestions?
Christopher,
I recommend doing a little reading on how CSS uses the box model for
how it affects HTML. Until you fully understand how CSS cascades and
impacts the HTML, you're going to continue to have formatting issues...
I also recommend installing a Firefox plug-in called Firebug. It has a
really cool feature that allows you to inspect your CSS and will
outline your HTML using the box model so you can see how things are
effected by the CSS.
https://addons.mozilla.org/en-US/firefox/addon/1843
Good luck.
k.
When I adjust the margins on the .maintext the #location moves too, how
come?
Christopher,
Try applying the .maintext class to the h1 tag and drop the span tags
in the h1 tag...
k.
div id=locationh1
class=maintextstrongMain/strong/span/h1/div
It's still moving the #location id
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] H1 Tag top Margin and Browser Issue
--- On Wed, 7/23/08, Christopher [EMAIL PROTECTED] wrote: When I adjust the margins on the .maintext the #location moves too, how come? --- and I did install FireBug, I just would like to solve this, I really have to get this done ASAP and I have already spent a great deal learning CSS, sure I don't know it all, yet but I have just a few things to work out and get solved. Christopher, as I explained to you in a mail which I (unintentionally) sent off-list, the margins of .maintext and #location are inextricably linked since one element is nested inside the other. In effect, margin changes to either element affect them as if they were one and the same. This misunderstanding certainly suggests you have more than a few things to work out, and you really need to understand how the structure of an HTML document and associated CSS combine to create the final layout. Have you read up about the box model and experimented with margins, padding, and borders for the simplest case, e.g. 'div id=outerdiv id=innercontent/div/div'. It shouldn't take too long (relatively) to create a page demonstrating the effects of various combinations of these style properties on either of the boxes created. I'd be surprised if there wasn't a good example out there in the wild already, although I don't have a great reference, excepting the W3C specs which are, admittedly, rather technical. If I have the time, inclination, and sanity, I'll put something together later which should resolve the confusion. - Bobby __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] H1 Tag top Margin and Browser Issue
Bobby Jack wrote: --- On Wed, 7/23/08, Christopher [EMAIL PROTECTED] wrote: When I adjust the margins on the .maintext the #location moves too, how come? --- and I did install FireBug, I just would like to solve this, I really have to get this done ASAP and I have already spent a great deal learning CSS, sure I don't know it all, yet but I have just a few things to work out and get solved. Christopher, as I explained to you in a mail which I (unintentionally) sent off-list, the margins of .maintext and #location are inextricably linked since one element is nested inside the other. In effect, margin changes to either element affect them as if they were one and the same. This misunderstanding certainly suggests you have more than a few things to work out, and you really need to understand how the structure of an HTML document and associated CSS combine to create the final layout. Have you read up about the box model and experimented with margins, padding, and borders for the simplest case, e.g. 'div id=outerdiv id=innercontent/div/div'. It shouldn't take too long (relatively) to create a page demonstrating the effects of various combinations of these style properties on either of the boxes created. I'd be surprised if there wasn't a good example out there in the wild already, although I don't have a great reference, excepting the W3C specs which are, admittedly, rather technical. If I have the time, inclination, and sanity, I'll put something together later which should resolve the confusion. - Bobby __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ Alright, will look forward to it. -- *Christopher* - the creative sheep *animator*///motion graphics artist/\\*web dev* web: www.walkfar.ca mailto:[EMAIL PROTECTED] email: [EMAIL PROTECTED] http://www.walkfar.ca/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
