SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: Dotted Line

  1. #1
    SitePoint Wizard rbutler's Avatar
    Join Date
    Jul 2003
    Location
    Springfield, MO
    Posts
    1,867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Dotted Line

    Paul helped me with this before but one minor issue. This page: http://midwestwebdesign.net/co2/

    The dotted line of the left border of the #rightside div won't go down as far past my name in Opera and firefox as it does in IE, view in IE to get an idea of what I'm referring to.

    Relevent css:

    Code:
    #rightside{
    	position:absolute;
    	top:250px;
    	left:540px;
    	width:210px;
    	padding:5px 0 0 27px;
    	border-left:2px dotted #000000;
    	margin-left:10px/*give a little separation between main content and right side content (not space in-between) more of alignment to the right hand side*/
    	margin-top:0px;
    }
    #rightside span#rub {
     position:absolute;
     border-left:2px solid #fff;
     height:25px;
     left:-2px;
     margin-bottom:1px;
     width:0;
    }
    * html #rightside span#rub {width:2px;w\idth:0}
    Revelent HTML
    Code:
    <p class="designed">Designed By </p>
        <p><a href="javascript:;">Ryan Butler</a> &amp; <a href="javascript:;">Karyn O'Dell</a></p>
        <span id="rub"></span>
    Also, could the tagline "serving the ozarks together" be shown using z-indexes in moz?

    Help as always is appreciated.
    Ryan Butler

    Midwest Web Design

  2. #2
    SitePoint Wizard rbutler's Avatar
    Join Date
    Jul 2003
    Location
    Springfield, MO
    Posts
    1,867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Interesting... two hours w/out a response...one more bump until I let it die and do research on an option.
    Ryan Butler

    Midwest Web Design

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

    Not sure exactly what you want but if you take out that span that rubs the line out and add this class below, then it seems to be about the same length in both browsers.

    Code:
    #rightside p.last {padding-bottom:10px;margin-bottom:0}
    Code:
    <p class="last"><a href="javascript:;">Ryan Butler</a> &amp; <a href="javascript:;">Karyn 
    	 O'Dell</a></p>
    </div>
    Not sure either about what you are asking with respect to the z-indexes?

    Paul

  4. #4
    SitePoint Wizard rbutler's Avatar
    Join Date
    Jul 2003
    Location
    Springfield, MO
    Posts
    1,867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you look in IE you will see "serving the ozarks together" as a tagline near the top right underneath the graphics. In moz, this tag line gives the impression of being underneath the navigation. I was thinking with z-indexes this could be solved with moz, because IE and Opera don't exhibit this behavior.

    The space was pretty much what I was looking for thanks.
    Ryan Butler

    Midwest Web Design

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

    Z-indexs will only affect the stacking of elements but will not make any difference to their actual position on screen.

    The problem in the tagline is simply that mozilla adds 1em of padding.margin to the top of the p element which means it moves down the page by 1em. Just set the padding and margins to zero as follows.

    Code:
    #tagline p {margin-top:0;padding-top:0}
    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
  •