SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict svcghost's Avatar
    Join Date
    Oct 2010
    Posts
    288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Troubleshooting 1px margin difference Chrome v. Firefox

    Hey guys,

    Can you please just give me a big list of things I can do to figure out why a list element would be 1px higher in margin on Safari and Chrome than it is on Firefox? I looked this up but nothing I saw worked, so I'd like to compile a list here.

    Here is an image showing this discrepancy:


    HTML:
    Code:
    <ul id="menu-2" class="sf-menu sf-right sf-js-enabled sf-shadow">
    	<li>
    		<a class="sf-with-ul" href="link.html">LINK</a>
    	</li>
    	<li>
    			<a class="sf-with-ul" href="#">MENU</a>
    		<ul class="sub-list" style="display: none; visibility: hidden;">
    			<li>
    				<a class="sf-with-ul-sub" href="/link">Menu</a>
    			</li>
    			<li>
    				<a class="sf-with-ul-sub" href="/link">Menu</a>
    			</li>
    			<li>
    				<a class="sf-with-ul-sub" href="/link">Menu</a>
    			</li>
    			<li>
    				<a class="sf-with-ul-sub" href="/bookmarks.php">Menu</a>
    			</li>
    			<li>
    				<a class="sf-with-ul-sub" href="/link">Menu</a>
    			</li>
    		</ul>
    	</li>	
    </ul>

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,168
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    It would be much easier to help with this if we had a live link. Otherwise we are just shooting in the dark pretty much.

  3. #3
    SitePoint Addict svcghost's Avatar
    Join Date
    Oct 2010
    Posts
    288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can try and get that up. Need to get a free web host first. Any shots in the dark? Thanks man.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,168
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by svcghost View Post
    I can try and get that up. Need to get a free web host first. Any shots in the dark? Thanks man.
    Usually you get free hosting space with your ISP. Otherwise, if the design holds up without images loaded, you could post a working page with embedded CSS—or post the necessary images here too.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,347
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    It's probably a rounding error on the line-height or you haven't set the line-height consistently between browsers. It may be that you have set the height of the element by its font size and padding only and that will never be the same cross browser as all vary in the space for the glyphs (not accounting for rounding errors).

    It should be easy for you to knock up a code example that exhibits the problem. Just post full html and css here if you don't have anywhere online to show it.

  6. #6
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Paul likely hit it on the head on rounding errors -- if you are using %/em for your padding or font size on this type of menu, FF will often round up what every other browser on the planet rounds down.

    That said the HTML presented suffers greatly from "not every ejaculation deserves a name" -- which is to say NONE of the classes present should even be in there in the first place... much less the inlined style... SF I assume is short for some form of stupidfish menu, which I don't consider anywhere near as practical as just writing a CSS menu properly and throwing a behavior file at IE6-.

    It's funny, but I often say that CSS without the HTML it's applied to is gibberish; this time out we have the opposite problem. Without the CSS we have no clue what you are even trying to do to that markup; that said, there is NO legitimate reason for that HTML to be much more than:

    Code:
    <ul id="menu-2">
    	<li><a href="link.html">LINK</a></li>
    	<li>
    		<a href="#">MENU</a>
    		<ul>
    			<li><a href="/link">Menu</a></li>
    			<li><a href="/link">Menu</a></li>
    			<li><a href="/link">Menu</a></li>
    			<li><a href="/bookmarks.php">Menu</a></li>
    			<li><a href="/link">Menu</a></li>
    		</ul>
    	</li>	
    </ul>


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
  •