SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2005
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question My first CSS website and text dissapearing problem

    Hi everyone!

    Background

    I work for the University of Hull and a colleague and I have been tasked with creating a CSS-P template of our current www.hull.ac.uk website by the end of this month. We started learning CSS-P only 4 weeks ago after attending a course run by Trenton (who has written articles on this forum) which was great and have got the sitepoint books which have proved invaluable.

    The Problem

    I have created a template (useing absolute positioning) which works ok except that in IE 6 the text at the bottom of the page (the white content area) is invisible, ie its there if you select it with your cursor but doesn't show.

    I've read about heights and min-height etc but I haven't specified any height commands in my main layout area. It works find in Firefox however.

    CSS-P layout with invisible text

    I haven't yet dared to test this in IE5 so I'm sure its going to die a death in that... one thing at a time

    I'd really appreciate any suggestions/comments etc as my deadlines approaching fast.

    Thanks

  2. #2
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think you'll be OK if you add this to your IE conditional comments (not to your regular stylesheet):
    Code:
    #center {
    height:1px;
    }
    By the way, I think you're seriously misunderstanding the cascade and how it works. This for example :
    Code:
    #p7PMnav ul {position:absolute;left:-9000px;}
    #p7PMnav ul ul {position:absolute;left:-9000px;}
    #p7PMnav ul ul ul {position:absolute;left:-9000px;}
    #p7PMnav ul ul ul ul {position:absolute;left:-9000px;}
    #p7PMnav ul ul ul ul ul {position:absolute;left:-9000px;}
    #p7PMnav ul ul ul ul ul ul {position:absolute;left:-9000px;}
    #p7PMnav ul ul ul ul ul ul ul {position:absolute;left:-9000px;}
    #p7PMnav ul ul ul ul ul ul ul ul {position:absolute;left:-9000px;}
    #p7PMnav ul ul ul ul ul ul ul ul ul {position:absolute;left:-9000px;}
    #p7PMnav ul ul ul ul ul ul ul ul ul ul {position:absolute;left:-9000px;}
    #p7PMnav ul ul ul ul ul ul ul ul ul ul ul {position:absolute;left:-9000px;}
    #p7PMnav ul ul ul ul ul ul ul ul ul ul ul ul {position:absolute;left:-9000px;}
    #p7PMnav ul ul ul ul ul ul ul ul ul ul ul ul ul {position:absolute;left:-9000px;}
    #p7PMnav ul ul ul ul ul ul ul ul ul ul ul ul ul ul {position:absolute;left:-9000px;}
    #p7PMnav ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul {position:absolute;left:-9000px;}
    #p7PMnav ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul {position:absolute;left:-9000px;}
    #p7PMnav ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul {position:absolute;left:-9000px;}
    #p7PMnav ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul {position:absolute;left:-9000px;}
    #p7PMnav ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul {position:absolute;left:-9000px;}
    ... is insane and actually does nothing.
    Each one of those 'ul's has to be a child of the one before it for that code to do anything. You don't have ul's nested to the 19th degree on your page, so this is... a waste of space.

  3. #3
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    CSS-P ? not P vii i hope, for me CSS-DIV

    Why positioning absolute, you are going to use bigtime DHTML ?

    Why the heavy JavaScript for menuís ? its obsolete and search engine unfriendly (search for suckerfish CSS menuís)

  4. #4
    SitePoint Enthusiast
    Join Date
    Jun 2005
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by all4nerds
    Hello

    CSS-P ? not P vii i hope, for me CSS-DIV

    Why positioning absolute, you are going to use bigtime DHTML ?

    Why the heavy JavaScript for menuís ? its obsolete and search engine unfriendly (search for suckerfish CSS menuís)
    Hi

    Suckerfish also uses Javascript so that the drop down works in IE.

  5. #5
    SitePoint Enthusiast
    Join Date
    Jun 2005
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by BonRouge
    I think you'll be OK if you add this to your IE conditional comments (not to your regular stylesheet):
    Code:
    #center {
    height:1px;
    }
    By the way, I think you're seriously misunderstanding the cascade and how it works. This for example :
    Code:
    #p7PMnav ul {position:absolute;left:-9000px;}
    #p7PMnav ul ul {position:absolute;left:-9000px;}
    #p7PMnav ul ul ul {position:absolute;left:-9000px;}
    #p7PMnav ul ul ul ul {position:absolute;left:-9000px;}
    #p7PMnav ul ul ul ul ul {position:absolute;left:-9000px;}
    #p7PMnav ul ul ul ul ul ul {position:absolute;left:-9000px;}
    #p7PMnav ul ul ul ul ul ul ul {position:absolute;left:-9000px;}
    #p7PMnav ul ul ul ul ul ul ul ul {position:absolute;left:-9000px;}
    #p7PMnav ul ul ul ul ul ul ul ul ul {position:absolute;left:-9000px;}
    #p7PMnav ul ul ul ul ul ul ul ul ul ul {position:absolute;left:-9000px;}
    #p7PMnav ul ul ul ul ul ul ul ul ul ul ul {position:absolute;left:-9000px;}
    #p7PMnav ul ul ul ul ul ul ul ul ul ul ul ul {position:absolute;left:-9000px;}
    #p7PMnav ul ul ul ul ul ul ul ul ul ul ul ul ul {position:absolute;left:-9000px;}
    #p7PMnav ul ul ul ul ul ul ul ul ul ul ul ul ul ul {position:absolute;left:-9000px;}
    #p7PMnav ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul {position:absolute;left:-9000px;}
    #p7PMnav ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul {position:absolute;left:-9000px;}
    #p7PMnav ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul {position:absolute;left:-9000px;}
    #p7PMnav ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul {position:absolute;left:-9000px;}
    #p7PMnav ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul {position:absolute;left:-9000px;}
    ... is insane and actually does nothing.
    Each one of those 'ul's has to be a child of the one before it for that code to do anything. You don't have ul's nested to the 19th degree on your page, so this is... a waste of space.
    Hi BonRouge

    Do I need to create a seperate IE only stylesheet to put that bit of code you've suggested in?

    I don't understand the above regarding the Cascading code above. The code you've highlighted above ie
    #p7PMnav ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul etc
    doesn't exist in the webpage or stylesheet so I'm not sure what your referring to? Can you explain?

    Thanks for your help.

  6. #6
    SitePoint Enthusiast
    Join Date
    Jun 2005
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by all4nerds
    Hello

    CSS-P ? not P vii i hope, for me CSS-DIV

    Why positioning absolute, you are going to use bigtime DHTML ?

    Why the heavy JavaScript for menuís ? its obsolete and search engine unfriendly (search for suckerfish CSS menuís)
    Hi all4nerds

    We've created the same design using floats and absolutes to find out which works best etc and to learn CSS-P at the same time.

    Can you tell me what the downsides of using absolutes are? Particulary interested if they effect accessibility.

    Thanks for replying!

  7. #7
    SitePoint Enthusiast
    Join Date
    Jun 2005
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    BonRouge,

    Thank you! I've put your IE hack and it works

  8. #8
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Sdewey
    Hi

    Suckerfish also uses Javascript so that the drop down works in IE.
    Yes but a minimum JavaScript for IE only, search engine friendly


    Quote Originally Posted by Sdewey
    Hi all4nerds

    We've created the same design using floats and absolutes to find out which works best etc and to learn CSS-P at the same time.

    Can you tell me what the downsides of using absolutes are? Particulary interested if they effect accessibility.

    Thanks for replying!
    absolute is not in the flow, resize font of dropdown menu to 1.8 em and see

    CSS-P= CSS Positioning ?

  9. #9
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm guessing that crazy CSS has something to do with this :
    Code:
    <body onLoad="P7_initPM(1,14,0,-20,10)">
    I can see now that it's not on your style sheet, but when I checked your css with the WebDev toolbar, that's what it showed me. I'm guessing that javascript produces that CSS.

    I agree with all4nerds about the positioning though. You're much better off using relative positioning and floats. By using absolute poitioning, your document loses its flow and, if you like, 'oneness'. Let's say you have your content absolutely positioned and you have a footer too... Firstly, you'll have to position the footer absolutely as the thing above it isn't actually there (if that makes sense). (Of course, I suppose you could put the footer in the same div as your content, but...that's unusual). Secondly, if you add more to your content or - as all4nerds pointed out - resize the text, you'll lose the shape and things will start overlapping each other.

    I hope this helps.

  10. #10
    SitePoint Enthusiast
    Join Date
    Jun 2005
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the explanation BonRouge and all4nerds I think I understand now!

    We have also created the template using floats and relative positioning so I guess we'll end up going with that version.

    Its not wasted time, you learn by your mistakes. I'll also have another look at the Suckerfish menu.

    You guys have been invaluable thanks again


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
  •