SitePoint Sponsor

User Tag List

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

    A strange thing is happening in Netscape 7.1. The actual buttons in the navigation at the top display fine horizontally but for some reason the text on top of the them all crammed to the left on top of each other, except for like one. What's weird is that the links all work on the buttons so i think it has to do with the span with this css

    Code:
    .cssnav span {
    	position:absolute;
    	left:5px;
    	top:1px;
    	margin:0;
    	cursor: pointer;cursor: hand;
    	color: #FFF;
    	font-weight: bold;width: 110px;
    height: 21px;
    }
    I played around with the above css and set the position to relative and it suddenly displayed horizontally but the text were way below the buttons, in the bottom blue bar.


    Also, in IE 5.01 for PC, the links are not working on the logo at the top, the Enterprise Solutions ad area and the 4 horizontal tabs along the bottom. I have had this problem for awhile but I am stuck.

    page is at http://wos.lectric.com

    Thanks

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

    NN6 doesn't like positioning things absolutely from inside floats so take the float out of the anchor. (I assume nn7 is the same but I don't have it to test)

    Code:
    .cssnav a {
    display:block;
    position:relative;
    width: 110px;
    height: 21px;
    margin: 0;
    padding: 0;
    border:0;
    }
    I also noticed NN6 jumps on rollover so move the spacer to here:

    Code:
    </div>
    <div id="utilities"> 
    	<ul id="navlist">
    	 <li><a href="/about/" title="About Us" id="aboutNav">About Us</a></li>
    	 <li><a href="/contact/" title="Contact WOS" id="contactNav">Contact WOS</a></li>
    	 <li><a href="/" title="Return Home" id="homeNav">Home</a></li>
    	 <br class="spacer" />
    </ul>
    </div>
    and change the margin-top to a margin bottom as follows:
    Code:
    #webvertisements {
    padding: 0; margin:0;
    height:191px;
    width:802px;
    position:relative;
    }
     
     
    #navlist ul, #navlist li
    {
    margin: 0;
    padding: 0;
    list-style-type: none;
    background-image:none;
    }
    #navlist ul {margin-bottom:3px}
    IE5 likes width:100% and height 100% on the anchors in those links you mentioned.

    Code:
    #businessSbhd a {
    display: block;
    text-indent: -1000em;
    	height:100%;
    	width:100%;
    border: none;
    }
    Change the other links that you mentioned as well and use the 100% instead of the size. If you notice this upsets other browers (although it shouldn't) then just use the star selector hack to give it to ie.

    Paul

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

    I finally figured out the source of the problem I have been having with the background image not lining up with the #outer div, which is 808px wide.There is a background that is 3000px wide and has the shadow and the white bar area (which is 808px wide) that is the background for the content; and that repeats vertically down the page. For some reason the outer does not always line up with the background image. One page will be fine then when another page is clicked the #outer might be offset to the left a little. This seems to happen in almost every browser I checked though it's less obvious in some. Is this some kind of rounding error in how the browser handles the rendering and is there a way to get it to align consistently?

    http://wos.lectric.com

    Thanks
    Kevin

  4. #29
    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)
    There are rounding errors when you try to align image that are in the back ground of the body and with images that are in the background of normal elements (especially in ie). Ie seems to round them at different rates!

    Sometimes you can play about with the size and get something that works consistently and sometimes you can't.

    IE especially has trouble with rounding errors on the vertical and horizontal as can be seen if you put 2 floats of 50% together and they drop on every odd pixel.

    Im not sure why you are using a 3000px width image for your background. The gradient is only 20 or pixels wide and the rest is solid colour. You could just have a 860px (approx bg gif and give the body the solid background colour of the image.

    If you want a more consistent results then you could wrap your whole page in an outer and apply the shadowed background to that outer (e.g. 860px wide) which will provide more consistent results but will result in a scrollbar appearing early.

    Paul

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

    I noticed that popup icon in the links you helped me on does a weird thing after you click on it in IE 5.01 on PC. The visited link pushes up like it originally was, with the very bottom of the text underline being lined up with the baseline of the surrounding text.

    Here's the CSS for that

    Code:
    a.popIcon:link,a.popIcon:visited {
    padding: 0 15px 0 0;
    background: url(/images/popup_icon.gif) no-repeat right center;
    }
    
    * 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 */
    }
    Anyway to stop it from doing that? From the css above it seems like it should be doing it.

    THanks

    Kevin

  6. #31
    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,

    Have you got a link to the page in question as i can't remember where it was

    From the look of the code above you are only styling the link and visited states which means that active and hoover states aren't styled the same. It may be that the active state (when you click) is causing the problem.

    Try just defining all states in one go by just defining a.popicon.
    Code:
    * html a.popIcon  {
    height:1%;position:relative;top:6px;/*for ie5*/
    }
    
    etc.................(same for others)
    If you can remind me where this was as I didn't have to time to read through all the posts here then I'll take a proper look (if the above doesn't solve it)

    Paul

  7. #32
    SitePoint Addict
    Join Date
    Dec 2003
    Location
    Raleigh, NC
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the page is at http://wos.lectric.com/activities/

    I don't have IE 5.02 here at work right now but I will go ahead and add your css.

  8. #33
    SitePoint Addict
    Join Date
    Dec 2003
    Location
    Raleigh, NC
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok I added the hover and active styles to the pop link css. I will have to check it when I go home for lunch.

  9. #34
    SitePoint Addict
    Join Date
    Dec 2003
    Location
    Raleigh, NC
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Paul, do you know of any good resources or tuturials that explains how to do iframes like they use on www.k10k.org? I need to have a similar functionality to the tab navigation that site is doing so I can display 2 types of info on the homepage, News and Pressroom, which can click on and it will load a particular iframe. What's the best way to style iframes ? Just ad a ID to the iframe tag?

    I made a quick sample of a iframe embedded in my page at http://wos.lectric.com/indexIframe.php

  10. #35
    SitePoint Addict
    Join Date
    Dec 2003
    Location
    Raleigh, NC
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tested with the following css, and noticed that now on hover the link moves up, I ma pretty sure its in the right order (link, visited, hover, active). Any ideas on what could be causing it?

    Code:
    a.popIcon:link,a.popIcon:visited,a.popIcon:hover,a.popIcon:active {
    padding: 0 15px 0 0;
    background: url(/images/popup_icon.gif) no-repeat right center;
    }
    
    * html a.popIcon:link, * html a.popIcon:visited,* html a.popIcon:hover,* html a.popIcon:active {
    height:1%;position:relative;top:6px;/*for ie5*/
    }
    * html a.popIcon:link, * html a.popIcon:visited,* html a.popIcon:hover,* html a.popIcon:active {
    voice-family: "\"}\""; voice-family:inherit;/*this makes ie5 jump the next style block*/ 
    }
    * html a.popIcon:link, * html a.popIcon:visited,* html a.popIcon:hover,* html a.popIcon:active {
    top:auto;/* for ie5.5 and ie6 */
    }

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

    replace all the above with just this.
    Code:
    a.popIcon{
    padding: 0 15px 0 0;
    background: url(http://wos.lectric.com/images/popup_icon.gif) no-repeat right center;
    }
    * html a.popIcon {
    height:1%;position:relative;top:6px;/*for ie5*/
    }
    * html a.popIcon{
    voice-family: "\"}\""; voice-family:inherit;/*this makes ie5 jump the next style block*/ 
    }
    * html a.popIcon {
    top:auto;/* for ie5.5 and ie6 */
    }
    Now ie5 doesn't jump

    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
  •