SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2004
    Location
    Raleigh, North Carolina
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Two problems, page height & link doesn't work in firefox

    Ok, so I've been attempting a re-work of my current layout from a table based design to a css based design and it was going ok until recently.

    Ok, so the first problem is the height does not work correctly on a Mac. I based my design off the template at the top of this section and I noticed it had a fix for Safari. To be sure I had someone test it on a Mac and it doesn't seem to be expanding to the full 100%.

    You can see screenshots here:
    http://www.imposed.net/layout/safari.jpg
    and
    http://www.imposed.net/layout/ie.jpg (not to mention the logo doesn't even show up here and a horizontal scrollbar appears)

    I'm not too terribly worried about this, but if there is something I'm obviously doing wrong I would like to fix it. I don't have a mac which makes it very difficult sometimes to debug.


    The other problem is one that I'm very concerned with. When you go here - http://www.imposed.net/layout/ - It looks mostly the same on IE & Firefox.

    However you may notice that if you mouse over the "home" link on firefox, it does react the way a link should. Infact, you can't even highlight it like you could regular text/links. I looked at it on IE and it seems to work fine. I can guess at the cause of this and I've tried many many (many ) different things all of which don't really seem to work. I believe the problem is with the nested divs

    Code:
     <div id="header">
     	<div id="logo">
     		<div id="navleft">
     			<div id="navright">
     				<ul id="navigation">
     		    		<li><a href="#">home</a></li>
     		    		<li><a href="#">links</a></li>
     				</ul>
     			</div>
     		</div>
     		<div id="topbottom">Available Domain Name List</div>
     	</div>
     </div>
    Any help is greatly appreciated.

    Thanks.
    WebJunkie - Behind the scenes of a webmaster

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

    The problem with the links in the header is just a matter of setting the z:index higher than that of the #left element.

    e.g.
    Code:
    #header {
     overflow: hidden;
     position: absolute;
     top: 0;
     left: 0;
     height: 70px;
     width: 100%;
     background-color: #FBFBFB;
     z-index:200;
    }
    The problem with the 100% height is that ie5 mac doesn't like it (apparently) and so its commented out so the footer falls below the content (as per normal).

    If you look at the page that you based your page on you will notice that it mentions that ie5 mac isn't supported. I don't believe there is an easy answer to this other than a javascript fix for ie5 mac.

    You would also be better off losing the xml prologue as this throws ie (win) into quirks mode and will use the broken box model (among other things).

    I can't help with specific problems for the mac at present but I will be purchasing a secondhand mac shortly to test further. However I know a number of people have been unsuccesful with implementing the 100% height for it.

    Hope the z-index helps anyway.

    Paul

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2004
    Location
    Raleigh, North Carolina
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Awesome, that sure did fix it Paul.

    I remember trying z-index, but I don't think I went high enough, I set it at like 20, and that didn't work so I moved on to the next thing.

    Anyway, thanks a ton Paul, the height I'm not too terribly concerned about because most of these will have content on them so it will be pushed further down, but it's always nice to have a quick fix.
    WebJunkie - Behind the scenes of a webmaster


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
  •