Re: [css-d] How to get rid of gaps
Thank you both. Indeed whitespace in the markup was the problem.
Firefox did not recognize multiple src attributes or my doc is missing
some header info. s that an XHTML spec or HTML or ??? However
eliminating the whitespace between the img tags did the trick.
Also Thierry, i used your suggestion and went with the descendent
selector for the images. Less typing is good. Thank you for pointing
that out.
Cheers,
Peter
On 8/31/05, Thierry Koblentz [EMAIL PROTECTED] wrote:
Peter Speltz wrote:
Hi all. I'm having a similar problem. I'm using Firefox on a PC for
starters. Despite 0margins, 0 padding,I have gaps that i do not
understand between images that make up my banner. I've been reading
img.logo {
border: none;
margin:0px ;
padding: 0px;
/*float: left; fixes it in Firefox PC */
}
Peter gave you the answer for the extra space already, but I'd like to add
that you do not really need class=logo in the markup because you can get
to the images through:
.logobar img {}
instead of:
img.logo {}
HTH,
Thierry | www.TJKDesign.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How to get rid of gaps
On Aug 31, 2005, at 9:51 PM, Thierry Koblentz wrote:
Peter gave you the answer for the extra space already, but I'd like to
add
that you do not really need class=logo in the markup because you can
get
to the images through:
.logobar img {}
...and, unless there are more than one logobar on a page, it should
have id=logobar instead of class=logobar...
—ml—
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How to get rid of gaps
On Sep 1, 2005, at 11:34 AM, Peter Speltz wrote: If anyone cares to reply: Is using id just a matter of protection for the developer by limiting them or is there more to it than that? It makes a difference at the JavaScript DOM level. And there are maybe other differences that I don't know about. But, perhaps most importantly I think, it serves to communicate _intent_, e.g. to a future maintainer of the CSS (and remember, that future maintainer might be you a few months down the road, when the details are no longer fresh in your mind!), or to someone else, e.g. who's helping you. cheers, —ml— __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How to get rid of gaps
Peter Speltz wrote:
If anyone cares to reply: Is using id just a
matter of protection for the developer by limiting them or is there
more to it than that?
NEVER limit the developer.
there is a time for a class
and a time for an id.
such as:
.menuitem { color: #fff; }
#menuholder { border: 1px solid #000; }
div id=menuholder
a class=menuitem href=link1.htmlLink1/a
a class=menuitem href=link2.htmlLink2/a
/div
there is much more in the css-discuss wiki.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How to get rid of gaps
On 9/1/05, Mark Lundquist [EMAIL PROTECTED] wrote: On Sep 1, 2005, at 11:34 AM, Peter Speltz wrote: If anyone cares to reply: Is using id just a matter of protection for the developer by limiting them or is there more to it than that? It makes a difference at the JavaScript DOM level. And there are maybe other differences that I don't know about. But, perhaps most importantly I think, it serves to communicate _intent_, e.g. to a future maintainer of the CSS (and remember, that future maintainer might be you a few months down the road, when the details are no longer fresh in your mind!), or to someone else, e.g. who's helping you. cheers, ml Ahh, yes. Intent. That is the word i was looking for rather than *limit*. As a programmer , i fully appreciate code that demonstrates how it is intended to be used. Thanks all and i will check out the wiki when i get a chance. -- pjs __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How to get rid of gaps
Hi all. I'm having a similar problem. I'm using Firefox on a PC for
starters. Despite 0margins, 0 padding,I have gaps that i do not
understand between images that make up my banner. I've been reading
CSS , The definitive guide for several weeks and from what i can tell,
if margin is 0, there should not be space with background showing
through between inline elements. Is that right?If i float them
it looks as it should in Firefox however my new Opera browser :)
insists on gaps either way.Am I missing something?
Confused,
Pjs
P.S. Here is the style used for all three images:
img.logo {
border: none;
margin:0px ;
padding: 0px;
/*float: left; fixes it in Firefox PC */
}
div.logobar {
width: 800px;
height: 84px;
padding: 0;
margin:0px auto;
}
Here is the markup:
html
body
div class=logobar
img class=logo src=images/logo_piece_1.jpg
img class=logo src=images/logo_piece_2.jpg
img class=logo src=images/logo_piece_3.jpg
/div
/body
/html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] How to get rid of gaps
From: Peter Speltz ...Firefox on a PC... I have gaps that i do not understand between images that make up my banner. div class=logobar img class=logo src=images/logo_piece_1.jpg img class=logo src=images/logo_piece_2.jpg img class=logo src=images/logo_piece_3.jpg /div Peter, Whitespace in your markup is the culprit. Try something like: div class=logobar img class=logo src=images/logo_piece_1.jpgimg class=logo src=images/logo_piece_2.jpgimg class=logo src=images/logo_piece_3.jpg /div -- Peter Williams __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How to get rid of gaps
Peter Speltz wrote:
Hi all. I'm having a similar problem. I'm using Firefox on a PC for
starters. Despite 0margins, 0 padding,I have gaps that i do not
understand between images that make up my banner. I've been reading
img.logo {
border: none;
margin:0px ;
padding: 0px;
/*float: left; fixes it in Firefox PC */
}
Peter gave you the answer for the extra space already, but I'd like to add
that you do not really need class=logo in the markup because you can get
to the images through:
.logobar img {}
instead of:
img.logo {}
HTH,
Thierry | www.TJKDesign.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How to get rid of gaps
Diane Porter wrote: In the page I'm working on, http://www.aranyani.org/8-13A.html, in Safari and Firefox, gaps appear between the banner picture and the content below. I found a suggestion in the css-discuss archives to style the image and mark it display: block. I did that, and the effect is that now in IE the image disappears entirely. In the other two browsers the gap persists. Another problem that I suspect has the same root: in the left (blue) column, the image that forms the heading does not fit tightly against the top of the column. Neither of these problems is apparent in my editor, but they both show up in all the browsers I try. I'm sure this is a very kindergarten question, and I apologize for bothering you with it, but I'm stumped. Diane Porter Diane, Changing the markup may resolve the problems: !-- pimg src=images/trees_sky760.jpg alt=empty width=760 height=131 //p -- img src=trees_sky760.jpg alt= width=760 height=131 / !-- h2img src=anaturejournal.jpg alt=A Nature Journal width=230 height=53 //h2 -- img src=anaturejournal.jpg alt=A Nature Journal width=230 height=53 / You did not ask about other considerations than your immediate situation, so I did not respond accordingly.. Regards, David Laakso -- David Laakso http://www.dlaakso.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How to get rid of gaps
David Laakso wrote: Diane Porter wrote: In the page I'm working on, http://www.aranyani.org/8-13A.html, in Safari and Firefox, gaps appear between the banner picture and the content below. I found a suggestion in the css-discuss archives to style the image and mark it display: block. I did that, and the effect is that now in IE the image disappears entirely. In the other two browsers the gap persists. Another problem that I suspect has the same root: in the left (blue) column, the image that forms the heading does not fit tightly against the top of the column. Neither of these problems is apparent in my editor, but they both show up in all the browsers I try. I'm sure this is a very kindergarten question, and I apologize for bothering you with it, but I'm stumped. Diane Porter Diane, Changing the markup may resolve the problems: Whoops: In other words delete the p/penclosing the first image; and the h2/h2 enclosing the second image. !-- pimg src=images/trees_sky760.jpg alt=empty width=760 height=131 //p -- img src=trees_sky760.jpg alt= width=760 height=131 / !-- h2img src=anaturejournal.jpg alt=A Nature Journal width=230 height=53 //h2 -- img src=anaturejournal.jpg alt=A Nature Journal width=230 height=53 / You did not ask about other considerations than your immediate situation, so I did not respond accordingly.. Regards, David Laakso -- David Laakso http://www.dlaakso.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How to get rid of gaps
Diane Porter wrote: http://www.aranyani.org/8-13A.html, in Safari and Firefox, gaps appear between the banner picture and the content below. That's the default margins on the p you've wrapped the image in. Similar default is creating gaps around the image inside h2. Start out with 'margin: 0;' on the p and h2, and the gaps will disappear. You may also simply delete the p and h2, as those images don't need wrappers in that page. 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/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
