[css-d] 2 boxes not flush on left
I have a topper #namebar and a leftnav. They both have a left margin of 1.3em, but they don't line up on the left. I would like to know why . . . http://njlada.com/sandbox/ -- this message was sent by Kimi Wei 201.475.1854 http://thewei.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] 2 boxes not flush on left
On May 31, 2008, at 5:37 PM, Kim Brooks Wei wrote: I have a topper #namebar and a leftnav. They both have a left margin of 1.3em, but they don't line up on the left. I would like to know why . . . http://njlada.com/sandbox/ #namebar has a font-size of 1.2em (ends up computing to 17px on my system - [1]). The left-margin is then 22px (17px by 1.3) #lnav has a font-size : 0.9em (13px), the left-margin: 1.3 by 13px -- 16px. The margin is calculated based on the font-size of the relevant element. [1] WebKit latest build and Gecko 1.9 (Minefield latest build). Philippe --- Philippe Wittenbergh http://l-c-n.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/
[css-d] what is transparent url
hello everyone, I have come across a few sites that have code: background:transparent url(/img/filename.gif) What is the transparent element for? -- Rob Freeman [EMAIL PROTECTED] __ 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] 2 boxes not flush on left
Kim Brooks Wei wrote:
I have a topper #namebar and a leftnav. They both have a left margin
of 1.3em, but they don't line up on the left. I would like to know
why . . .
http://njlada.com/sandbox/
As Philippe said.
So, to make the elements line up where you want them to on the left,
while keeping the font-sizes you want, move the font/font-size
declarations onto elements inside #namebar and #lnav, like so...
#topper #namebar p{
font: 900 1.2em/120% verdana, sans serif;
}
#lnav ul {
font-size: .9em;
}
Also, add...
#topper #namebar {
display: inline;
}
...to make IE6 play well with margins on that float.
regards
Georg
--
http://www.gunlaug.no
__
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] what is transparent url
Rob freeman wrote: hello everyone, I have come across a few sites that have code: background:transparent url(/img/filename.gif) What is the transparent element for? The 'background' property is short for both 'background-color' and 'background-image', so such a declaration says s/he wants a transparent background-color behind the background-image. regards Georg -- http://www.gunlaug.no __ 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] what is transparent url
but why declare this? isnt this set as a default.. 2008/5/31 Gunlaug Sørtun [EMAIL PROTECTED]: Rob freeman wrote: hello everyone, I have come across a few sites that have code: background:transparent url(/img/filename.gif) What is the transparent element for? The 'background' property is short for both 'background-color' and 'background-image', so such a declaration says s/he wants a transparent background-color behind the background-image. regards Georg -- http://www.gunlaug.no -- Rob Freeman [EMAIL PROTECTED] __ 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] what is transparent url
Rob freeman wrote: but why declare this? isnt this set as a default.. Yes, it is - or at least should be. No harm in spelling it out though, and I do so routinely. In some cases a set of stylesheets includes reset styles that contain colored background, and other times certain elements are given basic styles early on that also contain background-color. By routinely declaring 'background-color' along with 'background-image' even if it's a repetition of default, I don't have to care about what's styled earlier since I'm overriding it anyway. This is of course of most use when I debug and/or alter what others have created, and I can't count how many times such a complete styling approach has solved problems and saved time - not only when it comes to 'background'. regards Georg -- http://www.gunlaug.no __ 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/
[css-d] FireFox problem?
Can anyone spot what I'm doing wrong here: http://www.peredur.uklinux.net/PlaceForWords/case-studies.html It renders exactly how I want it to in Opera and Konqueror. It's OK in IE6 - a bit odd, but acceptable. It's all over the place in FireFox, which seems to push some of the paragraphs down such that the first line of the paragraph doesn't line up with the floated image. Both the HTML and the CSS validate OK. The CSS is at: http://www.peredur.uklinux.net/PlaceForWords/case-studies.html It's up on a test server at the moment, so if the images take a bit to download, please be patient. This is the first time I've ever come across something that's OK in Opera and Konq, but not in FF, so I'm sure I'm just missing something blindingly obvious. Many thanks Peter __ 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] FireFox problem?
Peter Bradley wrote: Can anyone spot what I'm doing wrong here: http://www.peredur.uklinux.net/PlaceForWords/case-studies.html It renders exactly how I want it to in Opera and Konqueror. It's OK in IE6 - a bit odd, but acceptable. It's all over the place in FireFox, which seems to push some of the paragraphs down such that the first line of the paragraph doesn't line up with the floated image. Both the HTML and the CSS validate OK. The CSS is at: http://www.peredur.uklinux.net/PlaceForWords/case-studies.html It's up on a test server at the moment, so if the images take a bit to download, please be patient. This is the first time I've ever come across something that's OK in Opera and Konq, but not in FF, so I'm sure I'm just missing something blindingly obvious. Many thanks Peter Mac OS X 10.4.1 FF/2.0.0.14 Opera/9.27 IE/6.0 I viewed your page in with three browsers on the screen adjacent to each other at the same time. I see /no/ variation among them other than minor differences in leading. In IE/6, the second image from the top is not filling its entire height which makes for a little more difference for that browser (good idea to always set both the height and width of images in the markup for IE). Ain't nobody gonna be running around with a pixel ruler checking line-height cross-browser... Any major difference you may be encountering in Firefox, imo, may be due to an errant font setting in your FF browser preferences. -- http://chelseacreekstudio.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] FireFox problem?
Peter Bradley wrote:
http://www.peredur.uklinux.net/PlaceForWords/case-studies.html
This is the first time I've ever come across something that's OK in
Opera and Konq, but not in FF, so I'm sure I'm just missing something
blindingly obvious.
All browsers at my end show the same.
If you want the paragraph-text to line up with the image, you'll have to
zero out the top margin, like so...
#content p.thumbnaillist {
font-size: 90%;
margin-top: 0;
}
...(pay attention to the added specificity).
I'll also suggest the following additions/modifications...
.thumbnailleft {
clear: left;
}
div.temp {
clear:both;
font-size: 1px;
line-height: 0;
height: 0;
overflow: hidden;
}
...to make sure all browsers keep things in line.
regards
Georg
--
http://www.gunlaug.no
__
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] FireFox problem?
Peter Bradley wrote: http://www.peredur.uklinux.net/PlaceForWords/case-studies.html This is the first time I've ever come across something that's OK in Opera and Konq, but not in FF, so I'm sure I'm just missing something blindingly obvious. All browsers at my end show the same. I checked it in FF and it looks fine. However, in IE7, the Menu/links on the left are all messed up. The boxes are quite narrow (they appear to be the right length) so the words do not fit inside, as you move down the menu the boxes are all presented before the Contact and Mailing Del __ 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] FireFox problem?
Ysgrifennodd Gunlaug Sørtun:
snip /
All browsers at my end show the same.
If you want the paragraph-text to line up with the image, you'll have to
zero out the top margin, like so...
#content p.thumbnaillist {
font-size: 90%;
margin-top: 0;
}
...(pay attention to the added specificity).
Yes. That's what I wanted. It's what I get in Opera, IE6 and Konq (all
on Linux). FF is the only one this end that doesn't do that. I checked
FF on Windows as well and it's the same - so I implemented your fix
above, and all is well. I don't understand why the added specificity
was needed, though. Could you explain that to me, please?
I'll also suggest the following additions/modifications...
.thumbnailleft {
clear: left;
}
div.temp {
clear:both;
font-size: 1px;
line-height: 0;
height: 0;
overflow: hidden;
}
...to make sure all browsers keep things in line.
I'm onto it as we speak.
:)
Many thanks to both you and David.
Cheers
Peter
__
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] FireFox problem?
Ysgrifennodd Del Wegener:
I checked it in FF and it looks fine. However, in IE7, the Menu/links
on the left are all messed up.
The boxes are quite narrow (they appear to be the right length) so
the words do not fit inside, as you move down the menu the boxes are
all presented before the Contact and Mailing
Del
It does too. I'd not checked IE7, foolishly thinking that if it was OK
in standards browsers and IE6, it'd be OK in IE7. I haven't got a clue
what to do about this ...
Ah! Fixed it (I think). There's a mistake in my conditional comments.
I've got:
!--[if lte IE 7]
style
/* for IE/6 */
ul#c1 li a {
height : 0;
}
ul#c2 li a {
height : 0;
}
/style
![endif]--
I need !--[if lt IE 7] ...
Works for this page, anyhow. So I'll do the others and see how we go.
Many thanks for pointing that out. Saved my blushes a bit there, I think.
Cheers
Peter
__
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] FireFox problem?
Peter Bradley wrote:
I don't understand why the added specificity was needed, though.
Could you explain that to me, please?
Necessary in order to override the paragraph-styles you have higher up
in the stylesheet...
#content p {
margin : 20px 30px 20px 0;
}
Georg
--
http://www.gunlaug.no
__
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] FireFox problem?
Ysgrifennodd Gunlaug Sørtun:
#content p {
margin : 20px 30px 20px 0;
}
Georg
D'oh.
I forgot. IDs count more than classes, don't they.
Half a day of my life wasted for forgetting that!
Thanks a million Georg.
Peter
__
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] FireFox problem?
Peter Bradley wrote: I forgot. IDs count more than classes, don't they. Yes, and specificity gets strengthen by adding parents/grandparents to the selector-chain. You can go all the way back to the root (html) if necessary, and add even more specificity and fine-tune targeting by including whatever ids and classes you have made available for such a selector-chain. Advice: start low on specificity, and add more only when needed - not before, otherwise you may end up with unnecessary long selector-chains. Half a day of my life wasted for forgetting that! Make sure you don't forget that now, and you may end up with spare time as a reward :-) Georg -- http://www.gunlaug.no __ 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] FireFox problem?
Ysgrifennodd Del Wegener: I rechecked both FF and IE7 and they are now fine. Good looking page. Del Better looking now, thanks to you and the others! :) Many thanks. Peter __ 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/
