Updates and steps back
With the 3 new projects I am about to embark on in one sweep, I thought I should get my affairs into order first. As my time developing this site will be restricted for a number of weeks, I decided to fix a couple of CSS and design issues I had. The most challenging thing I finally got fixed was a problem with overlapping floats. If I posted a picture into a small amount of text, it would overlap into the next post and shift the text fouling my layout. I was prompted to take action on this as it was an instant issue on my Videos page! This is now fixed as you can see in the post about the Curta below… the box is the height of the image. I believe that my fix will work in all known browsers which is a plus although I have only tested in Firefox and IE. The step back was when I had made my changes and I cut all the text from the Curta post to try the solution… problem was that I then went and cut & pasted some more code and lost all of the original text… nightmare 
! Luckily I was able to write a more concise posting without fear of the image ending up half inside the Tickle-me-Laserjet post!
The other thing I have got around to is the style of the comments which was standard before. As I have just implemented Gravatars into the site… I thought I should sort out the formatting. I am now pleased with the style of this area… leave some comments to try it out!!
Additional Related Entries
New UpdatesSoftware updates worth noting
Clickable Plot
The compulsory post
Been here before
#1
Did you get around the CSS “floating over everything” issue by floating the inside element (the image) and having the surrounding element (the post) as displaying in a block? e.g.:
Comment by GrinGod — 19/1/2005 @ 9:12 am
#2
It appears that my HTML was stripped out… lets try that again:
<div id="post" style="display: block">
<img src="..." style="float: left">
</div>
Comment by GrinGod — 19/1/2005 @ 9:14 am
#3
My god… I have ruined my site… just saw the comments area in IE!!! Forgot to look at that… actually I solved the floating issue after about 3 days of googling! I would have posted the code but it kept fouling up… basically I have a new CSS class called .clearbox as follows
}
.clearbox:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
This uses the CSS2 option ‘after’ to basically put something at the end and hide it whilst clearing both ways. For IE Mac I also added;
.clearbox {display: inline-table;}
/* Hides from IE-mac */
* html .clearbox {height: 1%;}
.clearbox {display: block;}
/* End hide from IE-mac */
By adding the height element it triggers IE’s auto enclose ‘feature/non-compliance’!!
To use you simply add the clearbox class to any tag you want it to work on…e.g
<div class=”stylex clearbox”>
I have had to break my nice comments layout this morning to accomodate IE but I will get it back this evening!!
Comment by Phrixus — 19/1/2005 @ 9:39 am