I was uploading some content to our church website and thought of a great simple idea for the pastors’ bios. The idea was to have a border around each bio and float the header over the border. I’m sure I’ve seen it lot’s of places and it’s so simple, it only took me a couple minutes to implement the necessary CSS. That is, until I tested it in IE. It broke up all over the place! It was late, so I went to bed and didn’t sleep well leaving something unsolved.
The next day, I made up a simple html page with the same basic CSS and had the same problem. The borders from the bottom bios were mostly gone and the top bio had some of the remnants littering its content. There was also a problem when I implemented width, which caused the header to jump up over the border in IE. Take a look at the CSS floating header problem and my workaround (You’ll have to view them in IE to get the “special effect”).
What I want to know is why IE has a problem removing the bottom margin on a floating header. Actually, I really want to know why it can’t handle simple CSS. Am I doing something wrong? If anyone can take a look at the code and let me know what’s happening, I would be grateful.
I would like to thank God (yes, God) for the workaround on this one. The night before, after cell group, I prayed and realized that God wants to design websites along with me. He cares about that area of my life too and if it’s really ministry, then of course He’s involved. I had no internet connection at work in the morning and turned to God for help. I think He likes when we involve Him in what we’re doing and give Him credit for accomplishments. He made the mind after all!