Mozilla firefox hacks

[jelly46]

Hello people

Merry xmas and all that jazz.

Can i ask does anyone know a good website that demonstrates css hacks for Mozilla Firefox.

Basically i don't know the syntax for this: .element-column-right-alpha-outer {margin-top:35px}

But only for firefox in the rest of the browsers it works ok but chrome is giving me problems, so i thought the work around would be for firefox.

Cheers

[chris.upjohn]

I am confused, what is it exactly that you are trying to accomplish as what you have posted above is simply just a class with a property which should work in IE7+ and all modern browsers without any issues, could you please explain the issue your having a little bit more.

[ralph.m]

Firefox and Chrome are pretty reliable browsers, so it's more likely that you need to rethink how you are going about this. The only browser that really needs hacks is IE in its older versions. As soon as you start thinking about hacks for other browsers, it's a sign you are doing something wrong. As SgtLegend said, we need to see more—preferably a live link.

[jelly46]

Sorry dude

I am confusing you, here is an image of is on my dev server along with the html and css.

The image will demonstrate what i mean.

Thanks for your time

ie_main_issue.jpg

 
.element-column-right-alpha-outer 
{
margin-top:35px;
}


#social_media_outer
{
width:190px;
float:right;
height:45px!important;
position:relative;
top:0;
left:0;
display:block;
}

<div id="social_media_outer">
                        <div id="social_media">

                        <div id="fb-root"> <script src="http://connect.facebook.net/en_US/all.js#appId=210858382299720&amp;xfbml=1">
                        </script><fb:like href="" send="true" layout="button_count" show_faces="false" action="recommend" border="6" font="">
                        </fb:like>
                        <span  class='st_linkedin' >
                        </span></span>
                        <span  class='st_facebook' >
                        </span>
                        <span  class='st_sharethis' st_title="Great Ormond Street Childrens Charity"
                        ></span>
                        <a href="http://twitter.com/share" data-count="none"><img src="http://www.gosh.org/facebook/sharethis/twitter_icon.gif" style="position:relative;
                        bottom:-4px; border:none;" /></a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script><span class="st_email" ></span>

                        <a href="javascript:print(document)"><img src="http://www.gosh.org/facebook/sharethis/print_icon.gif" style="position:relative;
                        bottom:-4px; border:none;" /></a>

                    </div>
                  </div>
                </div>

[ralph.m]

It's probably simple to fix, but I don't think we have enough info here. It wasn't clear from your first post which browser you needed help with, but anyhow, it should be easy to remove the bottom gap, but there isn't really enough info above for me to help. Could you post a test page somewhere?

[jelly46]

I'm sure it is a simple fix, i know you are right, i just cant fix it and it is doing my head in!

Its on my dev server and cant get you a url here is some more code if you can help dude.

CSS

 
/* Columns Alpha */
.element-columns-alpha-outer { clear: both; margin-bottom: 10px; }
.element-columns-alpha-inner { width: 100%; overflow: hidden;}
.element-column-left-alpha-outer { }
.element-column-left-alpha-inner { width: 100%; overflow: hidden; margin-left:0;}
.element-column-left-alpha-content {}
.element-column-right-alpha-outer {margin-top:35px;}/**/
.element-column-right-alpha-inner { }
.element-column-right-alpha-content { width: 100%; overflow: hidden;}

HTML

<div class="element-column-right-alpha-content">
					
	    
<div style="width: 100%;" class="element-panel-gamma-outer">
	<div class="clear element-panel-gamma-inner">
		
		
		<div class="element-panel-gamma-header-outer">
			<div class="element-panel-gamma-header-inner">
			    <h2 class="element-panel-gamma-header" id="esctl_3665075_h"><span class="oPanelTitle" id="esctl_3665075_lblPanelTitle">Useful links</span></h2>
			</div>
		</div>
		
		
		<div class="element-panel-gamma-body-outer">
			<div class="element-panel-gamma-body-inner clearfix">
				<div class="element-panel-gamma-body-content-outer">
					<div class="element-panel-gamma-body-content-inner clearfix">



<div class="ContentEditor"><a onclick="_gaq.push(['_trackEvent', 'Page', 'Link Clicked', '/about-us/foundation-trust/membership-podcasts/']);" title="Membership podcasts" class="oLinkInternal" href="/about-us/foundation-trust/membership-podcasts/">Find out what it's like to be a member and what it could involve</a><br>
<br>
</div>
					</div>
				</div>
			</div>	
		</div>
    
	</div>
</div> 

 
					
				</div>

[ralph.m]

I'm still completely clueless as to what the issue is. That code you posted doesn't give much away.

[Victorinox]

Based on what you've supplied, the gap between #social_media_outer and #element-column-right-alpha-outer is due to the 35px top margin on the latter. Why the others browsers ignore the margin I don't know. What happens when your remove or reduce the margin?

You are wanting to get rid of the gap in Chrome aren't you?

I'm confused how a hack for Firefox would fix Chrome.

[jelly46]

Yep i put that 35px at the top but in chrome it does not go the image i show in the earlier posts is without the 35px.

Chrome is th issue.

[Paul O'B]

You'll need to try and build a working demo that exhibits the problem as there are too many variables in the above code for us to give an accurate answer.

It sounds like an issue of margin collapse and parents not clearing their floated children. Make sure parents that hold floated content contain their children.

There are hacks you can use for webkit but it sounds like the issue could be cured with a proper structure first so that is what we must address first before resorting to hacks.