www.webdeveloper.com
Results 1 to 6 of 6

Thread: Space between Menu and image scroller

  1. #1
    Join Date
    Nov 2006
    Posts
    229

    Space between Menu and image scroller

    Gang,

    I have spent hours trying to figure out why there is a space between the menu bar and the image scroller. I am trying to get both features to meet flush but just cant seem to figure this one out. I have been messing with the margin attribute in my CSS file but nothing I do seems to work. Your help with this would be greatly appreciated. Thank You. Ken

    Here is a link:
    http://www.keystonelockcompany.com/New/index_New.asp

  2. #2
    Join Date
    Mar 2011
    Posts
    1,142
    The default margin setting on some element is the problem. I was able to eliminate the space by adding:
    Code:
    * { margin:0; }
    to your stylesheet, but it messes up the rest of the design. The most likely suspect is one of the <ul> elements. Start there.
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Nov 2006
    Posts
    229
    Quote Originally Posted by rtrethewey View Post
    The default margin setting on some element is the problem. I was able to eliminate the space by adding:
    Code:
    * { margin:0; }
    to your stylesheet, but it messes up the rest of the design. The most likely suspect is one of the <ul> elements. Start there.
    Rick,

    I tried that and it doesn't seem to be working for me. Below is the css I am working with:

    Code:
    .bx-wrapper {
    	position: relative;
    	margin: 0 auto -20px;
    	padding: 0px;
    	*zoom: 1;
    }
    
    .bx-wrapper img {
    	max-width: 100%;
    	display: block;
    
    }

  4. #4
    Join Date
    Mar 2011
    Posts
    1,142
    No, it's the <ul>, not the <div>. Try:
    Code:
    .bxslider { margin:0; }
    Rick Trethewey
    Rainbo Design

  5. #5
    Join Date
    Sep 2013
    Location
    Portsmouth, England
    Posts
    1
    Hi Ken,

    I am new to this forum, so apologies if I don't follow all the rules.

    I had a look at your problem last night.

    If you comment out all the header stuff so that your page starts with the "topcontent" you will see that the 20px or so gap still appears at the top. The problem is not in the header. Get rid of the -20px margin, that is moving the header further down the page.

    I also saw that the h2 tag has a margin poking out the top of the block. I also saw that something there had a 2% top margin. these could be causing the gap.

    I didn't get any further as when I reloaded the page I found that you had updated it, and was now a complete mess. I assumed that you were working on it Live, so I left you to it. Sorry if that was an incorrect assumption.

    Personally, I always work locally using Virtual Box etc

    Anyway I hope this helps you get to the bottom of it, Steve

  6. #6
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,216
    CSS Errors [ Ignore any properly formed CSS3 rules that may have been flagged ]

    HTML Errors: "This document cannot be checked. ... unable to validate this document because on line 258 it contained one or more bytes that I cannot interpret as utf-8 (in other words, the bytes found are not valid values in the specified Character Encoding). Please check both the content of the file and the character encoding indication. The error was: utf8 "\x97" does not map to Unicode"

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles