Member Avatar for 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

  • 3 Contributors
  • 8 Replies
  • 97 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by EvolutionFallen

Dani AI

Generated

Quick checklist and targeted tips to help diagnose the Chrome vs Firefox layout difference.

— before adding browser-only rules, confirm the selector you’re targeting actually exists in the DOM. As noted, the HTML you posted contains .element-column-right-alpha-content but not the “outer” wrapper your stylesheet targets. If the element isn’t present the rule does nothing in any browser.

Troubleshooting steps (do these in both Chrome and Firefox):

  • Open DevTools (Chrome or Firefox Page Inspector) and inspect the element you expect to move. Look at the Computed/Box Model panel to see the actual margin/padding/position values and which rule sets them.
  • Check which stylesheet and rule line is applying the margin (DevTools shows the source). That tells you if an external widget or a different rule is overriding yours.
  • Temporarily hide the social widget container or third‑party scripts to see whether injected markup/styles are shifting layout.
  • Visualize the problem: add a temporary background/outline to the element and its immediate parent to see containment and margin collapse.
  • Verify the parent contains floats (use clearfix or overflow:auto) and confirm the page has a valid DOCTYPE — missing/quirky markup can change rendering.

Fix strategies

  • Best: fix the root cause (correct markup, apply margin to the element that actually exists, or make the container contain floats). Avoid browser-specific hacks where possible.
  • If you must target Firefox only, use Mozilla’s extension @-moz-document to scope an override. Example pattern:
@-moz-document url-prefix() {
  .your-target-selector {
    /* Firefox-only override */
    margin-top: 35px !important;
  }
}
  • Prefer feature detection (@supports) or layout fixes over JS/browser sniffing; JS hacks are brittle (as suggested).

References: MDN on the Firefox-only rule @-moz-document, DevTools/Inspector docs Page Inspector and a roundup of browser-specific techniques CSS-Tricks browser hacks.

Recommended Answers

All 8 Replies

Member Avatar for rotten69

I found a few JavaScript hacks that work well on YouTube. Can I ask why you want to use hacks in a browser? Is it just fun or something else?

Google should give a list of browser hacks. Have you tried asking "our brother" Google?

Member Avatar for 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

.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="" 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="" style="position:relative;
                        bottom:-4px; border:none;" /></a>

                    </div>
                  </div>
                </div>
Member Avatar for jelly46

Sorry cant attach the image

Member Avatar for rotten69

Oh I get what you mean. I think you're tryin to achieve something but it is not workin in firefox, Right?

Member Avatar for jelly46

Yeah dude spot that's the one

Member Avatar for EvolutionFallen

jelly46, can you show the HTML for the element with class element-column-right-alpha-outer, as well as the HTML and CSS for the element directly above/before it?

Member Avatar for jelly46

jelly46, can you show the HTML for the element with class element-column-right-alpha-outer, as well as the HTML and CSS for the element directly above/before it?

Hello mate seasons greetings to you here is the code you need, it it helps.

Thank you for this

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>
Member Avatar for EvolutionFallen

OK I still don't see the HTML with class element-column-right-alpha-outer though. Just CSS. Where is the div with this class? Does it begin right after <div class="element-column-right-alpha-content"> is closed?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.