|
CSS - Suckerfish Positioning Problem Ie6
Hi everyone,
I really need your precious help, I'm using a css:hover fix based on including a csshover htc file to my css as suckerfish solution in ie6. The problem is when I hover the buttons in any browser, the menus appear directly under the button (which I want to have) however in ie6, the menus appear at the right end of the menu. Any help will be appreciated. Thanks!! problem: Code: <div id="tabs"> <ul id="menu"> <li></li> <li><a href="#"><span>Home</span></a> <ul> <li><a href="#">Submenu 3.1</a></li> <li><a href="#">Submenu 3.2</a></li> <li><a href="#">Submenu 3.3</a></li> </ul> </li> <li><a href="#"><span>About</span></a></li> <li><a href="#"><span>Research</span></a> <ul> <li><a href="#">Submenu 3.1</a></li> <li><a href="#">Submenu 3.2</a></li> <li><a href="#">Submenu 3.3</a></li> </ul> </li> <li><a href="#"><span>Facilities</span></a></li> <li><a href="#"><span>Projects</span></a></li> <li><a href="#"><span>People</span></a></li> <li><a href="#"><span>Publications</span></a></li> <li><a href="#"><span>Events</span></a></li> <li><img id="tabRightFooter" src="images/footer_right.gif"></li> </ul> </div> Code:
#menu {
font-size:9pt;
font-weight:bold;
line-height:39px;
margin:131px 0 0 223px;
margin-bottom:0px; /*margin between menu and rest of page*/
}
#menu ul {
margin:0;
padding:0px 0px 0px 0px;
list-style:none;
}
#menu li {
display:inline;
margin:0;
}
#menu li.active {
margin:0;
float:left;
padding:1px 15px 8px 15px;
background:url("../images/footer.gif") repeat left top;
color:#FFF;
background-position:0% -48px;
}
#menu a {
float:left;
background:url("../images/footer.gif") no-repeat left top;
margin:0;
padding:0 0 0 0px;
text-decoration:none;
}
#menu a span {
float:left;
display:block;
background:url("../images/footer.gif") repeat right top;
padding:1px 15px 8px 15px;
margin-right:0px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#menu a span {float:none;}
/* End IE5-Mac hack */
#menu a:hover span {
}
#menu a:hover {
background-position:0% -48px;
}
#menu a:hover span {
background-position:100% -48px;
}
* html .nav a { height: 1%; }
#menu li ul {
position: absolute;
width: 100px;
z-index: 50; /* show the dropdowns above the images */
top: 170px; /* position the dropdowns a set distance from the top of the image */
left: -999em;
list-style: none;
}
#menu li:hover ul { left:auto }
#menu li li {
height: auto; /* reset the height and padding set on the IR list items */
width:auto;
padding-bottom: 0;
font-size: 110%;
border-bottom: 1px solid #FFCC00;
}
#menu li ul a {
padding: 0.25em;
color: #FF6600;
background: #FFFFCC;
}
#menu li ul a:hover {
color: #FFFFFF;
background: #448EB7;
}
Similar Tutorialshttp://www.strutmag.com/menu06/ CSS In IE:Win The dropdown does not drop down right below the black tab, as it should; it starts to drop down about halfway through the tab. This is my first time really customizing a Suckerfish menu and I'm not really sure how I would go about tackling this problem. Thanks for any help or suggestions! Dear clever CSSers I am currently changing my flyout menu from something rather complex, to the Suckerfish version. I have one problem: I have been using some mouseover tooltip-like information boxes giving extra details of the contents of a link, by having a div within the text of the hyperlink, to come visible when hovered. It has worked very well in my old version. Here's my test page In the new version, there are two lines of CSS allowing the popup to open, which is also enclosed in a balloon-style info graphic, actually in two halves so that it can open like a clamshell if there is extra text in there, or a user has a larger than normal font setting: Code: #nav a span {visibility:hidden;position:absolute;top:-120px;left:175px;background: url(http://www.internetevangelismday.com/images/balloontop.png) no-repeat transparent top left;width:196px;height:105px;line-height:1.2em;text-align:left;word-wrap:break-word;text-wrap:normal;white-space:normal;padding:0px;} #nav a:hover span {visibility:visible;z-index:9999;min-height:130px;}
This CSS does allow the popup to appear, but unfortunately it positions each popup at the same position on the page. I would prefer it that they appeared with the 'point' of the balloon pointing at the relavent link. You can see that if you hover '2nd level here', and then 'page 1', or 'page 2' or 'another page', the info balloon appears in exactly the same place on the page. Changing the positioning from position absolute to position relative causes the popup to appear in about the correct position, but it also expands the link area on the menu itself to a huge blank area and misses off the balloontop.png graphic from the popup, which I presume is staying inserted, hidden, within the menu item and causing it to expand. Thanks for any ideas on this. BTW, the javascript is a neat one that repositions submenus where necessary so they can't vanish below the bottom of the page. Best wishes Tony Anyone have an idea as to why suckerfish would not go back to the right color after you hover over them... it's kind of weird, since this is the first time I've had a problem in Firefox and not in IE... Website: http://www.martinlutherchapel.org Hi fowks, Normally I'm able to solve CSS issues relatively easily, well with some experimentation at least. However, this one has really got me stumped. Basically, I'm developing a menu for a weblication which is based on the famous Suckerfish menus. Everything works ok in IE and Mozilla when in an Left-to-Right (LTR) environment, but it doesn't work quite so well when the direction is flipped to RTL. IE copes fine, but FF doesn't. The menu works itself, but the viewport doubles in size and scrolls off to the right, even though there are no elements there. Anyone got an idea as to what could be doing this? I've included the relevant files for you to trial. Thanks for having a look. Hope you can help. It's driving me nuts. Cheers, John Hi I am using suckerfish drop down menu without problem on my local server, however, on the remote server them menu won't work when jscript is turned off (when viewed on IE). Do you have any idea why this might be? has anyone had this problem before? (here is the url: (URL address blocked: See forum rules)) thanks a lot I have problem with footer DIV in this layout (the order of DIV's in code after <body> should be - content, left, right, right2, header, footer - positioned centraly with fixed values): It needs to be sticked to fit after content of 4 column DIV's like it is in example. http://www.split.info/dev/less-content/ http://www.split.info/dev/more-content/ Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Title of website</title>
<style type="text/css">
<!--
body {margin: 0px 0px 0px 0px; background-image:url(images/bg.jpg); background-position:center; background-repeat:repeat-y;}
#wrapper {width: 1000px; margin: 0 auto; text-align: left; position: relative;}
#contentPane {width: 468px; float: left; position: absolute; margin-left: 3px; padding: 0px 0px 0px 0px; background-color:#0099FF; left: 126px; top: 150px;}
#leftPane {width: 125px; float: left; left: 0px; position: absolute; background-color: #99FFFF; top: 150px;}
#rightPane {width: 173px; float: right; right: 226px; background-color:#999966; position: absolute; top: 150px;}
#rightPane2 {width: 220px; float: right; right: 0px; background-color:#99FF00; top: 150px; position: absolute;}
#headwide {background-image: url(images/head_bg.jpg); background-position: center; background-repeat: no-repeat; width: 100%; height: 142px; position: absolute; top: 0px;}
#header {margin: 0pt auto; width: 1000px; background-color:#CC6600; height: 142px; }
#footer {position: absolute; width: 100%; top: auto; bottom: 0px; background-color: #CCFFCC; height: 50px;}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="contentPane">Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
</div>
<div id="leftPane">Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
</div>
<div id="rightPane">Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
</div>
<div id="rightPane2">Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
</div>
</div>
<div id="headwide">
<div id="header">Header area</div>
</div>
<div id="footer"><strong>Content from above 4 column div's need to push footer DIV below (after them)! </strong>Footer area that is on bottom of div with biggest height (content, left, right or right 2 pane)... foooter follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current state like it is in this document happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So footer can be either moved in code after rightpane2 div after end of wrapper. Pls help. Thx!</div>
</body>
</html>
Content from above 4 column div's need to push footer DIV below (after them)! Foooter need to follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current issue like it is in this layout happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So in your resolution footer can be also moved in code after rightpane2 DIV, after end of wrapper. Pls help. Thx! Echo Hello I have a page I am testing www.amalgam-models.co.uk/james/test2.htm It seems to work in all main browser accept IE5 mac. I have put a hack in which works but doesnt centralize the box: .container { background-color: transparent; position: absolute; top:100px; left:200px; } /* following rules are invisible to IE 5 \*/ .container { position:absolute; left:50%; top:50%; width:730px; height:404px; margin-left:-365px; margin-top:-202px; } /* styles for IE 5 Mac */ Is there any way of doing this to centralize an absolutly positioned box in Ie5 mac? Any help would be greatly apreciated Thanks Hi, I'll apologize up front, I'm a real newbie with css, I have a very limited understanding of it. I'm having a problem with the position of a Div tag. It work fine in Firefox mac/pc but in I.E 6 & 7 the Div's rule for margin-left seem to be ignored. Here's a link the html page: http://www.visualstrategies.ca/jf_mackie/about_us.html. The submenu container div should have a margin-left:12px; but it is igored???? Here's the div structu Code:
<div id="submenu">
<div id="submenu_container">
<div id="submenu_arrow"></div>
<ul id="nav">
<li id="current"><span>Our Investment Philosophy</span></li>
<li id="dash"></li>
<li><a href="#">Our Team</a></li>
<li id="dash"></li>
<li><a href="#">Our Services</a></li>
</ul>
</div>
</div>
Here's the css for the div's: Code: submenu{
height: 41px;
background-image: url(images/content_bg.gif);
background-repeat: repeat-y;
/*border: thin solid red;*/
}
#submenu_container{
margin-left:12px;
margin-right:20px;
height: 41px;
background-image: url(images/sub_bg.gif);
background-repeat: repeat-x;
/*border: thin solid green;*/
}
#submenu_arrow{
float:left;
margin:0 4px 0 45px;
height: 41px;
background-image: url(images/sub_arrow.gif);
background-repeat: no-repeat;
width: 14px;
/*border: thin solid blue;*/
}
Any help would be great! Thanks sskully I'm trying to get a box to position properly. If you go to this page in firefox, it looks fine, but in IE7 and IE6 the centered image is nudged to the left by one pixel. You can see the white space to the right of the banner. When resizing the IE6/7 window, it sometimes jumps back to the right and into its proper position. Are there any specific methods in CSS that I should use for positioning this? Right now I'm just using this: Code: <div align="center"> <img src="banner.jpg"> </div> The CSS is validated. -The problem only occurs in the 1280x1024 resolution and above. Not in 768 by 1024. I'm sorry but this bothers me! - Thank you. Hi all, I used CSS to set the elements position properly but I have a weird result... I have a simple textbox and a button, next to each other; I want them be between 2 lines in a specific position. If I dont use position property, the button is wrapped above the textbox and I dont want this happen. So, I decided to use: position:absolute; for the first textbox position:relative; and with left-top I aligned the textbox. This used to work (only for mozilla, with other browsers the position is different ) But some days a problem appears also in Mozilla!!! The first time that the page is loaded, the textbox and the button get slightly up than the position that I have ordered. And once I press the button, both textbox and button goes to the correct position. The problem seems to be minor, but it is irritating that when the page is loaded the elements are not in the correct position. Any ideas? Thank you! What I'm trying to do here is have an image as a background aligned to the very bottom. I have it in it's own div, and I could get the div to align to the bottom, that's no problem. However, my problem occurs on lower resolution, and the div that has the background "overlaps" the rest of the content. Not good. Is there anyway I can align a div to the BOTTOM without overlapping any content? There are no left or right floats, the layout is pretty much centered. Here's my footer code PHP Code: div.footer { margin: 0px auto; width: 100%; height: 400px; overflow: hidden; padding: 0px 0px 0px 0px; background-image: url("../images/golf_bottom.jpg"); background-position: center; background-repeat: no-repeat; position: absolute; bottom: 0; left: 0; } I seen on other webpages that they applied a background through the body tag and aligned it to the bottom, but I already have a background reserved for that. Firefox is not positioning divs ifrVerse and ifrVerse2 side-by-side. I see ifrVerse2 outside the div main_table Code: <div id="main_table" style="border: 1px solid rgb(124, 124, 124); float: left; background-color: rgb(181, 162, 111); width: 645px; height: 770px; text-align: center;"> <div name="ifrVerse" id="ifrVerse" style="border: 1px solid rgb(181, 162, 111); margin: 5px 0px 5px 5px; float: left; width: 200px; height: 500px; background-color: rgb(210, 197, 160); z-index: 3;"> <div style="border: 1px solid black; text-align: center; height: 90px; background-color: rgb(210, 197, 160);"> <select id="selbook" size="5" onchange="fillChapters();" style="border: medium none ; margin: 5px 5px 0px; float: left; background-color: white; width: 190px;"> <option value="" style="background-color: rgb(181, 162, 111); color: white; font-weight: bold; font-style: italic;">Select Book</option> <option value="1">Genesis</option> <option value="2">Exodus</option> <option value="3">Leviticus</option> <option value="4">Numbers</option> <option value="5">Deuteronomy</option> </select> </div> <div id="showchapterdiv" style="border: 1px solid black; text-align: center; height: 90px; background-color: rgb(210, 197, 160);"> </div> <div id="showversediv" style="border: 1px solid black; text-align: center; height: 90px; background-color: rgb(210, 197, 160);"> </div> <div id="keywordsdiv"> </div> <div id="seltext" style="border: 1px solid black; text-align: center; background-color: rgb(210, 197, 160); height: 440px;"></div> </div> </div> <div name="ifrVerse2" id="ifrVerse2" style="border: 1px solid rgb(181, 162, 111); margin: 5px 5px 5px 0px; float: right; width: 200px; height: 500px; background-color: rgb(210, 197, 160); z-index: 3;"> <form name="myForm" id="myForm" action="" method="get"> <div style="border: 1px none rgb(0, 0, 0); text-align: center; height: 90px; background-color: rgb(210, 197, 160);"> <select id="book2" size="5" onchange="fillChapters2();" style="border: medium none ; margin: 5px 5px 0px; float: left; background-color: white; width: 190px;"> <option value="" style="background-color: rgb(181, 162, 111); color: white; font-weight: bold; font-style: italic;">Select Book</option> <option value="1">Genesis</option> <option value="2">Exodus</option> <option value="3">Leviticus</option> <option value="4">Numbers</option> <option value="5">Deuteronomy</option> </select> </div> <div id="showchapterdiv2" style="border: 1px none rgb(0, 0, 0); text-align: center; height: 90px; background-color: rgb(210, 197, 160);"> </div> <div id="showversediv2" style="border: 1px none rgb(0, 0, 0); text-align: center; height: 90px; background-color: rgb(210, 197, 160);"> </div> <div id="keywordsdiv"> </div> <div id="text" style="padding: 10px; width: 50px; height: 440px;"></div> </form> </div> My page is valid xhtml 1.0 strict and valid css 2, however.. i'm still having a problem. for some people, who use IE 6, are having trouble viewing my page correctly. for my (also using IE 6 and firefox) it works perfect. the address is: http://invalidheart.org/about.php the problem that happens is the content overlaps the navigation menu.. any idea why? i have NO clue.. it's driving me nuts, I want to put my page up, but I can't until i figure this out. Thanks SO much for your time css: http://invalidheart.org/default.css im building a simple catalogue for my website and in my content area im having problems getting the look i want: but im having the image section not go down to the bottom of the container div, making text go directly underneath the image. Code: <html> <head> </head> <body> <div> <div style='float:left;border:1px solid #000000;'> image </div> <div style='border:1px solid #000000;'> title<br/><br/> description </div> </div> </body> </html> this is very frustrating as i know i could do this easily with tables :/. There must be some property i can set to stop this from happening? On the bottom of the following page, there is a video player and playlist. It appears just fine when opened with Firefox but when I tested the page in IE 8, black box on the left positioned on the upper box. http://www.pangeaadvisors.org/default.asp Sorry Pro's another Joe asking about positioning. I have my nav bar made out of a list. Oh that reminds me of another issue. But first I want the Nav bar to be under the picture. I have been tearing my hair out over it. website: argyllplotsforsale/com CSS: argyllplotsforsale/com/style.css Another problem I am having is with styling the links. It's with the a:visited. I want the link to be the same as it started. But when I try stile in the A:Visited it just stays black. Am damned if I can figure out. Help always appreciated. Cakeface I am currently puzzled about a weird problem I've been having with the positioning of my main content div, and all it contains. I don't seem to be having any issue regarding width, just height, which makes me wonder whether it is some sort of issue with the z index property or something. It's probably much simpler :P Here's a couple of screenshots of what I'm talking about: EDIT... Not allowed to post url's.. real helpful, thanks :P Originally the site displayed just fine in IE 7.0, but then I had to set the padding on the top of the content div to 12% (the content frame contains everything below the "navbar") so that the content div displayed the information in the correct place. EDIT... Not allowed to post url's.. real helpful, thanks :P Here you can see it all looking fine and dandy in FF 2.0, but previous to changing the padding for the content div to 12% the text in the content frame and the images were much higher up on the screen. It's like the content div was ignoring the fact that there are a few other divs above it in the flow of the document. Essentially the menubar div contains the little lightening image (in its own div), some text (in its own div) and the navbar div. So I can't figure out why FF seems to act as if they are not there Any idea's? If it will help I'll be happy to show my shockingly messy code (which I'll try and tidy up first). As I am not allowed to post url's, I'll try to pop in a link of the website I am talking about: irrevocableguild dot co dot uk Cheeky of me I know... but I can see no other way of properly describing what I mean Any help would be much appreciated. Thanks ~blueseay I am having trouble positioning two <div> elements on my page, I need them to sit in the bottom right and left corners of the page but they only seem to want to sit in the corners of the page when it is first loaded and the window is maximised. The page can be viewed at http://sirgdissertation.zzl.org and the css for the two divs is as follows: Code: #bottomBarLeft {
position:absolute;
bottom:0%;
left:0%;
right:50%;
width:50%;
height:auto;
text-align:left;
font-size:9px;
}
#bottomBarRight {
position:absolute;
bottom:0%;
left:50%;
right:0%;
width:50%;
height:auto;
text-align:right;
font-size:12px;
}
can someone suggest how I could alter the code to fix my problem? Ignore the red lines around the info in the middle at the moment, they are just there for position editing purposes. I have checked my page in Google Chrome, IE8 and Firefox 3.6 and still the same result. As a sidenote, IE8 also doesn't seem to want to display the home page properly, I don't know if it has something to do with the fact that it is a php page or something else - if someone could direct me to the appropriate board for this then I'll post this sidenote there!! I've been going through and fixing bugs in IE6, but one in particular is just not cooperating. My header has a horizontal menu and the positioning of it wasn't right in IE6. I changed it to "position:absolute, top:86px". Before, I was using floats. This eliminated white space between two bg images, but caused a new padding problem. Now, IE6 and IE7 both have an issue. In Firefox, "top:86px" lines the menu up perfectly with the baseline of one of the images. In IE6 and IE7, it is 10px short as I have to adjust it to "top:96px" for those browsers to line the menu up. Man, everything was going great until I downloaded and tested IE6 today! Solved. I recoded from scratch. |
|||||||