SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Taunton, UK
    Posts
    787
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    css help me get rid of a gap please

    Hi there

    I am getting a gap when viewing my site in Firefox, Opera and Netscape

    http://www.lambandflag.co.uk/

    but not in IE.

    The gap is a grey gap of about 15 pixels below the navigation bar. I cannot work out how to remove this.

    Anyone help please?

    Thanks

    Paul

  2. #2
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Taunton, UK
    Posts
    787
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok ignore my call for help. I worked out the gap was caused by the paragraph below not having its padding or margin set to 0.

    However I now have another problem

    http://www.lambandflag.co.uk/contact.htm

    On firefox, opera and netscape the address and telephone details are appearing incorrectly. They are appearing below "Designed and ......." when they should appear above this in the black area below the wallpaper texture.

    Works in IE but thats a fat lot of use if it dont work in the others

    Any help much appreciated.

    Paul

  3. #3
    SitePoint Member
    Join Date
    Aug 2004
    Location
    Perth, Western Australia
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Looks the same to me in Firefox and IE6. Except in Firefox there is a bright blue line running across the window through the words The Lamb and Flag.

    Just as an aside - if standards-compliant browsers like Firefox, Opera and Netscape show it differently to IE - 99.99999% of the time the fault is IE. If IE shows it the way you want it to display and the others don't, it's still IE that is wrong.

    Best to always design first for the standards-compliant browsers and only check the final design in IE to fix any IE-only errors.

    Regarding your blue line, I haven't had a look at your code yet (busy at work now) but if you run into trouble sorting it out, give another shout.

    mate.

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

    Your telephone details need to be the last thing in the container div so move it fown a nesting.


    Code:
    <body>
    <div id="container"> 
      <div id="header"> 
    	<h1><a href="#" title="The Lamb and Flag - Traditional English Pub">The Lamb 
    	  and Flag - Traditional English Pub</a></h1>
      </div>
      <div id="topnav"> 
    	<ul id="menu">
    	  <li id="home"><a href="/index.htm" title="Lamb and Flag Home Page">Home</a></li>
    	  <li id="contact"><a href="mailto:info@lambandflag.co.uk" title="Contact us">link</a></li>
    	</ul>
      </div>
      <div id="main"> 
    	<div id ="top_contact"> 
    	  <div id ="contact_details"> 
    		<p>The Lamb & Flag<br />
    		  Blagdon Hill<br />
    		  Taunton<br />
    		  Somerset<br />
    		  TA3 7SL<br />
    		  <br />
    		  Tel: 01823 421 736<br />
    		  <br />
    		  Email: <a href="mailto:info@lambandflag.co.uk" title="Email the Lamb and Flag">info@lambandflag.co.uk</a><br />
    		  <br />
    		  <br />
    		  <br />
    		  Opening times:<br />
    		  <br />
    		  Mon to Sat: 11am - 11pm<br />
    		  Sun: 12pm - 10.30pm:</p>
    	  </div>
    	</div>
      </div>
      <div id="bottom"> 
    	<div id="address"> 
    	  <ul class="nextprevious">
    		<li class="lhs">The Lamb and Flag, Blagdon Hill, Taunton, TA3 7SL</li>
    		<li class="rhs">Tel: 01823 421736</li>
    	  </ul>
    	</div>
      </div>
    </div>
    <div id="footer"> 
      <p><a href="http://www.mediakitchen.co.uk" title="Mediakitchen Website" >Designed 
    	and developed by Mediakitchen 2004</a></p>
    </div>
    </body>
    Quote Originally Posted by mate
    Regarding your blue line,
    text-decoration:none in the anchor in the header will fix it.


    Paul

  5. #5
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Taunton, UK
    Posts
    787
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That fixed it - thanks again

    Paul

  6. #6
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Taunton, UK
    Posts
    787
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh pants - looks fine in firefox, ie and netscape but opera, it is displaying grey background and extra space at bottom above telephone number

    http://www.lambandflag.co.uk/contact.htm

    Any ideas why opera is being uncooperative and how to fix this?

    Thanks

    Paul

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

    I could see very little difference between my versions of Opera7. I couldn't see any grey background peeking through in any of them.

    I noticed that the footer was a bit further away which can be cured by setting the margin on the p tag.

    Code:
    #footer p {margin:0;padding:0}
    Other than that I couldn't notice anything untoward .

    Paul


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
  •