1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Disappearing navigation when using position:absolute

Discussion in 'CSS' started by X.Homer.X, Jun 19, 2008.

0
  1. #1
    OKay, so i have an image-replacement header (so that if the image does not show, text is there to say the header) and it is positioned with position:absolute, also, i have a navigation list. When the navigation is positioned absolutely (which it should be, to get it above the header) i see it fine in all browsers, but other people do not see it in IE 7, and Flashpeak (i know its not a standard browser). When i take the position:absolute off the nav, it appears, but under the header. when i take the header image right out, and keep the position:absolute on navigation, it just disappears all together. so its not being slipped under the header, it disappears all together.

    here is my code for this part of the document

    
    <title>Gamers Insanity</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link href="/css.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <div id="container">
	<h1>Gamers Insanity. Theres no end to gaming!<span></span></h1>
      <ul class="nav">
	<li><a href="/index.php">Home</a></li>
	<li><a href="/roster.php">Roster</a></li>
	<li><a href="/matches.php">Matches</a></li>
	<li><a href="/weeklys.php">Weeklys</a></li>
	<li><a href="/media.php">Media</a></li>
	<li><a href="http://forum.gamersinsaninty.com">Forums</a></li>
	<li><a href="/servers.php">Servers</a></li>
	<li><a href="/contact.php">Contact</a></li>
      </ul>
      <div id="main">
    HTML:
    and here is the css corrosponding to that.

    
* {
margin:0;
padding:0;
}
body {
  background-color:#901f1f;
  margin:0px;
  padding:0px;
}
#container {
  position:relative;
  left:50%;
  margin-left:-476px; /*half the width of the div */
  width:953px;
  height:auto;
}
#main {
  float:left;
  background:url(images/content.gif) repeat-y;
  width:953px;
  min-height:35px;
  padding-bottom:8pt;
}
h1 {
  font-family:sans-serif;
  display:block;
  font-size:11pt;
  position:relative;
  width:953px;
  height:223px;
}
h1 span {
  position:absolute; 
  display:block;
  width:953px; 
  height:223px;
  background:url('images/header.gif') 0 0 no-repeat;
  top:0;
  left:0;
} 
ul.nav {
  list-style-type:none;
  position:absolute;
  left:361px;
  top:15px;
}
ul.nav li {
  margin-right:2px;
  width:68px;
  float:left;
  text-align:center;
}
ul.nav a {
  color:#ead5d4;
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-size:8pt;
  font-weight:bold;
}
ul.nav a:hover {
  color:#ffffff;
  background-color:transparent;
}
    Code (markup):
    there is php before the html, but its not changing the html in any way, its just getting where you are, and deciding which script to run. that shouldnt be doing anything should it. just in case, here is the php

    
<?php
ob_start();
//Get page url
$script_path = $_SERVER['SCRIPT_FILENAME'];
if(preg_match('/admin/i', $script_path ))
  {
//Admin config
$phpbb_root_path = '../phpBB3/';
  }
else
  {
//Normal Config NO ADMIN
$phpbb_root_path = 'phpBB3/';
  }

//Rest of content
include("config.php");
$username = $user->data['username'];
$user_id = $user->data['user_id'];

if($user->data['user_id'] != ANONYMOUS)
{
  $con = mysql_connect("*****","*****","*****");
  if (!$con)
    {
    die('Could not connect: ' . mysql_error());
    }

  mysql_select_db("gamers_forum", $con);

  $result = mysql_query("SELECT * FROM phpbb_profile_fields_data WHERE user_id='$user_id' ORDER BY user_id")
  or die(mysql_error());

  while($row = mysql_fetch_array($result))
    {
      if($row[pf_admin_panel] == '1')
       {
	$isadmin = 'YES';
       }
    }
}
else
{
$isadmin = 'NO';
}
if(preg_match('/admin/i', $script_path ))
  {
  if ($isadmin != 'YES')
    {
    header('location:/index.php');
    }
  }
?>
    PHP:
    thanks for any help in advance. if you need any more information to aid me, just ask and ill provide.

    Thanks =]
     
    X.Homer.X, Jun 19, 2008 IP
  2. rikun

    rikun Peon

    Messages:
    85
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Try adding "position:relative" to your "main" div.
     
    rikun, Jun 20, 2008 IP
  3. X.Homer.X

    X.Homer.X Peon

    Messages:
    290
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I'm not doubting that it wont work, but what would this change?
    "main" doesn't appear till after the navigation, I don't know how this would work.

    EDIT: no, this did not work, still displays the same, also, it is not just on other machines, it happens on mine also, it doesnt always happen, just sometimes. im not sure whats wrong.
     
    X.Homer.X, Jun 20, 2008 IP
  4. rikun

    rikun Peon

    Messages:
    85
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Hmm...I forget the reason why, but sometimes I get a similar problem like this. Like if I do rounded corners for some sidebar, and the corners are absolutely positioned, sometimes they go outside the container div if I forget to add position:relative or position:absolute to the container.

    I'll try your code some time tomorrow since I'm kinda tired right now.
     
    rikun, Jun 20, 2008 IP
  5. X.Homer.X

    X.Homer.X Peon

    Messages:
    290
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #5
    thanks, anyone else that knows this right now, and wants to save rikun the trouble, you can post :p id hate the see him go through all the work if its a simple fix. :p

    also, my site is www.gamersinsaninty.com
     
    X.Homer.X, Jun 21, 2008 IP
  6. rikun

    rikun Peon

    Messages:
    85
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Okay so after a little tinkering, I think I've found the problem. All you have to do is remove the float:left from your "main" div.

    Also, I assume that your trying to make "container" centered? A better way of centering is:

    
#container {
    position:relative;
    [B]margin:0 auto;[/B]
    width:953px;
    height:auto;
}
    Code (markup):
    Hope that does it.
     
    rikun, Jun 21, 2008 IP
  7. X.Homer.X

    X.Homer.X Peon

    Messages:
    290
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #7
    that worked thanks =] but what caused this? not because i doubt you, just because i would like to understand the error so i can prevent it in the future :p i don't see why this float:left did that.
     
    X.Homer.X, Jun 21, 2008 IP
  8. X.Homer.X

    X.Homer.X Peon

    Messages:
    290
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #8
    also, when i took the float:left; off of my "main" div it no longer holds the content that is inside it.

    check it out, www.gamersinsaninty.com (does not happen in internet explorer.)
     
    X.Homer.X, Jun 21, 2008 IP
  9. rikun

    rikun Peon

    Messages:
    85
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Honestly, I'm not too sure why this is. I don't see why it should completely disappear like that. It probably goes somewhere we can't see.

    I also found another way to fix it. You could also add a "clear:both" to the end of the list like so:

    Add this to the CSS:
    
.clear {
	clear:both;
}
    Code (markup):
    Then add this to the HTML:
    
    <ul class="nav">
    <li><a href="/index.php">Home</a></li>
    <li><a href="/roster.php">Roster</a></li>
    <li><a href="/matches.php">Matches</a></li>
    <li><a href="/weeklys.php">Weeklys</a></li>
    <li><a href="/media.php">Media</a></li>
    <li><a href="http://forum.gamersinsaninty.com">Forums</a></li>
    <li><a href="/servers.php">Servers</a></li>
    <li><a href="/contact.php">Contact</a></li>
    </ul>
    [B]<div class="clear"></div>[/B]
    Code (markup):
    I think you should still add this after the list on top of removing the float:left from the main to prevent any other layout problems in the future.

    Just use a method similar to mine to center your container divs from now on, and you shouldn't run into this problem again...hopefully.
     
    rikun, Jun 21, 2008 IP
  10. X.Homer.X

    X.Homer.X Peon

    Messages:
    290
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #10
    when in ie i downloaded "developer toolbar" so you can look at the source, rollover elements and they get outlined and when i rolled over the nav ul, no outline came up on the page.

    also, couldnt i just add a clear:both; to the ul.nav in my css?

    also, it wasnt the centering of the div that was causing it (although that helped alot, thanks) so even if i used that centering method, it would not matter :p
     
    X.Homer.X, Jun 21, 2008 IP
  11. rikun

    rikun Peon

    Messages:
    85
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #11
    Sorry, I don't quite understand by what you are trying to do with the outlining.

    Yeah, you could add clear:both to ul.nav. I've been so used to using my "clear" class that I completely missed that, lol.
     
    rikun, Jun 21, 2008 IP
  12. X.Homer.X

    X.Homer.X Peon

    Messages:
    290
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #12
    what I was saying about outlines, is that in IE, i downloaded a application that allowed me to edit css and html right in the browser. When you hold your mouse over an element (in the toolbar) it outlined it in red on the sreen, so you could see exactly where it was, and where the boundries of it were. When i held it over ul.nav, it did not outline anything, so it was either moved off the page, or disappeared :S i dont know.

    Also, in my post above yours where you explain your clear:both fix, i said that my main div does not envelop my two content divs, if your on firefox you can see this www.gamersinsaninty.com this happens on FF and Opera, but not on IE, thats what the float:left was for on the main div, so that it would also be floated, and hold my content divs, i tried adding a clear:both on if, but no dice, it still does not hold the content divs in (my news and left side divs)
     
    X.Homer.X, Jun 21, 2008 IP
  13. rikun

    rikun Peon

    Messages:
    85
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #13
    Okay. I found the problem that's causing the main div to not contain the content. The clear:both wasn't placed in the right place.

    The way that I fixed it was using my usual "clear" div. In your code you have:

    
<div class="left_box_bot"></div>
</div></div>
<div id="footer"></div>
    Code (markup):
    You need to add the "clear" div like so:
    
<div class="left_box_bot"></div>
</div>
[B]<div class="clear"></div>[/B]
</div>
<div id="footer"></div>
    Code (markup):
    Again, you could probably just add the clear property to "content" or something. I can't seem to pinpoint which div to add it to though. But that should fix your main div not expanding to include the content.

    Usually, when a problem like this that involves floats happens, you can safely say that there's a "clear"ing problem. Just add clear anywhere, trial-and-error, to try to find where the problem is.
     
    rikun, Jun 21, 2008 IP