Navigation size is loading to the size of the entire page sometimes
I am using a template called MagicLine (wont let me post the links to it so toss it in Google and you'll find it easily. Sorry)
Example of the problem can be found here: http://lesiondesign.com/test/elite/
Problem Summary: Using this template to build my navigation. There was a fix posted in the comments for Opera that seemed to work, and for the most part the navigation looks great. However there seems to be a problem where the navigation size (being snagged with javascript) sizes itself across the entire screen. This comes out a lot in Chrome and I usually only see it after refreshing a lot in Firefox. Once you click a nav item it seems to always stay small.
Code Specifics:
Javascript
$magicLineTwo
//The next line is what sets the width, sometimes my width is set to 1800px as opposed to the 60px that is correct. This does not happen every time which is why this problem is so difficult to solve.
.width($(".current_page_item_two").width())
.height($mainNav2.height())
.css("left", $(".current_page_item_two a").position().left)
.data("origLeft", $(".current_page_item_two a").position().left)
.data("origWidth", $magicLineTwo.width())
.data("ori开发者_运维百科gColor", $(".current_page_item_two a").attr("rel"));
CSS
The width here is a preset that really does not matter, if you change it to tiny it can have an effect but for the most part as long as it is set to something the javascript will adjust it properly
#example-two #magic-line-two {
position: absolute;
float: none;
top: 0; left:
0; width:100px;
background: #000;
opacity:0.4;
filter: alpha(opacity = 40);
z-index: 100;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
HTML
Is setup in a list format and there's really nothing special there that should affect resizing.
If anybody has any idea as to why the nav would resize correctly the majority of the time and fall apart at other times I would really appreciate it. I seem to have a nack for making code fall apart but only 10% of the time.
Thanks
$mainNav2.height()
is where the problem is as the ul
has a line-height
of 60px
therefore the shade thing would also get the available height.
Also the width of this #magic-line-two
is 1207 on my screen which it seems like its taking the screen size not the ul
.
also #example-two #magic-line-two {}
is so pointless because #magic-line-two
should be unique any ways :)
精彩评论