SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 36
  1. #1
    SitePoint Addict
    Join Date
    Dec 2003
    Location
    Raleigh, NC
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    navigation question for Paul or others...

    Hello,

    I am working on this new design, here's a screenshot of what its supposed to look like: http://wos.lectric.com/images/home3.png

    Here's the html and css I am working on
    http://wos.lectric.com/indexReal.html

    I am having problems with the navigation, I am basing it off Paul O'brian's navigation technique at http://www.pmob.co.uk/temp/cssrollover4.htm

    I have modified your code Paul to fit within a unordered list but as you see it's doing some weird stuff. Do you know the problem? I am trying to get it like what it looks like in the screenshot.

    THanks!

    Kevin

  2. #2
    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,

    You've set the li elements to display inline which means they can't carry widths etc.

    You just need to float the list elements instead.
    Code:
    #navcontainer ul li
    {
    float:left;
    width:110px;
    height:21px
    }
    Hope that helps.

    Paul

  3. #3
    SitePoint Addict
    Join Date
    Dec 2003
    Location
    Raleigh, NC
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    thanks

    Thanks Paul, that did the trick.

    I have a few other problems that you might can help with.

    For the main navigation, I am having problems getting the navigation to sit at the bottom of the grey gradient long bar that encompasses the nav and search box. How do I get them to sit evenly? For some reason, the grey gradient disapears in FireFox .8 for PC though it shows fine in other browsers. Maybe it would be better to absolutely position the navigation to the bottom of the grey area. What do you think?

    Also, I am having a problem with the utility sub-navigation area, I want it to align right in the blue horizontal area, like in the screenshot. I know it has to do something like tect align and margin auto but I am at a loss. Maybe absolutely position also? Also there is a problem when I rollover them that it moves the objects underneath, like the ad area. It especially messes up in IE 5.5 on PC. This navigation is based off navigation from Dan Cederholm's tabs.

    There are also some problems with the image replacement technique I am using in the logo and advertisement area (the 2 ads on the left), which I got from one of your techniques. In IE 5.01 on PC, the images on the 2 ads are pushed to the right more that half way, so the right side gets cut off.. The logo gets cut off also or clipped so to speak, also has a weird blue line on the bottom right.

    Also in FireFox .8 on PC the space is collapsed between the footer and the content above it. The margin space is there fine in all versions of IE on PC though.

    Thanks! once I get these problems fixed I think I have this layout done except for maybe small things here and there

    Kevin

  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)
    For some reason, the grey gradient disapears in FireFox .8 for PC though it shows fine in other browsers.
    You need to clear the float for mozilla (with something it can get hold of rather than an empty div) - as follows (the bit in bold):

    Code:
    		<input type="hidden" name="domains" value="#"/>
    		<input type="hidden" name="sitesearch" value="#"/>
    	 </form>
    	</div>
    	<div class="spacer"></div>
    <br style="clear:both" />
    </div>
    <div id="utilities">
    Paul

  5. #5
    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,

    For the main navigation, I am having problems getting the navigation to sit at the bottom of the grey gradient long bar that encompasses the nav and search box
    The extra space on the bottom is created by the margins on your form. If you want it to look like your picture then add this code.

    Code:
    .spacer {
      clear: both;
      height:1px;
      overflow:hidden;
      margin-top:-1px;
      }
    
    form {margin:0;padding:0}
    
    #navcontainer ul li
    {
     float: left;margin-right: 2px;
     width: 110px;
     height: 21px;
    margin-top:5px;
     }
    html:
    Code:
    		<input type="hidden" name="domains" value="#"/>
    		<input type="hidden" name="sitesearch" value="#"/>
    	  </form>
    	</div>
        <br class="spacer" />
     </div>
      <div id="utilities">
    That changes the code I gave you in the first post.

    If you want more height to the grey bar then just apply a height to the ul and then increase the margin-top on the floated list to move it downwards.

    Paul

  6. #6
    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)
    Also, I am having a problem with the utility sub-navigation area, I want it to align right in the blue horizontal area, like in the screenshot. I know it has to do something like tect align and margin auto but I am at a loss. Maybe absolutely position also? Also there is a problem when I rollover them that it moves the objects underneath, like the ad area. It especially messes up in IE 5.5 on
    Just float it right and change the order of the list in the html so that they are in the right position on screen.

    The jumping is probably because you are adding a border on hover which is not there on the norma state thus making everything move down to accomodate. Just place a border on the normal state in the same bg color as the lists background.

    I've also put a border on top that you can't see just to even up the line a bit.

    Heres the code:

    [code]
    #navlist
    {
    margin: 0;
    padding: 0 0 0 10px;
    }
    #navlist ul, #navlist li
    {
    margin: 0;
    padding: 0;
    list-style-type: none;
    background-image:none;
    }
    #navlist li{ display: inline;}
    #secondaryNavContainer {
    z-index: 1;
    }
    #navlist a:link, #navlist a:visited
    {
    border:0;
    float: right;
    font-weight: none;
    margin: 0 10px 0px 10px;
    text-decoration: none;
    color: #FFF;font-size: 1em;
    border-top: 4px solid #3489E2;
    border-bottom: 4px solid #3489E2;
    }
    #navlist a:link#current, #navlist a:visited#current, #navlist a:hover {
    border-bottom: 4px solid #FFF;
    background: transparent;
    color: #FFF;
    }

    [code]


    html:
    Code:
      <div id="utilities"> 
    	<div id="secondaryNavContainer">
    	  <ul id="navlist">
    	    <li><a href="#">Company Info</a></li>
       <li><a href="#">Contact WOS</a></li>
    		<li><a href="#">Home</a></li>
       </ul>
    	 <br class="spacer" />
     </div>
      </div>
    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)
    Also in FireFox .8 on PC the space is collapsed between the footer and the content above it. The margin space is there fine in all versions of IE on PC though.
    Try setting the margins on the top element as well. Both mozilla and ie do funny things with top margins occasionally. Mozilla has a top margin bug and ie has many bugs.

    Code:
    #news {margin-bottom:30px}
    #footer {
     background-color: #3489E2; width: 801px;
     border: 0;
     margin: 30px 3px 0 3px;
     padding: 0;
     color: #FFF;
     font-size: .9em;;
     text-align: left;
    }
    Sort that lot out then I'll take a look later at the images in ie5 - but I've got to take a rest now lol

    Paul

  8. #8
    SitePoint Addict
    Join Date
    Dec 2003
    Location
    Raleigh, NC
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul! you should write a book on CSS!

    It's working pretty good now. For the main navigation though, if you resize the text a couple of times the space opens up below the buttons, showing the grey gradient area...is there a way to get rid of that, or is it just a limitation of using this technique? it's no big deal really.

    Also, I am not sure if you have IE 5.23 for mac, but if not maybe you can take a look at the code and see what could be causing it. The search area is flushed left next to the buttons instead of being aligned right like in other browsers.

    Also the 4 subheaders in the four floats are not there. I am using that image replacement technique like I did on the others areas. Weird that it works in the ad area.

    The image replacement areas also flash when you rollover them. I know this happens when you have a image in the hover state but I do not have any in the hover state. What's causing this?

    Thanks again!

    Kevin

  9. #9
    SitePoint Addict
    Join Date
    Dec 2003
    Location
    Raleigh, NC
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just checked in IE 6.0.28 on PC, and the main navigation is still away from the bottom grey gradient by a half a inch...I have only access to this version right now at work but it displays fine on all mac version of browsers. What do you think the problem is there?
    Thanks

    kevin

  10. #10
    SitePoint Addict
    Join Date
    Dec 2003
    Location
    Raleigh, NC
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also found couple of problems in Netscape 7.02 on PC, the html text that's supposed to be underneath the image button is all the way over to the leftside of the window in the beige area. Also, the second ad banner over is not there, only the html text is, I assume it is underneath the first banner.

    kevin

  11. #11
    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,

    I just checked in IE 6.0.28 on PC, and the main navigation is still away from the bottom grey gradient by a half a inch...I have only access to this version right now at work but it displays fine on all mac version of browsers. What do you think the problem is
    The problem is you didn't follow my instructions carefully enough

    For some reason you've added a 4px height to the ul whuich makes no sense. Ie will render that at the current fon-t size anyway which is wjy you were getting the gap.

    Code:
    form#search-form {margin:5px 0 0 0;padding:0}
    /* Main Navigation
    ----------------------------------------------- */
    #navcontainer ul
    {
    	border: 0;
     margin: 0;
     padding: 0;
    	list-style-type: none;
       /* height: 4px; whats this for?*/
    }
    The above code should also stop the gradient underneath from expanding.

    I'll have to work through some of your other problems tomorrow as I have some things to catch up on tonight

    Paul

  12. #12
    SitePoint Addict
    Join Date
    Dec 2003
    Location
    Raleigh, NC
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OOPS! my mistake, I feel dumb now, someone slap me I meant to write 40px but I guess I was in a hurry. Thanks for your help. I will try to solve the other problems by tomorrow if I can.

    I think I solved the main nav text going to left problem. I added a position: relative to the a links.

    Kevin

  13. #13
    SitePoint Addict
    Join Date
    Dec 2003
    Location
    Raleigh, NC
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey All,

    And thanks Paul for your help. I fixed most of the errors with the image replacement I was using on the images, images are showing up on IE mac 5.2.3 now. It's all fine and dandy now for the most part except for a couple of small things which maybe someone can help me with.

    1 -
    There's something weird going on with the background image I am using and how it aligning with the content.

    In the browsers, IE 6, 5.5, 5.01 and Firefox .8(PC and MAC) for the PC, there is more white space on the left edge where the edge meets the back, as compared to the right side. There's like a couple of pixels difference. In Netscape 7 there is actually a lot of whitespace on the right. Most mac browsers such as Safari, Opera 7 and Mac IE 5.2.3 display and align fine.

    Anyone know what's going on there?

    2- Second issue is really minor in MAC IE 5.2.3. In that browser, when i resize the window horizontally at a certain distance there appears vertical white space on the very rightside of the viewpoint. Also, the right form at top doesn't align to the right like other browsers, but is next to the navigation to the left.

    Thanks for your help.

    Kevin

  14. #14
    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,

    If you give #outer a different background colour then you can see theres a gap on the left of 1 pixel. I'm not sure if this is what you mean but if you change your outer to 808px it seems to line up better.

    Just going out so couldn't check your second problem so perhaps someone else will or I could look on 5.1 mac later when I get back this evening (if I have time ).

    Paul

  15. #15
    SitePoint Addict
    Join Date
    Dec 2003
    Location
    Raleigh, NC
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello again,

    I have this site pretty much finished up except for a few last css bugs which I need help on. I want to thank Paul for all his help, I have learned alot from his help. I'm slowly learning this stuff.

    Anyway, the page in question is at http://wos.lectric.com/ and the css is at http://wos.lectric.com/css/screen.css

    In Explorer 5.01 and 5.5 PC, when you rollover the top navigation, it does not turn into a cursor like it does in other browsers such as IE 6 PC. It's not a big deal but if it can be fixed why not do i say.

    In IE 5.01, the four tabs near the bottom have hyperlinks on them but they donít change to the cursor when you rollover them.

    Also in IE 5.01, on this page, http://wos.lectric.com/customers/, the right sub-navigation expands vertically, like has a space between each navigation, thereís supposed to be no space.

    On the same page, I have a popup graphical icon on the some of the links that go to external links, but in IE 5.01, they are on top of the link, even though I have right padding. It works in other browsers fine.

    In Opera 7, the top navigation is stacked vertically pushing everything down the page.

    Thank you,

    Any help would be greatly appreicated! If you see anymore bugs let me know.

    Kevin

  16. #16
    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,

    In Explorer 5.01 and 5.5 PC, when you rollover the top navigation, it does not turn into a cursor like it does in other browsers such as IE 6 PC. It's not a big deal but if it can be fixed why not do i say.
    ie5 needs cursor hand, so you can use this instead (in this order).


    Code:
    cursor: pointer; cursor: hand;
    Paul

  17. #17
    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,
    Also in IE 5.01, on this page, http://wos.lectric.com/customers/, the right sub-navigation expands vertically, like has a space between each navigation, thereís supposed to be no space.
    This si a whitespace bug and can be cured by placing a space before the closing anchor.
    Code:
    <ul id="subnavcontainer">
     <li><a href="/customers/servgate.php" title="ServGate Technologies" id="servgateNav">ServGate Technologies </a></li>
     <li><a href="/customers/scala.php" title="cala Inc." id="scalaNav">Scala Inc. </a></li>
    <li><a href="/customers/resilience.php" title="Resilience Corporation" id="resilienceNav">Resilience Corporation </a></li>
    Don't alter the spacing above and it should work ok.

    On the same page, I have a popup graphical icon on the some of the links that go to external links, but in IE 5.01, they are on top of the link, even though I have right padding. It works in other browsers fine.
    This will get it to show but will be a slightly different position than other nbrowsers which you can fix if you want

    Code:
    a:hover {
      color:#f00;  border-bottom:1px solid #fff;
     }
      
    a.popIcon:link,a.popIcon:visited {
    padding: 0 15px 0 0;
    background: url(http://wos.lectric.com/images/popup_icon.gif) no-repeat right center;
    }
    * html a.popIcon:link, * html a.popIcon:visited {
    height:1%;
    }
    Paul

  18. #18
    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,

    In Opera 7, the top navigation is stacked vertically pushing everything down the page.

    Thats because you haven't given a width to your ul float. Opera will default to 100%.

    I don't think you need it at all so take it out. If you do need it then just give it a width.

    Code:
    #navcontainer ul
    {
    	border: 0;
     margin: 0;
     padding: 0;
    	list-style-type: none;/*float:left;display:inline;*/
    }
    Thats it for now

    Paul

  19. #19
    SitePoint Addict
    Join Date
    Dec 2003
    Location
    Raleigh, NC
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul that did the trick. Though, for that popup icon on the links..the icon displays fine now in IE, showing up on the right, but the whole link is pushed up vertically, the line of the link lines up with the basline of the surrounding text....in other words, the link is out of place vertically...is there a way to fix this? I take it's something to do with line height.

    Concerning that whitespace bug you mentioned...is that similar what's it's doing on this other page of mine at http://www.theoiladvantage.com/? There's a space in IE PC version above the unordered list navigation at the top, this list is in a table cell....I tried messing with the margins and padding but it has no effect. And I tried adding space at the end of the link before the <a> ending tag.

    Thanks for getting me squared away on this stuff.

    Kevin

  20. #20
    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,

    Concerning that whitespace bug you mentioned...is that similar what's it's doing on this other page of mine
    Images are treated as text by some browsers (and in certain modes) and space is allocated for the descenders in the text so that text sits on a baseline along with the image with the descender poking down below

    The usual way to fix this is to set the image to block which solves the problem. However in tyour case you have two images so setting them to blobk would make them each appear on a new line. So the answer is to float the images which is display block by default and should fix the problem.

    Code:
    td.header img {float:left;}
    Code:
    	<td class="header"><a href="index.php" class="noborder"><img src="http://www.theoiladvantage.com/images/logo.png" alt="AmsOil" width="178" height="66" border="0" /></a><img src="http://www.theoiladvantage.com/images/tagline.png" alt="The First in Synthetics" width="312" height="66" /><img src="http://www.theoiladvantage.com/images/right_stripes.png" alt="" width="309" height="66" />
    Paul

  21. #21
    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)
    I assume we are still talking only about ie5?

    If thats the case then you'll have to hack something just for ie5 like follows.
    Code:
    * html a.popIcon:link, * html a.popIcon:visited {
    height:1%;position:relative;top:6px;/*for ie5*/
    }
    * html a.popIcon:link, * html a.popIcon:visited {
    voice-family: "\"}\""; voice-family:inherit;/*this makes ie5 jump the next style block*/ 
    }
    * html a.popIcon:link, * html a.popIcon:visited {
    top:auto;/* for ie5.5 and ie6 */
    }
    The above must stay in that order to work properly and isolates ie5 and leaves ie5.5. and 6 alone.

    Paul

  22. #22
    SitePoint Addict
    Join Date
    Dec 2003
    Location
    Raleigh, NC
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cool that fixed the bugger! I should've known that, I had read about that in Eric Meyer's book.

    Any solution to that other problem with the icon?

    Thanks

    kevin

  23. #23
    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)
    Any solution to that other problem with the icon?
    Look up

  24. #24
    SitePoint Addict
    Join Date
    Dec 2003
    Location
    Raleigh, NC
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oops! Yea I see it now, I hadn't refreshed it before you posted the second one so I didnt see it.

    What's the reason for this bug in IE 5.01? What causes the link to not keep the icon to the right even when you set padding on the right?

    Thanks

    Kevin

  25. #25
    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)
    What's the reason for this bug in IE 5.01
    I've given up trying to find reasons for things and just try to fix them instead

    Ie5 seems to position a few things differently (especially lists) and handles inline elements differently as well.

    I just fix it and move on

    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
  •