Recent Topics

1 Apr 09, 2006 23:37    

Aight, here's my issue. I've created some CSS to add a contributors section to my left column on www.autodogmatic.com. I've managed to get it the way I want on Firefox, but it's not right on Internet Explorer. I've also managed to get it right with IE but not firefox. Here's my css code:


.contributors {
margin: 0 0 30px 0;
font-size: 70%;
padding: 2px;
width: 140px;
background-color: #fff;
}
.contributors ul {
       list-style: none;
width: 150px;
margin: 0 0 0 0;
padding: 0;
font-size: 1.1em;
}
.contributors ul li {
line-height: 80px;
margin-bottom: 4px;
}
.contributors img.left {
float: left;
margin: 0;
}

Here's my main code:

<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></li>
<li><center><b><font size="2"><a href="http://www.autodogmatic.com/index.php/a/2006/03/22/nealbio" title="Who is this Neal guy??">Neal</a></font></b></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><b><font size="2"><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></font></b></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><b><font size="2"><a href="http://www.autodogmatic.com/index.php/a/2006/03/22/nealbio" title="T/ether is tricky like that">T/ether</a></font></b></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><b><font size="2"><a href="http://www.autodogmatic.com/index.php/a/2006/03/22/nealbio" title="Read about the Los">Carlos</a></font></b></center></li></ul>
</div>

I'm really hoping somebody can provide a suggestion. My goal is to get it like it looks in Firefox now but also on IE (freakin' IE!). Any ideas??

2 Apr 10, 2006 04:17

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..

<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></li>
<li><center><b><font size="2"><a href="http://www.autodogmatic.com/index.php/a/2006/03/22/nealbio" title="Who is this Neal guy??">Neal</a></font></b></center></li> 

which simply needs to be...

<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><a href="http://www.autodogmatic.com/index.php/a/2006/03/22/nealbio" title="Who is this Neal guy??">Neal</a></li>

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

3 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 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 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.


Form is loading...