|
CSS - Pull Up Menu Wont Work In Ie7
Hello everybody!
Im am now designing a webpage with a pull-upmenu. The menu can be seen he http://www.fidelin.se/ucon/index.php The problem in IE7 is that the dropup-items will disappear when you move the mouse over them. Any suggestions on how to solve this? See the code in the post below. I have not constructed the menu myself, as you might see. Thanks in advance Johan Similar TutorialsI have a "menu" div that slides down from the top of the page using a scriptaculous effect. I have a tab in another div that needs to slide down as if it were attached to the "menu" div. Unfortunately I'm not sure how to accomplish this effect. Right now I the menu div either slides down over or under the tab div. I would appreciate any help. I have the following coding <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head> <title>CSS Sample Page</title></head> <body> <table style="width: 765px; height: 426px;"> </table><div style="text-align: center;"><!-- First Row contains banner and tagline--></div><table style="width: 765px; height: 426px;"> <tbody> <tr> <td style="text-align: center;" width="50%"><font size="7">Web News</font></td> <!-- spacer cell --> <td> </td> <td style="font-weight: bold; text-align: left;">"The latest in up-to-the-minute Web news,discussion, techniques, and <br>trends"</td> </tr> <!-- Second Row contains headline--> <tr> <td colspan="3"> <h1 align="center"><br></h1><h1 align="center">Web Developers Embrace CSS</h1> </td> </tr> <!-- Third Row contains sub-head --> <tr style="font-family: Helvetica,Arial,sans-serif;"> <td colspan="3"><h2 style="text-align: center;">Simple syntax, powerful design tool</h2> </td> </tr> <!-- Fourth row contains article columns --> <tr valign="top"> <td> <p class="copy"><span style="font-variant: small-caps;"> Cascading Style Sheets (CSS)</span> is a style language for the web. It uses common printing and display terminology to allow HTML and XML authors control over the way web pages look.</p> <p>Although designed in 1996, CSS is just now becoming a useable style language because of a lack of support from the major browsers. IE 5.5 for the Macintosh, released in 1999, is the first browser to completely support the CSS1 specification. Support varies across browsers, but both Netscape 6 and IE 5 for the Windows platforms offer more complete (but still not perfect) CSS support.</p> </td> <!-- Spacer cell --><td> </td> <td> <p> Style sheets accomplish the separation of content and style that is integral to the open nature of data on the web. Currently, web page code mixes both document structure information and browser-based display properties, limiting the cross-platform compatibility of the content.</p> <p>With style sheets, the display properties are separate from the content. This accommodates the diverse variety of devices that are becoming available to browse the web. Whether you come to a web site with a Palm Pilot, PCS phone, or Windows CE device, the server can supply a style sheet that matches your display device. CSS2 supports a variety of media devices, including print, that allows content providers to single-source their data.</p> </td> </tr> </tbody> </table> </body></html> all works so far but the problem I am having is adding specific div tags to the H2 elements. DIV class="subhead"> Simple syntax,powerful @Code in Nl 2nd:design tool</DIV> if i try to add this style rule i get the above text show up in the browser and it wont align centrally. also the cascading style sheets wont show up as small caps. can anyone help me Im sorry to ask here but know of nowhere else to ask, can someone please advice me or forward me to somewhere that can help please? thanks I am regreting taking this course so bad...Thanks alot for your help in my last problem, Im onto assignment 2 now and dont have the slightest clue what to do. The instructions are so unclear, and nowhere anywhere on the internet does it give a straight forward example of how to do a CSS. I am starting with a blank page, using text pad link to a strict html. I dont know where to start and what to type. I am trying all the codes such as <h1> to put in my title and it wont work! I got it to change color with the body color property but thats as much as I can do. Can anyone give me some pointers on how to put heading and writing in my page, why wont it work? Is there a difference between this and when I put my markup in WYSIWYG? All I need to start is to put in my title Christinas cat page... What does a stndard layout look like that will be easy for me to understand? tyvm edit: the sites @ www.tomaustin.dsl.pipex.com/webdev Ive been doing some googling and cant find out how it works how do i apply attributes like a:link, a: hover to an image I had some like Code:
image a:hover, a:link, a:active, a:visited {
border: etc..
}
this does not work..it comes up with the horrid blue and purple backgrounds how do i do it? tom: ) hi, i have a small website i need to make for a school project. Ever since i added the CSS MENU the sidebar just appears half in the middle of the site and no matter what i do, i cannot get it to the right edge. I have tried margin-right but it does nothing, even if i put it at 5. Its 5 closer away from some strange margin almost in the center of the screen HTML::::::::::::::::::::::::::::::::::::::::::::::::::: </head> <body class="about"> <div id="page-container"> <! header---------------------------------------------------------------> <div id="header"> <h1><img src="images/headings/heading.gif" width="700" height="76" alt="Enlighten Designs" border="0" /></h1> <ul id="navigation"> <li><a href="#"><span>Home</span></a></li> <li><a href="#"><span>Services</span></a></li> <li><a href="#"><span>Take a tour</span></a></li> <li><a href="#"><span>About us</span></a></li> <li><a href="#"><span>Contact us</span></a></li> </ul> <p><h1><br>Thermal IR - What is it? </h1></p> </div> <! SIDEBAR A---------------------------------------------------------------> <div id="sidebar"> <p>Sidebar, work please, Please work!</p> </div> <! CONTENT---------------------------------------------------------------> <div id="content"> <div class="padding"> </div> </div> <! COPY RIGHT---------------------------------------------------------------> <div id="copyright"> </div> </div> </body> </html> CSS::::::::::::::::::::::::::::::::::::::::: MENU START///////////////////////////////// #navigation a { color: #000; background: ##00E5EE url(left-tab.gif) left top no-repeat; text-decoration: none; padding-left: 10px } #navigation a span { background: url(right-tab.gif) right top no-repeat; padding-right: 10px } #navigation a, #navigation a span { display: block; float: left } /* Hide from IE5-Mac \*/ #navigation a, #navigation a span { float: none } /* End hide */ #navigation a:hover { color: #fff; background: #781351 url(left-tab-hover.gif) left top no-repeat; padding-left: 10px } #navigation a:hover span { background: url(right-tab-hover.gif) right top no-repeat; padding-right: 10px } #navigation ul { list-style: none; padding: 0; margin: 0; } #navigation li { float: left; margin: 0 1em; } //////////////////////////////////////////MENU END #page-container { width: 760px; margin: auto; background: #c9c9d9; } body { font-family: Verdana; } html, body { margin: 0; padding: 0; color: black; } body { font-family: Arial, Helvetica, Verdana, Sans-serif; font-size: 12px; color: #666666; background: #ffffff; } .hidden { display: none; } #header { margin: left; height: 250px; background: #c9c9d9; border-top: 1px solid #efefef; } #sidebar { top: 200px; float: right; width: 170px; padding: 5px; line-height: 18px; background: #AAAAAA; border: solid 2px black; } #sidebar .padding { padding: 25px; } #content { margin-right: 240px; line-height: 18px; background: #c9c9d9; } #content .padding { padding: 25px; } #copyright { margin-left: 25px; background: #c9c9d9; } h1 { margin: 0; padding: 0; float: right; margin-top: 57px; padding-right: 31px; } #content h2 { margin: 0; padding: 0; padding-bottom: 15px; } #content p { margin: 0; padding: 0; padding-bottom: 15px; } Hi all, I am trying to do something that I think is trivial, but just cannot seem to get this to work in IE! I am trying to draw an IFRAME that contains a gray background that contains a document that has a white background. The result is supposed to make the scrolling document in the IFRAME look like a white piece of paper with a gray border of 8 pixels. This works perfectly in Safari and Firefox, but no matter what I try, I cannot figure out how to get this to work in IE (IE8 specifically). Here is the code: PHP Code: <iframe name='monkey' src='poopy.html' scrolling='auto' frameborder='0' style='background-color:gray;width:500px;height:150px;'></iframe> And the document in the IFRAME is trivial PHP Code: <div style='padding:8px;border:1px solid black;background-color:white;'> This is a bunch of txt THis is a bunch of txt ... (repeat this text a bunch so you have a scrollbar) </div> As far as I can tell, IE implements the background-color attribute for IFRAMES, but it seems to ignore the color - either that or its whacked-out box model requires some kinda bizarre workaround that I cannot find. Thanks in advance for the help. -- Jon I am trying to get a Table Style layout using only DIVs and CSS and every combination I could find doesn't seem to work when it involves being dynamic. Statically, it works fine. In the image I attached, "1" is the final result I am trying to get. The Red and Blue boxes at the top and bottom will always have a static height of about 25px, but I want the Green in the center to be dynamic, to take up the rest of the space not occupied by the Red and Blue boxes. In example "2", if I set the green to 100% height, it will just flow outside the parent container. And if I don't set a height, as seen in example 3, it will just be a small bar and the bottom Blue box will just move on up with it. Using a table would be easy since I can easily create that basic structure that would always work, but I'm trying to make something in all DIV and CSS and the past many months, I found no solution! Anyone got any ideas that isn't Javascript based? Thanks! Hey all, So i have two files my html file: Code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<a href="#">this is a test</a>
</body>
</html>
And my css file: Code:
a:link {color:#000000;text-decoration:none;}
a:visited {color:#000000;text-decoration:none;}
a:hover {color:#CC0000;text-decoration:underline;}
a:active {color:#000000;text-decoration:none;}
except that the styles don't work on the links. If i put the styles in <style> tags in the html head it works, but in a seperate file they don't, can someone help me? thanks! - legit Edit, whoops sorry, I had the wrong name for my css file Hello everone, i just joined today in this community and looking forward to enjoying here for a quite long time as i want to develop myself with css. I have a horizontal menu which is based on an image that has three layers: unvisited link, hover link, active link. but somehow i cant get my active links to work and cant understand where im making a mistake. you can find php and css codes below. and i appreciate any single comments suggestions. PHP code: Code: <?php
$block = ( is_front_page() ? 'h1' : 'div' );
// arguments for wp_list_pages
$list_args = k2_get_page_list_args(); // this function is pluggable
?>
<?php echo "<$block class='blog-title'>"; ?>
<a href="<?php echo get_option('home'); ?>/" accesskey="1"><?php bloginfo('name'); ?></a>
<?php echo "</$block>"; ?>
<p class="description"><?php bloginfo('description'); ?>
<ul id="menu">
<li id="home"><a href=""<?php if(is_home() || is_single() || is_category() || is_tag() || is_author() || is_year() || is_month()) { echo ' class="active"'; }?>>home</a></li>
<li id="archives"><a href="?page_id=2"<?php if(is_page('archives')) echo ' class="active"'; ?>>archives</a></li>
<li id="news"><a href="?page_id=35"<?php if(is_page('news')) echo ' class="active"'; ?>>news</a></li>
<li id="contact" class="last<?php if(is_page('contact')) echo ' active"'; ?>"><a href="?page_id=31">contact</a></li>
CSS code: Code: #menu {
list-style: none;
padding: 0;
margin: -105px 25px;
width: 332px;
height: 30px;
background: url('images/menu.gif');
position: relative;
}
ul#menu li { width: 80px;
height: 30px;
padding: 0 4px 0 0;
text-indent: -900px;
float: left;
}
ul#menu li.last { padding: 0; }
ul#menu li a, ul#menu li a:visited, ul#menu li a:hover { display: block; width: 80px; height: 30px; background: transparent url('images/menu.gif') no-repeat; outline: none; }
ul#menu li#home a, ul#menu li#home a:visited { background-position: 0 0; }
ul#menu li#archives a, ul#menu li#archives a:visited { background-position: -84px 0; }
ul#menu li#news a, ul#menu li#news a:visited { background-position: -168px 0; }
ul#menu li#contact a, ul#menu li#contact a:visited { background-position: -252px 0; }
ul#menu li#home a:hover { background-position: 0 -30px; }
ul#menu li#archives a:hover { background-position: -84px -30px; }
ul#menu li#news a:hover { background-position: -168px -30px; }
ul#menu li#contact a:hover { background-position: -252px -30px; }
.home ul#menu li#home a, .home ul#menu li#home a:visited, .home ul#menu li#home a:hover { background-position: 0 -60px; cursor: default; }
.archives ul#menu li#archives a, .archives ul#menu li#archives a:visited, .archives ul#menu li#archives a:hover { background-position: -84px -60px; cursor: default; }
.news ul#menu li#news a, .news ul#menu li#news a:visited, .news ul#menu li#news a:hover { background-position: -168px -60px; cursor: default; }
.contact ul#menu li#contact a, .contact ul#menu li#contact a:visited, .contact ul#menu li#contact a:hover { background-position: -252px -60px; cursor: default; }
i think the problem may be with the last 4 lines of CSS code because they are related to the active links but dont know how i can find out the problem. thank you for any single suggestions and comments. Hi, **UPDATE: Problem Fixed...change the z-index of the parent menu element, thanks mizzory!*** Thank you for viewing this post and your help is greatly appreciated! The navagation menu works great in IE8 and Firefox, however in IE7, the drop-down hides behind the content div. I have tried assigning z-index to the divs, but with no luck. #wrap { margin:auto; width:1000px; background-color: #FFFFFF; background-repeat: repeat-y; min-height:100%; position:relative; } html, body { margin:0; padding:0; height:100%; } #content { min-height: 400px; padding-bottom:50px; /* Height of the footer */ position:relative; } #header { height: 200px; } #footer { position:absolute; bottom:0; width:100%; height:50px; /* Height of the footer */ font-size: 14px; font:Arial, Helvetica, sans-serif, bold; text-align:center; color:#FFFFFF; } /*horizontal menu specifications*/ #menu { background: #FFFFFF; float: left; height:40px; } #menu ul { list-style: none; margin: 0; padding: 0; width: 142.85px; float: left; } #menu a, #menu h2 { font: bold 13px arial, helvetica, sans-serif; display: block; border-width: 1px; border-style: solid; border-color: #FFFFFF; margin: 0; padding: 2px; text-align:center; } /* main menu header: set font colour and background colour */ #menu h2 { color: #FFFFFF; background: #0066CC; text-decoration:none; } /* main menu dropdown: set font colour, background colour, no underline for hyperlink */ #menu a { color: #000000; background: #CCCCCC; border-color: #000000; text-decoration: none; } /* main menu dropdown mouse hovering: set font colour, background colour*/ #menu a:hover { color: #E4001B; background: #FFFFFF; } /*position the pop out menu*/ #menu li { position: relative; } #menu ul ul { position: absolute; z-index: 500; } div#menu ul ul, div#menu ul li:hover ul ul, div#menu ul ul li:hover ul ul { display: none; } div#menu ul li:hover ul, div#menu ul ul li:hover ul, div#menu ul ul ul li:hover ul { display: block; } -S Please help. The code listed below validates. It is a 2 level pull out menu using only CSS. It works nicely in FireFox and IE 6, but I don't see the sub-menus in IE 7. Why? Is it related to z-index? The files are organized: html, non IE css, IE css. I pulled out the IE specific css to make things more clear. homepage.mac.com/carlamatusow/testmenu/testmenu.html homepage.mac.com/carlamatusow/testmenu/testmenu.css homepage.mac.com/carlamatusow/testmenu/testmenuIE.css Thanks, Carla My drop menu works fine in IE7, however in firefox the menu's don't drop. Anyhelp would be appreciated. Here is my css code. Code:
#menu {
width: 769px;
height: 27px;
margin: 0px auto;
padding: 5px 0px 5px 0px;
background: #000000 url(images/SDCB-menu-bar.gif);
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 125px;
float: left;
}
#menu a, #menu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
text-align: center;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}
#menu h2 {
color: #fff;
background: #000000 url(images/SDCB-menu-bar.gif);
text-transform: uppercase;
}
#menu a {
color: #000;
background: #efefef;
text-decoration: none;
}
#menu a:hover {
color: #a00;
background: #fff;
}
#menu li {
position: relative;
}
#menu ul ul {
position: absolute;
z-index: 500;
}
#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
}
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}
div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}
Here is the HTML. Code:
<div id="menu">
<ul>
<li style="left: 50%;"><a href="http://mysite/index.html" title="HOME"><h2>HOME</h2></a></li>
</ul>
<ul>
<li style="left: 50%;"><a href="http://mysite/index.html" title="ABOUT US"><h2>ABOUT US</h2></a></li>
<ul>
<li><a href="http://mysite/index.html" title="Board of Directors">Board of Directors</a></li>
<li><a href="http://mysite/index.html" title="Ex-Officio Members & Staff">Ex-Officio Members & Staff</a></li>
</ul>
</ul>
<ul>
<li style="left: 50%;"><a href="http://mysite/index.html" title="NEWS/EVENTS"><h2>NEWS/EVENTS</h2></a></li>
<ul>
<li><a href="http://mysite/index.html" title="Calendar">Calendar</a></li>
<li><a href="http://mysite/index.html" title="Newsletter">Newsletter</a></li>
<li><a href="http://mysite/index.html" title="Photo Gallery">Photo Gallery</a></li>
</ul>
</ul>
<ul>
<li style="left: 50%;"><a href="http://mysite/index.html" title="RENEWAL PROJECT"><h2>RENEWAL PROJECT</h2></a></li>
<ul>
<li><a href="http://mysite/index.html" title="History">History</a></li>
<li><a href="http://mysite/index.html" title="Executive Summary">Executive Summary</a></li>
<li><a href="mysite/index.html" title="Plan & Dependencies">Plan & Dependencies</a></li>
<ul>
<li><a href="http://mysite/index.html" title="Renewal Plan">Renewal Plan</a></li>
<li><a href="http://mysite/index.html" title="Appendices">Appendices</a></li>
</ul>
<li><a href="http://mysite/index.html" title="garden">Community Learning Center & Garden</a></li>
<li><a href="http://mysite/index.html" title="Get Involved">Get Involved</a></li>
</ul>
</ul>
<ul>
<li style="left: 50%;"><a href="http://mysite/index.html" title="CONTACT US"><h2>CONTACT US</h2></a></li>
<ul>
<li><a href="http://mysite/index.html" title="Your Thoughts">Your Thoughts</a></li>
<li><a href="http://mysite/index.html" title="Donate Now">Donate Now</a></li>
</ul>
</ul>
</div>
Thank you in advance Hi, I have a two column CSS layout - the stylesheet and web page that uses it are attached. I tried to put a menu in the left column (technically div) - of this web page. This is a menu that uses JS mouseover and mouseout to set the style of the children menus to block or none - to show or hide the children or submenu items. onmouseover="document.all.child1.style.display='block' onmouseout="document.all.child1.style.display='none' When you mouseover the menu item, children menu items underneath it are supposed to be displayed, but they're not. Please look at the style sheet - and web page. Any idea why this menu works outside of the CSS two column layout, but not when I place the code inside this layout?????? Thanks Vmusic Hi: Is it possible to use a Form pull-down box as a link rather than a Form Item? For example, I have the following code: Code: require ('./includes/db_access.php');
//get parts of records
$get_list = "SELECT company_id,
company_name,
contact
FROM companies
ORDER BY company_name";
$get_list_res = mysql_query($get_list) or die(mysql_error());
echo "
<select name=\"company_id\">
<option value=\"\">-- Select One --</option>";
while ($recs = mysql_fetch_array($get_list_res)) {
$co_id = $recs['company_id'];
$co_name = $recs['company_name'];
echo "<option value=\"$co_id\"> $co_name</a></option>";
}
echo "
</select>
and what I want is that when the user selects the correct company, it executes the following link: Code: edit_company.php?company_id=$company_id I can't seem to make this work, no matter how I embed the <a href> into the list. Any ideas? Thanks Hi all i have a page here http://www.prxa.info/test/index.php as you can see i am using rounded borders, but the bottom right and top right images don't want to appear, i don't know why either For some reason i am adding css Code: Original - css Code /* Hide this from IE-Mac \*/ div.spacer { height: 5px; } /* End the hiding */ /* Hide this from IE-Mac \*/ But IE keeps seeing this, does anyone knows why? I'm going mad with this, I tested the CSS a:hover function over FF 1.0.7 and IE6, and the style file is simple: PHP Code: h3 { margin:10px; color:#636500; font-family: Arial, Helvetica, sans-serif; font-style: normal; } p { margin:10px; color:#636500; font-family: Arial, Helvetica, sans-serif; font-style: normal; } a { text-decoration: none; } a:hover { color:#636500; } a:visited { color:#cecf9c; } a:link { color:#cecf9c; } searched through the forum but seems nobody has got this problem... I just want the link to change color, I imported the css file to my html and it worked for the first time. I clicked on the link and then use brower's "Back" button to test it again, but the hover feature is not working anymore. I think it may be affected by the a:visited style, but how do I make a:hover work all the time? Thanks for helping. |
|||||||