+ Post New Thread
Results 1 to 3 of 3
Web Development Thread, CSS gurus! in Coding and Web Development; Hi peeps! I do hope I am being foolish and missing something very simple, but I have encountered a niggling ...
  1. #1

    Join Date
    Sep 2006
    Location
    Bath, BANES
    Posts
    19
    Thank Post
    2
    Thanked 1 Time in 1 Post
    Rep Power
    0

    CSS gurus!

    Hi peeps!

    I do hope I am being foolish and missing something very simple, but I have encountered a niggling problem with the school website I am developing. Basically when I load this page within Firefox/IE7 everything displays as I would expect, but when using IE6 there is a small (couple of pixel) gap between the menu bar and the main content section of the website. I hope the screenshots display this clearly - it is just to the right of the menu items / events boxes. From my limited knowledge I believe this could be resolved in CSS, but have no idea where to start! I have attached the files I have made in the hope that someone might be able to help me out with this! Many thanks in advance,

    Nick
    Attached Images Attached Images
    Attached Files Attached Files

  2. #2

    Join Date
    Jan 2007
    Location
    Lowestoft, Suffolk
    Posts
    84
    Thank Post
    6
    Thanked 4 Times in 4 Posts
    Rep Power
    16

    Re: CSS gurus!

    IE6 is a real pain for adding extra whitespace. The box model behaves slightly differently.

    I think I would try a CSS reset stylesheet first. There are several around that basically reset all tags margins and padding to 0. Then you're starting without any defaults that the browser may have.

    This is my current cssReset.css

    Code:
    * { 
    	margin:0;
    	padding:0;
    }
    table {
    	border-collapse:collapse;
    	border-spacing:0;
    }
    
    address,caption,cite,code,dfn,em,strong,th,var {
    	font-style:normal;
    	font-weight:normal;
    }
    ol,ul {
    	list-style:none;
    }
    caption,th {
    	text-align:left;
    }
    h1,h2,h3,h4,h5,h6 {
    	font-size:100%;
    	font-weight:normal;
    }
    q:before,q:after {
    	content:'';
    }
    abbr,acronym, img, fieldset {
    	border:0;
    }
    Also I seem to remember something about overflow: too, if only I could remember exactly what it was.

  3. #3

    Join Date
    Sep 2006
    Location
    Bath, BANES
    Posts
    19
    Thank Post
    2
    Thanked 1 Time in 1 Post
    Rep Power
    0

    Re: CSS gurus!

    Hi Paul,

    Thanks for the reply. I've just hit upon a solution, albeit a pretty messy one! Adding the following position rule seems to have done the job:

    Code:
    * html #side-bar {
      width: 15em;
      position: relative; /* IE 6 Positioning fix */
      left: 2px;
    }
    To my eyes that seems to have done the trick. Thanks once again,

    Nick

SHARE:
+ Post New Thread

Similar Threads

  1. Replies: 3
    Last Post: 22nd October 2007, 10:35 AM
  2. Any XML gurus?
    By TechMonkey in forum Web Development
    Replies: 4
    Last Post: 2nd February 2007, 12:40 PM
  3. Replies: 37
    Last Post: 8th November 2006, 07:24 PM

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
  •