Alternative CSS

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

Code:

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%;
}

HTML Code:

<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

Code:

#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!

Thread: Alternative CSS

Thread Tools

Search Thread

Alternative CSS

The Following User Says Thank You to BLiZZaRD For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions