SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Aug 2007
    Location
    Toronto
    Posts
    184
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Internal Links Causing Margin Loss

    Hi everyone,

    Very strange issue. We've coded internal page links (e.g. href="#content") with top links (e.g. href="#top") to navigate back and forth on an FAQ page. Typical stuff.

    Problem is, as soon as one of the internal links is clicked, the topmost part of the page loses about 4px, so the 7px border at the top of the header becomes 3px. And this is also throwing drop down menus off about 4px so they are unusable.

    In 10 years of web development, I've never come across this issue.

    Anyone have a quick fix for this other than to use Javascript to restore the margins?

    The page in question is found here:

    assuredpardons.com/canadian_pardon_faq.php

    Thanks,

    Louis

  2. #2
    SitePoint Addict fattyjules's Avatar
    Join Date
    Dec 2005
    Posts
    295
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Couldn't see problem in Firefox 3 or IE 8. Which browser have you noticed the problem in?

  3. #3
    SitePoint Zealot
    Join Date
    Aug 2007
    Location
    Toronto
    Posts
    184
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I actually put in some JavaScript to hack it into place, so it's fixed for now, albeit in a bit of a messy way.

    But I still think it's a strange issue that must have been discussed somewhere and resolved before -- or at least explained.

    I couldn't find anything on a Google search about it.

    Thanks,

    Louis

  4. #4
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code HTML4Strict:
    html,body,div,span,
    applet,object,iframe,
    h1,h2,h3,h4,h5,h6,p,blockquote,pre,
    a,abbr,acronym,address,big,cite,code,
    del,dfn,font,img,ins,kbd,q,s,samp,
    small,strike,sub,sup,tt,var,
    dd,dl,dt,ol,
    fieldset,form,legend,
    table,caption,tbody,tfoot,thead,tr,th,td {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	font-weight: normal;
    	font-style: normal;
    	font-size: 100%;
    	font-family: inherit;
    	text-align: left;
    }

    Drop this in place of your current one.

    Your current reset was not allowing the latter half of your selectors to inherit these declarations....

    You have two commas in between selectors on a few

  5. #5
    SitePoint Zealot
    Join Date
    Aug 2007
    Location
    Toronto
    Posts
    184
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cooper.semantics View Post
    Code HTML4Strict:
    html,body,div,span,
    applet,object,iframe,
    h1,h2,h3,h4,h5,h6,p,blockquote,pre,
    a,abbr,acronym,address,big,cite,code,
    del,dfn,font,img,ins,kbd,q,s,samp,
    small,strike,sub,sup,tt,var,
    dd,dl,dt,ol,
    fieldset,form,legend,
    table,caption,tbody,tfoot,thead,tr,th,td {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	font-weight: normal;
    	font-style: normal;
    	font-size: 100%;
    	font-family: inherit;
    	text-align: left;
    }

    Drop this in place of your current one.

    Your current reset was not allowing the latter half of your selectors to inherit these declarations....

    You have two commas in between selectors on a few
    Hey, CS, thanks for that info. Actually, while that is the reset I normally use, I was not personally the one that implemented it on that site, it was another developer here. But I will try to correct that and see if it fixes the problem. Good eye!

    Louis

  6. #6
    SitePoint Zealot
    Join Date
    Aug 2007
    Location
    Toronto
    Posts
    184
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Correcting the reset problem did not resolve the issue. I'm still extremely curious as to why this was happening.

    Louis

  7. #7
    SitePoint Enthusiast Aken's Avatar
    Join Date
    Oct 2007
    Location
    Racine, Wisconsin, USA
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    While not 100% positive, I would guess it has something to do with the placement of the #top anchor. For some reason it's confusing the structure below it. I would give the ID to something else that is near the top, like the logo link for instance. See if it changes anything.
    Eric Roberts - Racine, WI Web Design & Development
    www.cryode.com


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
  •