I know, I know…

So, although yesterday’s AdvisorBits design work looked beautiful in Explorer 6, it broke in Netscape 7 and Opera 6. Problem was that when the content div is floated left, you can’t set the width on the links div. I imagine the content div is floated so that the links div comes after the content div in the code. This will cause it to break gracefully with links at the bottom of the page in browsers that don’t understand css. (Like Netscape on my SGI-O2)
For those of you that don’t use a modern VISUAL browser, I apologize in advance. Maybe I could put in a link that only renders in aural browser that says “Go right to the text”. I read the latest AlertBox, and I think I know wht he’s talkin about. I’m just not sure what to do about this. (And it’s more than enough of a discussion for its own post.)
By swaping the order of the divs, and floating the links div right I get much closer to what I want, in fact it was erie, because Opera rendered more or less like I ultimately wanted it to, but Netscape and IE both gave me what I expected. I am aware that if you use a broswer that doesn’t understand this that you’ll probably get lost.
Or if you resize the browser in such a way that the fixed width of the links div… anyway, the 65% width had to go. By playing with the right margin and padding of the content I was able to get about what I expected in all three browsers. Here’s how the CSS ended up:
#content {
margin-right:95px;
padding-right:95px;
padding-bottom:10px;
background:#ccc;
border-right:1px solid #333;
}
#links {
float:right;
width:150px;
background:#ccc;
margin:5em 10px 10px 10px;
padding:10px;
border: 1px solid #630;
}
Remember that I switched the order of the divs in the index.html template, and I really have to figure out a better way around that. It may validate for CSS but its really ugly for accessible. But now it looks like I want it to. I’m pretty sure it will validate again with only the same warnings about inherited colors.

Comments are closed, but trackbacks and pingbacks are open.