1 nealo Apr 09, 2006 23:37
3 nealo Apr 10, 2006 04:57
John, thanks for the tips. I took out the font and bold stuff and fixed it in the css. I also changed the div widght for the ul to 150 for the css. Finally, I downloaded and installed IE 7 beta and went to www.autodogmatic.com. Unfortunately, it's still spacing out graphics and words on their own lines instead of both one graphic/one word per list tag. Firefox is still working.
Here's the current relevant css:
.contributors {
margin: 0 0 30px 0;
font-size: 80%;
font-weight: bold;
padding: 2px;
width: 150px;
background-color: #fff;
}
.contributors ul {
list-style: none;
width: 150px;
margin: 0;
padding: 0;
}
.contributors ul li {
line-height: 80px;
margin: 0;
padding: 0;
}
.contributors img.left {
float: left;
margin: 0;
padding: 0;
}
Here's the main:
<div class="contributors">
<h5>Contributors:</h5>
<ul><li><a href="http://www.autodogmatic.com/index.php/a/2006/03/22/nealbio" title="Who is this Neal guy??"><img class="left" src="http://www.autodogmatic.com/images/graphics/nealava.jpg" /></a>
<center><a href="http://www.autodogmatic.com/index.php/a/2006/03/22/nealbio" title="Who is this Neal guy??">Neal</a></center></li>
<li><a href="http://www.autodogmatic.com/index.php/m/2006/02/01/mattbio" title="Matthaus is a name?"><img class="left" src="http://www.autodogmatic.com/images/graphics/mattava.jpg" /></a>
<center><a href="http://www.autodogmatic.com/index.php/m/2006/02/01/mattbio" title="You're intrigued by a guy named 'Matthaus', I know...">Matthaus</a></center></li>
<li><a href="http://www.autodogmatic.com/index.php/a/2006/03/22/nealbio" title="Tether the Ether, it'll make sense if you read this..."><img class="left" src="http://www.autodogmatic.com/images/graphics/tetava.jpg" /></a>
<center><a href="http://www.autodogmatic.com/index.php/a/2006/03/22/nealbio" title="T/ether is tricky like that">T/ether</a></center></li>
<li><a href="http://www.autodogmatic.com/index.php/a/2006/03/22/nealbio" title="To many, he is known simply as 'The Los'"><img class="left" src="http://www.autodogmatic.com/images/graphics/losava.jpg" /></a>
<center><a href="http://www.autodogmatic.com/index.php/a/2006/03/22/nealbio" title="Read about the Los">Carlos</a></center></li></ul>
</div>
Thoughts?
4 nealo Apr 10, 2006 05:02
John,
I just changed it so the center encapsulated both the image and the writing and that seems to do the trick in IE 7 and Firefox - I gotta check IE 6, but in the meantime, thanks for your help!
Neal
5 john Apr 10, 2006 05:45
Works in IE7, Firefox 2.0a and Opera 9
IE6 may have some issues with the float left for the image, which may need to be cleared after each li but I'm sorry I can't test it.
First thing I would suggest is that you get rid of all the inline font stuff like "<center><b><font size="2">". Style your font in ".contributors ul li " and maybe use nothing more than adding "font-weight:bold;"
I would also look at the width for the "menu" div and "contributors" div (140px), which is narrower than the UL of 150px..
Also fix the first entry..
which simply needs to be...
A quick fiddle makes it work in all modern browsers however I don't have IE6, it does work in IE7.
Seems like div width is a good place for you to start editing the CSS