|
CSS - Ie6 & Disappearing Images
I am currently designing a website using CSS and I have a peculiar problem where some images are appearing and then disappearing in IE6. They are showing up fine in IE7 and Firefox. The image in question is not a background image.
On another page I am using background images for bullet points and the first two on the page are appearing. The third appears and then disappears. This is only when viewing in IE6 and it is only happening with these two particular pages. The thing they have in common is both are running the body ID "page8" and each image that vanishes represents the last image in the content area. Can anyone shed any light on this for me? I figure it has to be a stylesheet problem with a peculiarity in IE6 for which I would need to write around it. Question is what am I suppose to write around? Code: http://lakesideint.server266.com/about/getting_here.php is the page where the image disappears. Code: http://lakesideint.server266.com/business/index.php is the page where the one bullet point appears and disappears. Cheers Terry Similar TutorialsI've got navigation images disappearing in IE. I've looked at bugs and workarounds, but I can't work out what's going on. I'm very much a newbie at this, so I'm prepared to be roundly mocked for being a numpty Having tried with deleting and replacing some code, I think that the trouble might be with this bit of CSS Quote: div#leftcontent img {height: 7%; width: 200px; border-width: 0; background-color: #ecfffd; color: #000000;} div#leftcontent a:visited img {background-color: #EDEDED;color: #000000;} div#leftcontent a:hover img {background-color: #FF9; color: #000000;} I'm assuming, because if I put in some plain text with this CSS Quote: div#leftcontent a:hover {background-color: #FF9; color:#3300FF;} I get the effect I want with the images (and that I get fine in Firefox) Images will not appear in my leftcontent div at all; they're sized appropriately, and show up fine in the rightcontent div. All CSS and HTML validated, works great in Firefox etc. Thanks for any pointers! Help please. When I add the extra <div> the background disappears. Background image appears behind "Testing" <body> <div id="siteinfo"> <div id="fullinfo"> <h1>Testing</h1> </div> </div> </body> Background image disappears <body> <div id="siteinfo"> <div id="fullinfo"> <div id="myinfo"> <h1>Testing</h1> </div> </div> </div> </body> Stylesheet entries: body { background-color: #DADADA; background-image: url(/background2.gif); background-position: center; background-repeat: repeat-y; } #siteinfo { position: relative; margin-right: auto; margin-left: auto; width: 800px; } #fullinfo { position: relative; top: 10px; padding-left: 0px; padding-right: 25px; } #myinfo { position: inherit; float: right; width: 600px; } All help appreciated. So the typical reason that I see people's images disappearing on hover has something to do with repositioning and substituting new images, etc. My case is that my hover code changes the opacity, that's it, and only to about .4 at the very very most. My solution works when slowly mousing over the image, however rapidly hovering/leaving the image causes the image do disappear for a period of time, as though the browser is re-requesting the image. Maybe that's the case? I'm not an expert on CSS. I can't seem to include a link due to some "akismetspam" phrase not being found? I am trying to compose several pages with a similar theme. They work on FireFox and several Mac broswers that I've tried, however in IE6 for windows, my div that is position:absolute; does not appear at all. It does appear when I change the value to relative. The other browsers I've tried show the absolute div with no problems. I have no idea what is going on. http://navpress.ecommercerep.com/chicken_soup_for_soul_bible/index_IE.htm The 'invisible' div should have a green background and some text. The above is a scaled-down version of http://navpress.ecommercerep.com/chicken_soup_for_soul_bible/index.htmhttp://navpress.ecommercerep.com/ch...le/index_IE.htm http://navpress.ecommercerep.com/ch...le/index_IE.htm I have a page and it's a massive mess of nested tables and abs-positioned divs. Amongst these are two that become visible/invisible on the onclick of a checkbox. They start out with display:none inline. Still with me? There arent any floating elements in use, and pretty much everything has a width and height specified, so if there's some hasLayout freakyness going on i'd love to know what. Anyway, in IE7 when you click said checkboxes their target divs and thier contents appear correctly - but the divs' borders are missing, re-toggling the checkbox off and on again shows the border and then again for any subsequent re-showing. it's just the initial setting of display:'' I can't post the code but it looks something ten times freakier than the attatched recreation attempt, unfortunately i can't rectreate it, but you'll get the idea. Can anyone help? I'm going to try running some javascript after the page has loaded to do a quick double toggle to simulate the first no-border instance! This is the first page I've made in CSS and am just putting together the basic structure. In firefox, everything works as it should. I used a .png with transparency for a header element(picture of buildings) and floated the transparent nav-bar over that. Pictures below show firefox and IE results. Notice how the image doesn't even show up at all in IE. I cannot figure this out, it's probably something I just don't know about yet but it's driving me freakin crazy Firefox: (how it should look-space between H and t) h ttp://i3.photobucket.com/albums/y100/timcorley/firefox.jpg IE: how it looks in IE h ttp://i3.photobucket.com/albums/y100/timcorley/IE.jpg My code might have some issues as I've never really done this before, but I appreciate the help. CSS: Code: html, body {
background:#1d1d1d;
margin: 0;
padding: 0;
}
h1,h2 {
margin: 0;
padding: 0;
}
#page-container {
width:860px;
margin:auto;
}
#branding {
background: url(../images/luxeheaderbgrnd.png) repeat-x;
height: 117px;
}
#branding a{
text-indent:-9999px;
display:block;
width: 200px;
}
#branding h1 a{
height:113px;
background:url(../images/logo.png) no-repeat;
}
#header {
background: url(../images/h2bgrnd.gif) repeat-x;
height: 247px;
}
#header h2{
position:relative;
width:465px;
height:301px;
float: right;
margin-top: -60px;
margin-left: 200px;
margin-right: 20px;
z-index:2;
}
#main-nav {
background:url(..images/navbartrans.png);
position:relative;
height:53px;
width:860px;
float:left;
margin-top:-52px;
z-index:3;
}
#features h1 {
background: url(../images/features.gif);
width:860px;
height:248px;
}
#footer {
background: yellow;
height:20px;
}
Yes, this is actually a CSS question, despite me providing HTML code... I'm at my wit's end with IE. In the code below, "outer" is losing all formatting--background color, border, you name it, it's gone. html4strict Code: Original - html4strict Code <div id="outer" style="width: 410px;"> <div id="left" style="float: left; width: 200px;"><p>stuff</p></div> <div id="right" style="float: right; width: 200px;"><p>stuff</p></div> <div style="clear:both; font-size: 0; height: 0; width: 0;">&nbps;</div> </div> <div id="outer" style="width: 410px;"> My stylesheet is set up just fine (works fine in Firefox), so I assume this is one of those weird float bugs in IE. The thing is, it was rendering fine until I added another <div> in an entirely different location. Yes, it's all formatted correctly and validates XHTML 1.0 strict. Am I missing something, or is a known bug that I can't find documented, or does anyone have a suggestion for an alternate approach? Thanks all! http://www.mbsnyder.com/index2.shtml On the "profile" and "contact" areas, there are two separate uls that are acting strange in Safari. The "profile: the rest of the story" section appears almost semi-transparent, and the "contact: email" link doesn't appear unless you mouseover it. These issues only seem to occur in Safari. Not sure what's wrong here. Any help is, as always, much appreciated! Thanks in advance. I'm having a problem with the way one of my divs is being displayed in IE. An example of the page can be found he http://www.rit.edu/~jmw9523/help/ My problem is with the "Marketing literature" menu. There are supposed to be six menu item divs that consist of an arrow div and a description div. The description is only being displayed on the last menu item div in IE, and i can't figure out why. It looks fine in mozilla. the code for the div is as follows: Code: <div id="menuSecondary"> <div id="secondaryHead" class="menuSecondaryHead">Marketing literature</div> <div class="menuSecondarySpacer"> </div> <div class="menuSecondaryItem" onmouseover="rolloverArrow(1, 'red');" onmouseout="rolloutArrow(1, 'red');"> <a href="ninesteps"> <div class="menuSecondaryArrow" id="menuSecondaryArrow1"><img src="images/red/rightarrow.png"></div> <div class="menuSecondaryItemDesc">Creating marketing collateral that is less expensive and more effective: Nine steps</div> </a> </div> <div class="menuSecondarySpacer"> </div> <div class="menuSecondaryItem" onmouseover="rolloverArrow(2, 'red');" onmouseout="rolloutArrow(2, 'red');"> <a href="ninesteps"> <div class="menuSecondaryArrow" id="menuSecondaryArrow2"><img src="images/red/rightarrow.png"></div> <div class="menuSecondaryItemDesc">Creative Design and Editorial</div> </a> </div> <div class="menuSecondarySpacer"> </div> <div class="menuSecondaryItem" onmouseover="rolloverArrow(3, 'red');" onmouseout="rolloutArrow(3, 'red');"> <a href="ninesteps"> <div class="menuSecondaryArrow" id="menuSecondaryArrow3"><img src="images/red/rightarrow.png"></div> <div class="menuSecondaryItemSelected">Services</div> </a> </div> <div class="menuSecondarySpacer"> </div> <div class="menuSecondaryItem" onmouseover="rolloverArrow(4, 'red');" onmouseout="rolloutArrow(4, 'red');"> <a href="ninesteps"> <div class="menuSecondaryArrow" id="menuSecondaryArrow4"><img src="images/red/rightarrow.png"></div> <div class="menuSecondaryItemDesc">Custom Publications</div> </a> </div> <div class="menuSecondarySpacer"> </div> <div class="menuSecondaryItem" onmouseover="rolloverArrow(5, 'red');" onmouseout="rolloutArrow(5, 'red');"> <a href="ninesteps"> <div class="menuSecondaryArrow" id="menuSecondaryArrow5"><img src="images/red/rightarrow.png"></div> <div class="menuSecondaryItemDesc">Worldwide Language Services</div> </a> </div> <div class="menuSecondarySpacer"> </div> <div class="menuSecondaryItem" onmouseover="rolloverArrow(6, 'red');" onmouseout="rolloutArrow(6, 'red');"> <a href="ninesteps"> <div class="menuSecondaryArrow" id="menuSecondaryArrow6"><img src="images/red/rightarrow.png"></div> <div class="menuSecondaryItemDesc">Beyond Paper: Electronic Collateral</div> </a> </div> </div> the css for the div elements are as follows: Code: .menuSecondaryArrow
{
float: left;
clear: left;
width: 5px;
height: 10px;
}
.menuSecondaryArrow IMG
{
border: 0px;
}
.menuSecondaryItemDesc
{
float: left;
clear: none;
position: relative;
left: 5px;
width: 150px;
top: -1px;
}
.menuSecondaryItemSelected
{
float: left;
clear: none;
position: relative;
left: 5px;
width: 150px;
top: -1px;
}
.menuSecondaryHead
{
position: relative;
left: 10px;
font-weight: bold;
font-size: 11px;
line-height: 12px;
color: white;
}
.menuSecondaryHead A:hover
{
color: black;
text-decoration: none;
}
.menuSecondaryHead A
{
color: white;
text-decoration: none;
}
.menuSecondarySpacer
{
height: 7px;
line-height: 7px;
float: none;
clear: both;
}
.menuSecondaryItem
{
width: 170px;
position: relative;
display: inline;
}
.menuSecondaryItem a:hover
{
color: white;
text-decoration: none;
}
.menuSecondaryItem a
{
color: black;
text-decoration: none;
}
.menuSecondaryItemSpacer
{
float: left;
clear: none;
width: 5px;
}
I'm hoping there is something obvious i am missing. Thanks for your help. hi, im having a strange problem and i cannot see why it is doing it, i am building a 2 column layout and have floated and img to the right so and vertical align to the top so the text wraps around it, this is working fine in firefox but in ie the image is not there, the space is there, the alt attribute shows up when you hover over it and you can copy it. the page is at http://www.kevinarrowsmith.co.uk/wol/neighbourhood.php can anyone see why ie is behaving this way. Thanks. I have this test site using CSS drop down menus, but when you scroll over, they disappear. Seems to be happening in IE9, Firefox and Chrome. Can't figure it out. Any help would be appreciated! Here is the script: Code: <head>
<title>Untitled Document</title>
<style type="text/css">
body {background-color: #FFFFFF; font-family: verdana, arial; font-size: 10pt; font-weight: bold; color: #0000ff;}
.box1 {
width: 1000px;
height: 600px;
position:relative;
left: 150px;
top: 0px;
}
.blue_box {
width: 900px;
position:absolute;
top: 5px;
left: 20px;
height: 15px;
}
.box2 {
width: 1050px;
position:absolute;
top: 40px;
left: 20px;
height: 15px;
z-index: 2;
}
.main_image {
position: relative;
top: 3px;
}
.pic_box {
width: 738px; /* 10px longer than actual jpg */
position:absolute;
top: 75px;
height: 167px;
left: 20px;
z-index; 1;
}
.text_box1 {
width: 738px;
position:absolute;
top: 218px;
height: 159px;
left: 26px;
border-color: #ff0000;
}
.education_box {
width: 881px;
position:absolute;
top: 321px;
height: 350px;
left: 21px;
}
.top_news_box {
width: 136px;
position:absolute;
top: 1px;
height: 317px;
margin-left: 5px;
left: 715px;
border-color: #ff0000;
}
/*Credits: Dynamic Drive CSS Library */
/* Top menu */
.menu ul{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 12px Verdana;
list-style-type: none;
text-align: center; /*set to left, center, or right to align the menu as desired*/
}
.menu li{
display: inline;
margin: 0;
}
.menu li a{
text-decoration: none;
padding: 5px 7px;
margin-right: 5px;
border: 1px solid #778;
color: white;
background: #3282c2;
border-radius: 8px; /*w3c border radius*/
box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* w3c box shadow */
-moz-border-radius: 8px; /* mozilla border radius */
-moz-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* mozilla box shadow */
background: -moz-linear-gradient(center top, #a4ccec, #72a6d4 25%, #3282c2 45%, #357cbd 85%, #72a6d4); /* mozilla gradient background */
-webkit-border-radius: 8px; /* webkit border radius */
-webkit-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* webkit box shadow */
background: -webkit-gradient(linear, center top, center bottom, from(#a4ccec), color-stop(25%, #72a6d4), color-stop(45%, #3282c2), color-stop(85%, #357cbd), to(#72a6d4)); /* webkit gradient background */
}
.menu li a {
background: darkred;
background: -moz-linear-gradient(center top, #f5795d, #e55e3f 25%, #d02700 45%, #e55e3f 85%, #f5795d);
background: -webkit-gradient(linear, center top, center bottom, from(#f5795d), color-stop(25%, #e55e3f), color-stop(45%, #d02700), color-stop(85%, #e55e3f), to(#f5795d));
}
.menu li a:hover{
color: #FFFFFFF;
background:#0033CC;
}
/* Drop down menu buttons */
.blue ul { /* For all tags under <ul> (main and sub) */
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 10pt Verdana;
list-style-type: none;
text-align: center; /*set to left, center, or right to align the menu as desired*/
}
.blue li { /* Sets the properties associated with <li> */
display: inline; /* Sets li tags horizontal(main and sub) */
position: relative;
margin: 0;
}
.blue li a { /* Sets the properties associated for all anchor tags */
text-decoration: none;
padding: 5px 7px;
margin-right: 15px; /* Sets margin to 15px, which spaces out each menu button by 15px */
border: 1px solid #778;
color: white;
background: #3282c2;
border-radius: 8px; /*w3c border radius*/
box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* w3c box shadow */
-moz-border-radius: 8px; /* mozilla border radius */
-moz-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* mozilla box shadow */
background: -moz-linear-gradient(center top, #a4ccec, #72a6d4 25%, #3282c2 45%, #357cbd 85%, #72a6d4); /* mozilla gradient background */
-webkit-border-radius: 8px; /* webkit border radius */
-webkit-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* webkit box shadow */
background: -webkit-gradient(linear, center top, center bottom, from(#a4ccec), color-stop(25%, #72a6d4), color-stop(45%, #3282c2), color-stop(85%, #357cbd), to(#72a6d4)); /* webkit gradient background */
}
.blue li ul { /* Sets the properties for all li ul (sub menus). Rest is inherited */
position: absolute; /* All settings (e.g. left, top, etc.) will be relative to the top menu buttons (non sub menu buttons) */
left: 1px;
display: none; /* Blocks all sub menu tags */
}
.blue li:hover ul{
display: block; /* Shows all elements under each other (as opposed to next to each other) */
}
.blue li:hover ul a {
position: absolute;
width: 150px;
top: 5px; /* Amount of space the first sub menu starts from the parent button */
border-radius: 8px;
text-decoration: none;
background-color: #0000FF;
padding: 5px; /* Pads area around text 5x in all 4 directions */
border: 1px solid #cccccc;
border-bottom: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: bold;
color: #FFFFFF;
}
</style>
</head>
<body>
<div class="box1">
<div class="blue_box">
<div class="menu">
<ul>
<li><a href="">Join MSSNY</a></li>
<li><a href="">Pay Dues On Line</a></li>
<li><a href="">Directory Questionaire</a></li>
<li><a href="">MSSNYPAC</a></li>
<li><a href="">Grassroots Action Center</a></li>
<li><a href="">Member Login</a></li>
</ul>
</div><!-- Close menu -->
</div><!-- Close box2 -->
<div class="box2">
<div class="blue">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About MSSNY</a>
<ul>
<li><a href="#">Divisions</a></li>
<li><a href="#">Governance</a></li>
<li><a href="#">Committees</a></li>
<li><a href="#">Member Sections</a></li>
<li><a href="#">House of Delegates</a></li>
<li><a href="#">Position Statements</a></li>
<li><a href="#">By Laws</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</li>
<li><a href="#">Membership</a>
<ul>
<li><a href="#">Applications</a></li>
<li><a href="#">Pay Dues Online</a></li>
<li><a href="#">AAPI Physicians</a></li>
<li><a href="#">NYS Medical Directory</a></li>
</ul>
</li>
<li><a href="#">Medical Community</a>
<ul>
<li><a href="#">County Societies</a></li>
<li><a href="#">Speciality Societies</a></li>
<li><a href="#">State Societies</a></li>
<li><a href="#">Ethnic Medical Associations</a></li>
<li><a href="#">American Medical Association</a></li>
<li><a href="#">NYS Department of Health</a></li>
<li><a href="#">Additional Medical Links</a></li>
</ul>
</li>
<li><a href="#">Public Health</a>
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</li>
<li><a href="#">Physician Advocacy</a>
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
<li><a href="#">Practice Resources</a>
<ul>
<li><a href="#">WCB Guidelines and Fee Schedule</a></li>
<li><a href="#">EHR Implementation Services</a></li>
<li><a href="#">CME Physicial Education</a></li>
<li><a href="#">MSSNY Online Library</a></li>
</ul>
</li>
</ul>
</div>
<!-- Close blue -->
</div>
<!-- Close blue_box -->
<div class="pic_box"><img src="050211a_Original.jpg" class="main_image" width="691" height="136" border="0" />
<!-- Close top_news_Box -->
<div class="top_news_box">
<p><img src="Facebook-Twitter-Linkedin.JPG" border="0" /></p>
<p>Visit the MSSNY Blog Forum. .</p>
<p>News of New York<br />
Rate Card and Classifieds </p>
<p> MSSNY eNews 6/17/11 </p>
<p>MSSNY Legal Resources </p>
<p> *** Members Section *** <br />
Members: Click Here</p>
<p> Non Members: <br />
Browse Our Benefits Join US </p>
<p> <br />
</p>
</div>
</div>
<!-- Close pic_box -->
<div class="text_box1">To All New York Physicians: No Tort Reform HOD
Ref. Comm. Documents Health Care Reform <br />
<br />
WCB Guidelines and Fee Schedule 6-Credit CME Course on New Workers Compensation
<br />
Treatment Guidelines <br />
<br />
Influenza Surveillance: How to become an ILINET Provider for 2010-11 flu
season <br />
</div>
<div class="education_box"><img src="MED101014-Infection-Course-Image_1.jpg" width="263" height="219" border="0" /> <img src="MED100513-Course-Graphic.jpg" border="0" /></div>
<!-- Close pic_box -->
</div>
</body>
</html>
This site was done using all CS and is showing correctly in Firefox. When I test it in IE 6.0 All of the top navigation and images disappear. Still shows in the source code but doesn't display. I have no idea why. I've tried changing the order of my divs on the page and double checked all my z-indices. Any help would be appreciated! I can't post the link to the site (forum rules) but here are the bits of code that I think are relevent: Code: <div class="logo"><img src="../images/logo.png" alt="ConnectSuite" width="264" height="84" /></div> <div class="navigation"><a href="../default.asp">home</a> <a href="../officeware.asp">officeware</a> <a href="../contactware.asp">contactware</a> <a href="../projectware.asp">projectware</a> <a href="../exware.asp">EXware</a> <a href="triware.asp">about triware</a> <a href="contact.asp">contact us</a></div> <div class="headerText2"> <!-- TemplateBeginEditable name="PageTitle" --><h1>officeware</h1> <p>Shouldn’t everything you need to connect your business be available in one box?</p> <h2 align="right">We think so.</h2><!-- TemplateEndEditable --> </div> <div class="topBand"></div> <div class="whiteBand"></div> <div class="greyBand"></div> <div class="whiteBand"></div> <div class="greenBand2"></div> Code: .topBand {
background-image: url(../images/topgradient.png);
background-repeat: repeat-x;
float: left;
height: 25px;
width: 100%;
position: relative;
z-index: 0;
}
.whiteBand {
background-color: #FFFFFF;
float: left;
height: 6px;
width: 100%;
position: relative;
z-index: 0;
}
.greyBand {
background-image: url(../images/greygradient.png);
background-repeat: repeat-x;
float: left;
height: 35px;
width: 100%;
position: relative;
color: #FFFFFF;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 10pt;
z-index: 0;
}
.greenBand {
background-image: url(../images/greengradient.png);
background-repeat: repeat-x;
float: left;
height: 224px;
width: 100%;
position: relative;
z-index: 0;
}
.greenBand2 {
background-image: url(../images/greengradient2.png);
background-repeat: repeat-x;
float: left;
height: 142px;
width: 100%;
position: relative;
z-index: 0;
}
.contentBand {
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 12pt;
color: #333333;
float: left;
width: 100%;
position: relative;
z-index: 0;
}
.content {
width: 975px;
position: relative;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #666666;
margin-left: -487px;
left: 50%;
z-index: 1;
}
.navigation {
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #FFFFFF;
position: absolute;
left: 50%;
top: 38px;
z-index: 2;
margin-left: -200px;
}
.silhouettes {
margin-right: -487px;
position: absolute;
z-index: 2;
top: 100px;
right: 50%;
}
.headerText {
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #FFFFFF;
width: 500px;
margin-left: -480px;
position: absolute;
left: 50%;
top: 100px;
z-index: 2;
}
.logo {
position: absolute;
z-index: 2;
height: 84px;
left: 50%;
width: 264px;
margin-left: -480px;
top: 25px;
}
Hello, This is my first post here, so hi everyone. I'm relatively new at css or any of it. I been working on a navbar with a javascript fader. Anyway... I finally got my buttons to work! It's time for the Smirnoff! But my button are still giving me ...! Anyway I was wondering if someone...anyone could please help me before I slam this laptop against the wall! Just joking... Everything checks out with W3C except my buttons. Here's the html: Code: <div> <span id="navcontainer1" class="button1"> <ul> <li> <a href="guardian_angel_figurines.html"><img src="images/homebuttonlight.jpg" alt="Takes You to Home Page" style="filter:alpha(opacity=0)" onmouseover="pWidgets(this,100,50,5)" onmouseout="pWidgets(this,0,50,5)" /></a> </li> </ul> </span> <span id="navcontainer2" class="button2"> <ul> <li> <a href="#"><img src="images/aboutusbuttonlight.jpg" alt="Our Policies, Mission, and Company Information" style="filter:alpha(opacity=0)" onmouseover="pWidgets(this,100,50,5)" onmouseout="pWidgets(this,0,50,5)" /></a> </li> </ul> </span> <span id="navcontainer3" class="button3"> <ul> <li> <a href="#"><img src="images/aboutfigurinesbuttonlight.jpg" alt="For More Information About Figurines" style="filter:alpha(opacity=0)" onmouseover="pWidgets(this,100,50,5)" onmouseout="pWidgets(this,0,50,5)" /></a> </li> </ul> </span> <span id="navcontainer4" class="button4"> <ul> <li> <a href="about_angels.html"><img src="images/aboutangelsbuttonlight.jpg" alt="For Angelic Understandings, Mysteries and More" style="filter:alpha(opacity=0)" onmouseover="pWidgets(this,100,50,5)" onmouseout="pWidgets(this,0,50,5)" /></a> </li> </ul> </span> <span id="navcontainer5" class="button5"> <ul> <li> <a href="policy.html"><img src="images/contactusbuttonlight.jpg" alt="To Contact Us with Your Questions, Sugestions, Ect" style="filter:alpha(opacity=0)" onmouseover="pWidgets(this,100,50,5)" onmouseout="pWidgets(this,0,50,5)" /></a></li> </ul> </span></div> Don't laugh...they work! Here's the stylesheet: Code: .button1 {
position: relative;
bottom: 100px;
right: 40px;
}
#navcontainer1 ul li {
display: block;
float: left;
background: url("images/homebuttondark.jpg");
}
#navcontainer1 a {
display: block;
width: 140px;
height: 30px;
}
.button2 {
position: relative;
bottom: 100px;
right: 40px;
}
#navcontainer2 ul li {
display: block;
float: left;
background: url("images/aboutusbuttondark.jpg");
}
#navcontainer2 a {
display: block;
width: 140px;
height: 30px;
}
.button3 {
position: relative;
bottom: 100px;
right: 40px;
}
#navcontainer3 ul li {
display: block;
float: left;
background: url("images/aboutfigurinesbuttondark.jpg");
}
#navcontainer3 a {
display: block;
width: 140px;
height: 30px;
}
.button4 {
position: relative;
bottom: 100px;
right: 40px;
}
#navcontainer4 ul li {
display: block;
float: left;
background: url("images/aboutangelsbuttondark.jpg");
}
#navcontainer4 a {
display: block;
width: 140px;
height: 30px;
}
.button5 {
position: relative;
bottom: 130px; <-----this is weired! all the other buttons lined up with the same coordinates but this strange one.
left: 520px;
}
#navcontainer5 ul li {
display: block;
float: left;
background: url("images/contactusbuttondark.jpg");
}
#navcontainer5 a {
display: block;
width: 140px;
height: 30px;
}
W3C Validation says there is something wrong with the <ul> tag on each button html. I've tried a million different combinations but this is the only way I can get them to work. Only thing is they create empty space around them and unless I put something "above" them they disappear all together (where the go I have know idea!) I was just thinking if they could somehow "validate" then maybe they would be more predictable. Any suggestions? Thanks Here's an odd behavior, and the last on my hit-list for this design. IE5/Mac (not extremely high on my compatibility needs list) is doing something strange: the nav links (which are bitmaps that utilize Petr Stanicek's Fast Rollovers Without Preload technique) are disappearing - god knows where - but only on the bottom row. The top row works great... The strange thing is, I figured it was the :hover, so I used the Sam Foster commenting hack to hide the :hovers. This worked, the hover effect was not read. But the bottom row vanishes anyway. If you have an IE5/Mac build handy, check it out: Website Template: http://www.spearsphotography.com/test_index.html CSS File: http://www.spearsphotography.com/css/style.css Again, I'm not concerned about fixing it, but it's a really strange behavior I haven't encountered before and my forum searches were unfruitful. I figured I would document the oddity in case someone else has the another piece of the puzzle. -- Aiden Hello, I've been working on a site http://www.chequedelarealidad.org, and have recently experienced a problem with the 'links' page. Initially, the page appears as normal, but if I tab between windows to another program and then return to this page, the contects on the right hand side become invisible. I have validated the code using the W3C validator. Am not sure what the problem could be. Has anyone experienced anything similar to this? Or have a solution for me. Thanks, Victoria Hi Forum, A small non-profit group I am working with has put together a website. Unfortunately, the horizontal navigation menu disappears on IE browsers. The links are still in place, but are invisible. The shaded boxes around them do not load. Unfortunately we have no idea how to fix it. I am a beginner with CSS-- any helpful hints or advice? Thanks. -Sellicott <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" > <html xmlns="" xml:lang="en" lang="en"> <head> <title>BUTT OUT! Ending Tobacco Industry Exploitation of the Lesbian, Gay, Bisexual and Transgender Community</title> </head> <body> <div id="wrapper"> <div id="header"> <div id="sitename"><img src=></div> </div> <div id="navigation"> %%MENU%% </div> <div id="content-wrapper"> <div id="content">%%CONTENT%%</div> </div> <div id="footer"> <div id="footer-content">%%WEEBLYFOOTER%%</div> </div> </div> </body> </html> *|*{ margin:0pt; padding:0pt; } body{ background:transparent url(pattern3.gif)repeat-x center top; background-color:#FFFFFF; font-family:"lucida grande", arial, sans-serif; font-size:12px; color:#464e54; margin:0; padding:0; } p { line-height:18px; } h1, h2, h3{ line-height:40px; } #wrapper { width:760px; margin:0pt auto; } #header { float:left; width:760px; height:170px; } #sitename { color:#fff; padding-top:0px; font-size:2em; text-transform:uppercase; } #navigation { float:left; height:30px; width:760px; position:relative; } #navigation ul { float:left; padding:5px 10px 0 0; margin-left:0; } #navigation li { float:left; display:inline; font-family:"lucida grande", arial, sans-serif; text-align:center; font-size:1em; font-weight:bold; padding:6px 15px 8px 4px; margin-right:3px; } *html #navigation li { margin-right:4px; padding-right:15px; padding-bottom:9px; } #active { background: transparent url(tab_left2.gif) no-repeat left top; padding:6px 13px 6px 4px; color:#fff; font-weight:bold; } *html #active { padding-right:15px; } #navigation a:link { color:#fff; text-decoration:none; } #navigation a:visited { color:#fff; text-decoration:none; } #navigation a:hover { color:; text-decoration:none; } #active a { background: transparent url(tab_right2.gif) no-repeat right top; color:#464e54; padding:6px 14px 9px 10px; } #active a:link { color:#fff; text-decoration:none; } #active a:hover { color:#fff; text-decoration:none; } #active a:visited { color:#fff; text-decoration:none; } a:link,a:hover,a:visited { color:464e54; font-weight:normal; text-decoration:underline; } a:link { color: #464e54; } a:visited { color: #464e54; } a:active { color: #464e54; } .weebly_header { float:left; background: width:760px; height:1200px; margin-top:35px; } *html .weebly_header { margin-top:28px; padding-top:14px; } #content-wrapper { float:left; background: transparent url(content_background.jpg) no-repeat center top; width:760px; height:700px; } *html #content-wrapper { margin-top:-9px; } #content { padding-top:20px; padding-bottom:20px; } *html #content{ padding-top:35px; } img.image-left { margin-right:15px; float:left; } img.image-right { margin-left:15px; float:right; } #footer { visibility:hidden; padding-top:280px; padding-bottom:10px; float:center; } Hi... I have a big problem with FireFox, and especially Safari... http://www.laventanaband.com/Music%20Samples.htm When you roll over a pop out menu item (like "music and pics") these problems occur: In FireFox... if you roll past the edge of the frame, the menu item disappears. In Safari... the pop up menu section disappears below the content menu (!). I this doesn't happen on the main page because the content area does not use overflow:auto; .... it uses overflow:hidden; Somehow the use of that cause those problems... Here is my css doc. Any ideas? Thanks in advance! Regards, -Max Dykstra I just don't understand IE... something that should work just doesnt, and then it works fine on another page.... for example... Scroll Over The Staff Links at the very bottom You will notice that the black background disappears when viewed in IE... but take a look at the code isolated in IE and it looks perfect... I have this navigation menu I made for my online catalog that is comprised of some 300+ links that display in 3 levels of CSS-controlled menues. A root UL and 2 levels of subULs. It's located here . The menues all work fine except for a small area where the first submenu overlaps the root menu. Illustration . The problem is in mousing from one link in the list in the first submenu to the next link in the same list. (below or above) As the mouse pointer moves between the links, the menu changes to the sublist for the next link in the root menu instead of the next link in the already open submenu. The second level submenu (sub-submenu) doesn't have any problem. Links in the opened submenu can be moved between successfully if the pointer is moved out to an area that isn't shared with the root menu. Making any sense? This is HTML for the basic structu HTML Code: Original - HTML Code <table><tr> <td class="linktd"> <ul class="folderul"> <li class="folderli"> <a class="submenua" href="http://www.mydomain.com">Category</a> <ul class="folderul"> <li class="folderli"> <a class="submenua" href="http://www.mydomain.com">Subcategory</a> <ul class="folderul"> <li class="nonfolderli"><a class="submenua" href="http://www.mydomain.com">Subsubcategory</a> </li> </ul> </li> </ul> </li> </ul> </td> </tr></table> <table><tr> <td class="linktd"> <ul class="folderul"> <li class="folderli"> <a class="submenua" href="http://www.mydomain.com">Category</a> <ul class="folderul"> <li class="folderli"> <a class="submenua" href="http://www.mydomain.com">Subcategory</a> <ul class="folderul"> <li class="nonfolderli"><a class="submenua" href="http://www.mydomain.com">Subsubcategory</a> </li> </ul> </li> </ul> </li> </ul> </td> </tr></table> These are the two CSS lines that are supposed to control the displays. css Code: Original - css Code ul.folderul ul.folderul, li.folderli:hover ul.folderul ul.folderul { display: none } li.folderli:hover ul.folderul, li.folderli:hover li.folderli:hover ul.folderul { display: block }
ul.folderul ul.folderul, li.folderli:hover ul.folderul ul.folderul { display: none }
Maybe my understanding is deficent, but I haven't been able to find the problem and I'm hoping someone of you can point it out for me, please? |
|||||||