SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Ireland
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Getting nowhere fast! Please help.

    Hi,
    I'm developing a site using CSS. It is only the second site I've done using CSS and now i've run into some problems - which I can't seem to sort out.

    The main problems are gaps in the layout (ie6) - you'll see when you have a look and also it's all screwed up in other browsers. I'm really not sure what's going on! If anyone could help me out I will love them forever!

    The page in question is here:

    http://www.enhance.ie/inprogress/nac/2_3/text2.htm

    and the stylsheet is here:

    http://www.enhance.ie/inprogress/nac...xed-layout.css

    Thankyou
    Cliff.

  2. #2
    SitePoint Evangelist figbeam's Avatar
    Join Date
    Jun 2004
    Location
    Sweden
    Posts
    508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I looked at it in ie6, Opera 7.23 and FF 1.0. The display is different in all three browsers. I started to look at the most obvious. Valid XHTML! Good. One CSS error.

    I'm a little sceptic to having four images in #hdr, when you could have one (as you use a fixed width anyway). Some of the gaps I got in ie was between the different pictures.

    Took a look at the #navcontainer also. The text on the buttons are not properly aligned vertically. Try putting #navcontainer ul li a { line-height: 22px;} as this is the height of the navbar. Ie doesn't seem to care about your font-size. I'm not sure why. This makes the text in some of the buttons wrap which is one source of gaps.

    I tried removing float: left; from #navbott and suddenly the navbott image displayed in Opera also.

    Well, thats for starters. It's getting late. Check in on you again on friday or somewhere around there.

  3. #3
    SitePoint Evangelist figbeam's Avatar
    Join Date
    Jun 2004
    Location
    Sweden
    Posts
    508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Couldn't control myself...

    If you put the style inline (instead of in "#navcontainer ul li a"):
    Code:
    <li><a href="#" style="font-size: 9px; text-align:center;">ABOUT US </a></li>
    then it works even in ie. Not sure why...

    I also put:
    Code:
    border-width: 0 1px 0 1px;
    border-style: solid;
    border-color: #302A68;
    in #navcontainer. However; since your button backgrounds contains all but the left border it means your navbar will be 1px shy of 762px. With the code above you get the impression of a 2px right border. Still, it's better than no left border.

    Hope this helps.

  4. #4
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Ireland
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks figbeam, I really appreaciate you checking that out,

    I'll have a look at your suggestions tomorrow, I'm on my way to bed!

    Cliff.

  5. #5
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Ireland
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have tried the suggestions that Figbeam suggested, and it is looking much better! I have a few more problems though:

    - In IE I'm still getting a gap below the image under the top nav.

    - Again in IE, the text links on the left nav buttons arn't quite aligned in the center of my backgrounds and there are a few gaps appearing under the different section headers (more noticeable when you mouse over).

    - In Firefox and Netscape the left nav menu is pooped! I don't know what's going on! Also the right border isn't showing up. The same goes for Opera but there is a huge gap appearing under the top wavy image!

    If anyone could help me out I woul really appreaciate it!

    The page is here:
    http://www.enhance.ie/inprogress/nac/2_3/text3.htm

    The Stylesheet is here:
    http://www.enhance.ie/inprogress/nac...xed-layout.css

    Thanks,
    Cliff

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

    The gaps are caused by the image which needs to be display block. The page is totally broken in firefox because you need to clear the float navcontainer.

    This should fix those issues
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
    <title>CSS Template - Two Column Fixed Width with Header &amp; Footer</title>
    <meta http-equiv="Content-Type"
    content="text/html; charset=iso-8859-1" />
    <meta name="Robots" content="NOINDEX" />
    <meta http-equiv="PRAGMA" content="NO-CACHE" />
    <!--
      Web Site: www.ssi-developer.net
      Comments: Copyright 2003 www.ssi-developer.net
      Licence:  Creative Commons - Non-commercial Share-Alike
    -->
    <style type="text/css">
    /* Layout Stylesheet */ 
    body {
     margin:20px;
     color: #333333;
     text-align:center;
     padding:0;
     background-image: url(http://www.enhance.ie/inprogress/nac...mages/back.gif);
     }
    #outer {
     text-align:left;
     width:762px;
     margin:auto;
     }
    #hdr {
     height:72px;
     color: #333333;
     width: 764px;
     }
     #navcontainer
    {
     margin: 0px;
     padding: 0px;
     height: 22px;
     width: 761px;
     border-top-width: 0;
     border-right-width: 0px;
     border-bottom-width: 0;
     border-left-width: 1px;
     border-top-style: solid;
     border-right-style: solid;
     border-bottom-style: solid;
     border-left-style: solid;
     border-top-color: #302A68;
     border-right-color: #302A68;
     border-bottom-color: #302A68;
     border-left-color: #302A68;
    }
    #navcontainer ul
    {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    text-align: left;
    }
    #navcontainer ul li { float: left; }
    #navcontainer ul li a
    {
     text-decoration: none;
     background: url(http://www.enhance.ie/inprogress/nac.../top_nav_1.jpg) no-repeat top left;
     font-size: 9px;
     float: left;
     height: 22px;
     width: 95px;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-weight: bold;
     color: #FFFFFF;
     text-align: center;
     line-height: 22px;
    }
    #navcontainer li a:hover
    {
    background: url(http://www.enhance.ie/inprogress/nac.../top_nav_2.jpg) no-repeat left top;
    color: #000000;
    }
    #navbott{
     height: 37px;
    }
    #bodyblock {
     position:relative;
     width:759px;
     padding:0;
     border-right-width: 1px;
     border-left-width: 1px;
     border-top-style: none;
     border-right-style: solid;
     border-bottom-style: none;
     border-left-style: solid;
     border-right-color: #34246B;
     border-left-color: #34246B;
     background-color: #FFFFFF;
     background: url(http://www.enhance.ie/inprogress/nac...2_nav_back.gif) 0 0;
    }
    #l-col {
     float:left;
     width:147px;
     }
    #navlist_left {
     width: 147px;
     float: left;
     line-height: 29px;
    }
    #navlist_left p {
     font-size: 12px;
     height: 29px;
    }
    #navlist_left ul {
     margin: 0;
     padding: 0;
     list-style-type: none;
     font-size: 12px;
    }
    #navlist_left li {
     margin: 0;
     height: 29px;
    }
    #navlist_left a {
     display: block;
     background-image:  url(http://www.enhance.ie/inprogress/nac...left_nav_1.gif);
     background-repeat: no-repeat;
     height: 29px;
    line-height:29px;
    }
    #navlist_left a:link, #navlist a:visited {
     text-decoration: none;
     font-size: 12px;
     text-align: left;
     height: 29px;
    }
    #navlist_left a:hover, #navlist a:active {
     background-image:  url(http://www.enhance.ie/inprogress/nac...left_nav_2.gif);
     background-repeat: no-repeat;
     color: #0099CC;
     height: 29px;
    }
    #cont {
     width:611px;
     background:#ffffff;
     border:solid #000000;
     border-width:0 0 0 1px;
     text-align:left;
     float: left;
     }
    #ftr {
     height:25px;
     margin:0;
     width: 762px;
     float: left;
     }
     
    
    /* Presentation Stylesheet */ 
    h3, p {
     margin:0;
     padding:15px;
     }
    h4 {
     margin:0; 
     padding: 5px 0;
     }
    .text {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 12px;
     color: #000066;
     text-decoration: none;
    }
    .header {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 24px;
     font-weight: bold;
     color: #0099CC;
     text-decoration: none;
    }
    .text_bigger {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 16px;
     font-weight: bold;
     color: #000066;
     text-decoration: none;
    }
    .text_left_nav {
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 12px;
     font-weight: bold;
     color: #34246B;
     text-decoration: none;
     padding-left: 18px;
     display: block;
     line-height: -34px;
    }
    #navbott img,#l-col img{display:block;}
    .clearer{
     height:1px;
     overflow:hidden;
     margin-top:-1px;
     clear:both;
    }
    </style>
    </head>
    <body>
    <div id="outer"> 
      <div id="hdr"><a href="#"><img src="http://www.enhance.ie/inprogress/nac...logo_solid.gif" width="167" height="72" border="0" /></a><img src="http://www.enhance.ie/inprogress/nac...ress_solid.gif" width="594" height="72" /></div>
      <div id="navcontainer"> 
    	<ul id="navlist">
    	  <li><a href="#" style="font-size: 9px; text-align:center;">ABOUT US </a></li>
    	  <li><a href="#" style="font-size: 9px; text-align:center;">LOCATION</a></li>
    	  <li><a href="#" style="font-size: 9px; text-align:center;">OPENING TIMES</a></li>
    	  <li><a href="#" style="font-size: 9px; text-align:center;">PRICES</a></li>
    	  <li><a href="#" style="font-size: 9px; text-align:center;">SPECIAL OFFERS</a></li>
    	  <li><a href="#" style="font-size: 9px; text-align:center;">BOOKINGS</a></li>
    	  <li><a href="#" style="font-size: 9px; text-align:center;">EVENTS</a></li>
    	  <li><a href="#" style="font-size: 9px; text-align:center;">CAF&Eacute;</a></li>
    	</ul>
      </div>
      <div id="navbott"><img src="http://www.enhance.ie/inprogress/nac...2_nav_bott.jpg" alt=" " width="761" height="37" /> 
      </div>
      <div id="bodyblock"> 
    	<div id="l-col"><img src="http://www.enhance.ie/inprogress/nac.../lev_2_who.jpg" alt="Who are you?" width="147" height="31" /> 
    	  <div id="navlist_left"> 
    		<ul>
    		  <li><a href="#" class="text_left_nav">Day Out </a></li>
    		  <li><a href="#" class="text_left_nav">Group</a></li>
    		  <li><a href="#" class="text_left_nav">Birthday Party </a></li>
    		</ul>
    		<img src="http://www.enhance.ie/inprogress/nac...lev_2_what.jpg" alt="What are you looking for?" width="147" height="39" /> 
    		<ul>
    		  <li><a href="#" class="text_left_nav">Wild Waters</a></li>
    		  <li><a href="#" class="text_left_nav">Competition Pool </a></li>
    		  <li><a href="#" class="text_left_nav">Gym</a></li>
    		  <li><a href="#" class="text_left_nav">Swimming Lessons </a></li>
    		  <li><a href="#" class="text_left_nav">Membership</a></li>
    		</ul>
    		<img src="http://www.enhance.ie/inprogress/nac...2_features.jpg" alt="Features" width="147" height="39" /> 
    		<ul>
    		  <li><a href="#" class="text_left_nav">Accessibility</a></li>
    		  <li><a href="#" class="text_left_nav">Virtual Tour </a></li>
    		  <li><a href="#" class="text_left_nav">Finnie's Kids Club </a></li>
    		</ul>
    	  </div>
    	</div>
    	<div id="cont"> 
    	  <p class="header">Groups</p>
    	  <p class="text">The National Aquatic Centre offers hours of fun in Europe&rsquo;s 
    		largest indoor water park and pool complex where the weather is tropical 
    		all year round.</p>
    	  <p class="text">We also offer host a wide variety of activities in the competition 
    		pool such as international swimming and diving training camps. Our Aquatics 
    		Department can organise accommodation and trasportation as part of an 
    		integrated package.</p>
    	  <p class="text"><strong>Our Leisure Pool offers extreme thrills, raging 
    		water adventures and loads of fun. Rides include:</strong></p>
    	  <div> 
    		<ul>
    		  <li class="text">Master Blaster (Water roller coaster)</li>
    		  <li class="text">Flow Rider (Surfing Machine)</li>
    		  <li class="text">Wave Pool</li>
    		  <li class="text">Lazy River</li>
    		  <li class="text">Bubble Pool</li>
    		  <li class="text">Pirates Ship</li>
    		  <li class="text">Dark Hole Flume (water slide)</li>
    		  <li class="text">Green Giant Flume</li>
    		</ul>
    	  </div>
    	  <p class="text">Our Competition and Diving Pools meet International competition 
    		standards, and is open to everybody. With a 50m pool, diving pool with 
    		moveable floors and a comprehensive Academy of Swimming, the competition 
    		waters in the NAC must be seen.</p>
    	  <p class="text"> We are one of the biggest attractions for schools, social 
    		clubs and youth clubs. Providing a wide range of programmes and activites, 
    		why not contact our sales office for information on prices and availability. 
    		You need to have a group of over 20 to make a group booking. A special 
    		group rate of &euro;8.50 per person applies.</p>
    	  <div> 
    		<ul>
    		  <li class="text"> Swim hats are compulsory.</li>
    		  <li class="text">Under eights accompanied by adults. </li>
    		  <li class="text">Max of two kids with one adult. </li>
    		  <li class="text">&euro;1 coin for lockers - refundable. </li>
    		  <li class="text">Safety briefing will be given to kids on arrival. </li>
    		</ul>
    	  </div>
    	  <p class="text_bigger"><strong>To book, please phone: 01 64 64 364 or 01 
    		64 64 367</strong><br />
    	  </p>
    	</div>
    	<div class="clearer"></div>
      </div>
      <div id="ftr"><img src="http://www.enhance.ie/inprogress/nac...bott_solid.gif" width="761" height="25" /></div>
    </div>
    </body>
    </html>
    Note that your navbott img is 1 pixel out. You will need to redraw it to match the layout below.

    Hope that helps.

    Paul

  7. #7
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Ireland
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much for that Paul,

    Its now looking great in IE! Only one problem left in IE - when you mouse-over the top nav its fine, but when you click on a link it a gap appears under the nav bar - it was showing the left nav over state, but I fixed that - just the gap now.

    other browser issues - in firefox and netscape it's missing the left and right border from the mis section, also the left nav background image is not showing up!

    Opera - its got that giant gap under the top nav and is also missing the wavy line image under the top nav!

    Thanks a million for your help!

    The new page is here:
    http://www.enhance.ie/inprogress/nac/2_3/text4.htm

    The new Stylesheet is here:
    http://www.enhance.ie/inprogress/nac...ac_style_1.css

    Thanks again,
    cliff

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

    You missed the clearer div that I put in the html here (and i even mentioned it in my first post :
    Code:
    		64 64 367</strong><br />
    	 </p>
    	</div>
    <div class="clearer"></div>
    </div>
    <div id="ftr"><img src="http://www.enhance.ie/inprogress/nac...bott_solid.gif" width="761" height="25" /></div>
    </div>
    </body>
    </html>
    You also changed navbott to float for some reason and that threw everything out (unless you had a reason for doing that that I didn't notice).
    Code:
    #navbott{
    height: 37px;
    }
    Thas should get firefox and opera back in shape.

    Paul

  9. #9
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Ireland
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul, thanks for that - yep I missed that clearer div tag alright! Sorry.

    In IE I'm still getting a gap beneath the top nav when I click on a button or two. Same thing is hapening in Opera. In firefox it looks like the Bottnav image is not appearing at all!

    Apart from that everything is looking sweet! Thanks for your help

    Page:
    http://www.enhance.ie/inprogress/nac/2_3/text4.htm

    Stylesheet:
    http://www.enhance.ie/inprogress/na...nac_style_1.css

    Cliff

  10. #10
    SitePoint Evangelist
    Join Date
    Jul 2004
    Location
    England
    Posts
    588
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    >Apart from that everything is looking sweet!

    Here's the raincloud...

    In Mac/FF the image under the first navbar is positioned outside of the main area and racts to a mouseover on cafe.
    And on the vertnavbar lessons/membership are sitting on the same chair.
    To validate, the html needs a couple fixes to what aren't critcial errors.

    From a user viewpoint, sooner likely than later someone will try to cut-and-paste the contact details from the header. They'll get frustrated when they can't. With no good reason for it to be set as an image and many good reasons for it to be different you might consider an appropriate change - it can readily be incorporated toward the footer as normal text. To aid flexible development, you may also wish to consider a specific 'contact' section for such info.

  11. #11
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Ireland
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Gulliver, thanks for the heads up on the Mac/FF issue. I'll see what I can do about the problems. On the other points - I did intend to change the address section to text, and there will be a contact section from a text link at the bottom of every page. Thank for reminding me!

    Cliff.

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    In IE I'm still getting a gap beneath the top nav when I click on a button or two
    Hmmm I can't seem to duplicate that locally. If I copy everything locally it displays fine. Even if i link to your css and images online it works ok. Therefore I can't really help as I can't see if anything works when I change things around. You will just have to change a few properites and experiment until you find whats causing the gap.

    You could try adding a clearer here:

    Code:
    <div id="navcontainer"> 
    	<ul id="navlist">
    	 <li><a href="#" style="font-size: 9px; text-align:center;">ABOUT US</a></li>
    	 <li><a href="#" style="font-size: 9px; text-align:center;">LOCATION</a></li>
    	 <li><a href="#" style="font-size: 9px; text-align:center;">OPENING TIMES</a></li>
    	 <li><a href="#" style="font-size: 9px; text-align:center;">PRICES</a></li>
    	 <li><a href="#" style="font-size: 9px; text-align:center;">SPECIAL OFFERS</a></li>
    	 <li><a href="#" style="font-size: 9px; text-align:center;">BOOKINGS</a></li>
    	 <li><a href="#" style="font-size: 9px; text-align:center;">EVENTS</a></li>
    	 <li><a href="#" style="font-size: 9px; text-align:center;">CAF&Eacute;</a></li>
    	</ul>
    	<div class="clearer"></div>
    </div>
    But I don't know if it will make a difference as it all appears to be ok locally anyway.

    Paul

  13. #13
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Ireland
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Paul,

    Thanks for looking for the problem! I tracked it down myself Not exactly sure how to explain what was going on but the top nav was trying to call in the leftnav over state when the buttons were active - which was an extra 6 pixles in height - hence the gap.

    In opera a big gap appeared below the bottnav image - I was able to fix that using your really handy clearer div tag.

    Thanks a million for all of your help. Now it's on to the mac firefox problems gulliver found! Yay!

    Page:
    http://www.enhance.ie/inprogress/nac/2_3/text5.htm

    Stylesheet:
    http://www.enhance.ie/inprogress/nac...ac_style_5.css

    Cliff.

  14. #14
    SitePoint Evangelist
    Join Date
    Jul 2004
    Location
    England
    Posts
    588
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    >Thanks a million for all of your help. Now it's on to the mac firefox problems gulliver found! Yay!

    Looks like the topnavissue is resolved.

    On the vertnav, a big scene-of-crime clue is to remove the word 'lessons' and see what happens.

    ;-)

  15. #15
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Ireland
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Gulliver,

    I have decreased the left margin of the left nav text by 2 pixels - this seems to have done the trick! I checked the results using http://www.browsercam.com/ - which is a cross platform/browser checker (1 day free trial of screen captures!). If you could check it for me with your mac to make sure it's okay, I'm much appreaciate it

    Page:
    http://www.enhance.ie/inprogress/nac/2_3/text5.htm

    Stylesheet:
    http://www.enhance.ie/inprogress/nac...ac_style_5.css

    Thanks,
    cliff.

  16. #16
    SitePoint Evangelist
    Join Date
    Jul 2004
    Location
    England
    Posts
    588
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    >I have decreased the left margin of the left nav text by 2 pixels - this seems to have done the trick.

    'Close... no cigar, though'. ;-)
    [It's with good intent that I'm being obtuse - rather than post a fix. When we're guided rather than told, and hence sort it ourselves... it's more satisfying and likely to be remembered.]

    Reducing the width helps... because, as you realise, the text is too wide for the container. But, it's not reliable. Where the user default font face/size is different - or if they resize to suit their eyes... the text grows/shrinks accordingly. This often breaks layouts.

    Whilst unable to *practically* cater for everyone... we can make reasoned assumptions that 'it'll fly' by allowing ourselves some margin... it's reasonable to allow for text a couple sizes larger than that with which we designed. Try it with yours and see what happens.

    Thinking aloud [start poor attempt at humor](and I'm not sure if thinking is 'allowed' judging by some of the 'help me' posts here which clearly have been written by folk who haven't bothered to think for themsleves - and before I get myself into further trouble I'll add 'I'm sorry, I must stop doing it and think before I post.)[end poor attempt at humor], you may decide to allow a wider container, reduce the text size or both.

    >browsercam... is great for 'frozen in time' snapshots... useless for checking interactivity. Best to not rely too heavily. ;-)

    And, for Mac, drop 'icapture' into Google.

    http://www.danvine.com/icapture/


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
  •