Jump to content

[SOLVED] Lower Menu IE6 Bug


Hartley

Recommended Posts

Hello everyone!

 

I'm having an issue with a menu I'm implementing. I'll first link to the current test page that is up.

 

c*ast*buz*z.com/beta/test-a/ (remove the stars)

 

The menu in quesion is the gray one with a subtle outer shadow. If you display it in Firefox, IE7+, Opera: it displays properly. The menu is meant to hover above all other text at the bottom (resize the page and it works properly).

 

!!IE6 creates two noticeable bugs!!

1. Bar doesn't cling to the bottom of the browser.

2. The two caps don't attach to the bar properly.

 

I attached an image of the IE6 bug in here in case anyone doesn't use the browser anymore. I'm also including the relevant sections of source code below. For the HTML, I haven't put in any list items yet. Those work fine in testing, but they aren't central to this bug and have been removed. Thus the empty "userbar" element.

 

HTML

		<!--start userbar-->
	<div id="userbar-wrap">
		<div id="userbar">
		</div>
	</div>
	<div id="userbar-cap-wrap">
		<div id="userbar-bg-left"></div>
		<div id="userbar-bg-right"></div>
	</div>
	<!--end userbar-->

 

CSS

/* user bar */
#userbar-wrap {
width:100%;
bottom:0;
position:fixed;
z-index:99999;
}

#userbar {
height:40px;
margin:0 30px;
background:url(../images/site/userbar/u-base.png) repeat-x;
position:relative;
text-align:left;
}

#userbar-cap-wrap {
width:100%;
bottom:0;
position:fixed;
z-index:99999;
}

#userbar-bg-left {
height:40px;
width:10px;
margin:0 20px;
background:url(../images/site/userbar/u-left.png) no-repeat;
float:left;
}

#userbar-bg-right {
height:40px;
width:10px;
margin:0 20px;
background:url(../images/site/userbar/u-right.png) no-repeat;
float:right;
}

 

Thanks in advance for any assistance! :)

 

[attachment deleted by admin]

Link to comment
Share on other sites

All right, thank you. I noticed one more bug in IE7. The page is supposed to stretch and keep a 20px edge on either end. When the page is set to the width of the "normal" layout, it looks fine. However, as you increase the width of the page, it proportionately increases the width of the bar at the bottom and stretches it beyond the edge of the page.

 

Anyone know why it would do this? Same link above and source code. Thanks in advance! :D

Link to comment
Share on other sites

Earlier versions of IE do not support position fixed, however IE7 has been released, so there is your fix.

 

Advise users to Upgrade, or shift their browser asap.

 

You can actually change your code in the CSS for a specific browser(s) by using browser conditionals.

 

i.e.

 


 

A full list of this can be found here: CSS - Conditionals

Link to comment
Share on other sites

Thank you for the help. I found a JS that can cling it to the bottom, but I don't like the use of a script to solve the problem. I'm going to rework it so that the bottom bar isn't required, and if it's 6.0, to simply block that section of code from displaying.

 

Thank you all very much for the help! :)

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.