Alternative CSS [Archive] - Dynamic Drive Forums

jhatter

04-26-2010, 02:01 PM

Please can someone suggest some alternative CSS or a fix for the CSS I have posted below.

It doesn't display correctly in IE 6 or 7 - the text flows below the bullet-point graphic that appears on the left. In Safari, FF and IE 8 it displays correctly aligned left and doesn't flow below the graphic.

Also can you please make a suggestion so the the top of the text aligns with the top of the graphic - at the moment there is a space of several pixels.

Thanks.

PS arrow_button.png is 31px x 28px

body {
margin:0px;
padding:0px;
background-color:#CCCCCC;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 24px;
}

.column1 {
float:left;
width:510px;
padding-right:20px;
padding-left: 51px;
display:inline;
}

ul.work {
margin:0px; padding:0px;
}
ul.work li {
list-style:none;
margin:0px; padding:0px;
clear:both;
}
ul.work li {
color:#4b4b4b;
display:block;
padding:0px 0px 20px 0px;
text-decoration:none;
font-size:14px;
left: 200px;
}
ul.work li img {
float:left;
padding-right: 10px;
display:inline;
}
ul.work li h4 {
color:#4b4b4b;
margin:0px;
font-weight:bold;
font-size:14px;
line-height: 130%;
}

<body>

<div class="column1">
<ul class="work">
<li> <img src="images/arrow_button.png" />
<h4>Bullet point copy to go here. Bullet point copy to go here. Bullet point copy to go here.</h4>
</li>
<li> <img src="images/arrow_button.png" />
<h4>Bullet point copy to go here. Bullet point copy to go here. Bullet point copy to go here.</h4>
</li>
<li> <img src="images/arrow_button.png" />
<h4>Bullet point copy to go here. Bullet point copy to go here. Bullet point copy to go here.</h4>
</li>
<li> <img src="images/arrow_button.png" />
<h4>Bullet point copy to go here. Bullet point copy to go here. Bullet point copy to go here.</h4>
</li>
</ul>
</div>
</body>

jhatter

04-27-2010, 10:44 AM

I have sorted the text flow problem by increasing the height of the .png file to 65px.

The problem of the horizontal alignment of the text in ie6&7 remains. (In Safari and IE8 the top of the text aligns with the top of the graphic, but in 6&7 it aligns with nearly the bottom of the graphic)

Can anyone make any suggestions please?

BLiZZaRD

04-27-2010, 08:19 PM

#DIV_ID img {
vertical-align: middle;
}

Or top. or bottom.. where ever you want it...

Your DIV_ID appears it will be "ul.work li"

jhatter

04-29-2010, 09:14 AM

Thanks!