CSS - Elements Disappearing/placed Incorrectly In Ie
edit: FIXED!
Similar TutorialsML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
CSS Help Forums: » Register « | User CP | Games | Calendar | Members | FAQs | Sitemap | Support | User Name: Password: Remember me Dev Shed Forums > Web Design > CSS Help Div incorrectly showing incorrectly in Firefox, as desired in IE or Chrome Discuss Div incorrectly showing incorrectly in Firefox, as desired in IE or Chrome in the CSS Help forum on Dev Shed. Div incorrectly showing incorrectly in Firefox, as desired in IE or Chrome Cascading Style Sheets (CSS) forum discussing all levels of CSS, including CSS1, CSS2 and CSS Positioning. CSS provides a robust way of applying standardized design concepts to your web pages. Earn Your Master Degree in Internet Marketing Receive the tools necessary to be the rock star of your field. Our 12-month program teaches you the evolving world of multi-channel marketing as well as the complex issues and opportunities found in the industry. .NET CASE Tools - Download & Contest ASP Free and Iron Speed Designer are giving away $5,500+ in FREE licenses. Iron Speed's RAD CASE toolset can save up to 80% of your coding time. One free license per week, one perpetual license per month! Download and Activate to enter! Visit Other Sites in Our Network Web development can be a daunting task, even for specialists. There is a lot of information to absorb and a lot of technologies to learn in order to manage a superior website. When trying to learn the ropes, developers need a reliable source to introduce new ideas that can be easily implemented. When working on large projects, even web veterans may run into a technology or an aspect of a technology that they are unfamiliar with. Learn More! Download to Enter | Contest Rules Tutorials | Forums Add This Thread To: Del.icio.us Digg Google Spurl Blink Furl Simpy Y! MyWeb « Previous Thread | Next Thread » Thread Tools Search this Thread Rate Thread Display Modes Dev Shed Forums Sponsor: Viewing: Dev Shed Forums > Web Design > CSS Help > Div incorrectly showing incorrectly in Firefox, as desired in IE or Chrome « Previous Thread | Next Thread » Thread Tools Search this Thread Email this Page Search this Thread: Advanced Search Display Modes Rate This Thread Linear Mode Switch to Hybrid Mode Switch to Threaded Mode Rate This Thread: 5 : Excellent 4 : Good 3 : Average 2 : Bad 1 : Terrible Posting Rules You may not post new threads You may not post replies You may not post attachments You may not edit your posts vB code is On Smilies are On [IMG] code is On HTML code is Off View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox Forum Jump Please select one User Control Panel Private Messages Subscriptions Who's Online Search Forums Forums Home -------------------- Programming Languages PHP Development Perl Programming C Programming Java Help Python Programming Ruby Programming Game Development Programming Languages - More ASP Programming .Net Development Visual Basic Programming Software Design ColdFusion Development Delphi Programming Regex Programming XML Programming Other Programming Languages Web Design HTML Programming JavaScript Development CSS Help Flash Help Photoshop Help Web Design Help Website Critiques Search Engine Optimization Mobile Programming Mobile Programming iPhone SDK Development Android Development BlackBerry Development Web Site Management Business Help Development Software Scripts Databases Database Management DB2 Development MySQL Help PostgreSQL Help Firebird SQL Development MS SQL Development Oracle Development LDAP Programming System Administration Mail Server Help Apache Development Security and Cryptography Antivirus Protection DNS IIS Networking Help FTP Help Operating Systems BSD Help Linux Help UNIX Help Windows Help Mac Help Web Hosting Web Hosting Free Web Hosting Web Hosting Requests Web Hosting Offers Computer Hardware Computer Hardware CPUs Cooling Embedded Programming Motherboards Multimedia Hardware Other Dev Shed Lounge Development Articles Beginner Programming Hire A Programmer Project Help Wanted Latest News Updated Hourly Technology News Business News Science News Forum Information Forum Rules/Guidelines Forum Announcements Dev Shed Gaming Center Go to the Dev Shed Battle Arena Go to the Dev Shed Arcade Games Go to the Legend of the Green Dragon Suggestions & Feedback Forums: » Register « | User CP | Games | Calendar | Members | FAQs | Sitemap | Support | Powered by: vBulletin Version 3.0.5 Copyright ©2000 - 2012, Jelsoft Enterprises Ltd. © 2003-2012 by Developer Shed. All rights reserved. DS Cluster 7 - Follow our Sitemap [-X-] x.Net CASE tools to speed up your development. FREE trial & contest entry w/ activation. Hi guys, Im hoping a CSS whizz can find an error in this code as I cannot for the life of me work out why content held in the 'main' div is appearing outside / overlapping the edge of the site design? It loads perfectly in Firefox Code: #wrap { width: 820px; background: #CCC url(content.jpg) repeat-y center top; margin: 0 auto; text-align: left; } #content-wrap { clear: both; width: 760px; padding: 0; margin: 10px auto; } /* Main Column */ #main { float: left; width: 70%; padding: 0; margin: 0 0 0 5px; display: inline; } Any help would be greatly appreciated I'm somewhat new to CSS, so excuse me if this post sounds noobish. The goal here is to make a simple 3 column layout with a header and a footer. For the most part, I've Googled around and I've got the basics of it down. But theres one problem - the far right column refuses to sit right below the header like it should. Its in its place horizontally - but vertically, it doesn't want to appear until the center column has ended. Heres the CSS I'm using - I hope you can infer what the IDs mean: Code: #header { background-color:#D7D7D7; color:#000000; padding:0; background-image:url(images/headerpng.png); background-repeat:no-repeat; background-position:top center; height:96px; border:2px solid black; width:100%; } #header h1 { padding:0; margin:0; } #leftnav { float:left; width:100px; padding:5px; margin:0px; text-align:center; font-family:Arial; } #centercontent { margin-left:110px; margin-top:5px; margin-right:150px; } #footer { clear:both; text-align:center; font-size:9px; color:#666666; } #rightnav { float:right; width:100px; padding:5px; margin:0px; text-align:center; font-family:Arial; } By the way, I know there are a few unnecessary properties in there, but I haven't cleaned this code up yet - just looking for the solution to my nesting problem. Hello all, I dont understand why the image placed inside the right column appears incorrect here. Please check the attachment or the following website and you will understand what I am refering. http://www.refinethetaste.com/yk/clients.asp Code: #content { float:left; width: 956px; min-height:800px; background:url(images/bg_content.gif) 0px 0px #e2eceb no-repeat; } #content #lcolumn { float:left; width:401px; } #content #lcolumn .logo { float:left; width:100%; } #content #lcolumn img.logo { float:left; width:401px; height:104px; border:0px } #content #lcolumn .head { float:left; width:100%; height:20px; background:#99adcc; } #content #lcolumn .head .text { float:left; width:100%; text-align:center; font-size: 13px; font-weight:bold; line-height:20px; color:#083684; } #content #lcolumn .main { float:left; width:361px; padding:20px; } #content #lcolumn p { font-size:15px; } #content #rcolumn { float:left; width:555px; height:505px; } #content #rcolumn img { float:left; border:0px; } I am having some difficulty getting text to render how I want it. The page in question can be viewed he http://www.cbo4edu.org/who.html The column of text on the left is bolded for some reason and I want it match the text on the right (unbolded). I have setup an External style sheet and the only code I've applied to type is: PHP Code: .footer { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt; } body,td,th { color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; } body { background-color: #000000; margin-left: 0px; margin-right: 0px; The HTML code: PHP Code: <th colspan="4" rowspan="24" align="left" valign="top"><p>College Bound Opportunities (CBO) is a not-for-profit organization centered in the five communities within Deerfield and Highland Park High School District 113. CBO identifies high-achieving young people who without support would likely forgo post-secondary education and assists them in applying to and completing college. CBO goals are achieved through a program of one-on-one coaching between volunteers and scholars. Additional aid provided by CBO includes tutoring, training services, laptop computers, and up to $4,000 per year in scholarships. </p> Thanks, Rebecca I am attempting to put together a site with CSS navigation for the first time. Thanks to people much smarter than I, I've been able to stitch other's lessons into something almost workable. THE PROBLEM I have a horizontal menu with a submenu. This submenu should also display horizontally. It does in FF, but not in either IE6 or IE7. In these browsers, it displays vertically. I have tried a lot of things and finally gave up. I validated my code and was given a pass. I've tried narrowing down the problem and have tried searching for the answer but I just can't figure it out. If needed, you can view the problem at www.foundationfitnesscenter.com/schedule (ignore the crappy header image, it's just there to show an idea for now). The CSS where I feel the problem must be: Code: #nav #schedule-sub, #nav #education-sub, #nav #classes-sub { display:none; width:90%; } body.classes #nav ul#classes-sub a, body.schedule #nav ul#schedule-sub a, body.education #nav ul#education-sub a { background-image:none; color:#3300FF; font-size:100%; font-weight:bold; line-height:10px; margin-right:4px; padding:2px 10px 2px 10px; text-decoration:none; } body.classes #nav ul#classes-sub, body.schedule #nav ul#schedule-sub { display:block; position:absolute; left:15px; top:95px; } body.education #nav ul#education-sub { display:block; position:absolute; left:175px; top:95px; } The HTML Code: <ul id="nav"> <li class="home-list"><a href="/index.php">Home</a></li> <li class="classes-list"><a href="../classes/">Classes</a> <ul id="classes-sub"> <li><a href="../classes/pilates.php">Pilates</a></li> <li><a href="../classes/dance.php">Dance</a></li> <li><a href="../classes/gyrokinesis.php">Gyrokinesis</a></li> </ul> </li> <li class="schedule-list"><a href="../schedule/">Schedule</a> <ul id="schedule-sub"> <li><a href="../schedule/class-schedule">View All Classes</a></li> <li><a href="../schedule/enroll-private.php">Enroll - Private</a></li> <li><a href="../schedule/enroll-group.php">Enroll - Group</a></li> </ul> </li> <li class="education-list"><a href="../education/">Education</a> <ul id="education-sub"> <li><a href="../education/pilates/">Pilates</a></li> <li><a href="../education/dance/">Dance</a></li> <li><a href="../education/gyrokinesis/">Gyrokinesis</a></li> </ul> </li> <li class="about-list"><a href="../about/">About</a></li> <li class="contact-list"><a href="../contact/">Contact</a></li> </ul> Hi, I've just joined these forums as I have a very annoying problem. I have created a webpage which I have checked using the w3c validator - it is valid for XHTML 1.0 Transitional and Strict. It is a simple design; Header 3 Cols Footer It works perfectly in IE7, however in FireFox (2.0.0.14) I am getting some very strange behaviour. On the first, clean load (cache cleared) the page is rendered incorrectly - the Middle and Right columns being rendered below the Left Column. If you then click on the address bar and press enter (thus reloading the page from the cache) it is rendered perfectly. If I clear the cache, go to the address bar, and press enter again it renders incorrectly. Pressing F5 to refresh (ignoring the cache) also results in it being rendered incorrectly. Correct: URL Incorrect: URL I thought it might have been image dimensions not being set - so I went through and set all these to no avail. Code: HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Stuff</title> <link rel='stylesheet' type='text/css' href='style.css' /> </head> <body> <div id='outerFrame'> <div id='header'> <div id='banner'> <div id='leftTop'><img style='width: 338px; height: 135px;' src='gfx/banner_Left.gif' alt='Dancewear Central The UK's Number 1 Dancewear Specialist ' /></div> <div id='rightTop'><img style='width: 522px; height: 135px;' src='gfx/banner_Right.png' alt='' /></div> </div> <div id='topNav'> <div class='link'><a href='#'><img style='width: 122px; height: 26px;' src='gfx/btns/btnHome.gif' alt='Home'/></a></div> <div class='link'><a href='#'><img style='width: 122px; height: 26px;' src='gfx/btns/btnCompanyProfile.gif' alt='Company Profile'/></a></div> <div class='link'><a href='#'><img style='width: 122px; height: 26px;' src='gfx/btns/btnProductListing.gif' alt='Product Listing'/></a></div> <div class='link'><a href='#'><img style='width: 122px; height: 26px;' src='gfx/btns/btnBestSellers.gif' alt='Best Sellers'/></a></div> <div class='link'><a href='#'><img style='width: 122px; height: 26px;' src='gfx/btns/btnSpecialOffers.gif' alt='Special Offers'/></a></div> <div class='link'><a href='#'><img style='width: 122px; height: 26px;' src='gfx/btns/btnContactUs.gif' alt='Contact Us'/></a></div> <div class='link'><a href='#'><img style='width: 122px; height: 26px;' src='gfx/btns/btnLatestNews.gif' alt='Latest News' style='margin: 0; float: right;'/></a></div> </div> </div> <div id='innerFrame'> <div id='leftCol'> <div id='searchBox'> <div class='title'><img src='gfx/searchBox_header.gif' style='width: 200px; height: 22px;' alt='Search Dancewear Central'/></div> <div class='body'></div> </div> <div id='newsletterBox'> <div class='title'><img src='gfx/newsletterBox_header.gif' style='width: 200px; height: 22px;' alt='Newsletter Sign Up'/></div> <div class='body'></div> </div> <div id='categoryBox'> <div class='title'><img src='gfx/categoryBox_header.gif' style='width: 200px; height: 22px;' alt='Product Categories'/></div> <div class='body'> <div class='link'><a href='#'>Ladies Leotards</a></div> <div class='link'><a href='#'>Childrens Leotards</a></div> <div class='link'><a href='#'>Urban/Street</a></div> <div class='link'><a href='#'>Examination</a></div> <div class='link'><a href='#'>Ballet Shoes</a></div> <div class='link'><a href='#'>Ballroom Shoes</a></div> <div class='link'><a href='#'>Tap and Character Shoes</a></div> <div class='link'><a href='#'>Jazz Shoes</a></div> <div class='link'><a href='#'>Sneakers</a></div> <div class='link'><a href='#'>Warm-Ups</a></div> <div class='link'><a href='#'>Boys/Mens</a></div> <div class='link'><a href='#'>Tights</a></div> <div class='link'><a href='#'>Underwear</a></div> <div class='link'><a href='#'>Skirts/Tutus</a></div> <div class='link'><a href='#'>Bags</a></div> <div class='link'><a href='#'>Accessories</a></div> </div> </div> <div id='brandBox'> <div class='title'><img src='gfx/brandBox_header.gif' style='width: 200px; height: 22px;' alt='Brand Search'/></div> <div class='body'> <div class='link'><a href='#'>Capezo</a></div> <div class='link'><a href='#'>Roch Valley</a></div> <div class='link'><a href='#'>Bloch</a></div> <div class='link'><a href='#'>Sansa</a></div> <div class='link'><a href='#'>Danskin</a></div> <div class='link'><a href='#'>Wear-Moi</a></div> <div class='link'><a href='#'>Bunheads</a></div> <div class='link'><a href='#'>Danz-ez</a></div> <div class='link'><a href='#'>So-Danca</a></div> <div class='link'><a href='#'>Grishko</a></div> <div class='link'><a href='#'>Kerska</a></div> <div class='link'><a href='#'>Aniluce</a></div> <div class='link'><a href='#'>Kias</a></div> </div> </div> <div id='recommendBox'> <div class='title'><img src='gfx/recommendBox_header.gif' style='width: 200px; height: 22px;' alt='Recommend a Friend' /></div> <div class='body'>asd</div> </div> <div id='ballroomBox'><img src='gfx/ballroomcentral_link.gif' style='width: 200px; height: 46px;' alt='Ballroom Central'/></div> </div> <div id='contentFrame'> <img src='gfx/content_mainimage.jpg' style='width: 444px; height: 269px;' alt=''/> <img src='gfx/content_Header.gif' alt='' style='width: 374px; height: 22px; margin: 20px 0px 0px 7px;'/> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque nulla. Pellentesque lobortis nulla eget purus. In erat. Maecenas posuere, mauris vel vulputate consecetuer, risus neque aliquet tellus, at imperdiet leo ipsum eu massa. Donec hendrerit. Vestibulum cursus faucibus tellus. Mauris molestie, risus a vulputate auctor, est massa sollicitudin purus, et lacinia pede pede vitae mauris.</p> </div> <div id='rightCol'> <div id='loginBox'> <div class='title'><img src='gfx/loginBox_header.gif' style='width: 200px; height: 22px;' alt='Login to Dancewear Central'/></div> <div class='body'></div> </div> <div id='basketBox'> <div class='title'><img src='gfx/basketBox_header.gif' style='width: 200px; height: 25px;' alt='Shopping Basket'/></div> <div class='body'></div> </div> <div id='discountBox'> <div class='title'><img src='gfx/discountBox_header.gif' style='width: 200px; height: 135px;' alt='Get 10% off with a Dance School Discount at Dancewear Central'/></div> <div class='body'><a href='#'>click here for information</a></div> </div> <div id='bestsellerBox'> <div class='title'><img src='gfx/bestsellerBox_header.gif' style='width: 200px; height: 22px;' alt='Best Sellers'/></div> <div class='body'><br /><br /><br /><br /><br /></div> </div> <div id='bundleBox'> <a href='#'><img src='gfx/bundleBox_gfx.gif' style='width: 200px; height: 139px;' alt='Click here to see some of our amazing bundle deals'/></a> </div> </div> </div> <div id='footer'> <img src='gfx/footer_brands_gfx.gif' style='width: 860px; height: 67px;'alt=''/> <p><a href='#'>Home</a> | <a href='#'>Products</a> | <a href='#'>Company Profile</a> | <a href='#'>Best Sellers</a> | <a href='#'>Special Offers</a> | <a href='#'>Bundles</a> | <a href='#'>Contact</a> | <a href='#'>News</a> | <a href='#'>Dance School Discount</a> | <a href='#'>Site Map</a> | <a href='#'>Statutory Information</a></p> </div> </div> </body> </html> Code: CSS body { margin: 0; padding: 0; background-image: url(gfx/body_bg.gif); background-attachment: fixed; background-repeat: repeat-x; text-align: center; font-size: 11px; font-family: tahoma; border-style: none; } #outerFrame { z-index: 1; width: 900px; background-color: #FFF; height: auto; margin: auto; background-image: url(gfx/outerFrame_bg.gif); text-align: left; } #header { z-index: 2; position: relative; width: 860px; height: 161px; margin: 0px 20px 0px 20px; padding: 0px; background-color: #FFF; } #header #banner { z-index: 3; position: relative; width: 860px; height: 135px; margin: 0; padding: 0; background-color: #FFF; } #header #banner #leftTop { z-index: 4; position: relative; float: left; width: 338px; height: 135px; } #header #banner #rightTop { z-index: 4; position: relative; float: right; width: 522px; height: 135px; } #header #topNav { z-index: 4; position: realtive; width: 861px; height: 26px; background-color: #FFF; } #header #topNav .link { z-index: 5; position: relative; float: left; width: 122px; height: 26px; margin: 0px 1px 0px 0px; padding: 0; } #header #topNav .link img {border-style: none;} #innerFrame { z-index: 6; position: relative; display: table; width: 860px; height: 100%; background-color: #FFF; margin: 10px 20px 0px 20px; padding: 0px; } #innerFrame #leftCol { position: relative; float: left; z-index: 7; width: 200px; height: auto; background-color: #FFF; } #innerFrame #leftCol #searchBox { position: relative; float: left; z-index: 8; width: 200px; height: 121px; background-color: #FFF; margin: 0px 0px 8px 0px; padding: 0px; } #innerFrame #leftCol #searchBox .title { position: relative; z-index: 9; width: 200px; height: 22px; margin: 0px 0px 1px 0px; padding: 0; } #innerFrame #leftCol #searchBox .body { position: relative; z-index: 9; width: 200px; height: 98px; background-image: url(gfx/leftCol_box_bg.gif); } #innerFrame #leftCol #newsletterBox { position: relative; float: left; z-index: 8; width: 200px; height: 110px; background-color: #FFF; margin: 0px 0px 8px 0px; padding: 0px; } #innerFrame #leftCol #newsletterBox .title { position: relative; z-index: 9; width: 200px; height: 22px; margin: 0px 0px 1px 0px; padding: 0; } #innerFrame #leftCol #newsletterBox .body { position: relative; z-index: 9; width: 200px; height: 87px; background-image: url(gfx/leftCol_box_bg.gif); } #innerFrame #leftCol #categoryBox { position: relative; float: left; z-index: 8; width: 200px; height: auto; background-color: #FFF; margin: 0px 0px 8px 0px; padding: 0px; } #innerFrame #leftCol #categoryBox .title { position: relative; z-index: 9; width: 200px; height: 22px; margin: 0px 0px 1px 0px; padding: 0; } #innerFrame #leftCol #categoryBox .body { position: relative; z-index: 9; width: 200px; height: auto; margin: 0; padding: 0; } #innerFrame #leftCol #categoryBox .body .link { position: relative; z-index: 10; width: 200px; height: 20px; margin: 0px 0px 1px 0px; padding: 0; } #innerFrame #leftCol #categoryBox .body .link a { width: 190px; height: 16px; display: block; font-family: tahoma; font-weight: bold; color: #000; font-size: 0.8em; background-color: #e8e8e8; padding: 4px 0px 0px 10px; text-decoration: none; } #innerFrame #leftCol #categoryBox .body .link a:hover {background-color:#fcdf68; text-decoration: underline;} #innerFrame #leftCol #brandBox { position: relative; float: left; z-index: 8; width: 200px; height: auto; background-color: #FFF; margin: 0px 0px 8px 0px; padding: 0px; } #innerFrame #leftCol #brandBox .title { position: relative; z-index: 9; width: 200px; height: 22px; margin: 0px 0px 1px 0px; padding: 0; } #innerFrame #leftCol #brandBox .body { position: relative; z-index: 9; width: 200px; height: auto; margin: 0; padding: 0; } #innerFrame #leftCol #brandBox .body .link { position: relative; z-index: 10; width: 200px; height: 20px; margin: 0px 0px 1px 0px; padding: 0; } #innerFrame #leftCol #brandBox .body .link a { width: 190px; height: 16px; display: block; font-family: tahoma; font-weight: bold; color: #000; font-size: 0.8em; background-color: #e8e8e8; padding: 4px 0px 0px 10px; text-decoration: none; } #innerFrame #leftCol #brandBox .body .link a:hover {background-color:#fcdf68; text-decoration: underline;} #innerFrame #recommendBox { z-index: 10; position: relative; float: left; margin: 8px 0px 0px 0px; padding: 0; width: 200px; height: 106px; background-color: #FFF; } #innerFrame #recommendBox .title{ position: relative; z-index: 11; width: 200px; height: 22px; margin: 0px 0px 1px 0px; padding: 0; } #innerFrame #leftCol #recommendBox .body { position: relative; z-index: 11; width: 200px; height: 83px; background-image: url(gfx/leftCol_box_bg.gif); } #innerFrame #leftCol #ballroomBox { position: relative; z-index: 11; float: left; width: 200px; height: 46px; margin: 8px 0px 0px 0px; padding: 0px; } #innerFrame #contentFrame { position: relative; float: left; z-index: 7; width: 444px; height: auto; background-color: #FFF; margin: 0px 8px 0px 8px; } #innerFrame #contentFrame p { margin: 20px 0px 0px 7px; } #innerFrame #rightCol { position: relative; float: right; z-index: 7; width: 200px; height: auto; background-color: #FFF; } #innerFrame #rightCol #loginBox { z-index: 10; position: relative; float: left; width: 200px; height: 108px; } #innerFrame #rightCol #loginBox .title { position: relative; z-index: 11; width: 200px; height: 22px; margin: 0px 0px 0px 0px; padding: 0; } #innerFrame #rightCol #loginBox .body { position: relative; z-index: 11; width: 200px; height: 87px; background-image: url(gfx/rightCol_box_bg.gif); } #innerFrame #rightCol #basketBox { z-index: 10; position: relative; float: left; width: 200px; height: 123px; margin: 8px 0px 0px 0px; padding: 0; } #innerFrame #rightCol #basketBox .title { position: relative; z-index: 11; width: 200px; height: 25px; margin: 0px 0px 0px 0px; padding: 0; } #innerFrame #rightCol #basketBox .body { position: relative; z-index: 11; width: 200px; height: 98px; background-image: url(gfx/basketBox_body_bg.gif); } #innerFrame #rightCol #discountBox { z-index: 10; position: relative; float: left; width: 200px; height: 165px; margin: 8px 0px 0px 0px; padding: 0; } #innerFrame #rightCol #discountBox .title { position: relative; z-index: 11; width: 200px; height: 135px; margin: 0px 0px 0px 0px; padding: 0; } #innerFrame #rightCol #discountBox .body { position: relative; z-index: 11; width: 200px; height: 20px; background-image: url(gfx/discountBox_body_bg.gif); padding-top: 10px; } #innerFrame #rightCol #discountBox .body a{ color: #FFF; font-weight: bold; text-decoration: underline; margin: 0px 0px 0px 13px; } #innerFrame #bestsellerBox { z-index: 10; position: relative; float: left; width: 200px; height: auto; margin: 8px 0px 0px 0px; padding: 0; } #innerFrame #rightCol #bestsellerBox .title { position: relative; z-index: 11; width: 200px; height: 22px; margin: 0px 0px 0px 0px; padding: 0; } #innerFrame #rightCol #bestsellerBox .body { position: relative; z-index: 11; width: 200px; height: auto; background-image: url(gfx/rightCol_box_bg.gif); } #innerFrame #bundleBox { z-index: 10; position: relative; float: left; width: 200px; height: 139px; margin: 8px 0px 0px 0px; padding: 0; } #innerFrame #bundleBox img{ border-style: none; } #footer { z-index: 12; position: relative; display: table; width: 860px; height: auto; margin: 10px 20px 0px 20px; padding: 0px; background-color: #FFF; } #footer p { text-align: center; color: #6e6e6e; margin-bottom: 10px; } #footer p a { color: #6e6e6e; } Hope someone can help me out! Thanks in advance, Dave. I did a site recently and Im having trouble finding what is causing this weird error. If you go to this gallery using firefox: http://www.mmimageart.com/fineart4.html you will notice that the thumbnails under "saguaro" will display wrongly. IF you dont see the problem just keep refreshing the browser until you get the problem. you will get it. there are problems also in: http://www.mmimageart.com/fineart3.html (everglades) http://www.mmimageart.com/fineart.html (Atlantic Coast) What coding error in css can cause firefox to display the website wrong randomly ? Is this a well known error ? if not, then Ill post the code. Thanks in advanced!!! My page is displaying correctly in IE 6,7,8(CV), but when I view it in Firefox or Safari, it does not display correctly. The problem I'm having is the div #main is not stretching to allow room for the content in it. In IE it stretches fine, but in FF and Safari it doesn't stretch at all. I've been all over the internet searching but I can't find any similar problems/solutions. I've tried whatever I can think of or find. Can somebody please help me or point me in the right direction? Page: <div id="main"> //problem div <div id="sideBar"> <div id="header"> </div> </div> <div id="mainContent"> //contains content that I need to be stretched to the height </div> </div> CSS Code: html { margin: 0; padding: 0; border: 0; } body { background-image: url(img/bg.png); background-repeat: repeat-x; background-color: #008A32; margin: 0; padding: 10px; border: 0; height: 100%; min-height: 100%; } #main { font-family: Arial, Helvetica, sans-serif; padding: 20px; position: relative; border: solid 1px #0C0; width: 760px; margin: 1px auto; background-color: #FFF; } #sideBar { width: 194px; float: left; clear: left; height: auto; min-height: 100%; } #header { width: 194px; height: 344px; clear: both; float: none; background-image: url(img/Logo01.png); } #mainContent { width: 546px; float: right; clear: right; height: auto; min-height: 100%; } Thanks in advance -Mike Just when I think I've finally seen it all, every way these browsers can **** up, there's always one more. This morning I discovered that Netscape 7 / Win does not properly render an a element with image content. My example demonstrates that both IE 6 / Win and Netscape 7 / Win both have issues rendering a elements with text content also. This seems like really basic stuff . . . how, HOW could Netscape 7 not be able to render the a with image content correctly??? (Another good question is why this forum doesn't allow you to upload HTML files . . . WTF?? -- you'll have to rename the file to .html) This problem has been driving me crazy. Long story short, this is what it looks like in Firefox 3. This is the correct way it should look. (ff.jpg) This is the way it looks in both IEs (ie.jpg) The entire third <li> item wraps correctly in firefox, but in ie, the word within the <li> wrap, but not the entire <li> element. Here is the html: Code: <ul class="tabNavSecondary"> <li><a href="#preventionSub1">Prevention</a>|</li> <li><a href="#preventionSub2">xxxxxx</a>|</li> <li><a href="#preventionSub3">xxxxx</a>|</li> <li><a href="#preventionSub4">xxxx</a>|</li> <li><a href="#preventionSub5">xxxx</a>|</li> <li><a href="#preventionSub6">xxx</a></li> </ul> CSS: Code: .tabNavSecondary{ float:left; margin:6px 0 15px -5px; } .tabNavSecondary li{ background:none; display:block; float:left; margin:0; padding:0; } .tabNavSecondary li a, .tabNavSecondary li a:link{ float:left; margin:0 5px; color:#003399; } Any thoughts? I've tried for about an hour with all sorts of different styles. Hello all, I'm having a bit of trouble with a list of relative, floated <li> elements, each containing a single absolutely positioned div that appears on hover. I'm using the :hover pseudo-class currently but I will use JavaScript for IE6 once it displays correctly. The code is below. The problem is that the <div> appears on top of it's parent element but behind all other elements. Code: #wrapper-body ul.staff-list{ list-style-type:none; padding-top:10px; position:relative; } #wrapper-body ul.staff-list-team{ width:313px; padding-top:0; padding-bottom:15px; margin-bottom:20px; border-bottom:1px solid #d7e3a9; } #wrapper-body ul.staff-list li{ float:left; width:230px; position:relative; padding:8px 0 8px 15px; z-index:1; } #wrapper-body ul.staff-list-team li{ width:151px; padding-left:0; padding-left:5px; } #wrapper-body ul.staff-list-team li.right{ padding-left:5px; } #wrapper-body ul.staff-list-clerks li{ float:none; width:310px; padding-left:5px; } #wrapper-body ul li.highlight{ background-color:#f4f6ec; } #wrapper-body ul.staff-list li p{ padding:0 0 9px 0; margin-left:91px; } #wrapper-body ul.staff-list li small{ padding:0 0 5px 0; margin-left:91px; } #wrapper-body ul.staff-list-clerks li span{ color:#A6302B; display:block; float:left; } #wrapper-body ul.staff-list-clerks li span.clerk-name{ width:140px; } #wrapper-body ul.staff-list-clerks li span.clerk-phone{ width:120px; background:url(../img/structure/clerks-phone.gif) 0 2px no-repeat; padding-left:23px; } #wrapper-body ul.staff-list-clerks li a.clerk-email{ display:block; float:left; height:16px; width:16px; background:url(../img/structure/clerks-mail.gif) 0 3px no-repeat; } #wrapper-body ul.staff-list li div.staff-list-detail{ display:none; background:url(../img/structure/staff-list-bottom.gif) left bottom repeat-x; padding-bottom:3px; margin-top:-15px; left:4px; z-index:10; top:15px; position:absolute; } #wrapper-body ul.staff-list li div.staff-list-detail a{ background:url(../img/structure/staff-list-bullet.gif) no-repeat 0 4px; padding-left:8px; } #wrapper-body ul.staff-list li:hover div.staff-list-detail{ display:block; } An image of what is happening below: Thanks for reading! 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 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 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; } 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'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! 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 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> |