SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2007
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Mozilla firefox hacks

    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

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,192
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    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.

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    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.

  4. #4
    SitePoint Enthusiast
    Join Date
    Apr 2007
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

    Code:
     
    .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>

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    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?

  6. #6
    SitePoint Enthusiast
    Join Date
    Apr 2007
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Code:
     
    /* 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

    Code:
    <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>

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    I'm still completely clueless as to what the issue is. That code you posted doesn't give much away.

  8. #8
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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.

  9. #9
    SitePoint Enthusiast
    Join Date
    Apr 2007
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •