|
CSS - Horizontal <ul> Wrapping Incorrectly In The Ies (images, Code Included)
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. 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. There are very few things which are just impossible to do using HTML and CSS, but I'm wondering if I've finally hit something that is. First, some background: I'm trying to do some code for a wordpress image gallery on my blog. I have a plugin that allows me to code the gallery however I want, so that's not a problem. However, I'm redesigning my site, and I want to keep both galleries I have already posted and new galleries that I'm going to post to all look the same. The problem is this: the old galleries all have 2 images in a row, while the new ones will have 3 images in a row (and perhaps even 4 in some situations). All images in any given gallery will have the same heights and widths, but height and width of images between galleries can change. What I've been trying to accomplish is the following: A box, which creates a border around the entire gallery. Images stack horizontally as wide as they can go on the page, then drop down to the next line. As I said, sometimes this will be 2 and sometimes 3 images. However, the border should always be "skin tight" (give or take a few pixels of padding) around the gallery. I've tried just about every combination of tags, floating, and display options, and nothing seems to work. Either the containing element is either full width of it's container (if container is display block or inline-block with no width) constrains the widths of the images (if it does have a width), or the box doesn't fully contain the top row of images (if the container is display inline with non-floated content). I can usually either get the right width, but not the right height, or the right height, but not the right width. Getting both the right height and width appear to be the problem. As of right now, my code for the gallery looks something like the following (it is ever changing, so it's kind of pointless to post what it is at this exact moment): Code: <div class="outer"> <span class="inner"><a href="whatever"><img /></a></span> <span class="inner"><a href="whatever"><img /></a></span> <span class="inner"><a href="whatever"><img /></a></span> <span class="inner"><a href="whatever"><img /></a></span> <span class="inner"><a href="whatever"><img /></a></span> <span class="inner"><a href="whatever"><img /></a></span> <span class="inner"><a href="whatever"><img /></a></span> <span class="inner"><a href="whatever"><img /></a></span> <span class="inner"><a href="whatever"><img /></a></span> </div> However, I'm just running out of ideas, and I'm about ready to either say "screw the look of the old galleries" or use wordpress's built in options for how many rows there are (the problem with this is I have to set it for each gallery - something that I'm trying to avoid if possible, as resorting to that also presents issues with galleries I've already posted) I've got an interesting problem with Internet Exploiter. I have a navbar on the left side, and a large image next to it on the right. Now for most people viewing the page, there isn't any problems at all. If you use Mozilla, there's no issues, and usually nothing goofy in Internet Exploiter. But when you shrink the window size of IE, the large comic jpg 'wraps' down the page. If you take a glance at the source code at http://www.evilstudio.com and the css at http://www.evilstudio.com/main.css you can see that I've been using max-height to keep the image divs on the sidebar from covering each other up, and I'm using seperate divs to make them stack. Can't say if it's the best way to be doing that or not... I've tried quite a few things, such as making the comic absolute, floated, given it a min-width, (even though i know why that wouldn't help...) set it's text wrap to normal, you can see I've got an overflow-x on it right now, so it's reasonable to assume that i've done overflow and overflow ... Tried giving the comic a margin of 168 px... whatever I could scrounge up off of google and the O'Reilly book I had to return to the library... I'll probably be checking this thread periodically for the next few hours so if there's any questions, I'd be more than happy to pass out answers like cake at a party. Can somebody tell me if this is possible? I have a horizontal menu and I'm using images. I'm using javascript for the drop down menu etc. The menu is an include so it looks the same on all the pages. What I want to do is when I'm on say "Contact" the rollover color (this is an image) displays the "Contact" hover image, and the same with the other pages. So what needs to happen is CSS needs to override the button with the hover image. Is it possible to put css in every page that tells it to display the needed hover image when on that page? I'm not sure if the title describes exactly what I mean, but here it goes. I'm working on this website: http://denartcc.org/d/ The menu along the top has images that change position when you hover over them. The thing that I'm trying to do is create something that looks like this site's menu: http://www.aopa.org/ Notice how hovering over one of the menu items reveals another blue bar that contains more links. This is what I'm trying to create. Unfortunately I'm stuck when it comes to comparing these side-by-side, and I just don't know how to create that secondary set of links. The code I'm using is below. CSS: Code: #amenu {
list-style: none;
padding: 0;
margin:auto 0 0 0;
width: 930px;
height: 30px;
background-color: black;
position: relative;
border-bottom:medium solid white;
float:left;
}
#amenu ul {
display: none;
position: absolute;
}
#amenu ul li {
}
#amenu li a {
display: block;
text-indent: -900%;
position: absolute;
outline: none;
}
.home {
width: 120px;
height: 30px;
background: url(../images/menu/home.png) no-repeat;
left: 20px;
top: 0px;
}
.airspace {
width: 163px;
height: 30px;
background: url(../images/menu/airspace.png) no-repeat;
left:160px;
top:0;
}
.community {
width: 174px;
height: 30px;
background: url(../images/menu/community.png) no-repeat;
left:343px;
top:0;
}
.controllers {
width: 195px;
height: 30px;
background: url(../images/menu/controllers.png) no-repeat;
left:537px;
top:0;
}
.pilots {
width: 174px;
height: 30px;
background: url(../images/menu/pilots.png) no-repeat;
left:752px;
top:0;
}
#amenu a:hover {
background-position: left bottom;
}
#amenu a:hover span{
display: block;
}
HTML Code: <div> <ul id="amenu"> <li><a href="#" class="home">Home<span></span></a></li> <li> <a href="#" class="airspace">Airspace<span></span></a> <ul> <li>ZDV Airports</li> <li>Preferred Routing</li> <li>Try Something New</li> </ul> </li> <li><a href="#" class="community">Community<span></span></a></li> <li><a href="#" class="controllers">Controllers<span></span></a></li> <li><a href="#" class="pilots">Pilots<span></span></a></li> </ul> </div> I am trying to create a Horizontal Multilevel Drop Down Navigation Menu, but instead of the css creating text i would like them to be images and when you hover over the links they rollover into a new image. I would really like your help on this been trying to do it for weeks now!! Cheers 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 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 edit: FIXED! 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>
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'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. 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. 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) 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 Okay, I've been going MENTAL with this. Please help!!!! Here is the page: go to bartlettinteractive dot com / retail /index.html (sorry, I am a new user so they won't let me put in the actual link). Anyways, when you minimize your screen, the nav WRAPS when I want it to just be hidden. I have tried every combination of overflow:hidden and whitespace:nowrap I could imagine and nothing is getting it done. Please be my CSS hero. I searched the forum and could not find a post with a similar issue, so I am creating this one. I have left and right containers, and the heights only wrap to the contents in the right container. So if there happens to be more content in the left container, the text exceeds the div background and continues onto the page background. URL REMOVED I appreciate any help I can get with this - Cadet Palmer I'm having trouble with creating CSS rollovers. Well, not so much trouble as frustration. The rollover itself works fine in FF, and that's cool by me, but I have to make it work in IE, and whilst it *does* work in IE, whenever I roll over one of the CSS buttons, a 2 pixel gutter appears in my border div See what I mean... Open this link in FF and then in IE Ahh, great, now it's putting the gutter there in IE regardless. Great. Here's the CSS I'm using: Code:
body { font-family: tahoma; font-size: 12px; background: #fff; }
img { border: 0px; }
#Container { width: 520px; height: 400px; border: 1px solid #808080; margin-left: auto; margin-right: auto; background: url("backdrop.gif"); background-repeat: repeat; }
#HeaderContainer { border: 0px solid none; width: 500px; padding-bottom: 0px; float: left; }
#NavContainer { position: relative; margin-left: auto; margin-right: auto; border: 1px solid #000; width: 500px; float: left; padding: 2px; background: #fff; margin: 0px; }
#FooterContainer { border: 0px solid none; width: 500px; float: right; padding-top: 4px; padding-right: 0px; background: #fff; text-align: right; margin: 0px; }
.nav { width: 100px; border: 0px solid none; background: #c0c0c0; height: 20px; text-align: center; padding-top: 5px; float: left; margin: 0px; }
.navSelected { width: 100px; border: 0px solid none; background: #fff; height: 20px; text-align: center; padding-top: 5px; float: left; margin: 0px; }
a.navText, a.navText:visited { font-weight: bold; color: #000; text-decoration: none; }
a.navTextSelected, a.navTextSelected:visited { font-weight: bold; color: #808080; text-decoration: none; }
and here's the HTML (minus the CSS): Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Page :: </title>
<style type="text/css" media="screen">
<!--Already included in snippet above /-->
</style>
<script type="text/javascript">
function roll(item, onOff) {
var targetDiv;
var targetText;
var showHide = onOff;
targetDiv = document.getElementById(item.id);
targetText = document.getElementById(item.id + "Text");
if (showHide == 1) {
targetDiv.className = "navSelected";
targetText.className = "navTextSelected";
} else if (showHide == 0) {
targetDiv.className = "nav";
targetText.className = "navText";
}
}
</script>
</head>
<body>
<div id="Container">
<div id="NavContainer">
<div onmouseover="javascript:roll(this, 1);" onmouseout="javascript:roll(this, 0);" id="Toast" class="nav"><a id="ToastText" class="navText" href="/test.php?p=Toast">Toast</a></div>
<div onmouseover="javascript:roll(this, 1);" onmouseout="javascript:roll(this, 0);" id="Lemons" class="nav"><a id="LemonsText" class="navText" href="/test.php?p=Lemons">Lemons</a></div>
<div onmouseover="javascript:roll(this, 1);" onmouseout="javascript:roll(this, 0);" id="Cakes" class="nav"><a id="CakesText" class="navText" href="/test.php?p=Cakes">Cakes</a></div>
<div onmouseover="javascript:roll(this, 1);" onmouseout="javascript:roll(this, 0);" id="Nachos" class="nav"><a id="NachosText" class="navText" href="/test.php?p=Nachos">Nachos</a></div>
<div onmouseover="javascript:roll(this, 1);" onmouseout="javascript:roll(this, 0);" id="Frogs" class="nav"><a id="FrogsText" class="navText" href="/test.php?p=Frogs">Frogs</a></div>
</div>
<div id="FooterContainer"><a href="http://telestatic.net"><img src="http://telestatic.net/images/tsnLogo.jpg" width="136" height="15" alt="The Telestatic Network" title="The Telestatic Network" /></a> <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fresume.telestatic.net%2Ftest.php%3F"><img src="http://telestatic.net/images/btnXHTML.png" alt="Valid Strict XHTML 1.0!" title="Valid Strict XHTML 1.0!" height="15" width="80" /></a> <a href="http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fresume.telestatic.net%2Fresume.css"><img src="http://telestatic.net/images/btnCSS.png" alt="Valid CSS!" title="Valid CSS!" width="80" height="15" /></a></div>
</div>
</body>
</html>
Hope to god someone can explain what's going on before I go totally insane. I have attached an image that encapsulates ideally how I would like the page to look. I'm having troulbe having left nav, body text lining up. Basically I want the background of the center box to be white, but the wrapper is not "clearing" all the divs in the center box. So the bg appears black. I would also like the body color and left nav color to ALWAYS line up at the bottom. However they need to be able to strecth when content grows. Any help would be greatly appreciated! I'm pretty new to CSS and love it, but this has really got me stumped. View how I would "like" it to look http://urbaneffect.com/test/layers_image.gif View Page here http://urbaneffect.com/test/ CSS FILE Code:
/* this centers the content*/
#wrapper{
width: 765px;
margin-left: auto;
margin-right: auto;
text-align: left;
position: relative;
background-color:#FFFFFF;
}
#headerBlock{
z-index:2;
position:absolute;
top:0px;
margin-left:15px;
}
#bodyBlock{
position:absolute;
top:70px;
}
#leftNav{
width: 182px;
float: left;
height: 300px;
margin-right: 10px;
background-color:#666666
}
#innerContent {
float: left;
padding-left: 12px;
padding-top: 20px;
background-color:#FFCCCC;
width:550px;
}
|
|||||||