SitePoint Sponsor

User Tag List

Results 1 to 11 of 11

Hybrid View

  1. #1
    SitePoint Zealot ameerulislam's Avatar
    Join Date
    Jul 2011
    Posts
    145
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    can't get rid of the extra margin below my menu in responsive theme

    jppv.net is the place where I'm working on, It's a responsive theme and when I the screen is scales down the screen size to 719px (max) my menu layout changes but an extra 20 odd pixel space is being added and I can't get rid of it. see the attached image.

    marginProblemCSS.png

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,340
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I'm not sure if this is what you mean but the 20px purple backgrond beneath the nav is caused by the 20px padding on the parent #header_margin and can't be removed with a negative margin on an inner element.

    You just need to do this:

    Code:
    #header_margin{padding-bottom:0}
    Unless you meant something else of course

  3. #3
    SitePoint Zealot ameerulislam's Avatar
    Join Date
    Jul 2011
    Posts
    145
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    I'm not sure if this is what you mean but the 20px purple backgrond beneath the nav is caused by the 20px padding on the parent #header_margin and can't be removed with a negative margin on an inner element.

    You just need to do this:

    Code:
    #header_margin{padding-bottom:0}
    Unless you meant something else of course
    Boss now new problem arose. the menu bar gets extra margin/padding from the left.


  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,340
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ameerulislam View Post
    Boss now new problem arose. the menu bar gets extra margin/padding from the left.

    Hi,

    You didn't add the code I gave you but instead added an invalid rule before the margin rule in the media query causing it to be missed.

    line 1631 style.css
    You added this:
    Code:
    #header_margin{padding-bottom:0};
    It should be this:
    Code:
    #header_margin{padding-bottom:0}
    There should be no semi-colon at the end. Otherwise it makes the following rule unmatchable.

    Code:
    	#header_margin{padding-bottom:0};
    
    	.header-container {
    		margin-left:0;
    	}

    It shuld be:

    Code:
    	#header_margin{padding-bottom:0}
    
    	.header-container {
    		margin-left:0;
    	}

  5. #5
    SitePoint Zealot ameerulislam's Avatar
    Join Date
    Jul 2011
    Posts
    145
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I love you man.. Your awesome!! I thought every statements should end with ; . can you guide me, when not to use semi-colons ?

    Thanks alot..

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,340
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ameerulislam View Post
    I love you man.. Your awesome!! I thought every statements should end with ; . can you guide me, when not to use semi-colons ?

    Thanks alot..
    Hi,

    Your mistake was adding the semi-colon outside the closing bracket thus effectively beginning a new rule

    Regarding semi-colons then a semi-colon means that there are more rules to follow. The last rule (or a single rule) doesn't need them but does no harm either way.

    e.g. All the following are valid:
    Code:
    #header_margin{padding-bottom:0}
    
    #header_margin{padding-bottom:0;}
    
    #header_margin{
    padding-bottom:0;
    margin:0
    }
    #header_margin{
    padding-bottom:0;
    margin:0;
    }
    As a rule of thumb I usually leave the trailing semi-colun from single rules:

    Code:
    #header_margin{padding-bottom:0}
    But I always add it at the end in multiple rules.
    Code:
    #header_margin{
    padding-bottom:0;
    margin:0;
    }
    It's up to you. It's probably safer to tell people to always add it but in the end its just personal preference and saves a few bytes if you omit it.


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
  •