When I create DIV's on top of each other, often I find that there will be small gaps between them, of three or four pixels. I don't seem to be able to predict when these will appear though. I have a few div's on top of each other, some have gaps, some don't. Why? What is going on?Do you have an example and browser(s)/version(s) where it occurs?Hi Fang!
Take a look at this..
<!-- m --><a class="postlink" href="http://www.spellowhouse.com/gothic_tshirts_l.htm">http://www.spellowhouse.com/gothic_tshirts_l.htm</a><!-- m -->
This is a standard HTML/CSS page in which a 4 pixel gap appeared underneath the tab menu.
The gap happens between the header_container div and the page container div.
</div><div class="page_container">
Now view the same page generated by PHP, and there is no gap.
<!-- m --><a class="postlink" href="http://www.spellowhouse.com/test_tshirts_l.htm">http://www.spellowhouse.com/test_tshirts_l.htm</a><!-- m -->
The gaps vary depending which browser you use. Oddly, in the html page, IE shows a gap and so does Firefox. In the second, IE does not show the gap, but Firefox does. But I have other examples were this is reversed. I think there is something I am just missing here...Is there suppose to be any difference between the markup and CSS for the two versions? If no, then I see at least some difference in the markup on the PHP generated page.Probably the image element on a seperate line in one version and enclosed within div's in the other:
</div><div class="tabs">
<map name="FPMap1"><area href=http://www.webdeveloper.com/forum/archive/index.php/"index.htm" shape="rect"
coords="21, 4, 117, 21"><area href=http://www.webdeveloper.com/forum/archive/index.php/"gothic_ashtrays.htm" shape="rect"
coords="118, 4, 212, 21"><area href=http://www.webdeveloper.com/forum/archive/index.php/"gothic_backpacks.htm" shape="rect" coords="308, 4, 402, 21"><area href="help.htm" shape="rect" coords="403, 4, 500, 21"></map>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/img_clothing.gif" usemap="#FPMap1" width="521" height="36">
</div></div><div class="page_container">
<div class="left_column">
</div><div class="tabs">
<map name="FPMap1"><area href="index.htm" shape="rect" coords="21, 4, 117, 21"><area href=http://www.webdeveloper.com/forum/archive/index.php/"gothic_ashtrays.htm" shape="rect"
coords="118, 4, 212, 21"><area href=http://www.webdeveloper.com/forum/archive/index.php/"gothic_backpacks.htm" shape="rect" coords="308, 4, 402, 21"><area href="help.htm"
shape="rect" coords="403, 4, 500, 21"></map><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/img_clothing.gif" usemap="#FPMap1" width="521" height="36"></div></div><div class="page_container">
<div class="left_column">
Either make the code output as required(one of above) or try giving the image display:block;Hi all!
Well, I think the answer seems to lie in the div with the img in it.
If I set display:block; then things become a little less messy. The gap vanishes in IE consistantly, although it is still present in Firefox. At least it is predictable in the two - which it wasn't before. It makes me think that the problem is in the header block and not the page block.
I have tried re-arranging the PHP to generate gaps in the HTML and it makes no difference. The problem definitely seems to lie in the CSS not the PHP.Adding disply:block;to the image removes the gap. Tried and tested.Me again.
Originally posted by Fang
Adding disply:block;to the image removes the gap. Tried and tested.
I have a problem rather like Suzanne's, though mine is consistet. I need to play with it more, to understand it. My problem is I'm parrotting without understanding the code, and I have lots of related questions, which I'll bring up one by one (I hope).
Fang, you helped me before, haha! So, now that finally I settled (for now) on a certain layout, and put up all-new pages last night, I can start learning all over again.
If I'm going to try what you suggested to Suzanne (and I plan to), how do I apply style to an image?
is there a class or id way to do it? what would the HTML code look like?
As in:
<img class="nogap" alt= ....>
or something like that?
And what would the CSS look like? Something like
img {
whatever: nogap;
}
or maybe
#header img {
whatever: nogap;
}
Stuff like this happens when one parrots, as I do, without understanding (yet! - but I am learning!)
P.S. I took down my massive, massive layout page, though it's still present on my site, representing an interim layout; I just removed the links to it; it contains credits to several of you here, and can be seen at
<!-- m --><a class="postlink" href="http://www.coherentdog.org/layout.htm">http://www.coherentdog.org/layout.htm</a><!-- m -->
Sun, 13 Mar 2005 11:17:04Welcome back, been on vacation?
All 3 work:
1) applied class to seleted images
2) applied to all document images
3) applied to all images in the element with id header
Checkout this color scheme generator (<!-- m --><a class="postlink" href="http://wellstyled.com/tools/colorscheme2/index-en.html">http://wellstyled.com/tools/colorscheme2/index-en.html</a><!-- m -->)Originally posted by Fang
Welcome back, been on vacation?
All 3 work:
1) applied class to seleted images
2) applied to all document images
3) applied to all images in the element with id header
Okay, so what does the code look like? My examples were wild inventions - or were they?
I've been studying by editing my site files, making them consistent, changing to XHTML 1.0 Strict - all done! I removed some of the sloppier files, but there's still plenty of sloppiness here and there - stuff I don't understand, and will be asking about.
Lost control of my colors, for instance. Question coming up on that one, shortly.
Thanks for the welcome back!
Sun, 13 Mar 2005 11:35:11Just add the required rule for the image.
#header img {
display:block;
border:0;
}
All 3 methods work depending on your requirements.
btw z-index must be unique (you probably don't need it here anyway)as in confusing fall warblers, I have confusing small gaps. The page is:
<!-- m --><a class="postlink" href="http://www.coherentdog.org/dream.htm">http://www.coherentdog.org/dream.htm</a><!-- m -->
It's a three-column layout, with a background image, using the following code, which I don't really understand - I parrotted it, I believe, from A List Apart, in the faux-column article. I changed from having a decorative strip down the left side to using a background .gif to make columns colored all the way down the page (left and right), and I'm using the middle column for content (though I cheated and put an extra .gif on top, in dream.htm).
body {
background: #ccc url("images/leavesblanket-ccc.gif") repeat-y 50% 0;
font-family: Trebuchet,Verdana,Arial,Helvetica,sans-serif;
font-size: 90%;
margin: 0 0 0 20px;
padding: 0;
color : #000;
background-color: #ccc;
z-index: 0;
}
body.bc1 {background:#ccc url("images/logos/blanket-09c.gif") repeat-y 50% 0;}
body.bc2 {background: #9cf url("images/logos/blanket-09c.gif") repeat-y 50% 0;}
body.bc3 {background: #9cf url("images/logos/blanket-c9f.gif") repeat-y 50% 0;}
body.bc4 {background: #9cf url("images/logos/blanket-c0c0c0.gif") repeat-y 50% 0;}
GOSH! If I'd look at my own CSS, I might have seen I had something different there from what I thought (or understood, which means much the same thing).
Anyway, I need to straighten this stuff out. This CSS is over 32K, and has a lot of stuff I'm not using, and I'm about to put all my HTML code in a single file, and then use text search to find out what I can cut out of my codog.css file. There must be lots. Also, I need to learn coding better, to consolidate the file.
I thought I had cmomented out the background statement in the first body statement there - quite apparently not! I'm quoting directly from my version of the codog.css I posted to my site last night.
Qustion 1: what does the "50%" do? I have no idea! I was just trying to find the information on W3C, but am having trouble locating it.
As you can see, I have about four different background .gif files - very easy to make; they're about 8px in height, and I believe 720px wide. So it's a tiled background image, but again, I don't understand the code.
In dream.htm, the .gif laid on top of the background image appears as I want it to in the right-hand column (column 3), but in the left-hand column, in Opera, and I think in FireFox, I see little gaps in the left-hand column between the "leaves.gif"s. The code is exactly the same in the righthand column, yet no gaps appear there.
In IE, I don't see any gaps eevn in the left-hand column.
I'm lost! Hardly know how to ask my question, haha!
Guess I'd better show the HTML also. In dream.htm, it's
<body class="bc1">
I'm probably missing something I should be showing?
Sun, 13 Mar 2005 12:09:19
Take a look at this..
<!-- m --><a class="postlink" href="http://www.spellowhouse.com/gothic_tshirts_l.htm">http://www.spellowhouse.com/gothic_tshirts_l.htm</a><!-- m -->
This is a standard HTML/CSS page in which a 4 pixel gap appeared underneath the tab menu.
The gap happens between the header_container div and the page container div.
</div><div class="page_container">
Now view the same page generated by PHP, and there is no gap.
<!-- m --><a class="postlink" href="http://www.spellowhouse.com/test_tshirts_l.htm">http://www.spellowhouse.com/test_tshirts_l.htm</a><!-- m -->
The gaps vary depending which browser you use. Oddly, in the html page, IE shows a gap and so does Firefox. In the second, IE does not show the gap, but Firefox does. But I have other examples were this is reversed. I think there is something I am just missing here...Is there suppose to be any difference between the markup and CSS for the two versions? If no, then I see at least some difference in the markup on the PHP generated page.Probably the image element on a seperate line in one version and enclosed within div's in the other:
</div><div class="tabs">
<map name="FPMap1"><area href=http://www.webdeveloper.com/forum/archive/index.php/"index.htm" shape="rect"
coords="21, 4, 117, 21"><area href=http://www.webdeveloper.com/forum/archive/index.php/"gothic_ashtrays.htm" shape="rect"
coords="118, 4, 212, 21"><area href=http://www.webdeveloper.com/forum/archive/index.php/"gothic_backpacks.htm" shape="rect" coords="308, 4, 402, 21"><area href="help.htm" shape="rect" coords="403, 4, 500, 21"></map>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/img_clothing.gif" usemap="#FPMap1" width="521" height="36">
</div></div><div class="page_container">
<div class="left_column">
</div><div class="tabs">
<map name="FPMap1"><area href="index.htm" shape="rect" coords="21, 4, 117, 21"><area href=http://www.webdeveloper.com/forum/archive/index.php/"gothic_ashtrays.htm" shape="rect"
coords="118, 4, 212, 21"><area href=http://www.webdeveloper.com/forum/archive/index.php/"gothic_backpacks.htm" shape="rect" coords="308, 4, 402, 21"><area href="help.htm"
shape="rect" coords="403, 4, 500, 21"></map><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/img_clothing.gif" usemap="#FPMap1" width="521" height="36"></div></div><div class="page_container">
<div class="left_column">
Either make the code output as required(one of above) or try giving the image display:block;Hi all!
Well, I think the answer seems to lie in the div with the img in it.
If I set display:block; then things become a little less messy. The gap vanishes in IE consistantly, although it is still present in Firefox. At least it is predictable in the two - which it wasn't before. It makes me think that the problem is in the header block and not the page block.
I have tried re-arranging the PHP to generate gaps in the HTML and it makes no difference. The problem definitely seems to lie in the CSS not the PHP.Adding disply:block;to the image removes the gap. Tried and tested.Me again.
Originally posted by Fang
Adding disply:block;to the image removes the gap. Tried and tested.
I have a problem rather like Suzanne's, though mine is consistet. I need to play with it more, to understand it. My problem is I'm parrotting without understanding the code, and I have lots of related questions, which I'll bring up one by one (I hope).
Fang, you helped me before, haha! So, now that finally I settled (for now) on a certain layout, and put up all-new pages last night, I can start learning all over again.
If I'm going to try what you suggested to Suzanne (and I plan to), how do I apply style to an image?
is there a class or id way to do it? what would the HTML code look like?
As in:
<img class="nogap" alt= ....>
or something like that?
And what would the CSS look like? Something like
img {
whatever: nogap;
}
or maybe
#header img {
whatever: nogap;
}
Stuff like this happens when one parrots, as I do, without understanding (yet! - but I am learning!)
P.S. I took down my massive, massive layout page, though it's still present on my site, representing an interim layout; I just removed the links to it; it contains credits to several of you here, and can be seen at
<!-- m --><a class="postlink" href="http://www.coherentdog.org/layout.htm">http://www.coherentdog.org/layout.htm</a><!-- m -->
Sun, 13 Mar 2005 11:17:04Welcome back, been on vacation?
All 3 work:
1) applied class to seleted images
2) applied to all document images
3) applied to all images in the element with id header
Checkout this color scheme generator (<!-- m --><a class="postlink" href="http://wellstyled.com/tools/colorscheme2/index-en.html">http://wellstyled.com/tools/colorscheme2/index-en.html</a><!-- m -->)Originally posted by Fang
Welcome back, been on vacation?
All 3 work:
1) applied class to seleted images
2) applied to all document images
3) applied to all images in the element with id header
Okay, so what does the code look like? My examples were wild inventions - or were they?
I've been studying by editing my site files, making them consistent, changing to XHTML 1.0 Strict - all done! I removed some of the sloppier files, but there's still plenty of sloppiness here and there - stuff I don't understand, and will be asking about.
Lost control of my colors, for instance. Question coming up on that one, shortly.
Thanks for the welcome back!
Sun, 13 Mar 2005 11:35:11Just add the required rule for the image.
#header img {
display:block;
border:0;
}
All 3 methods work depending on your requirements.
btw z-index must be unique (you probably don't need it here anyway)as in confusing fall warblers, I have confusing small gaps. The page is:
<!-- m --><a class="postlink" href="http://www.coherentdog.org/dream.htm">http://www.coherentdog.org/dream.htm</a><!-- m -->
It's a three-column layout, with a background image, using the following code, which I don't really understand - I parrotted it, I believe, from A List Apart, in the faux-column article. I changed from having a decorative strip down the left side to using a background .gif to make columns colored all the way down the page (left and right), and I'm using the middle column for content (though I cheated and put an extra .gif on top, in dream.htm).
body {
background: #ccc url("images/leavesblanket-ccc.gif") repeat-y 50% 0;
font-family: Trebuchet,Verdana,Arial,Helvetica,sans-serif;
font-size: 90%;
margin: 0 0 0 20px;
padding: 0;
color : #000;
background-color: #ccc;
z-index: 0;
}
body.bc1 {background:#ccc url("images/logos/blanket-09c.gif") repeat-y 50% 0;}
body.bc2 {background: #9cf url("images/logos/blanket-09c.gif") repeat-y 50% 0;}
body.bc3 {background: #9cf url("images/logos/blanket-c9f.gif") repeat-y 50% 0;}
body.bc4 {background: #9cf url("images/logos/blanket-c0c0c0.gif") repeat-y 50% 0;}
GOSH! If I'd look at my own CSS, I might have seen I had something different there from what I thought (or understood, which means much the same thing).
Anyway, I need to straighten this stuff out. This CSS is over 32K, and has a lot of stuff I'm not using, and I'm about to put all my HTML code in a single file, and then use text search to find out what I can cut out of my codog.css file. There must be lots. Also, I need to learn coding better, to consolidate the file.
I thought I had cmomented out the background statement in the first body statement there - quite apparently not! I'm quoting directly from my version of the codog.css I posted to my site last night.
Qustion 1: what does the "50%" do? I have no idea! I was just trying to find the information on W3C, but am having trouble locating it.
As you can see, I have about four different background .gif files - very easy to make; they're about 8px in height, and I believe 720px wide. So it's a tiled background image, but again, I don't understand the code.
In dream.htm, the .gif laid on top of the background image appears as I want it to in the right-hand column (column 3), but in the left-hand column, in Opera, and I think in FireFox, I see little gaps in the left-hand column between the "leaves.gif"s. The code is exactly the same in the righthand column, yet no gaps appear there.
In IE, I don't see any gaps eevn in the left-hand column.
I'm lost! Hardly know how to ask my question, haha!
Guess I'd better show the HTML also. In dream.htm, it's
<body class="bc1">
I'm probably missing something I should be showing?
Sun, 13 Mar 2005 12:09:19