Reply
CSS issue with fixed navigation bar
Old 05-02-2008, 01:14 PM CSS issue with fixed navigation bar
Skilled Talker

Posts: 63
Name: Holly Simon
I made a navigation bar for the bottom of the page here

http://www.xfilesnews.com/

For me, it seems to be ok in IE, Opera and Firefox

Now, same code, pasted to another site...

http://fiction.xfilesnews.net/index.php

Fine in Firefox, its over by like 500 pixels in IE (off the page) and in Opera the table align middle and top are not respected at all.

The code was copied/pasted from the first site, here it is

Code:
/* network bar stuff */

#network {
    width: 100%;
    position: fixed;
    bottom: 0px;
    height: 26px;
}

#block_network {
    width: 98.5%;
    position: relative;
    background: #101010;
    background-image: url(http://www.xfilesnews.com/images/network/background.jpg);
    background-repeat: repeat-x;
    height: 26px;
}

.network_text1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
        color: #111518;
}

.network_text1 A:link {text-decoration: none; color: #111518;}
.network_text1 A:visited {text-decoration: none; color: #111518;}
.network_text1 A:active {text-decoration: none; color: #111518;}
.network_text1 A:hover {text-decoration: underline; color: #111518;}

select.netbar {
        background-color: #9aacbd;
        color: #000000;
        font-weight: normal;
        font-family:  Verdana;
        font-size: 11px;
        border: 1px solid #4e5e6d;
}

/* end network bar */
And the html part

Code:
<div id="network"><div align="center"><div id="block_network"><table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="1" height="26" bgcolor="#000000"></td>
    <td align="left" valign="top"><table><tr><td valign="top" height="26"><a href="http://www.xfilesnews.com"><img src="http://www.xfilesnews.com/images/network/xfnnetwork.png" alt="XFN Network - X-Files News - www.xfilesnews.com" width="174" height="26" border="0" /></a></td></tr></table></td>
    <td>&nbsp;</td>
     <td align="right"><table><tr><td width="20" height="26" align="right" valign="top"><a href="http://forums.xfilesnews.com/"><img src="http://www.xfilesnews.com/images/network/group.png" alt="XFN Forums" width="20" height="20" border="0" /></a></td>
    <td width="80" height="26" align="right" valign="middle"><span class="network_text1"><a href="http://forums.xfilesnews.com/" class="network_text1">XFN Forums</a> &nbsp; &nbsp; </span></td>
        <td width="20" height="26" align="right" valign="top"><a href="http://irc.x-filesnews.net"><img src="http://www.xfilesnews.com/images/network/chat.png" alt="Chat on XFN" width="20" height="20" border="0" /></a></td>
    <td width="70" height="26" align="right" valign="middle"><span class="network_text1"><a href="http://irc.x-filesnews.net" class="network_text1">Chat Now!</a> &nbsp; &nbsp; </span></td>
    <td width="20" height="26" align="right" valign="top"><a href="http://www.zazzle.com/thinkey*"><img src="http://www.xfilesnews.com/images/network/shopping.png" alt="Support XFN" width="20" height="20" border="0" /></a></td>
    <td width="80" height="26" align="right" valign="middle"><span class="network_text1"><a href="http://www.zazzle.com/thinkey*" class="network_text1">Get T-Shirts</a> &nbsp; &nbsp; </span></td>
<td width="207" height="26" align="right" valign="middle"><form name="jump">
<select name="menu" class="netbar">
<option value="http://www.xfilesnews.com">X-Files News</option>
<option value="">I Want To Believe Forums</option>
<option value="http://www.zazzle.com/thinkey*">XFN Online Store - Support Us!</option>
<option value="http://apps.facebook.com/xfilesnews/">XFN Facebook Application</option>
<option value="http://fiction.xfilesnews.net/">X-Files 2 Movie Fan Fiction Archive</option>
</select></td>
<td width="1" height="26"></td>
<td width="20" height="26" align="left" valign="top"><a href="javascript:location=document.jump.menu.options[document.jump.menu.selectedIndex].value;"><img src="http://www.xfilesnews.com/images/network/go.png" width="20" height="20" border="0"></a>
                </form></td>
    <td width="10" height="26">&nbsp;</td></tr></table></td>
    <td width="1" height="26" bgcolor="#000000"></td>
  </tr>
</table>
</div></div></div>

I have the code displayed in the 2nd site in footer.tpl and its just before the

</body></html>
<!-- END BLOCK : footer --> of that file, therefore, there is no divs wrapping this portion of the code.
Thinkey is offline
Reply With Quote
View Public Profile
 
When You Register, These Ads Go Away!
     
Old 05-02-2008, 01:36 PM Re: CSS issue with fixed navigation bar
wayfarer07's Avatar
Insomniac

Posts: 487
Name: Abel Mohler
Location: Asheville, North Carolina USA
Have you looked at the first page in IE6? It looks like you have a few breaking floats.

This whole mixing of tables and divs in this manner isn't working for me. I think you should at least make the fixed navigation at the bottom into a div, it is easier to manipulate than a table.

You are probably already aware of this, but fixed positioning doesn't work in IE6. There is a hack to make an absolutely positioned div appear like a fixed positioned one, but it may be complicated to get it to integrate into this layout.
__________________
Go FREELANCE <=====||=====> Hire Me
wayfarer07 is offline
Reply With Quote
View Public Profile
 
Old 05-02-2008, 01:49 PM Re: CSS issue with fixed navigation bar
Skilled Talker

Posts: 63
Name: Holly Simon
The idea is from the new facebook bar.

I guess the question is, how is facebook accommodating the IE6 issue? Can i tell that from their code? I never tried copying their code or even looking at it, i just went ahead and coded it myself...will that help at all for this
Thinkey is offline
Reply With Quote
View Public Profile
 
Old 05-02-2008, 02:47 PM Re: CSS issue with fixed navigation bar
wayfarer07's Avatar
Insomniac

Posts: 487
Name: Abel Mohler
Location: Asheville, North Carolina USA
The basic idea behind making an absolute div behave like a fixed div in IE6 is setting the height of the html and body elements to 100%, then having a wrapper element with its height set to 100% and overflow to auto to allow it to scroll (makes it pretend to be the body). Also, the wrapper must have relative positioning. Now, anything you position absolutely within the wrapper will be relative to its 100%, which makes it seem like fixed positioning. You can probably see where we can start to get into trouble here, as this can affect your whole layout. It is usually a good idea to just allow fixed items to exist somewhere else in the flow of things in IE6.
__________________
Go FREELANCE <=====||=====> Hire Me

Last edited by wayfarer07 : 05-02-2008 at 02:48 PM.
wayfarer07 is offline
Reply With Quote
View Public Profile
 
Old 05-02-2008, 03:01 PM Re: CSS issue with fixed navigation bar
Skilled Talker

Posts: 63
Name: Holly Simon
Hmm, could I disable the CSS code for IE6 and just allow it to display everywhere else then? The bar isn't essential to the site and i'd be willing to set it up without IE6
Thinkey is offline
Reply With Quote
View Public Profile
 
Old 05-02-2008, 03:08 PM Re: CSS issue with fixed navigation bar
wayfarer07's Avatar
Insomniac

Posts: 487
Name: Abel Mohler
Location: Asheville, North Carolina USA
you don't have to worry about that, IE6 doesn't recognize the position: fixed, and just ignores it, treating it as static positioning. It will then exist wheresoever you have put it in the normal flow of the document. I would take a look at it in that browser, and see if you find it acceptable. The nice thing about position: fixed is that you can put it anywhere in the flow of your document and it will appear the same.
__________________
Go FREELANCE <=====||=====> Hire Me
wayfarer07 is offline
Reply With Quote
View Public Profile
 
Old 05-02-2008, 03:17 PM Re: CSS issue with fixed navigation bar
Skilled Talker

Posts: 63
Name: Holly Simon
Ok, so if i wanted it to appear at the dead bottom of the pages, that would work for IE6 correct? Then i would just have to make sure that div is appearing at the bottom of the page properley?
Thinkey is offline
Reply With Quote
View Public Profile
 
Old 05-02-2008, 03:33 PM Re: CSS issue with fixed navigation bar
wayfarer07's Avatar
Insomniac

Posts: 487
Name: Abel Mohler
Location: Asheville, North Carolina USA
I think you've got it. Just put it at the bottom of the page, somewhere right before the </body> tag, inside your main table or div
__________________
Go FREELANCE <=====||=====> Hire Me
wayfarer07 is offline
Reply With Quote
View Public Profile
 
Reply     « Reply to CSS issue with fixed navigation bar
 

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off




   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML

 


Page generated in 0.14084 seconds with 13 queries