Hi everyone. I'm JavieR, webmaster of
The Futurama Point
I'm working on my first CSS tabeless design (at least the main design)
[01]
The problem is the news articles (that I wanted to change to full CSS too). At first, I created this news entry simple page:
http://slurmed.com/_des/013/UPDT_00.php
Using this code for the update part [file:
UPDT_00.php]:
HTML Code:
<div class="updt">
<div class="updt_avatar">AVATAR</div>
<div class="updt_title">This is the title of the update<br />
This one more title line just in case... </div>
<div class="updt_name">Name [ February 31 ,2008 ]</div>
<div class="updt_txt">
<img src="_des/013/m_movies.png" width="61" height="200" align="left" />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
<div class="updt_footer">
<div class="updt_f_left">back to top^</div>
<div class="updt_f_right">[A] [ADDTHIS +]</div>
</div>
</div>
and this CSS [file:
updt_00.css]
Code:
@charset "utf-8";
/* CSS Document */
.updt {
margin-bottom: 12px;
}
/* -----------------update title--------------------- */
.updt_title {
padding: 2px;
font-weight: bold;
color:#FFF;
background-color:#272F34;
height:40px;
border-bottom:1px solid #FFF;
}
/* -----------------update name--------------------- */
.updt_name {
padding:2px;
color:#181E23;
background-color:#81939E;
height:16px;
text-align:right;
font-size:11px;
letter-spacing:0.15em !important;
}
/* -----------------update txt--------------------- */
.updt_txt {
padding:3px;
display:block;
}
.updt_txt img {
padding:2px;
}
/* -----------------update footer--------------------- */
.updt_footer {
padding:2px;
color:#181E23;
background-color:#81939E;
height:15px;
font-size:11px;
}
/* -----update left footer (back to top)----- */
.updt_f_left {
float:left;
padding-left:2px;
letter-spacing:0.15em;
}
.updt_f_left a {
color:#FFF;
text-decoration:none;
}
.updt_f_left a:hover {
color:#000;
}
/* -----update right footer (permalink, addthis)----- */
.updt_f_right {
float:right;
padding-right:2px;
}
/* -----------------update avatar--------------------- */
.updt_avatar {
float:left;
position:relative;
height:65px;
width:92px;
background-color:#FF0000;
}
I relized then that the image of the update in some cases overlaps the footer part (the bottom gray part of "back to top").. Example:
[02]
So, the only change I made to the CSS, is adding the
clear:both property to the
.updt_footer class:
Code:
/* -----------------update footer--------------------- */
.updt_footer {
padding:2px;
color:#181E23;
background-color:#81939E;
height:15px;
font-size:11px;
clear:both;
}
...and this was the result:
[file:
UPDT_01.php] + [file:
updt_01.css]:
http://slurmed.com/_des/013/UPDT_01.php
[03]
Now the image is not overlapping the footer section like I wanted.. but, if I add this code to the main design (that also has the
updt_01.css CSS file):
http://slurmed.com/index13_09.php?p=...3/UPDT_01_MAIN
[where UPDT_01_MAIN.php = UPDT_01.php]
Only the 1st news item has a big space empty between the text and the footer (looking at it with Firefox or Opera, that render CSS properly).
Example:
This also happens if you visit the news13 page (that is the one that handles the real news items):
http://slurmed.com/index13_09.php?p=news13
Now, I don't know how to fix this.. the problem only appears when I include the update page example in the main CSS design, and only in Firefox and Opera (in IE7 looks fine, but I now that IE interprets wrong HTML and CSS). Maybe I understood the
clear property wrong.
If you know how to fix this or if you know a better way to make the updates entries in CSS please let me know.
Thanks in advance!.
