4 replies [Last post]
yari
Offline
Regular
Byron Bay, Australia
Last seen: 14 years 9 weeks ago
Byron Bay, Australia
Timezone: GMT+10
Joined: 2005-08-17
Posts: 32
Points: 0

Hi,

I have this almost-ready-to-go website, but some arrows I am positioning using CSS aren't looking too good in IE6.

The test url is: http://www.phoenixdigital.com.au/oze/

The site is validated for CSS and HTML.

Basically, each paragraph has a <h2> tag for its title, and a orange arrow that sits to the left of this using the css margin attribute.

All well and good on a one-line <h2> title, but when the <h2> title wraps to the next line, the arrow does not line up anymore in IE6 or 7 on the PC.

Of course Firefox, opera, safari has no trouble with this, and on close inspection I suspect that the <h2> is moving up and down (vertically centering?) instead of just down on IE...

Is there any way around this?

Thanks.

Yari

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Arrows not lining up in IE6...

Is there a reason not to put the image as a background-image? It doesn't add anything to the content, so should really be in the background.

Try something like

h2 {
background: url(images/arrow.gif) top left no-repeat;
margin-left: -10px;
padding-left: 10px;
}

yari
Offline
Regular
Byron Bay, Australia
Last seen: 14 years 9 weeks ago
Byron Bay, Australia
Timezone: GMT+10
Joined: 2005-08-17
Posts: 32
Points: 0

Arrows not lining up in IE6...

Wow, never even though of that!

Will try it and let you know how I go.

Thanks muchly!

yari
Offline
Regular
Byron Bay, Australia
Last seen: 14 years 9 weeks ago
Byron Bay, Australia
Timezone: GMT+10
Joined: 2005-08-17
Posts: 32
Points: 0

Arrows not lining up in IE6...

Hmmm, that works for the arrows, but they are still not lining up.

I haven't put them up for now, as the problem seems to be the <h2> tag moving about once its on two lines... any only in IE.

So instead of the line moving down when it wraps, it moves UP and DOWN!! Bloody IE.

Is there any way to make the text wrap DOWN.?

Thanks again.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 1 week ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Arrows not lining up in IE6...

Have you done something like this:

h2 {
	color: #FFAD01;
	font-size: 12px;
	margin: 10px 0px -10px -20px;
	padding-left: 20px;
	overflow: auto;
	background: url(/index.php_files/arrow_small.gif) no-repeat;
}

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference