Re: [css-d] Need help with height on menu
Jeralyn Merideth wrote:
I'm sorry! I sent this a couple days ago without a link. My bad. You guys
helped me on another problem with this same menu and I got that under
control, but now I can't seem to make it look right in FF. IE7 looks like
it's supposed to but in FF it's too high and not sitting on the masthead
properly.
http://www.5pts-interactive.com/sarantopoulos/index.asp
This should help you sort out your problem.
body {
background-color: #fff; /* don't assume everyone has white as
default color */
padding: 0;/* don't forget to reset body's padding and
margin */
margin: 0;
color:#444;
}
#topmast {
top: auto; /* I don't think you ever needed this, did
you? */
}
Your design is a little atypical. You are combining em's with px's
(meaning you won't get the expected results), and you're also taking the
wrong approach with some basic issues. I would really recommend you to
rethink your approach and redo what's needed.
Hint: try resizing the font, just a little is enough.
Good luck.
__
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] Need help with height on menu
Rafael,
Thank you for your advice. However, I'm a little confused. Here is the code for
my body:
body#navon_home #navbar li#home a {
background: #fff url(../img/navon.jpg) repeat-x;
color: #fff;
}
body {
text-align: center;
background: url(../img/banner.jpg) repeat-x;
}
/***
Master styles
/
html, body, div, p {
font-family: geneva, 'Trebuchet MS', sans-serif;
color: #444;
}
You can see that I *do* have #fff as a background color. Here 's the code for
my topmast:
#topmast {
position: relative;
top: -15px;
height: 62px;
background: transparent;
}
As you can see, I do not have a value of auto on the top property. Is it
possible you are looking at an old file? Not that I think I ever had it set to
auto. I wouldn't put a value of auto on that property. I'm also confused as to
why you feel mixing em's with pixels is an atypical design approach. Have you
ever viewed Cameron Moll's work? He mixes em's with pixels all the time and I
wouldn't call his work atypical. also, could you clarify, for me, what you mean
by basic issues? I'm not sure how I can fix something unless I know what is
wrong. Hint: I changed the font size to something else and that didn't work
either.
Thanks again Rafael. Anyone else have any words of wisdom?
Jeralyn
- Original Message
From: Rafael [EMAIL PROTECTED]
To: Jeralyn Merideth [EMAIL PROTECTED]
Cc: css-d@lists.css-discuss.org
Sent: Saturday, October 20, 2007 11:21:00 AM
Subject: Re: [css-d] Need help with height on menu
Jeralyn Merideth wrote:
I'm sorry! I sent this a couple days ago without a link. My bad. You guys
helped me on another problem with this same menu and I got that under control,
but now I can't seem to make it look right in FF. IE7 looks like it's supposed
to but in FF it's too high and not sitting on the masthead properly.
http://www.5pts-interactive.com/sarantopoulos/index.asp
This should help you sort out your problem.
body {
background-color: #fff; /* don't assume everyone has white as
default color */
padding: 0;/* don't forget to reset body's padding and
margin */
margin: 0;
color:#444;
}
#topmast {
top: auto; /* I don't think you ever needed this, did
you? */
}
Your design is a little atypical. You are combining em's with px's
(meaning you won't get the expected results), and you're also taking
the wrong approach with some basic issues. I would really recommend you
to rethink your approach and redo what's needed.
Hint: try resizing the font, just a little is enough.
Good luck.
__
Do You Yahoo!?
Tired of spam? Yahoo! Mail has the best spam protection around
http://mail.yahoo.com
__
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] Need help with height on menu
Jeralyn Merideth wrote:
Rafael,
Thank you for your advice. However, I'm a little confused. Here is the
code for my body:
body#navon_home #navbar li#home a {
background: #fff url(../img/navon.jpg) repeat-x;
color: #fff;
}
body {
text-align: center;
background: url(../img/banner.jpg) repeat-x;
}
[...]
You can see that I *do* have #fff as a background color.
Actually, at this point you overrode the background color with your
second rule, you should add #fff to that background, i.e.
background: #fff url(../img/banner.jpg) repeat-x;
Here 's the code for my topmast:
#topmast {
position: relative;
top: -15px;
height: 62px;
background: transparent;
}
As you can see, I do not have a value of auto on the top property.
Is it possible you are looking at an old file? Not that I think I ever
had it set to auto. I wouldn't put a value of auto on that property.
You are right, that was my rule, so I explained that totally wrong.
I meant you didn't need the top property, since you are now (assuming
you did take my code into consideration) overriding the body's padding
and margin, so now setting top to a negative value will mean having it
out of the viewport.
I'm also confused as to why you feel mixing em's with pixels is an
atypical design approach. Have you ever viewed Cameron Moll's work?
He mixes em's with pixels all the time and I wouldn't call his work
atypical.
You are right, yet something else I didn't explain as I should.
Sorry for not using the right words. I only meant you won't get what
you're probably waiting for, since you're setting the height in px but
the padding is set in em's.
also, could you clarify, for me, what you mean by basic issues? I'm
not sure how I can fix something unless I know what is wrong.
That was regarding the negative top position to correct the body's
padding / margin. You know, I think I was somehow mad at this point,
sorry for this, it had nothing to do with you.
Hint: I changed the font size to something else and that didn't work
either.
:) I hope you meant you did that with your browser's font size
feature (or whatever is called), and not in the CSS code itself (though
it should work too, I believe).
Hope this helps... this time... somehow.
Regards.
__
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] Need help with height on menu
Yes, it did! Thanks. I *did* change the font-size in the code and not in the
browser lol. And, I added the zeroed margin and padding to the body, took out
the top property on the topmast, but now both IE and Firefox is shoving down
the menu into the masthead. Adding the top back in and setting it to -7px, it
views fine in both browsers. Hmm.
I will look more closely at the paddings and heights and see if I can get these
to be more consistent.
Thanks again...and don't be mad. It's too beautiful a day for that! (at least
where I live ;-))
Jeralyn
- Original Message
From: Rafael [EMAIL PROTECTED]
To: Jeralyn Merideth [EMAIL PROTECTED]
Cc: css-d@lists.css-discuss.org
Sent: Saturday, October 20, 2007 12:42:53 PM
Subject: Re: [css-d] Need help with height on menu
Jeralyn Merideth wrote:
Rafael,
Thank you for your advice. However, I'm a little confused. Here is the
code for my body:
body#navon_home #navbar li#home a {
background: #fff url(../img/navon.jpg) repeat-x;
color: #fff;
}
body {
text-align: center;
background: url(../img/banner.jpg) repeat-x;
}
[...]
You can see that I *do* have #fff as a background color.
Actually, at this point you overrode the background color with your
second rule, you should add #fff to that background, i.e.
background: #fff url(../img/banner.jpg) repeat-x;
Here 's the code for my topmast:
#topmast {
position: relative;
top: -15px;
height: 62px;
background: transparent;
}
As you can see, I do not have a value of auto on the top property.
Is it possible you are looking at an old file? Not that I think I ever
had it set to auto. I wouldn't put a value of auto on that property.
You are right, that was my rule, so I explained that totally wrong.
I meant you didn't need the top property, since you are now (assuming
you did take my code into consideration) overriding the body's padding
and margin, so now setting top to a negative value will mean having it
out of the viewport.
I'm also confused as to why you feel mixing em's with pixels is
an atypical design approach. Have you ever viewed Cameron Moll's
work? He mixes em's with pixels all the time and I wouldn't call his
work atypical.
You are right, yet something else I didn't explain as I should.
Sorry for not using the right words. I only meant you won't get what
you're probably waiting for, since you're setting the height in px but
the padding is set in em's.
also, could you clarify, for me, what you mean by basic
issues? I'm not sure how I can fix something unless I know what is
wrong.
That was regarding the negative top position to correct the body's
padding / margin. You know, I think I was somehow mad at this point,
sorry for this, it had nothing to do with you.
Hint: I changed the font size to something else and that didn't
work either.
:) I hope you meant you did that with your browser's font size
feature (or whatever is called), and not in the CSS code itself (though
it should work too, I believe).
Hope this helps... this time... somehow.
Regards.
__
Do You Yahoo!?
Tired of spam? Yahoo! Mail has the best spam protection around
http://mail.yahoo.com
__
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] Need help with height on menu
Jeralyn Merideth wrote:
Yes, it did! Thanks. I *did* change the font-size in the code and not
in the browser lol. And, I added the zeroed margin and padding to the
body, took out the top property on the topmast, but now both IE and
Firefox is shoving down the menu into the masthead. Adding the top
back in and setting it to -7px, it views fine in both browsers. Hmm.
I will look more closely at the paddings and heights and see if I can
get these to be more consistent.
Incidentally, you have
#navbar {
[...]
top: 7px;
[...]
}
So I guess everything should be OK once you remove this rule (it
looked OK in my Fx, though). By the way, don't forget to set the
background-color --I looked into the site again, but it seems it hasn't
been updated yet.
I uploaded the version I was playing with, in case it's of some use
to you:
http://dev.rsalazar.name/css.d/5pts-menu.html
Thanks again...and don't be mad. It's too beautiful a day for that!
(at least where I live ;-))
Jeralyn
Thanks Jeralyn, it's a little bit cold and cloudy today but still a
nice day here too --I like clouds :)
__
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] Need help with height on menu
I did change it, but hadn't uploaded it to the server. I was tweaking some
other things and was updating on my local drive but not the remote server. I
have uploaded it and all looks great! I did catch the navbar top: 7px but
thanks for pointing that out :-)
Jeralyn
- Original Message
From: Rafael [EMAIL PROTECTED]
To: Jeralyn Merideth [EMAIL PROTECTED]
Cc: css-d@lists.css-discuss.org
Sent: Saturday, October 20, 2007 1:33:37 PM
Subject: Re: [css-d] Need help with height on menu
Jeralyn Merideth wrote:
Yes, it did! Thanks. I *did* change the font-size in the code
and not in the browser lol. And, I added the zeroed margin and padding
to the body, took out the top property on the topmast, but now both IE
and Firefox is shoving down the menu into the masthead. Adding the top
back in and setting it to -7px, it views fine in both browsers. Hmm.
I will look more closely at the paddings and heights and see if I can
get these to be more consistent.
Incidentally, you have
#navbar {
[...]
top: 7px;
[...]
}
So I guess everything should be OK once you remove this rule (it
looked OK in my Fx, though). By the way, don't forget to set the
background-color --I looked into the site again, but it seems it hasn't
been updated yet.
I uploaded the version I was playing with, in case it's of some use
to you:
http://dev.rsalazar.name/css.d/5pts-menu.html
Thanks again...and don't be mad. It's too beautiful a day for
that! (at least where I live ;-))
Jeralyn
Thanks Jeralyn, it's a little bit cold and cloudy today but still a
nice day here too --I like clouds :)
__
Do You Yahoo!?
Tired of spam? Yahoo! Mail has the best spam protection around
http://mail.yahoo.com
__
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/
