4 replies [Last post]
GOLGO-13
Offline
Enthusiast
seattle.usa
Last seen: 46 weeks 5 days ago
seattle.usa
Timezone: GMT-8
Joined: 2004-09-07
Posts: 62
Points: 27

Hello,
I'm in the middle of my first complex drupal theme.. I think/hope this is just a CSS/browser question.

I have 2 column list using an image replacement technique. seems to work fine in all my test browsers (IE7, Chrome, Safari & Opera) but in FireFox 3.0.13, the images jump down 379 pixels. I tried reworking the code so that it more specifficly targeted the spans.. but that just added more code, and did not fix the problem. I dont have a clue why only FireFox is rendering my list this way.

here's the site: http://indigo.fresh-off.com/
(see two column list of social media links towards bottom of page in left hand sidebar)

here's the CSS:

/* Social Media Links */
 ul#smedia {
  	float: left;
  	width: 286px;
  	margin: 0 0 0 67px;
  	padding: 0;
  	list-style: none;
	}
 
 li.smedia-links {
	background-color:#300;
  	float: left;
  	margin: 0 12px 17px 0;
  	padding: 0;
 	height: 48px;
  	width: 125px;
	}
 
a.smedia-facebook,
a.smedia-twitter,
a.smedia-myspace,
a.smedia-flickr  {
	width: 125px; height: 48px;
	position: relative;
	}
 
a.smedia-facebook span,
	a.smedia-twitter span,
	a.smedia-myspace span,
	a.smedia-flickr  span {
		height: 48px;
		position: absolute;
		width: 125px;
		}
 
a.smedia-facebook span 	{ background: url("images/facebook-link.jpg");}
a.smedia-twitter span 	{ background: url("images/twitter-link.jpg");}
a.smedia-myspace span 	{ background: url("images/myspace-link.jpg");}
a.smedia-flickr span 	{ background: url("images/flickr-link.jpg");}
/* //end social media links */

And here's the xhtml:

<ul id="smedia">
 <li class="smedia-links"><a class="smedia-facebook" href="www.facebook.com" title="friend us on facebook"><span></span>Friend us on Facebook</a></li>
 <li class="smedia-links"><a class="smedia-twitter" href="www.twitter.com" title="follow us on twitter"><span></span>twitter</a></li>
  <li class="smedia-links"><a class="smedia-flickr" href="www.flickr.com" title="check out our event pictures on flickr"><span></span>flickr</a></li>
 <li class="smedia-links"><a class="smedia-myspace" href="www.myspace.com" title="friend us on myspace"><span></span>mysapce</a></li>
</ul>

any clue of whats going on, or how i can fix it? i know there are conditional's for IE.. but can they target just FireFox? is that even a good idea?

Thanks for any ideas/suggestions!!

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 27 weeks 5 days ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2636
Points: 1554

I dont see a differance in

I dont see a differance in IE7 and FF. You talking about the facebook twitter stuff? The div above it has some pretty big padding that will push the facebook stuff further down.

Dont forget to validate your code before going on to css.

GOLGO-13
Offline
Enthusiast
seattle.usa
Last seen: 46 weeks 5 days ago
seattle.usa
Timezone: GMT-8
Joined: 2004-09-07
Posts: 62
Points: 27

thanks for taking a look!!

yes, the facebook/twitter images are where i'm still seeing the pixel jump.
checked my validation (2 duplicate ID problems with blog posts that i'll have to get into the php to fix) and this /*q:before,q:after { content:”; }*/ from a global reset that i've commented out for the time being.

i also went in and made the bottom padding and margins "0" on the div above my social media links. Cleared drupals cashe, and ran the cron... but i'm still seeing the pixel jump in FireFox. since the images seem to look fine to you, is it likely a problem with my version of Firefox? I've included a screen shot of what i'm seeing. i'm still stumped! :shrug:

AttachmentSize
social-media-links-problem.jpg 275.73 KB
GOLGO-13
Offline
Enthusiast
seattle.usa
Last seen: 46 weeks 5 days ago
seattle.usa
Timezone: GMT-8
Joined: 2004-09-07
Posts: 62
Points: 27

it "looks" like the problem was

the exact version of Firefox i was running. Just updated, and everything seems to be rendering fine. Still a little worried that folks who dont have the most current FF version will see the site rendering incorrectly. Not sure what else i can do about that except for taking care of the php thats writing the the two xhtml validation errors i'm getting before i actually "launch" the site.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 3 years 8 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Hm, I don't see anything

Hm, I don't see anything "wrong" with the code you posted for the image replacement, and I've only run into a similar problem when the anchors (or whoever I'm using as the main container) were inline-block: in FF2, the two moz displays, inline-block and inline-box, did not allow correct image replacement.

I also set coordinates for the abso-po'd element, even if they're not being moved. I do this because I started putting my empty spans/whatevers after the main content: Some text and so then that anchor (or whatever) is not FIRST then I needed to explicitly state top: 0 and left: 0 to make it sit right over the main element. I never looked to see if this was a FF-only issue, but if it is, it should be fixed with just listing those coordinates.

You spans are before the content of the anchors but, if you still have that old FF3 copy (I'm still running FF3.0 because I'm on Ubuntu and I always wait for the safety of the .deb package instead of manually loading my own), see if it is fixed when the code is so:

a.smedia-facebook span,
	a.smedia-twitter span,
	a.smedia-myspace span,
	a.smedia-flickr  span {
		position: absolute;
                <span style="font-weight:bold">left: 0;
                top: 0;</span>
		width: 125px;
		height: 48px;
		}

I'm no expert, but I fake one on teh Internets