CSS Help Please.

[ThisNameWillDo!]

Hi, basically, I have a top bar and a bottom bar on a page. I want them both to follow the user and be in the same place when they scroll, however, this only works on Firefox. Is there anyway I can get it to work in Internet Explorer too?

#bottombar {
height: 30px;
width: 100%;
position: fixed;
bottom: 0px;
color: #000000;
}

#topbar {
height: 30px;
width: 100%;
position: fixed;
top: 0px;
color: #000000;
}

Help will be appreciated a lot, and also +rep will be given, thank you.

[myke]

Try this:

Hi, basically, I have a top bar and a bottom bar on a page. I want them both to follow the user and be in the same place when they scroll, however, this only works on Firefox. Is there anyway I can get it to work in Internet Explorer too?

#bottombar {
height: 30px;
width: 100%;
position: fixed;
bottom: 0px;
color: #000000;
left: 0px; 
}

#topbar {
height: 30px;
width: 100%;
position: fixed;
top: 0px;
color: #000000;
left: 0px; 
}

Help will be appreciated a lot, and also +rep will be given, thank you.

[ThisNameWillDo!]

Hi, that still did not work, weird. :S

Thank you for attempting to help though!

Any solutions?

[DannLea]

I KNOW I'm going to get yelled at this by everyone who loves DIVs (I use them too, by the way, so I'm not slamming the DIVs)

But..
If you want a quick fix, you may as well use inline frames. You see, IE is the cat of web design, it's always getting in the way.

So, the BIGGEST fix would be to put an IE only info box that tells those dinosaurs using IE to download FireFox or Chrome.

But if you'd rather not do that, then the easiest way to fix your issue would be inline frames, hands down. Put one at the top, and one at the bottom, the only trouble would be that they will not be dynamic with the rest of the website. Ex. If a user clicks a link, only the center will change, not the top or bottom banner.

HOPE this helps, if it's not, then let me know, and I'll try and help again.

Thanks,
Dann

[HotelUser]

I'm really tempted to just stick a "You are using Internet Explorer, please use a real browser" sign on my work because of how poorly my CSS behaves in IE. I code something once that works with Firefox, Opera, Chrome, Safari, Mobile safari even the Android stock browser, but IE screws it up.

[ThisNameWillDo!]

I KNOW I'm going to get yelled at this by everyone who loves DIVs (I use them too, by the way, so I'm not slamming the DIVs)

But..
If you want a quick fix, you may as well use inline frames. You see, IE is the cat of web design, it's always getting in the way.

So, the BIGGEST fix would be to put an IE only info box that tells those dinosaurs using IE to download FireFox or Chrome.

But if you'd rather not do that, then the easiest way to fix your issue would be inline frames, hands down. Put one at the top, and one at the bottom, the only trouble would be that they will not be dynamic with the rest of the website. Ex. If a user clicks a link, only the center will change, not the top or bottom banner.

HOPE this helps, if it's not, then let me know, and I'll try and help again.

Thanks,
Dann

Hey, I really need to use div's for this, I'm sure there is a way for it to work, but I have no idea how.

http://ryan.rawswift.com/sandbox/fixed-bottom-bar/

There is an example, I have no idea how he managed to get it to work as I pretty much have the same CSS coding.

I'm really tempted to just stick a "You are using Internet Explorer, please use a real browser" sign on my work because of how poorly my CSS behaves in IE. I code something once that works with Firefox, Opera, Chrome, Safari, Mobile safari even the Android stock browser, but IE screws it up.

Yeah IE mucks everything up, I wish they'd just get rid of it :/

[LMS16]

#bottombar {
height: 30px;
width: 100%;
position: absolute;
bottom: 0px;
color: #000000;
overflow: hidden;
}
#topbar {
height: 30px;
width: 100%;
position: absolute;
top: 0px;
color: #000000;
overflow: hidden;
}

they should work, sorry if not...


Also, this may help your page show properly in IE, I knnow it fixed problems for me...
Just put this in the <head> </head> tags

<meta http-equiv="X-UA-Compatible" content="IE=8" />

Lew.

[Jonster]

Microsoft are releasing a new versrion of IE soon which is compatible with CSS etc etc I believe.

Link: http://ie.microsoft.com/testdrive/Default.html

[ThisNameWillDo!]

they should work, sorry if not...


Also, this may help your page show properly in IE, I knnow it fixed problems for me...
Just put this in the <head> </head> tags

Lew.

Hey, it did not work, but thank you anyway, if anything it just broke it in Firefox

Microsoft are releasing a new versrion of IE soon which is compatible with CSS etc etc I believe.

Link: http://ie.microsoft.com/testdrive/Default.html

Ahhh fantastic, my project will take months, if not a year to complete, so hopefully that IE is out by then and works with the website, thank you.

[DannLea]

Well.. Did you ever consider looking at his source for help?

I am in no way telling you to copy his HTML completely, but it can get you started on what you need.

He has this as his HTML for the box [Floating at the bottom]

Show Hide

<div id="nav_menu_wrapper">
        <div class="nav_menu">
            <ul>
                <li><a href="http://ryan.rawswift.com/">Home</a></li>
                <li><a href="http://ryan.rawswift.com/about/">About</a></li>
                <li><a href="http://ryan.rawswift.com/resume/">Resume</a></li>
                <li><a href="http://ryan.rawswift.com/portfolio/">Portfolio</a></li>
                <li><a href="http://ryan.rawswift.com/contact/">Contact</a></li>
                <li><a href="http://ryan.rawswift.com/sandbox/jixedbar-0.0.2/demo/">*** Checkout the latest demo</a></li>
            </ul>
        </div>
    </div>

And here is the CSS of his page:

Show Hide

@charset "utf-8";
/*
 * CSS Document
 * Written by Ryan Yonzon
 * http://ryan.rawswift.com/
 */
 
html, body {
    margin:0px; /* FF hack: or we'll have double scrollbar showing on the browser */
    overflow:hidden; /* hide browser's main scrollbar */
}

#main_container {
    width:100%;
    background-color:#FFFFFF; /* DO NOT REMOVE THIS; or you'll have issue w/ the scrollbar, when the mouse pointer is on a white space */
    
    height:100%;    /* this will make sure that the height will extend at the bottom */
    overflow:auto;    /* will have a scrollbar at our content containier */
    position:absolute; /* container div must be absolute, for our fixed bar to work */
}

    #main_container .content_wrapper {
        margin-left:auto;
        margin-right:auto;
        width:90%;
    }
    
    #main_container .spacer { /* spacer w/ fixed height; give space to the content and fixed bar */
        height:30px;
    }

#nav_menu_wrapper { /* this will ba used as a wrapper for the nav_menu so we can center it (nav_menu). especially for IE */
    height:30px; /* fix bar's height */
    width:100%; /* use 100% of width */
    
    /* the code below will PUT the bar at the bottom */    
    bottom:0px;
    position:absolute;
    
    /* hide scrollbar for this wrapper */
    overflow:hidden;
}

    #nav_menu_wrapper .nav_menu { /* the menu itself */
        height:30px; /* fix bar's height */
        width:900px; /* fixed width */

        /* center this div */
        margin-left:auto;
        margin-right:auto;    
        
        /* add effect */
        background-color:#EEEEEE;
        border:#666666 solid 1px;
    }
    
    /*
     * menu links and link effects
     */
        #nav_menu_wrapper .nav_menu ul {
            margin-top:5px;
            list-style:none;
        }
        
        #nav_menu_wrapper .nav_menu li {
            display:inline;
        }
        
        #nav_menu_wrapper .nav_menu li a {
            padding-top:3px;
            padding-bottom:5px;
            padding-left:9px;            
            padding-right:9px;
        }
        
        #nav_menu_wrapper .nav_menu a:link, #nav_menu_wrapper .nav_menu a:visited {
            font-family:Verdana, Arial, Helvetica, sans-serif;
            font-size:12px;
            color:#333333;
            text-decoration:none;
            background-color:#EEEEEE;
        }

        #nav_menu_wrapper .nav_menu a:hover {
            font-family:Verdana, Arial, Helvetica, sans-serif;
            font-size:12px;
            color:#FFFFFF;
            text-decoration:none;
            background-color:#0099FF;
        }

So take a look at this, and see what it has to offer, to be honest I didn't even look at it, I just want to try and help you out. Now remember, you're not going to learn a thing by just copying his stuff, so just look at it and try and see where your code is wrong at.

Good luck, hopefully I've helped and not made the matter worse

Thanks,
Dan