|
CSS - Image Positioned Incorrectly
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; }
Similar TutorialsI'm using a relative-positioned div as a container for an image, which is absolute-positioned. I'm doing this so that the image will automatically scale down to fit inside the containing div (nothing else I've tried has done this for me- so if there is another way to achieve this, please fill me in). This part works fine, but the image isn't as wide as the containing div, so I would like to center the image inside the div- but I can't seem to get it to work. I tried the obvious text-align:center in the div. That actually worked... kinda. The image's left-side was in the center of the div, but obviously isn't the 'centering' that I'm looking for. I then tried setting margin-left and margin-right on the image to auto, and that did nothing. I suspect that the fact that I have my image absolute-positioned is the culprit here, but I don't know how to get around it- or IF I can get around it without drastically changing my approach. Admittedly, the container div resides inside a table cell. I know that isn't the best practice, but I spent so much time trying a div-only approach only to waste time and become frustrated that I went back to what I know works- at least for now. I tried removing the container div from the table and inserting the image directly to the table cell- but encountered more issues with the sizing of the image. Essentially, my code is something like this: CSS: Code:
td#CONTENTDISPLAY
{
width: 100%;
height: 100%;
text-align: left;
vertical-align: top;
padding: 0 0 0 0;
margin: 0 0 0 0;
}
div#CONTENTBANNER
{
position: relative;
height: 100%;
padding: 0 0 0 0;
}
img.CONTENTIMG
{
position: absolute;
height: 100%;
}
HTML: Code:
...
<td id="CONTENTDISPLAY">
<div id="CONTENTBANNER">
<img class="CONTENTIMG" />
</div>
</td>
...
Nothing flashy, I know. One thing I should mention, however, is that the image is ALWAYS placed inside the container div using a Javascript function (it's a dynamic image). I doubt that makes a difference, but I figure it's worth mentioning. Can anyone help point me in the right direction? Thanks! - skubik ML 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. 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'm getting a strange interaction between a CSS-positioned image and a widget placed farther down the page. I've tested it in FF3.5.7 and IE8, and everything works fine until I test it in Compatibility View in IE. The widget takes a few seconds to load; once it's loaded the image at the top of the page disappears. The layout is basically this: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head></head>
<body>
<table>
<tr>
<td><div style="position:relative;margin:50px 0 0 0">
<table>
<tr>
<td>Some content</td>
<td rowspan="2"><img style="position:relative;margin:-50px 0 0 0" src="#" width="250" height="375" /></td>
</tr>
<tr>
<td>Some content</td>
</tr>
</table>
<table>
<tr>
<td>Some content</td>
<td><img style="visibility:hidden;width:0px;height:0px;" border="0" width="0" height="0" src="http://counters.gigya.com/wildfire/IMP/CXNID=2000002.0NXC/bT*xJmx*PTEyNzY2NTc4MzAyNzAmcHQ9MTI3NjY1ODUyNzM1MiZwPTEwODQwMDEmZD*mZz*yJm89MDQ2ZDg3MzBjNDc4NDExZTkw /YTVmZDcxNzhiYmQ1MGYmb2Y9MA==.gif" /><object width="394" height="350" id="W4afb54b3f6d091a24b057108737c9fbe" data="http://www.5lovelanguages.com/widget/5LL-assesment-widget.swf" type="application/x-shockwave-flash">
<param value="http://www.5lovelanguages.com/widget/5LL-assesment-widget.swf" name="movie"/>
<param value="transparent" name="wmode"/>
<param value="all" name="allowNetworking"/>
<param value="always" name="allowScriptAccess"/>
</object></td>
</tr>
</table>
<table style="position:absolute;left:0;top:-50px">
<tr>
<td>Some content</td>
</tr>
</table>
</div></td>
</tr>
</table>
</body>
</html>
I don't know anything about how the widget works. Can anyone help me fix this problem? I have a problem with my background image. I need to centre the background image and center the container div on top of that. I have used the below CSS which has the desired effect in Mozilla but for some reason in ie, the background moves depending on browser size when it needs to stay put! Any ideas? body { font-size: 0.70em; font-family: Arial, Helvetica, sans-serif; text-align: center; background:#ffffff url('../images/content_bg.gif') top center no-repeat; color: #303030; height:100%; min-height:100%; } #container { width: 900px; text-align:left; position: absolute; margin-left:-450px; left:50%; z-index: 100; } I'm working on a pet project on the off chance that I could be hired by a small business referral organization in the city where I live, so this isn't super urgent. I'm also not a web developer by trade, more IT, so if I make any obvious mistakes, feel free to point them out. I've got a simple absolute-positioned two-column layout and a two-color background that I want to tile vertically behind it. The problem seems to be that the browsers ( IE and FF, haven't tried chrome/safari/opera) seem to think that the body ends at the bottom of the logo I set on top, and won't tile it beyond the bottom of the image. HTML: Code: <!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> <link rel="stylesheet" type="text/css" href="css/stylesheet.css" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Hub City Business Network | Word-Of-Mouth Business Referrals in Hattiesburg, Mississippi | Home</title> </head> <body> <div id="content"> <div id="logo"><a href="index.htm"><img src="images/hcbnlogo1transparency.png" alt="Hub City Business Network" /></a></div> <div class="left"> <div id="navigation"> <ul> <li><a href="index.htm">Home</a></li> <li><a href="members/index.htm">Members</a></li> <li><a href="contact.htm">Contact Us</a></li> </ul> </div> <div id="leftinfo"> <p>We meet for breakfast every Tuesday,<br /> 7 - 8:30 AM. <br /> at the Neal House at<br /> 1311 East Hardy St.</p> </div> </div> <div class="right"> <p>Hub City Business Network (HCBN), is a Hattiesburg-based business networking group that meets every Tuesday for breakfast at 7:00 till 8:30 A.M. Our membership is composed of some of the finest and best-respected business men and women in Hattiesburg. Our networking model is predicated on the idea that people do business with people they know, trust, and like. Our members know that they can confidently refer business to a member and the referral will be handled in a timely, professional manner. In addition, we encourage members to meet outside of the weekly meetings for one-on-one Strategic Marketing Sessions (SMS). An SMS usually takes the form of a lunch or coffee, and gives members time to discover in a more relaxed environment things about other members that don't surface at the regular weekly meetings. </p> </div> <div id="footer"> <p>Site built by Robert Greenstreet</p> </div> </div> </body> </html> CSS: Code: html
{
width:100%;
}
#logo img
{
margin:10px 0px 0px 20px;
width:400px;
height:100px;
}
img
{
border:0px;
}
a:link
{
color:#29497f;
}
a:visited{
color:#5dd0c0;
}
body
{
width:650px;
margin-left:auto;
margin-right:auto;
background-color:#29497f;
}
#content
{
/*height:500px;*/
width:650px;
background-image:url('../images/bg1.png');
background-repeat:repeat-y;
background-attachment:fixed;
background-position:center;
margin-top:-10px;
}
.left
{
position:absolute;
left:auto;
top:120px;
width:15em;
margin-left:12px;
padding-left:0px;
}
.left ul
{
list-style-type:none;
margin-left:-33px;
font-family:sans-serif;
}
#leftinfo
{
margin-left:10px;
width:9em;
}
.right
{
position:absolute;
left:auto;
top:120px;
width:27em;
margin-left:12em;
font-family:sans-serif;
}
.right p
{
color:#000000;
}
#memberlist ul
{
margin-left:-40px;
}
#memberlist a:visited{
color:#6a92d4;
text-decoration:none;
}
#footer
{
position:absolute;
top:400px;
width:650px;
margin:0 auto;
}
Also, I'm working on getting that footer centered about 30px from the bottom of the page, without running up into whatever content may be above it. I think I might be able to figure that one out on my own, though. Like I said, no rush. This isn't a paid gig 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 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>
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'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. edit: FIXED! 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 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. I have a Calendar of Events that I actually made quite a while ago, and it works great, but now I'm incorporating it into a different site... I used to handle the events on the calendar with absolutely positioned spans, but I'm going to try and do something a little different (being able to have tooltip like hovers with the possibility of using lists in the hover), and you can't do that with spans... but my css doesn't seem to be behaving properly. I've got some example data, the event(bitcalevent) is supposed to sit on the bottom of the day(bitweek div), but it doesn't... when it was a span it did (though I had to add border:0 and width:100%)... maybe there is another rule that I'm not seeing that isn't letting this happen??? [edit]Note that I made the bottom -10px just so it looks ok for now... but it's like it's not separating the bottom from the top... [/edit] Hey all, I am creating a site which sells Three 3G Mobile Phones and at the bottom of the pages i have a footer which is included into each page, see here. If you view the site in Firefox then the footer is in the correct place and rests just where the main content finishes. However in IE the footer is miles down the page creating a box effect arround the content which to be honest looks crap. If anyone would be so kind as to give me an idea why this is happening then i would be very grateful. Also, there are many sites around which give tutorials etc about text decoration and such with CSS, but i am yet to find a really good begginers tutorial on how to layout a page with CSS and Divs, does anyone know of one? Thanx for reading. CSS Code (siteInfo is the footer in question: Code:
#masthead{
padding: 0px 0px 0px 0px;
border-bottom: 1px solid #cccccc;
width: 100%;
}
#navBar{
float: left;
width: 15%;
margin: 0px;
padding-right: 2px;
height: 100%;
}
#headlines{
float:right;
width: 45%;
padding-right: 2px;
}
#content{
float: left;
width: 70%;
padding: 0px 0px 0px 0px;
background-color: #FFFFFF;
position: inherit;
}
#siteInfo{
clear: both;
font-size: 75%;
color: #FFFFFF;
padding: 10px 10px 10px 10px;
text-align: center;
background-color: #CCCCCC;
border-top: 1px solid #107FA4;
position: relative;
font-weight: bold;
}
Edited to add CSS. Hi I've come up on the old <select> elements showing through <div>s that are made visible on top of them. What I want to do is find out the id's of the select elements under my <div> so that i can hide them using CSS / Javascript. The basic layout of my page is a grid of <select> elements, each one of these would have a hidden <div> layer associated with it containing extra information etc. By the side of each of the <select> elements is a little image / button that the user will click and the layer with the extra stuff in is made visible. The layer will overlap a number of <select> elements (not the parent <select> element). Each <div> pops up in a different position (calculated dynamically as an x,y offset from the parent) can I find the Ids of the elements it overlaps? Hope this is clear, and thanks in advance. flipflops. We don't use position absolute for anything else on our site, but it seems that our drop down still goes under some content. Here is the css: Code:
#nav {
background-image: url('../images/nav-full-bg.jpg');
background-repeat: repeat-x;
width: 967px;
height: 69px;
padding: 0;
margin: 0;
overflow: hidden;
}
#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
}
#nav a {
display:block;
padding: 11px 12px 13px 12px;
font-weight:bold;
font-size: 13px;
font-family: "Trebuchet MS", Bitstream Vera Sans, Verdana;
color: #626262;
margin: 0;
text-decoration: none;
}
#nav li { /* all list items */
float: left;
}
#nav li ul { /* second-level lists */
position:absolute;
width: 200px;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
border-bottom: 2px solid #808080;
background-image: url(../images/davidpng2.png);
z-index: 900;
}
#nav ul li {
float: left;
width: 10em; /* width needed or else Opera goes nuts */
}
#nav li ul li a{
padding:5px;
display: block;
width: 190px;
color: #000;
font-weight:normal;
font-family:verdana;
font-size:11px;
}
#nav li ul li a:hover{
background-color:#a2c9f4;
}
#nav li ul ul { /* third-and-above-level lists */
margin: -23px 0 0 200px;
;
}
#nav li ul li ul li a{
display: block;
}
#nav li:hover ul ul, #nav li.sfhover ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}
|
|||||||