SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 30
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2005
    Location
    sittin here on the Group W bench
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Positioned UL not visible in IE6

    I'm using position:absolute; to make a list of links, which is near the end of the HTML, display at the top of the page. It works fine in Mozilla1.7 but in IE6 it's nowhere to be found.

    I thought it might be a haslayout issue, but it has a defined width of 300px, so I'd think that isn't the problem. I also tried using z-index:; to put the UL on top of the masthead, but maybe I did it wrong.

    Here's some of the code:
    Code:
    body {
    	text-align:center;
    	background-color: #F2E3EE;
    	color: #000000;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	padding:0 10px;
    }
    #mainbody{
    	min-width:600px;
    	max-width:1024px;
    	margin:0 auto;
    	border-left:1px solid #000;
    	border-right:1px solid #000;
    	color: #000;
    	text-align:left;
    	position:relative;
    	background:#fff url(images/leftbg250.gif) repeat-y left top;
    }
    #masthead{
    	min-height:80px;
    	background:#d2da9c;
    	color:#fff;
    	border-top:1px solid #000;
    	border-bottom:1px solid #000;
    	position:relative;
    }
    #mastheadwrap {padding:10px; position:relative; z-index: 90; }
    
    ul#navshortcuts {list-style:none; width:300px; position:absolute; top:10px; right:10px; margin:0; z-index: 100; }
    ul#navshortcuts li {display:inline; font-size:12px; float:right; padding:0 7px 0 7px; margin:0;
    	border-right:1px solid #000000;}
    ul#navshortcuts li.first {border-right:none;}
    
    
    <body>
    <div id="mainbody">
    	<div id="masthead">
    	<div id="mastheadwrap">
    		<h1><a href="/" title="Text from title tag on homepage">Site Name<em title="This is hover text."></em></a></h1>
    		<p id="tagline">Tagline, Slogan. Goes here.<em title="This is hover text."></em></p>
    	</div><!-- end mastheadwrap -->
    	</div><!-- end masthead -->
    	<div id="content">
    	<div id="contentwrap">
    	</div><!-- end contentwrap -->
    	</div><!-- end content -->
    	<div id="sidebar">
    	</div><!-- end sidebar -->
    	<ul id="navshortcuts">
    		<li class="first"><a href="#">Testing-1</a></li>
    		<li><a href="#">Testing-2</a></li>
    		<li><a href="#">Testing-3</a></li>
    	</ul><!-- end navshortcuts -->
    	<div id="clearfooter"></div><!-- ie needs this -->
    </div><!-- end mainbody -->
    <div id="footer">
    </div><!-- end footer -->
    </body>

  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,

    The testing 1,2,3 links are displaying fine for me in IE6. Are you sure you can't see them using the above code.?

    If you can see them then we'd need to see an example where they are not working in order to help

  3. #3
    SitePoint Zealot
    Join Date
    Feb 2005
    Location
    sittin here on the Group W bench
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Maybe the problem is in part of the code I cut out.

    Here it is:
    http://d9r.com/studio/layouts/2colfl...luidfixed01-11

    It's modified from one of your layouts:
    http://d9r.com/studio/layouts/2colfl...luidfixed01-00

  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)
    Hi,

    Yes I can see it now and its another IE bug.

    Just move the element down the html a bit further so that is after the clearfooter div and it will display. IE often likes absolute elements within a stacking context to be the last things in the element otherwise it seems to forget where they are.

    Code:
        </div>
        <!-- end sidebar -->
        <div id="clearfooter"></div>
        <!-- ie needs this -->
        <ul id="navshortcuts">
            <li class="first"><a href="#">Testing-1</a></li>
            <li><a href="#">Testing-2</a></li>
            <li><a href="#">Testing-3</a></li>
        </ul>
        <!-- end navshortcuts -->
    </div>
    <!-- end mainbody -->
    <div id="footer">

  5. #5
    SitePoint Zealot
    Join Date
    Feb 2005
    Location
    sittin here on the Group W bench
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, thanks. I hadn't heard of that bug yet. Sounds easy enough to deal with.

    In the same page there's another problem caused by, I think, position:absolute. Inside the content section, 'contenthead' contains breadcrumbs and is positioned to display at the top. In Mozilla it's where it belongs, but in IE6 it's too far to the right by 3ems -- it's as though IE positions over the container's top padding but up to the left padding. In Mozilla it seems to position over both top and left padding. According to the specs, it sounds like it's supposed to position up to the padding, not over it, but Mozilla displays the way I want it to and since Mozilla usually is correct I'm assuming the problem is with IE.

    Code:
    #contentwrap {margin-left:250px; padding:3em 1em 1em 2em; position:relative;}
    #contentmain {}
    #contentfoot {}
    #contenthead {position:absolute; top:0; left:0; padding:0.2em 2em;}
    
    
    <div id="contentwrap">
    	<h2>Page Title<em></em></h2>
    	<div id="contentmain">
    		<p>Main Content goes here : end</p>
    		<p>Main Content goes here : end</p>
    		<p>Main Content goes here : end</p>
    	</div><!-- end contentmain -->
    	<div id="contentfoot">
    		<p>A call to action, sales pitch.</p>
    	</div><!-- end contentfoot -->
    	<div id="contenthead">
    		<p class="navcrumbs"><a href="#">Home</a> > <a href="#">Maincat</a> > Subcat</p>
    	</div><!-- end contenthead -->
    </div><!-- end contentwrap -->

  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)
    Hi,

    Its because your contentwrap doesn't have "layout" and ie won't have a clue where to place things as it does not keep a close eye on its boundaries when the element doesn't have "haslayout".

    You need to force the issue like this:

    Code:
    /* mac hide \*/
    * html #contentwrap{height:1&#37;}
    /* end hide */

  7. #7
    SitePoint Zealot
    Join Date
    Feb 2005
    Location
    sittin here on the Group W bench
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Of course! I should have known. "When in doubt, check haslayout." I'll try to remember that. Thanks.

  8. #8
    SitePoint Zealot
    Join Date
    Feb 2005
    Location
    sittin here on the Group W bench
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The footer has height:50px; and in IE6 it expands vertically to contain its content. Is there an easy way to make Mozilla/Firefox expand the footer vertically? Or should I just style the footer to look the same as the body and not worry about it?

  9. #9
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You should increase the height anyway since it's causing unnecessary scrolling because you're using the 100&#37; height page model.

    In other situations the answer is simple. Use min-height instead of height. I recommend that you read these:
    Internet Explorer and the Expanding Box Problem
    Min-Height for IE/Win
    The overflow declaration
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

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

    With the footer at the bottom of the window technique you have to account for the height correctly in order for it sit at the bottom wthoiut forcing an initial scrollbar.

    Your actual footer height is about 117px and that is the dimension you should be allowing for and needs to be catered for in 3 places as follows.

    e.g.
    Code:
    #footer {
        clear:both;
        min-height:117px;
        border-top:1px solid #000;
        border-bottom:1px solid #000;
        background: #304a00;
        color: #fff;
        text-align:center;
        margin:-117px auto 0;
        position:relative;
        min-width:600px;
        max-width:1024px;
    }
    #footerwrap {padding:0.5em 1em 1em;}
    #clearfooter {width:100&#37;;height:117px;clear:both} /* to clear footer */

    You can use min-height and that will allow the footer to wrap at small screen sizes (to a certain degree) but usually with this method you don't want to have much content in the footer element anyway.

  11. #11
    SitePoint Zealot
    Join Date
    Feb 2005
    Location
    sittin here on the Group W bench
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Kravvitz, thanks for pointing to those references. I'll study them asap.

    Paul, thanks for the quick-and-easy solution. I removed some content from the footer and increased the height from 50px to 70px, and it looks fairly decent now. I've also corrected the 2 IE bugs discussed earlier. If you're interested, here's the latest version: http://d9r.com/studio/layouts/2colfl...luidfixed01-16

    It isn't anything fancy, really -- just a 2 column layout with content first, fluid width, centered in viewport, min/max-width, using image replacement for the logo and tagline, and a nice little dropdown menu. Actually, for me it is fancy based on the amount of css knowledge I have. It looks like it should be a good layout to work with and grow from. Thank you, Paul, for providing it (I found it in the stickied '3-column-layout' thread, Page 51).

  12. #12
    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)
    Glad you got it working

  13. #13
    SitePoint Zealot
    Join Date
    Feb 2005
    Location
    sittin here on the Group W bench
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    The links at the top-right display in reverse order:
    Testing-3 | Testing-2 | Testing-1

    Is there an easy way to make them display in the order they're coded:
    Testing-1 | Testing-2 | Testing-3

    http://d9r.com/studio/layouts/2colfl...luidfixed01-16
    Code:
    ul#navshortcuts {list-style:none; width:300px; position:absolute; top:10px; right:10px; margin:0; z-index: 100; }
    ul#navshortcuts li {display:inline; font-size:12px; float:right; padding:0 7px 0 7px; margin:0;
    	border-right:1px solid #000000;}
    ul#navshortcuts li.first {border-right:none;}
    
    
    	<ul id="navshortcuts">
    		<li class="first"><a href="#">Testing-1</a></li>
    		<li><a href="#">Testing-2</a></li>
    		<li><a href="#">Testing-3</a></li>
    	</ul><!-- end navshortcuts -->

    -
    (I was going to change this topic's title from 'Positioned UL not visible in IE6' to '2-col layout misc questions', but it looks like the edit feature timed out. Oh well.)

  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,

    I'm not sure what you expect the browser to do exactly.

    If you float something to the right then it floats to the right as far as it can. The browser doesn't take into account any html that may follow it!

    The first link gets floated right.

    The second link get6s floated right as far as it can which is next to the first link. The third link gets floated next to the 2nd link.....and so on.

    How else could this work

    If you want them aligned left to right then float them left instead of right but adjust the uls width to auto.

  15. #15
    SitePoint Zealot
    Join Date
    Feb 2005
    Location
    sittin here on the Group W bench
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I want the browser to be telepathic and to implement my every desire regardless of how the page is coded. But until that standard is implemented....

    What I'd like the browser to do is to align the UL up against the right side:
    Testing-1 | Testing-2 | Testing-3


    So, yes, I was going to float:left instead of float:right to make the LI order correct, but that leaves a gap between the right side and the list (using width:300px for UL):
    Testing-1 | Testing-2 | Testing-3 _______


    It sounds like "adjust the uls width to auto" could be the easy solution I was looking for. Thanks Paul. I'll try that and see. I didn't realize width:auto works with position:absolute. I thought it had to be a fixed width.

  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)
    I didn't realize width:auto works with position:absolute. I thought it had to be a fixed width.
    No you don't need a width for absolutely positioned elements and they will shrinkwrap to their contents size.

    There are issues where floated elements will stretch the element to 100&#37; width if you position the parent absolutely to the left and then float the child to the right. In this case IE and firefox stretch the parent to the 100% width (opera is ok).

    Luckily the reverse doesn't hold true and you can position the element to the right and float the inner to the left and it stays content width which is exactly what you want

  17. #17
    SitePoint Zealot
    Join Date
    Feb 2005
    Location
    sittin here on the Group W bench
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that lesson, Paul. It worked for me just like you said it would.

    I have 2 more questions regarding http://d9r.com/studio/layouts/2colfl...luidfixed01-16 :

    (1) In IE6, the logo on mouseover doesn't act like a clickable link. When clicked the link does work, but the cursor doesn't change to a pointing hand when rolled over as it should. I used your image replacement technique; did I do something wrong?
    Code:
    h1 {margin:0; width:240px; height:60px; font-size:36px; position:relative;}
    h1 a {text-decoration: none; color: #000; display:block; height:60px;}
    /* mac hide \*/
    h1 {overflow:hidden;}
    /* end hide */
    h1 em {display:block; width:240px; height:60px; position:absolute; left:0; top:0;
    	background: transparent url(images/logo-240x60.gif) no-repeat left top;}
    
    
    
    <h1><a href="/" title="Text from title tag on homepage">Site Name<em title="This is hover text."></em></a></h1>
    (2) The navshortcut links (at top-right corner) are set in pixels. Would it be better to change them to ems so they can be resized?

  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,

    You just need to give IE a helping hand .
    Code:
    h1 em{cursor:pointer}
    2) Yes use ems as there is no need for you to use pixels at all. You have set the body font size using the keywords and that will allow em based text sizes to resize in IE.

  19. #19
    SitePoint Zealot
    Join Date
    Feb 2005
    Location
    sittin here on the Group W bench
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    1) You just need to give IE a helping hand .
    Code:
    h1 em{cursor:pointer}
    You know everything. Amazing.

    Quote Originally Posted by Paul O'B View Post
    2) Yes use ems as there is no need for you to use pixels at all. You have set the body font size using the keywords and that will allow em based text sizes to resize in IE.
    I began with pixels because I was thinking that things in the masthead needed to be exact to the last pixel, in order to make text proportional to the images. But I like the idea of designing with resizable text (since I started testing for it 2 days ago), so I'll take your advice.

    'Preciate it.

  20. #20
    SitePoint Zealot
    Join Date
    Feb 2005
    Location
    sittin here on the Group W bench
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question another visibility question

    Here's another visibility question:

    I added a top horizontal navigation for the main menu. (It's the suckerfish multi-level dropdown - http://www.pmob.co.uk/temp/drop-down-multi.htm ) When rolled over, the dropdowns are transparent and the main content area shows through: http://studio.d9r.net/layouts/2col02/2col02-01.html

    To #navbar I added:
    position:relative; -- that didn't help,
    float:left; -- that didn't help,
    z-index: 90; -- that fixed it.
    http://studio.d9r.net/layouts/2col02/2col02-02.html

    The z-index seems to have fixed it, but I don't feel I have a good understanding of why it fixed it and how best to use z-index overall. Could you please explain why the problem was there to begin with, and the best way to solve it?

  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)
    Hi,

    You only need a z-index of 1 because the element underneath would only have a z-index of 0 in IE (or auto in other browsers).

    Code:
    #navbar { 
        position:relative;
        float:left;
        z-index: 1;
        }
    When elements are laid out on the page they are usually rendered from top to bottom of the html so that elements rendered first are likely to be under elements later in the document if overlaps occur.

    z-index was specifically design so that elements could have their stacking level designated by the author. Elements with a z-index of 1 are further away and those with a higher z-index are nearer to the viewer and will be on top.

    Only positioned elements can have a z-index, so you would need to add position:relative to static elements before the z-index can take effect.

    The z-index of a parent is "atomic" which means that although nested children may have a higher z-index they can never overlap anything outside their stacking context that has a higher z-index than their parent. It is the parents z-index that controls the stacking index in relation to other elements outside the current stacking context. The z-index of children of course relate to each other in the normal way.

    Hope that explains it

  22. #22
    SitePoint Zealot
    Join Date
    Feb 2005
    Location
    sittin here on the Group W bench
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    It sure does. Thanks again! You have no idea how much I appreciate your help with learning css. It's almost starting to make sense now.

  23. #23
    SitePoint Zealot
    Join Date
    Feb 2005
    Location
    sittin here on the Group W bench
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Another UL not visible in ie6

    The top horizontal navigation displays fine when the LIs have width:149px - http://studio.d9r.net/layouts/2col02/2col02-02.html

    But when the LI width is changed to 'auto', the list isn't visible in IE6 - http://studio.d9r.net/layouts/2col02/2col02-05.html

    I assume it's a haslayout issue, but am not sure how to solve it.

    I tried:
    ul#navmain {width: 100&#37;;}
    That makes each LI take up its own line, full width of screen, in IE6.

    I tried:
    /* mac hide \*/
    * html ul#navmain {height:1%}
    /* end hide*/
    That also makes each LI take up an entire line in IE6.

  24. #24
    SitePoint Zealot
    Join Date
    Feb 2005
    Location
    sittin here on the Group W bench
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I changed the LI width from 'auto' to '6em', and that makes the list visible in IE6.

    http://studio.d9r.net/layouts/2col02/2col02-06.html
    Code:
    ul#navmain li {
    	position: relative;
    	float: left;
    	width: 6em;
    	text-align: center;
    	}
    Also, I think it looks better for each tab to be the same width rather than vary depending on the length of its title. This tabbed menu thing is still new to me, so I may be wrong - maybe there are cases where it would be better to use width:auto. If so, the preceeding problem still needs a solution.

  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)
    The problem in IE is that you can't float the list and then put an anchor inside that is display:block because that will stretch each menu item to 100&#37; width. If you don't use widths then you need to float the anchor as well so that it shrink wraps.

    Drop downs work best with widths as it gets very complicated to make a fluid width drop down.

    Whatever method you use you will still need to force "haslayout" on the list and the anchor if its not floated.


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
  •