I did have the layout almost the way I wanted it. Then, I made a minor margin size change on the style sheet that logically should not have had the effect on the layout that it did.
<!-- m --><a class="postlink" href="http://www.maps-gps-info.com/landingcss.html">http://www.maps-gps-info.com/landingcss.html</a><!-- m -->
Everything below the image caption is supposed to be on the right side of the block. I restored the style sheet to its original state but the result did not go back to the way I wanted it.
Any help solving this mystery would be appreciated.You're going to have to put the image and the text in seperate divs, the float the image left, and the text right. Then, you will need to put the following at the bottom of each "block" div:
<hr style="clear: both; height: 0; width: 0; border: 0; margin: 0; padding: 0;" />Thank you, Daniel T. That got me closer to what I wanted.
<!-- m --><a class="postlink" href="http://www.maps-gps-info.com/landingcss.html">http://www.maps-gps-info.com/landingcss.html</a><!-- m -->
But now I have 4 questions (and I've been playing with this ever since you posted).
1) How can I get the caption below the image to be centered or left-aligned with the image?
2) How can I get "Click here to read the review" all on one line?
3) Is there a way to eliminate much of the empty space below the text?
4) What the #!$* is wrong with it that it looks totally screwy in Netscape?
Updated .zip file attached.
I know this is asking a lot - I'll buy you a case of beer or something.1. In your .imgcap class, put one of these:
text-align: center;
text-align: left;
text-align: right;
text-align: justify;
2. Add this to your stylesheet:
.block div.intro p {
width: 100%;
padding: 0;
margin: 0 auto;
}
3. Well, that could be a result of not entering margin or padding attributes correctly. Rather than putting a semicolon in between the four attributes, just leave a space. For example:
Your way: margin: 10px; 10px; 0px; 0px;
Correct way: margin: 10px 10px 0 0;
Or, in this case, you could make it easier: margin: 10px 0;
4. It is a result of IE not getting its box model correct. In IE, padding is not included in the width of the object, but in real browsers like Netscape, it is (that is the correct way). I will look over your code and try to fina a way make it work with all browsers.
Originally posted by myrrh
I'll buy you a case of beer or something.
Ooooh awesome!! And it'll age real nicely in the five years it'll take for me to be old enough to drink it!
(well, drink it legally, that is
)
-DanOriginally posted by Daniel T
Ooooh awesome!! And it'll age real nicely in the five years it'll take for me to be old enough to drink it!
(well, drink it legally, that is)
-Dan
Sometimes I just feel so old...
<!-- m --><a class="postlink" href="http://www.maps-gps-info.com/landingcss.html">http://www.maps-gps-info.com/landingcss.html</a><!-- m -->
Everything below the image caption is supposed to be on the right side of the block. I restored the style sheet to its original state but the result did not go back to the way I wanted it.
Any help solving this mystery would be appreciated.You're going to have to put the image and the text in seperate divs, the float the image left, and the text right. Then, you will need to put the following at the bottom of each "block" div:
<hr style="clear: both; height: 0; width: 0; border: 0; margin: 0; padding: 0;" />Thank you, Daniel T. That got me closer to what I wanted.
<!-- m --><a class="postlink" href="http://www.maps-gps-info.com/landingcss.html">http://www.maps-gps-info.com/landingcss.html</a><!-- m -->
But now I have 4 questions (and I've been playing with this ever since you posted).
1) How can I get the caption below the image to be centered or left-aligned with the image?
2) How can I get "Click here to read the review" all on one line?
3) Is there a way to eliminate much of the empty space below the text?
4) What the #!$* is wrong with it that it looks totally screwy in Netscape?
Updated .zip file attached.
I know this is asking a lot - I'll buy you a case of beer or something.1. In your .imgcap class, put one of these:
text-align: center;
text-align: left;
text-align: right;
text-align: justify;
2. Add this to your stylesheet:
.block div.intro p {
width: 100%;
padding: 0;
margin: 0 auto;
}
3. Well, that could be a result of not entering margin or padding attributes correctly. Rather than putting a semicolon in between the four attributes, just leave a space. For example:
Your way: margin: 10px; 10px; 0px; 0px;
Correct way: margin: 10px 10px 0 0;
Or, in this case, you could make it easier: margin: 10px 0;
4. It is a result of IE not getting its box model correct. In IE, padding is not included in the width of the object, but in real browsers like Netscape, it is (that is the correct way). I will look over your code and try to fina a way make it work with all browsers.
Originally posted by myrrh
I'll buy you a case of beer or something.
Ooooh awesome!! And it'll age real nicely in the five years it'll take for me to be old enough to drink it!
(well, drink it legally, that is
)-DanOriginally posted by Daniel T
Ooooh awesome!! And it'll age real nicely in the five years it'll take for me to be old enough to drink it!
(well, drink it legally, that is
)-Dan
Sometimes I just feel so old...