CSS Issues
Little Miss Attila pointed out in a comment that her browser (IE/Mac) rendered this blog so that my right links column was impinging on the text in the main body. I've tried to fix that by defining actual (rather than percentage-based) div and margin widths in the stylesheet; I hope the layout looks OK now. Please comment if it doesn't!
(I already know that my Texas flag banner is broken in Opera - there's a big gap between the blue field and the white and red stripes - but it renders perfectly in IE6/Windows and Firefox, the two browsers that I figure most readers probably use).
If you are a Mac user with Safari or IE (or Firefox!) I would love to hear how the page looks. One reason I'm trying to stick to pure CSS and avoid HTML tables is to prove that an amateur like me can stick to standards and best design practices.
P.S. Attila Girl also helpfully pointed out that I didn't have an email link on my page. I have now fixed that. Please feel free to send me an email if you don't want to leave a public comment.
Too bad the 'professionals' at Microsoft can't stick to the standards and best practices...
Posted by: JP at April 13, 2004 04:54 PMActually, Microsoft has the most logical way to look at the box model... but that's another story.
John, you can also use absolute postioning to place your columns. You can find more information about that at W3Schools... I don't remeber the URL off the top od my head. It's a really good guide for beginners.
Posted by: Madfish Willie at April 13, 2004 06:59 PMMadfish,
Attila Girl's original observation was:
"Thought you'd want to know that the boxes on your sidebar are migrating a little to the left on my display (Mac/IE) and are obscuring some of the text in your entries."Strangely, the code causing that problem was using absolute positioning:
As you can see, except for the variable width (for which I left a 5% margin of error), I nailed down all of the other margins.
#content{
position: absolute;
top: 105px;
left: 5px;
background:#FFF;
border:2px solid #000;
width:70%;
}
#links{
position: absolute;
top:105px;
right:5px;
background-color#b0c4de;
padding:15px;
width:25%;
}
I hope Attila Girl (or another Mac IE user) can let me know whether my new code works.
Thanks for the comment!