SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS: where's the bottom?

    Hey all
    I'm trying to place some "back to top" links on each section of this page and it works peachy in Mozilla. But - IE seems to not know where the bottom is - because as soon as I introduce the rule - the link *vanishes*. I don't see where it goes. Any value seems to make it vanish. Here's the CSS as it stands now
    Code:
    div.contentSection {
    	position: relative;
    	color: #000;
    	background-color: #F5F5F5;
    	padding: 0 5px 5px 10px;
    	margin: 20px 0;
    	border: 1px solid #DDD;
    	}
    div.contentSection a.top {
    	border-top: 1px solid #CCC;
    	border-left: 1px solid #CCC;
    	border-bottom: 1px solid #FFF;
    	border-right: 1px solid #FFF;
    	color: #00C;
    	background-color: #FFF;
    	text-decoration: none;
    	display: block;
    	padding: .2em .5em;
    	text-align: center;
    	position: absolute;
    	right: 9px;
    	z-index: 100;
    	}
    div.contentSection>p>a.top {
    	bottom: -1px;
    	right: -1px;
    	}
    See anything that would make this happen when I add bottom to the link?
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  2. #2
    Sidewalking anode's Avatar
    Join Date
    Mar 2001
    Location
    Philadelphia, US
    Posts
    2,205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Doesn't IE not understand child selectors?
    TuitionFree a free library for the self-taught
    Anode Says... Blogging For Your Pleasure

  3. #3
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Correct - that's for Mozilla. I left the bottom out of the general declaration so you can actualy SEE the "back to top" links on the page in IE. Would you like to to add a bottom rule in so you can watch them disappear?
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  4. #4
    Sidewalking anode's Avatar
    Join Date
    Mar 2001
    Location
    Philadelphia, US
    Posts
    2,205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by beetle
    Correct - that's for Mozilla. I left the bottom out of the general declaration so you can actualy SEE the "back to top" links on the page in IE. Would you like to to add a bottom rule in so you can watch them disappear?
    I can't, no Windows. I was just scanning it over and that happened to catch my eye, which is silly in retrospect.
    TuitionFree a free library for the self-taught
    Anode Says... Blogging For Your Pleasure

  5. #5
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Can we see the CSS for p.toplink?

  6. #6
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There is none. It's commented out at the moment - although I've tried positioning that as well and get mixed results. Feel free to view the stylesheet in Mozilla

    http://www.peterbailey.net/fValidate/new/css/screen.css
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  7. #7
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi beetle,

    maybe I'm missing something but why the relative positioning for 'contentsection' and the absolute positioning for 'a.top' ?

    Seems to me (after a quick look at your html) that you've got completely 'normally flowing' information there.

    You probably could leave everything static and then work with widths, margins etc... Or maybe have 'a.top' floating to the right... Just thinking and typing here...

    Or have I got the wrong end of the stick here? Wouldn't be the first time.

    Rik
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac

  8. #8
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Because I want to position it absolutely and remove it from the document flow

    But you're right - I certainly could do that.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




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

    The reason your back to top link is missing in IE6 is that IE likes to have a width or height in the parent container before it will apply right or bottom. You can apply top or left properties and they will work, however they won't achieve the effect you require.

    What you need to do is to set a width in your contentSection div.

    Code:
    div.contentSection {
      position: relative;
      color: #000;
      background-color: #F5F5F5;
      padding: 0 .5em 1em .5em;
      margin: 20px 0;
      border: 1px solid #DDD;
      width:90%;
      }
    Of course this will leave you with a bit of tidying up to do (for mozilla) but shouldn't be too difficult. You may have to set some other divs to 90% just to even everything out but should get you the layout you are looking for.

    Hope this helps.

    Paul

  10. #10
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, what can I say... I had a little play.

    Here's the rules I changed:
    Code:
    body, h1, h2, h3, div, p, ul {margin:0; padding:0; border:0;}
    body, form, input, textarea, select {font: small "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;}
    body {font-size: 76%;}
    td, th, p, li, span, pre, select, input, textarea {font-size: 1em;}
    h1	{
    	position:absolute; left:15px; top:15px;
    	font-size: 24px; font-style: italic; color: #00C;
    	}
    h1 span {font-size: 50%;}
    h2	{
    	font-size: 1.7em;color: #C00;
    	background-color: #FFF;
    	margin: 0;
    	padding: 3px 5px 3px 8px;
    	border: 1px solid #CCD;
    	border-left: 6px solid #CCD;
    	border-right: 6px solid #CCD;	
    	}
    h3	{
    	font-size: 1.4em;
    	color: #C00;
    	background-color: transparent;
    	border-bottom: 1px solid #CCD;	
    	}
    p	{margin-top:1em; margin-bottom:1em}
    div#header {
    	height:62px; background-color:#eef;
    	border-bottom: 1px solid #CCD;
    	}
    div#content {margin: 10px 10px 10px 200px;}
    
    div#nav {width: 170px; float:left;}
    
    /*	Content Sections */
    div.contentSection {
    	background-color: #F5F5F5;
    	padding: 0 1em;
    	margin: 2.5em 0;
    	border: 1px solid #DDD;
    	}
    div.contentSection h3 {border:none; position:relative; left:0.5em; bottom:0.7em;}
    div.contentSection h3 a {border: 1px solid #CCC; padding: 0.25em; background-color: #FFF;}
    div.contentSection p.toplink {text-align:right;}
    div.contentSection a.top {
    	border: 1px solid #CCC; border-color: #ccc #fff #fff #ccc;
    	color: #00C; text-decoration: none; background-color:#fff;
    	padding:0.1em;
    	}
    div.contentSection a.top:hover {color: #C00;}
    It's not perfect, but it does look better (IE5.5win & Firebird). Well, That's what I think anyhow.

    See if you like it.

    Rik
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac

  11. #11
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks all - I got it working relatively nicely now! Ugh - that means I need to get back to writing content...
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  12. #12
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by beetle
    Thanks all - I got it working relatively nicely now! Ugh - that means I need to get back to writing content...


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
  •