Hello all,
I'm giving the whole CSS layout a whirl for the first time and I"m running into several problems, which I've been able to get around until this one.
I have a container that has other containers within it. I want the first sub-container to have a top padding to pseudo-v-align the text in the box, but in Firefox the container below it is getting a space/gap. It dissappears when I remove the padding.
I also tried making the first sub-container smaller equivelent to the padding, but I didn't get my whole background image in IE then....errrr.
Any ideas? I've added some background colors so you could see better what is going on...Thanks!
Website (<!-- m --><a class="postlink" href="http://multiprint.de-mystify.com/layout_v2_2.php">http://multiprint.de-mystify.com/layout_v2_2.php</a><!-- m -->)
CSS (<!-- m --><a class="postlink" href="http://multiprint.de-mystify.com/v2_2.css">http://multiprint.de-mystify.com/v2_2.css</a><!-- m -->)Get rid of the height: 29px; in the .linkBar declaration. You don't need it. And if you do, you're using too much absolute and relative positioning.Thanks toicontien,
I got rid of it and used padding to stretch the bar enough for the background img, which is within a pixel between FF and IE6, so it's fine. Probably still have too much absolute and relative though...lol. Thanks again...
---------------------------
--You're an expert aren't you Tyrone?
--"Of course I am!"What you could also do is ditch the padding in the element and set the line-height to 29px instead.Okay, that's working good now.
Next, I'm getting a 1 pixel difference between 2 floats that is cause a change in the flow. It displays correct in FF, but not IE (go figure).
Any help?
Site (<!-- m --><a class="postlink" href="http://multiprint.de-mystify.com/layout_v3.php">http://multiprint.de-mystify.com/layout_v3.php</a><!-- m -->)
CSS (<!-- m --><a class="postlink" href="http://multiprint.de-mystify.com/v3.css">http://multiprint.de-mystify.com/v3.css</a><!-- m -->)
Thanks again,
Philip.r3c1Container does not have a width set. While the standards dictate that floated elements should be as wide as the longest non-wrapped line of text (i.e. as narrow as possible) IE-Win may not be sizing the DIV with the flash object correctly. Try giving .r3c1Container the same width as .r4c1Container.Thanks alot for your help. I put 3 days into trying to make this my first fulling CSS positioned site, but I've ran out of time and have to go back to a happy mix of tables/css to get the project finished. Perhaps the design was just too complicated to really start out with.
PhilipCSS design has a sharp learning curve. Keep at it, but when it comes to bringing home the bread, stick to what will make you money at this point. Once you're more familiar and comfortable with CSS design start doing that professionally. In the meantime, try A List Apart (<!-- m --><a class="postlink" href="http://www.alistapart.com/">http://www.alistapart.com/</a><!-- m -->) for great how-to articles.Thanks a million toicontien.
I'm giving the whole CSS layout a whirl for the first time and I"m running into several problems, which I've been able to get around until this one.
I have a container that has other containers within it. I want the first sub-container to have a top padding to pseudo-v-align the text in the box, but in Firefox the container below it is getting a space/gap. It dissappears when I remove the padding.
I also tried making the first sub-container smaller equivelent to the padding, but I didn't get my whole background image in IE then....errrr.
Any ideas? I've added some background colors so you could see better what is going on...Thanks!
Website (<!-- m --><a class="postlink" href="http://multiprint.de-mystify.com/layout_v2_2.php">http://multiprint.de-mystify.com/layout_v2_2.php</a><!-- m -->)
CSS (<!-- m --><a class="postlink" href="http://multiprint.de-mystify.com/v2_2.css">http://multiprint.de-mystify.com/v2_2.css</a><!-- m -->)Get rid of the height: 29px; in the .linkBar declaration. You don't need it. And if you do, you're using too much absolute and relative positioning.Thanks toicontien,
I got rid of it and used padding to stretch the bar enough for the background img, which is within a pixel between FF and IE6, so it's fine. Probably still have too much absolute and relative though...lol. Thanks again...
---------------------------
--You're an expert aren't you Tyrone?
--"Of course I am!"What you could also do is ditch the padding in the element and set the line-height to 29px instead.Okay, that's working good now.
Next, I'm getting a 1 pixel difference between 2 floats that is cause a change in the flow. It displays correct in FF, but not IE (go figure).
Any help?
Site (<!-- m --><a class="postlink" href="http://multiprint.de-mystify.com/layout_v3.php">http://multiprint.de-mystify.com/layout_v3.php</a><!-- m -->)
CSS (<!-- m --><a class="postlink" href="http://multiprint.de-mystify.com/v3.css">http://multiprint.de-mystify.com/v3.css</a><!-- m -->)
Thanks again,
Philip.r3c1Container does not have a width set. While the standards dictate that floated elements should be as wide as the longest non-wrapped line of text (i.e. as narrow as possible) IE-Win may not be sizing the DIV with the flash object correctly. Try giving .r3c1Container the same width as .r4c1Container.Thanks alot for your help. I put 3 days into trying to make this my first fulling CSS positioned site, but I've ran out of time and have to go back to a happy mix of tables/css to get the project finished. Perhaps the design was just too complicated to really start out with.
PhilipCSS design has a sharp learning curve. Keep at it, but when it comes to bringing home the bread, stick to what will make you money at this point. Once you're more familiar and comfortable with CSS design start doing that professionally. In the meantime, try A List Apart (<!-- m --><a class="postlink" href="http://www.alistapart.com/">http://www.alistapart.com/</a><!-- m -->) for great how-to articles.Thanks a million toicontien.