4 replies [Last post]
asimpleart
asimpleart's picture
Offline
Enthusiast
Last seen: 10 years 1 week ago
Timezone: GMT-5
Joined: 2007-01-31
Posts: 94
Points: 4

Another one, feedback appreciated!

http://server.webtekcc.com/~hydra/

felixters
felixters's picture
Offline
Enthusiast
Last seen: 12 years 36 weeks ago
Timezone: GMT-4
Joined: 2007-04-22
Posts: 55
Points: 0

The site looks great in IE7,

The site looks great in IE7, FF2! In IE6, your h2's are being repeated vertically I think though.

I have a technical question though... I noticed you use a text-image replacement technique on your h2's. The only way I know of doing this is by adding extra markup inside of the h2 tag.

Using Firefox's web dev extension I can't seem to figure out how you accomplished it this way... would you mind explaining it for me?

Thanks in advance.

dhaynes
dhaynes's picture
Offline
Regular
Midwest, US
Last seen: 12 years 38 weeks ago
Midwest, US
Timezone: GMT-4
Joined: 2007-05-20
Posts: 38
Points: 0

RE: Image Replacement Technique

felixters wrote:
The site looks great in IE7, FF2! In IE6, your h2's are being repeated vertically I think though.

I have a technical question though... I noticed you use a text-image replacement technique on your h2's. The only way I know of doing this is by adding extra markup inside of the h2 tag.

Using Firefox's web dev extension I can't seem to figure out how you accomplished it this way... would you mind explaining it for me?

Thanks in advance.

The text-image replacement technique that he is using on the h2's is called Phark Image Replacement(http://snipplr.com/view/2605/imagereplacement--pharkmethode/). He used a text-indent on the h2's so that it doesn't show up on the screen. Here is the relevant CSS code:

#maincol h2

{
width: 437px;
height: 17px;
text-indent: -9999px;
margin-top: 19px;
margin-bottom: 15px;
margin-left: 18px;
background-repeat: no-repeat;
}

Edit: P.S. Nice job on the site a well. As far as the image repeating problem in IE6(on the 'What We Offer' and 'Photos' h2's) I think you can fix it by adding a 'background-repeat: no-repeat;' rule to your CSS.

Need a Wordpress site? I'm your guy.

asimpleart
asimpleart's picture
Offline
Enthusiast
Last seen: 10 years 1 week ago
Timezone: GMT-5
Joined: 2007-01-31
Posts: 94
Points: 4

Thanks!

Thanks for the feedback, and ya i must have missed that h2 problem, it slipped haha. Yes, Dhaynes is correct I use the negative text-indent method.

Thanks again!

felixters
felixters's picture
Offline
Enthusiast
Last seen: 12 years 36 weeks ago
Timezone: GMT-4
Joined: 2007-04-22
Posts: 55
Points: 0

Ahh, very simple. Thanks

Ahh, very simple. Thanks for the explanation.