CSS - My Bg Box Is Disappearing When I Scroll On The Page...
When I scroll up and down my page, parts of my background image I have set (aka sliding door or box or container...) disappears!!! I don't understand, I tried getting rid of all the color and hover options and it still doesn't work right. I posted my code below if someone can help me!!! If needed I can always email the images if you can't work without them, I just need to get this figured out! Thanks a bunch!!
Toni Lynne HTML <td width="247" class="splitright"> <div class="box"> <div class="box-outer"> <div class="box-inner"> <h2>Welcome to Joy!</h2> <p>Pastor Steve and Kim Schmelzer would like to thank you for viewing this site and blah blah blah blah. Enjoy! Pastor Steve and Kim Schmelzer would like to thank you for viewing this site and blah blah blah blah. Enjoy!</p> <br /> </div></div> </div> </td> CSS /* background box */ .box { background: url(images/bottom-left.gif) no-repeat left bottom; } .box-outer { background: url(images/bottom-right.gif) no-repeat right bottom; padding-bottom: 4%; } .box-inner { background: url(images/top-left.gif) no-repeat left top; } .box h2 { background: url(images/top-right.gif) no-repeat right top; padding-top: 4%; } .box h2, .box p { padding-left: 4%; padding-right: 4%; } .splitright { background: #ffffff; width:38%; float: right; overflow: hidden; text-align:justify; } a:link { color: #fea11d; text-decoration: none; } a:hover { color: #999999; text-decoration: none; } Similar Tutorialsi have a layout that I am trying to get to work that I need some help with. I am getting records from a database and then displaying them side by side such as: header record1 record2 record3 record4 column1 column1 column1 column1 column1 column2 column2 column2 column2 column2 column3 column3 column3 column3 column3 column4 column4 column4 column4 column4 what I want is for the page to have to scroll to the right when lots of records are present, what happens now is that say record4 starts a new line and will be under the rest of the records not are their side. I can get it if I set the div container's width to something like 10000px but that wont work as sometimes they may be longer or shorter and I dont want a lot of white space to the right side. I want this accomplised dynamically so no matter how wide it is, it will show them all. I tried overflow: scroll but that didn't seem to work. Here is the code, its in php but its not big or too hard to figure out. PHP Code: echo '<div id="tableheader">'; for ($i=0; $i<count($info); $i++) { echo '<p>'.$info[$i][name].'</p>'; } echo '</div>'; for ($i=0; $i<count($data); $i++) { if (!($i & 1)) { echo '<div class="even">'; } else { echo '<div class="odd">'; } for ($j=0; $j<count($data[$i]); $j++) { if ($j == 0) { echo '<p><a href="homedata.php?record='.$data[$i][$j].'">'.$data[$i][$j].'</a></p>'; } else { echo '<p> '.$data[$i][$j].' </p>'; } } echo '</div>'; } echo '</div>'; ?> </div> and my css is: Code: #tableData {padding: 0; margin: 0; border: 0; width: 10000px;} #tableheader {background-color: #ACACAC;position: relative; float: left;} .odd {background-color:#C0D8E1; position: relative; float: left;} .even {position: relative; float: left;} #tableData p {padding: 0 3px; margin: 0; border-right: 1px solid black; border-bottom: 1px solid black;display: block;} Any ideas? Thanks I have a div that uses overflow:scroll to allow a large amount of text to fit into a small space. Is there a way to make it so that when this div is loaded, it will scroll to the bottom of its contents instead of starting at the top by default? Thanks for any help. Link To Site Dear CSS Guruz If you goto this page in IE and scroll down you will notice the text "Power, Safety, Simplicity, etc" Dissapears! This does not happen in Firefox. It could be a javascript issue but Im not really sure. Anybody have any clues what could cause this? Louis OK, I have a static sub-navigation on the left side of the page, which works just fine. You can see it here I'd like the sub-navigation to scroll to just beneath he header navigation, then stay put there, when the page is scrolled. Something like the Vogue web site does with the red navigation bar, which you can see here Can someone please explain, or give me an idea of how to accomplish this? I think it is with CSS. thanks Hi, I have this strange issuewhich is only happening in IE7. When the page loads, the scroll bars begin to flicker. It stops after the page loads completely. And if the page is loading after an ajax request, it scroll bars keep flickering even after ajax response is completed. Please let me know if anyone has any answers to this issue. The HTML is as follows: <div id="db-overlay-popup-box" class="overlay-popup-box"> <div id="database-list-popup"><form>....</form></div></div> The CSS used for the div elements is given below. #db-overlay-popup-box { min-height: 200px; height: 400px; position: absolute; width: 40%; margin-left: 30%; top: 15em; border: 2px solid #3282b6; z-index: 999; padding: 10px; background-color: #fff; } #databaselist-databases { list-style-type : none; clear: both; overflow: auto; position: absolute; width: 90%; margin-left: 1em; padding-left: 1em; right: 1em; white-space: nowrap; } .overlay-popup-box { position: absolute; z-index: 999; width: 40%; margin-left: 30%; border: 2px solid #3282b6; padding: 10px; background-color: #fff; } alright I'm stumped so please please please help me out! I have a page that's 100% in height, and usually there's more information so you have to scroll down. but I can't seem to activate the scrollbar. I've tried overflow, messing with the height attribute, i have no idea how to solve this. my page: http://www.aapinboom.nl/luxeduinvil...ntroductie.html and this is the code: Code: html,body { background-image: url('../images/bg.gif'); margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; font-family: "Trebuchet MS"; font-size: 13px; height: 100%; } #center { text-align: center; width: 100%; height: 100%; } #container { margin-left: auto; margin-right: auto; width: 600px; height: 100%; border: 1px solid #B8B8B8; background-color: #FFFFFF; text-align: left; } thanks for any suggestions! Bear with me please. I am brand new to html/CSS etc... I just cobbled together a page a few days ago using someone elses code as a reference, I hardly know what I did or how it works, but it works just like I want it to - Background centered and stationary (no scrolling with content), but the content does scroll, with NO horizontal scroll bar. You can view it he bit(dot)ly/rbsZsH - THIS IS WHAT I WANT MY OTHER PAGE TO DO Ok, so feeling smug, I tried to do another one like it, without the sidebar/header, etc... For the most part it works, EXCEPT - I have an unexpected horizontal scroll bar that goes about 50% across the browser and allows the user to pull the content off-center across the background. I have nearly pulled my hair out trying to fix it and put a hidden message under the content just for fun.. (make lemonade when you get lemons, right?) You can view second page he bit(dot)ly/qMbYl2 - THIS IS THE GOOFY PAGE The only real clue I have is that the first page is set to 780px wide and has this comment in the container div: /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */ My second page container div is set to 802px because I am using an image from Photoshop rather than a background color. Thank you if any of you can shed light on the situation. P.S. - I'm sure I've totally butchered the code, and you can assume when you answer that I can cut and paste but not really understand what you are saying. I am an art student, and I'm trying to construct my own portfolio site. I am, however, new to CSS, so I dont really know what I'm doing. I'm using Dreamweaver CS3. I'm using a fixed 2 column template, with header and footer, and the left column as the side bar. Within the right column, I'm trying to make a scrollbar hovering near the top of the div, with clickable thumbnails of my work. Once the thumbnails are clicked on, a larger version of the image takes up the rest of the column. Does anyone have any idea how to accomplsh this? Even my web design teacher's stumped with this one. I thought about using frames, but thats html... 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 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 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; } 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> 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! I'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! 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. 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 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 |