|
CSS - Nested Div In Ie And Firefox - Help Needed
This is probably an easy one, but I can't seem to find the answer. I am trying to get a nice offset border effect with nested divs like this:
Code: <html>
<head>
<title></title>
<style type="text/css">
<!--
#box {
background-color: Silver;
width: 200px;
height: 500px;
}
#inside {
width: 100%;
height: 100%;
border: 1px solid navy;
margin: 10px;
}
-->
</style>
</head>
<body>
<div align="center">
<div id="box">
<div id="inside"></div>
</div>
</div>
</body>
</html>
This works fine in IE but in not in Firefox and Mozilla. What am I missing? Thanks Similar TutorialsI would be very grateful for any help offered. The following html and css are displaying very differently between IE7 and Firefox 2. The HTML is Strict verified and the CSS has also been verified. Please help me! I don't mind you telling me an idiot. Just please constructively explain how I'm an idiot and how I can stop being an idiot. Thanks. HTML Document Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "(URL address blocked: See forum rules)">
<html xmlns="(URL address blocked: See forum rules)">
<head><title>
Kaua'i Historical Society Membership Maintenance
</title><link type="text/css" rel="stylesheet" href="Kauai.css" /></head>
<body>
<form method="post" action="default.aspx" id="aspnetForm">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTEzMjAyNDM1NzdkGAEFEGN0bDAwJExvZ2luVmlldzEPD2QCAmT6FXaep7s2kkgUAi6bmGTUd7hIOw==" />
</div>
<div id="Header">
<a href="(URL address blocked: See forum rules)" title="Kaua'i Historical Society">
<img src="images/mastheadBar.gif" style=" border-style:none;" alt="Kaua'i Historical Society" /></a></div>
<div id="Content">
<div class="containerparent">
Manage members
<div id="membercontainer">
<div class="box">
<a id="ctl00_ContentPlaceHolder1_hlCreateMember" title="Create Member Record" href="CreateMember.aspx"><img title="Create Member Record" src="images/businessman_add.png" alt="Create Member Record" style="border-width:0px;" /></a><br />
Create member</div>
<div class="box">
<a id="ctl00_ContentPlaceHolder1_hlFindMember" title="Find Member Record" href="FindMember.aspx"><img title="Find Member Record" src="images/businessman_find.png" alt="Find Member Record" style="border-width:0px;" /></a><br />
Find member</div>
</div>
</div>
<p>
</p>
<div class="containerparent">
Manage pledge drives
<div id="pledgedrivecontainer">
<div class="box">
<a id="ctl00_ContentPlaceHolder1_hlCreateDrive" title="Create Pledge Drive" href="CreateDrive.aspx"><img title="Create Pledge Drive" src="images/businessman_add.png" alt="Create Pledge Drive" style="border-width:0px;" /></a><br />
Create pledge drive</div>
<div class="box">
<a id="ctl00_ContentPlaceHolder1_hlFindDrive" title="Find Pledge Record" href="FindDrive.aspx"><img title="Find Pledge Record" src="images/businessman_find.png" alt="Find Pledge Record" style="border-width:0px;" /></a><br />
Find pledge record</div>
</div>
</div>
<p>
</p>
<div class="containerparent">
Manage pledge levels
<div id="pledgelevelcontainer">
<div class="box">
<a id="ctl00_ContentPlaceHolder1_hlCreateLevel" title="Create Pledge Level" href="CreateLevel.aspx"><img title="Create Pledge Level" src="images/businessman_add.png" alt="Create Pledge Level" style="border-width:0px;" /></a><br />
Create pledge level</div>
<div class="box">
<a id="ctl00_ContentPlaceHolder1_hlFindLevel" title="Find Pledge Level" href="FindLevel.aspx"><img title="Find Pledge Level" src="images/businessman_find.png" alt="Find Pledge Level" style="border-width:0px;" /></a><br />
Find pledge level</div>
</div>
</div>
<p>
</p>
<div class="containerparent">
Manage letters
<div id="lettercontainer">
<div class="box">
<a id="ctl00_ContentPlaceHolder1_hlGenerateThankYou" title="Generate Thank You Letters" href="GenerateThankYou.aspx"><img title="Generate Thank You Letters" src="images/businessman_add.png" alt="Generate Thank You Letters" style="border-width:0px;" /></a><br />
Generate thank you letters</div>
<div class="box">
<a id="ctl00_ContentPlaceHolder1_hlGenerateReminder" title="Generate Reminder Letters" href="GenerateReminder.aspx"><img title="Generate Reminder Letters" src="images/businessman_find.png" alt="Generate Reminder Letters" style="border-width:0px;" /></a><br />
Generate reminder letters</div>
</div>
</div>
</div>
<div id="Menu">
Welcome
<span id="ctl00_LoginView1_lnUser">fred</span>.<br /><br /><span style="font-size:xx-small;">Admin enabled</span>
</div>
<div id="Search">
Search here</div>
</form>
</body>
</html>
CSS File Code: body
{
margin: 0px;
padding: 0px;
font-family: verdana, arial, helvetica, sans-serif;
color: #333333;
background-color: white;
}
h1
{
margin: 0px 0px 15px 0px;
padding: 0px;
font-size: 28px;
line-height: 28px;
font-weight: 900;
color: #cccccc;
}
p
{
font: 11px/20px verdana, arial, helvetica, sans-serif;
margin: 0px 0px 16px 0px;
padding: 0px;
}
#Content > p
{
margin: 0px;
}
#Content > p + p
{
text-indent: 30px;
}
a
{
color: #09c;
font-size: 11px;
text-decoration: none;
font-weight: 600;
font-family: verdana, arial, helvetica, sans-serif;
}
a:link
{
color: #09c;
}
a:visited
{
color: #07a;
}
a:hover
{
background-color: #eeeeee;
}
#Header
{
margin: 50px 0px 10px 0px;
padding: 17px 0px 0px 20px; /* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
height: 73px; /* 14px + 17px + 2px = 33px */
border-style: solid;
border-color: black;
border-width: 1px 0px; /* top and bottom borders: 1px; left and right borders: 0px */
line-height: 11px;
background-color: #eeeeee; /* Here is the ugly brilliant hack that protects IE5/Win from its own stupidity. Thanks to Tantek Celik for the hack and to Eric Costello for publicizing it. IE5/Win incorrectly parses the "\"}"" value, prematurely closing the style declaration. The incorrect IE5/Win value is above, while the correct value is below. See (URL address blocked: See forum rules)/css/hacks.asp for details. */
voice-family: "\"}\"";
voice-family: inherit;
height: 14px; /* the correct height */
}
/* I've heard this called the "be nice to Opera 5" rule. Basically, it feeds correct
length values to user agents that exhibit the parsing error exploited above yet get
the CSS box model right and understand the CSS2 parent-child selector. ALWAYS include
a "be nice to Opera 5" rule every time you use the Tantek Celik hack (above). */
body > #Header
{
height: 14px;
}
#Content
{
position: absolute;
top: 100px;
left: 150px;
padding: 0px;
}
#Menu
{
position: absolute;
top: 100px;
left: 20px;
width: 100px;
padding: 10px;
background-color: #eeeeee;
border: 1px solid #000000;
line-height: 17px; /* Again, the ugly brilliant hack. */
voice-family: "\"}\"";
voice-family: inherit;
font-size: medium;
}
#Search
{
position: absolute;
margin-left:8px;
top: 100px;
left: 500px;
width: 225px;
padding: 10px;
background-color: #eeeeee;
border: 1px solid #000000;
line-height: 17px; /* Again, the ugly brilliant hack. */
voice-family: "\"}\"";
voice-family: inherit;
font-size: medium;
}
/* Again, "be nice to Opera 5". */
body > #Menu
{
width: 100px;
}
/* Again, "be nice to Opera 5". */
body > #Search
{
width: 100px;
}
#membercontainer
{
margin-left: 15px;
margin-right: auto;
width: 18.75em;
}
#pledgedrivecontainer
{
margin-left: 15px;
margin-right: auto;
width: 18.75em;
}
#pledgelevelcontainer
{
margin-left: 15px;
margin-right: auto;
width: 18.75em;
}
#lettercontainer
{
margin-left: 15px;
margin-right: auto;
width: 18.75em;
text-align:center
}
#membercontainer .box
{
/*border: 1px solid black;*/
background-color: #ffffff;
color: navy;
float: left;
line-height: 1.5;
margin: 0.5em;
text-align: center;
font-size: xx-small; /*height: 1.5em; width: 1.5em;*/
}
#pledgedrivecontainer .box
{
/*border: 1px solid black;*/
background-color: #ffffff;
color: navy;
float: left;
line-height: 1.5;
margin: 0.5em;
text-align: center;
font-size: xx-small; /*height: 1.5em; width: 1.5em;*/
}
#pledgelevelcontainer .box
{
/*border: 1px solid black;*/
background-color: #ffffff;
color: navy;
float: left;
line-height: 1.5;
margin: 0.5em;
text-align: center;
font-size: xx-small; /*height: 1.5em; width: 1.5em;*/
}
#lettercontainer .box
{
/*border: 1px solid black;*/
background-color: #ffffff;
color: navy;
float: left;
line-height: 1.5;
margin: 0.5em;
text-align: center;
font-size: xx-small; /*height: 1.5em; width: 1.5em;*/
}
/*#membercontainer, #pledgedrivecontainer, #pledgelevelcontainer .box.selected {
background-color: orange;
}*/
.containerparent
{
font-size: medium;
font-weight: bold;
color: navy;
padding: 5px;
border-style: solid;
border-color: navy;
border-width: 1px;
width: 18.75em;
}
Hey ... having trouble implementing nested menus in FireFox. This is an internal site so unfortunately I can't post a link to it. However, the code is listed below. Relative to the folder the index.html file is in, the css files need to be in a css/ subfolder and the js files need to be in a js/ subfolder. Anyway, the thing works great in IE, but in FireFox I get a weird glitch, where the LIs in the next level down partially render in the upper menu, and don't offset properly when they pop up. Any help would be appreciated. Thanks, Derek http://img55. imageshack .us/img55/6775/cssexamplesy8.png ^ please remove the space before and image shack to view the image I've taken a screenshot of a problem I need help with, which is how IE and Firefox handle nested lists. Using code like this: Code:
<ul>
<li>item 1</li>
<li>item 2</li>
<li>
<ul>
<li>sub item 1</li>
<li>sub item 2</li>
</ul>
</li>
<li>item 3</li>
</ul>
Firefox displays the new list without being pushed down yet IE seems to create the space for where the list item would be and I can't figure out how to remove the space / how to get it to act like firefox. Removing the list item that holds the nested ul solves all problems but it isn't valid so I'm looking for another solution. Cheers Hi, I have faced a strange issue with the CSS overflow property while using nested DIVs.The DIV with class main has the DIV main-1a as its child which in turn has the DIV with class main-1a-child as its child. As the height of main is not fixed, so it is supposed to increase with main-1a and main-1a-child. But in Mozila FireFox, the height of main is not getting increased with the child DIVs. When the overflow property is set to hidden in main, then only the height of main gets increased with its childs. The issue is fine in IE6 regardless of the overflow property. Any help/explanation in this regard will be very helpful. <html> <head> <title>My Page</title> <style type="text/css"> .main { position:relative; width:800px; display:block; border:1px solid #000000; margin:auto; padding:10px 10px 10px 10px; background:#BABB99; height:100%; overflow:hidden; } .main-1a { width:780px; float:left; background:#FFFFFF; border:1px solid #FF0000; padding:10px 10px 10px 10px; } .main-1a-child { width:760px; float:left; border:1px solid #000000; padding:10px 10px 10px 10px; background:#BABB99; } </style> </head> <body> <div class="main"> <div class="main-1a"> <div class="main-1a-child"> <p>text of div1 a2</p> <p>snkjkjsd</p> <p>snkjkjsd</p> <p>snkjkjsd</p> </div> </div> </div> </body> </html> My site: http://www.shakingspears.blogspot.com has the appropriate white background with red border in IE. In Firefox, however, the background is Tan. How do I get the site to render white #ffffff in Firefox? - Thanks! (newbie CSS guy): body { background:#FAEBD7; margin:0; padding:40px 20px; font:x-small Verdana,Sans-Serif; text-align:center; color:#333; font-size/* */:/**/small; font-size: /**/small; } #content { width:670px; margin:0 auto; padding:10px; background:#ffffff; text-align:left; border-style: solid; border-width: 1px; border-color: #FF0000; Hi Guys I am struggling to resolve a small issue i am having. I am using a mac, and am working on a contact form for a website. I am using the latest mac OS and latest versions of all browsers. The following link is fine in firefox, however, in Safari and google chrome, the 'Message' text area has a big gap above it and I do not know how to get rid of this. Here is the code for the form... <form id="form" name="frmQuote" class="contactForm" method="post" action="process.php" onsubmit="return validate_form(this);" > <ul> <li> <label for="name">Name:</label> <input name="name" id="name" type="text" class="required" /> </li> <li> <label for="email">E-mail:</label> <input name="email" id="email" type="text" class="required email" /> </il> <li> <label for="subject">Subject:</label> <input name="subject" id="subject" type="text" class="required" /> </li> <li> <label for="detail">Message:</label> <textarea name="detail" id="detail" rows="6" cols="60" class="required"></textarea> </li> <li> <input type="submit" name="submit" id="submit" value="Submit" tabindex="100" class="submitBtn" /> </li></ul> </form> Here is the css for that page... #content_about { color: #666666; } /*************************************************** CONTACT ***************************************************/ #form { margin: 0px; position: relative; padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 15px; float: left; } #form div { width: 510px; position: relative; float: left; padding-bottom: 9px; } #form div label { width: 400px; } #form div label.error { color: #a80000; position: absolute; top: 0px; right: 0px; text-align: right; font-size: 11px; } #form div.message_sent { background-color: #31B8DA; width: 890px; float: left; padding: 10px; margin-bottom: 15px; color: #FFFFFF; } #form input { width: 499px; padding: 8px; font-size: 13px; color: #999999; background-color: #FFFFFF; float: right; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #C3C3C3; border-right-color: #E8E8E8; border-bottom-color: #E8E8E8; border-left-color: #C3C3C3; } #form input:focus, #form textarea:focus { background-color: #F4F4F4; } #form textarea { width: 500px; padding: 8px; font-family: Arial, Helvetica, sans-serif; font-size: 13px; background-color: #FFFFFF; color: #aaaaaa; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #C3C3C3; border-right-color: #E8E8E8; border-bottom-color: #E8E8E8; border-left-color: #C3C3C3; float: right; margin: 0px; } #form .submitBtn { background-color: #31b8da; width: 95px; color: #FFFFFF; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; padding: 0px; font-size: 16px; height: 35px; display: block; margin-top: 20px; } #form .submitBtn:hover { background-color: #1F93B4; color: #FFFFFF; } #form .submitBtn:focus { background-color: #4FC1E1; } #form strong { font-size: 24px; color: #FFFFFF; font-weight: normal; padding-top: 0px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #6a6a6a; display: block; } #form .font-11 { font-size: 11px; color: #CCCCCC; display: inline; } #content_about #form li label { margin-top: 0px; margin-right: 35px; margin-bottom: 0px; margin-left: 0px; line-height: 30px; } #content_about #form li { padding-top: 10px; padding-right: 15px; padding-bottom: 10px; padding-left: 0px; } Any help would be greatly appreciated. Regards Jay Hi there...First post in this forum cause Firefox (and mozilla / netscape) are driving me mad! Please consider the following code: Code: <html>
<head>
<style type="text/css">
@media print {
p {font-size:11px;text-align:justify;}
table {width:100%;}
}
</style>
</head>
<body>
<table width="770" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFCC">
<tr>
<td>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam molestie, tortor id tempor fringilla, ante massa consequat dui, eget fermentum ante dolor sed felis. Curabitur mollis, velit sit amet lobortis pulvinar, mi lorem condimentum metus, cursus malesuada lectus leo in purus. Suspendisse vehicula, nisl ac varius iaculis, purus felis sodales lorem, in porttitor massa risus a odio. Cras urna felis, sagittis bibendum, ultrices vel, accumsan ac, pede. Maecenas felis nisl, rhoncus non, imperdiet in, tincidunt vitae, ante. Vestibulum cursus, elit non rutrum eleifend, arcu ligula bibendum velit, eget pharetra dui ipsum et tortor. Praesent lectus felis, consectetuer a, varius fringilla, elementum quis, diam. Morbi posuere sem eget odio. Pellentesque imperdiet tellus eget augue. Aliquam et tortor et libero nonummy tristique. Sed feugiat pellentesque sem. In hac habitasse platea dictumst. Vivamus a ipsum eu odio fringilla scelerisque. Ut et neque. Sed fermentum neque nec pede. Morbi enim erat, tempor nec, porttitor eu, tempus ut, nunc. Pellentesque lacinia dapibus urna. Curabitur leo tortor, cursus quis, semper quis, luctus ac, quam. Phasellus sit amet nisl. Nullam molestie nonummy lorem. Etiam consectetuer, ante in lacinia molestie, tellus nisl tincidunt dui, in commodo lectus elit ut elit. In ornare fermentum ante. Nullam felis. Maecenas tempor, lectus vel dignissim tincidunt, metus erat feugiat odio, eu dapibus mauris orci vitae enim. Etiam quis quam vitae risus aliquam iaculis. Ut nunc nulla, hendrerit ut, auctor id, ullamcorper a, risus. Integer fringilla, erat eu interdum imperdiet, lorem purus fermentum wisi, at mattis lectus nisl sit amet ante. Cras dolor. Nunc elementum quam at ligula. Maecenas ut mi ornare neque suscipit vulputate. Praesent ornare. Pellentesque nonummy posuere massa. Morbi sed risus et purus eleifend pulvinar. Proin suscipit ultricies enim. Morbi luctus. Nam quis sem. Quisque mattis. In laoreet velit eu nunc.
</p>
</td>
</tr>
</table>
</body>
</html>
This is basically a reconstruction of an existing problem of a far more complex design...in any case, if you try to print->Preview from Opera or IE 5+ everything is sweet...However, Firefox (and the other Gecko browsers) will not properly justify the text when previewing. More precisiely: Firefox will wrap text over 12px correctly yet for small text, the p block will not wrap properly and some text will be cropped. I'm not fussy about justification but even when I removed it I would get the same problem. I'm sure there's a perfectly logical solution to this problem. Maybe the width:100% gets inherited by the td and p but that should not affect the layout...Despite my various experiements of chaging the width and the wrapping properties, I could not solve this. I'm still learning the intricasies of block elements in CSS2 so I would definitely appreciate any help! Thanks in advance, Angelos Thanks for taking the time to read my question If I have <div class="main"> something here <div class="sub1"> something here that has more height than the above div</div> </div> Shouldn't the height of main be stretched to fit the height of sub1 where sub1 has a greater height than main. Does it have to be display: block; or float: left; ? Brad Hi everyone. I've come pretty close to solving this problem but certain problems keep showing themselves. Here's the mockup menu I'm trying to recreate. Current CSS: Code:
.interior #sidebar ul{
padding:20px 0 5px 0px;
list-style:none;
}
.interior #sidebar ul.outerUL {border-bottom:1px solid white;}
.interior #sidebar ul.middleUL{border-top:1px solid white; margin:0; padding:5px 0 0 0;}
.interior #sidebar ul.innerUL{padding:5px 0;}
.interior #sidebar ul li a {padding:5px 0 5px 0; margin:0;}
.interior #sidebar ul li.outerLI a{
border-top:1px solid white;
padding:0 0 0 20px;
color:#003371;
width:100%;
}
.interior #sidebar ul li.middleLI a{
padding-left:25px;
color:#3f699d;
}
.interior #sidebar ul li.innerLI a{
padding:2px 0 2px 30px;
color:#0f8b53;
}
.interior #sidebar a {text-decoration:none;}
Current HTML: Code:
<div id="sidebar">
<ul class="outerUL">
<li class="outerLI"><a href="#">Our Misssion</a></li>
<ul class="middleUL">
<li class="middleLI"><a href="#">Quality</a></li>
<ul class="innerUL">
<li class="innerLI"><a href="#">Dedication</a></li>
<li class="innerLI"><a href="#">Perseverance</a></li>
</ul>
<li class="middleLI"><a href="#">Choice</a></li>
<li class="middleLI"><a href="#">Value</a></li>
</ul>
<li class="outerLI"><a href="#">Parkland Timeline</a></li>
<li class="outerLI"><a href="#">Management Bios</a></li>
</ul>
</div>
I've tried multiple different ways of acheiving the desired look, but each one has a certain problem with it. This is the best I can get while still keeping each link the correct color and font size. I'd be all set (I can deal with the padding later) if I could get the white bar above each of the top-level links to extend across the whole sidebar div. well if i dont put any css firefox does this with nested link: Code:
link1
link2
sublink1
IE doesnt indent the sublink. so is there any hack available? PS>i tried using margin-left but by doing that firefox indents it even further so it looks bad? cheers I am desperate. I think I found a bug in Firefox, and I'm not sure how to work around it. The following code works in everything (IE 8, Chrome, Safari, Opera) except Firefox (version 3.6.3). Am I doing something wrong, or is this a bug in Firefox? You can look what happens to the drop-down menu's on Menu 2 and 3 live by going to my site (deenfoxx dot com slash firefox-bug dot html). css Code: Original - css Code #main-nav { background-color: black; height: 40px; } #nav { position: relative; margin: 0; padding: 0; } #nav li { position: relative; float: left; display: table; width: 99px; height: 40px; border-right: 1px solid white; text-align: center; font-size: 10px; } #nav li:hover { background-color: darkred; } #nav a { display: table-cell; vertical-align: middle; line-height: 11px; font-weight: bold; text-decoration: none; color: #fff; } #nav li ul { position: absolute; padding: 0; background-color: gray; top: 40px; left: 0px; } #nav li ul li { width: 98px; border: 0; border-top: 1px solid white; } #main-nav html4strict Code: Original - html4strict Code <div id="main-nav"> <ul id="nav"> <li id="m1"><a href="#1">Main Menu 1</a></li> <li> <a href="#2">Main Menu 2</a> <ul> <li><a href="#2a">Sub-Category 1</a></li> <li><a href="#2b">Sub-Category<br/>with multiple lines</a></li> </ul> </li> <li> <a href="#3">Main Menu 3 with multiple lines</a> <ul> <li><a href="#3a">Sub-Category 2</a></li> </ul> </li> <li><a href="#4">Main Menu item which has a really long name on it</a></li> </ul> </div> <div id="main-nav"> The problem appears to be that "#nav li" happens to have position:relative; and a display:table; and "#nav li ul" is position:absolute;. Normally, absolute positioning requires its parent or ancestor position to be set, but when used with the table display, it doesn't work normally on Firefox--but it does on other browsers. Can someone help me with a workaround that does not involve altering the HTML? If I must, I will accept a workaround that requires changing the HTML, but I'll have to do some heavy duty recoding of Magento's core menu generation. Anyone that knows Magento knows I want to avoid that like the plague--my example is a very simplified version of the problem. Hi All, I have the following html: Code: <div class="businessItem">
<div class="bizIcon">
<img src="GetImage.axd?type=1&business=3" alt="My Biz" />
</div>
<div class="bizInfo">
<a href="business.aspx?business=3">
My Biz
</a>
<p>
my biz
</p>
</div>
<div class="bizContact">
<a href="www.myweb.com">www.myweb.com</a><br />
<a href="mailto:roman.rodov@gmail.com">roman.rodov@gmail.com</a><br />
90294767
</div>
</div>
<div class="businessItem">
<div class="bizIcon">
<img src="GetImage.axd?type=1&business=4" alt="My Second Business" />
</div>
<div class="bizInfo">
<a href="business.aspx?business=4">
My Second Business
</a>
<p>
My second business
</p>
</div>
<div class="bizContact">
<a href="www.myweb.com">www.myweb.com</a><br />
<a href="mailto:roman.rodov@gmail.com">roman.rodov@gmail.com</a><br />
90294767
</div>
</div>
And the following CSS that applies: Code: div.businessItem
{
background-color: #66cc66;
margin-bottom: 10px;
width: 100%;
padding: 10px 10px 10px 10px;
}
div.bizIcon
{
float: left;
width: 64px;
margin: 0px 10px 0px 0px;
}
div.bizInfo
{
float: left;
width: 256px;
}
div.bizContact
{
float: left;
width: 256px;
}
now the problem is that it looks like crap in FF2 and looks ok in IE7 (haven't tested IE6 yet). The idea is to have a full width div with 3 divs inside side by side. It looks *completely* different in FF2. Does anyone have any ideas? (I'm pretty new to CSS, just learning). I am at my wits end! Some of my nested divs cause FF throw up scroll bars...and not all the time. If I hit refresh, they disappear. Everything validates: Both my css and xhtml. I have tried every allowed value for overflow to no avail. There are no floated images either to vlear; just text. Give it a look in FF and see: My Site My css I am trying to figure out how to use the clear functionality nested within divs. I am already using floats to position 3 columns for the layout, but would like to use the clear functionality to help with form placement in the second column. The problem is, even though it is nested with a div dedicated to the center column, it still uses the right and left column to judge clears...thus its all pushed below the right and left column. Any ideas? I have been using absolute positioning to place divs within a specific container div. I noticed that when the children divs expand with content, the parent div doesn't stretch to contain them. Am I missing something? I'm not looking for overflow:auto as my title may suggest... thanks for the help! EDIT: I have come to realize that using positioning breaks the natural "flow" of elements, which could be why the parent div wont stretch. So maybe I should ask- how do I regain the flow for the rest of the site, after the positioned divs are closed? I am Having a problem with IE6 and DIV's which use blocks to highlight links. The problem is I want to have different colour links. It seems to work OK in FF but not IE 6. Code:
.mainmenu a:link { color: #fff; font-size: 11px; font-weight: 600; text-decoration: none; background-color: #a62a2a; background-position: 180px 0; text-align: left; text-indent: 3px; vertical-align: middle; width: 180px; height: 24px; border-bottom: 1px solid #e8aaaa; display: block; }
.mainmenu a:visited { color: #fff; font-size: 11px; font-weight: 600; background-color: #a62a2a; background-position: 180px 0; text-decoration: none; text-align: left; text-indent: 3px; vertical-align: middle; width: 180px; height: 24px; border-bottom: 1px solid #e8aaaa; display: block; }
.mainmenu a:active { color: #fff; font-size: 11px; font-weight: 600; background-color: #a62a2a; background-position: 180px 0; text-decoration: none; text-align: left; text-indent: 3px; vertical-align: middle; width: 180px; height: 24px; border-bottom: 1px solid #e8aaaa; display: block; }
.mainmenu a:hover { color: #ac4545; font-size: 11px; font-weight: 600; background-color: #f7d4d4; text-decoration: none; text-align: left; text-indent: 3px; vertical-align: middle; width: 180px; height: 24px; display: block; }
.submenu a:link { color: #a62a2a; font-size: 11px; font-weight: 600; text-decoration: none; background-color: #ebebeb; background-position: 180px 0; text-align: left; text-indent: 8px; display: block; width: 180px; height: 24px; vertical-align: middle; border-bottom-color: #a62a2a; border-bottom-width: 1px;x; }
.submenu a:visted { color: #a62a2a; font-size: 11px; font-weight: 600; text-decoration: none; background-color: #ebebeb; background-position: 180px 0; text-align: left; text-indent: 8px; display: block; width: 180px; height: 24px; vertical-align: middle; border-bottom: 1px solid #e8aaaa; }
.submenu a:active { color: #a62a2a; font-size: 11px; font-weight: 600; text-decoration: none; background-color: #ebebeb; background-position: 180px 0; text-align: left; text-indent: 8px; display: block; width: 180px; height: 24px; vertical-align: middle; border-bottom-width: 1px; border-bottom-color: #a62a2a; }
.submenu a:hover { color: #ac4545; font-size: 11px; font-weight: 600; text-decoration: none; background-color: #f7d4d4; text-align: left; text-indent: 8px; display: block; width: 180px; height: 24px; vertical-align: middle; }
.menutop { color: white; font-size: 12px; font-weight: 600; text-decoration: none; background-color: #cc5252; text-align: left; text-indent: 3px; display: block; width: 180px; height: 24px; vertical-align: middle; }
Code:
<table width="180" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" bgcolor="#f7d4d4">
<div id="mainmenu" class="mainmenu">
<div id="menutop" class="menutop">Menu</div> <a href="#">Products</a>
<a href="support.html">Support</a>
<div id="submenu" class="submenu"><a href="#">Customer Login</a></div>
<div id="submenu" class="submenu"><a href="#">Phi Login</a></div>
<a href="#">Services</a>
<a href="#">Shop</a>
<a href="#">Contact Us</a>
<a href="#">Call Comparison</a>
</div>
</td>
</tr>
</table>
I'm having some cross browser CSS issues (what a surprise.. ). Things render fine in IE7, but in FF (2.0.x) it seems that the style for <div id="shell"> just seems to stop. It looks <div class="content_shell"> is overflowing outside of its parent, but after using the 'Outline current element' tool in the web developer tool bar (very cool feature!) it looks like the parent div is being expanded but it's style is not. Basicly the white background and borders of "shell" don't continue and the content from "content_shell" just looks overflowed onto the page background. Very strange and again it's FF only. Here is the basic setup... html4strict Code: Original - html4strict Code <div id="shell"> <!-- a bunch of other content --> <div id="page_contents"> <div class="content_shell"> <div id="main_content" class="content_box"> Sample main content. </div> <div id="secondary_content" class="content_box"> Sample secondary content. </div> </div> </div> </div>
and here's the related css css Code: Original - css Code #shell { background-position: right top; background-color: #FFFFFF; border-right-style: solid; border-left-style: solid; border-right-width: 2px; border-left-width: 2px; border-right-color: #000000; border-left-color: #000000; width: 700px; height: auto; text-align: left; background-image: none; background-repeat: no-repeat; } #page_contents { width: 100%; height: auto; } .content_shell { width: 680px; height: auto; padding: 10px; font-size: 14px; } #main_content { width: 400px; height: auto; clear: right; float: left; } #secondary_content { width: 250px; height: auto; clear: right; float: left; margin-left: 10px; }
I'm sorry I can't post a link to the page, but it is still only on our intranet and deployed through SharePoint so it cannot be easily replicated on my own server. I've found that nesting tables works very well for getting data aligned properly. I'm having serious trouble doing the same thing with css. For example, I can easily create a table with 2 col, 2 rows, then put another table in each box and do get things just the way I want. I can't figure out a way to do that with css. Is it possible? Should I even try? Thanks! html: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "(...)"> <html xmlns="(...)">
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="stylesheet,css" />
<title>Test page.</title>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>
<body>
<div id="main">
<!--- <object type="application/x-shockwave-flash" data="../Graphics/Site/site-banner-top,swf" width="800" height="300"> </object> !-->
<div id="maintop" ></div>
<div id="mainbody">
<div id="testleft">
<div id="leftpaneltop"></div>
<div id="leftpanelbody"><p> test</p> </div>
<div id="leftpanelbottom"></div>
</div>
<div id="test_right">
<div id="rightpaneltop"> </div>
<div id="rightpanelbody"> test</div>
<div id="rightpanelbottom"></div>
</div>
</div>
<div id="mainbottom"></div>
</div>
<script type="text/javascript"> <!-- swfobject.registerObject("FlashID"); //--> </script>
</body>
</html>
css: Code:
@charset "utf-8"; /* CSS Document */
body{
background-color:#569753;
padding:0px;
width:800px;
margin-top:0px;
margin-left:10%;
}
#main{
background-image:url(../Graphics/Site/body-bg,png);
background-repeat:repeat-y;
width:800px;
position: relative;
padding:0px;
}
#maintop{
background-image:url(../Graphics/Site/body-top,png);
width:800px;
height:50px;
position:relative;
margin-top:0px;
}
#mainbody{
background-image:url(../Graphics/Site/body-bg,png);
background-repeat:repeat-y;
position:relative;
width:800px;
margin-top:50px;
}
#mainbottom{
background-image:url(../Graphics/Site/body-bottom,png);
position:relative;
width:800px;
height:50px;
padding:0px;
}
#leftpaneltop{
background-image:url(../Graphics/Site/panel_left_top,png);
background-repeat:repeat-x;
background-color:#99cc99;
position:relative;
width:200px;
height:25px;
}
#leftpanelbottom{
text-align:left;
background-image:url(../Graphics/Site/panel_left_bottom,png);
width:200px;
height:21px;
padding:0;
position:relative;
}
leftpanelbody{
font:Verdana, Geneva, sans-serif;
width:200px;
text-align:left;
text-shadow:#000;
color:#FFF;
margin-top:auto;
position:relative;
}
#testleft{
background-color:#569753;
position:relative;
padding:0;
margin-left:10px;
width:200px;
height:inherit;
}
#test_right{
position:relative;
padding:0px;
margin-left:30%;
margin-top:-200px;
background:#000;
width:508px;
}
#rightpaneltop{
background-image:url(../Graphics/Site/right_panel_top,png);
background-color:#000;
width:508px;
height:37px;
margin-top:0px;
position:relative;
}
#rightpanelbody{
background-image:url(../Graphics/Site/right_panel_middle.png);
width:508px;
position:relative;
}
#rightpanelbottom{
background-image:url(../Graphics/Site/right_panel_bottom,png);
position:relative;
width:508px;
height:25px;
}
p{
font:Verdana, Geneva, sans-serif;
font-size:12px;
font-style:normal;
color:#FFF;
}
Hope the above scripts can be viewed easily. I just started using css, and for some reason I can't get this simple template to function in Mozilla Firefox. I don't know how nested divs behave, but it's really frustrating. The problem is that i have two main divs within one encompassing div. The encompassing div is supposed to expand in height based upon the height and/or position of the nested two divs, but it only expands based one of these nested divs. These nested divs have divs inside them too. This only happened in mozilla firefox. In IE it works. I'm not using floats or anything. I don't have it up on a site, but if necessary I'll post a pic of the rendering. Thanks in advance. I am not getting the right behaviour from my css in a nested list i made for a menu. here is the css for the menu Code:
#main_menu{
position: absolute; top: 252px; left:30px;
margin:0;
padding:0;
}
#menu_item_1{
list-style-type: none;
}
#menu_item_1 a{
color:#11352B;
text-decoration:none;
font-weight:300;
vertical-align:text-top;
}
#menu_item_1 a:hover{
color:#007888;
text-decoration:underline;
font-weight:300;
vertical-align:text-top;
}
#menu_item_2{
list-style-type: none;
}
#menu_item_2 a{
color:#007888;
text-decoration:none;
font-weight:300;
vertical-align:text-top;
}
and here is the xhtml section showing the menu Code: <ul id='main_menu'> <li id='menu_item_1'><a href='index.php'>Home</a></li> <li id='menu_item_1'><a href='about_us.php'>About Us</a></li> <li id='menu_item_1'><a href='customers.php'>Customers</a></li> <li id='menu_item_2'><a href='products.php'>Products</a></li> <ul> <li id='menu_item_1'><a href='atlas2000.php'>Atlas 2000</a></li> <li id='menu_item_1'><a href='atlas2000.php'>Web Request</a></li> <li id='menu_item_1'><a href='atlas2000.php'>Atlas Mailer</a></li> </ul> <li id='menu_item_1'><a href='service.php'>Service</a></li> <li id='menu_item_1'><a href='download.php'>Download</a></li> <li id='menu_item_1'><a href='support.php'>Support</a></li> <li id='menu_item_1'><a href='contact_us.php'>Contact Us</a></li> </ul> the main list works great but the sublist the color is wrong, it should behave like the main one does....I think I have not structured my css correctly, but can not figure it out. |
|||||||