|
CSS - Nested Div Ie7 Vs. Firefox 2
I 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;
}
Similar TutorialsThis 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 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> 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 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 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. 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. 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 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>
Hi All, I'm fairly new to CSS and have what is probably a basic question. I'm trying to format a class and having issue. Please look at my html and the css code below: Code: div class="node"> <div class="taxonomy"></div> <div class="content"> <p>Photo Gallery Body Here</p> <div class="field field-type-filefield field-field-image"> <div class="field-items"> <div class="field-item odd"> <a href="/sites/default/files/imagecache/Full/IMG_0275_0.JPG" rel="lightbox[field_image][Pic 1<br /><br /><a href="/node/48" id="node_link_text" class="active">View Image Details</a> - <a href="/sites/default/files/IMG_0275_0.JPG" target="_blank" id="download_link_text">Download Original</a>]"><img src="/sites/default/files/imagecache/Thumbnail/IMG_0275_0.JPG" alt="Pic 1" title="Pic 1" width="125" height="125" /></a> </div> </div> </div> </div> </div> </div> </div> Code: .node .field .field-type-filefield .field-field-image .field-items .field-item .odd
{
border: 1px solid #fff;
width: 125px;
height: 125px;
margin-top: 35px;
margin-right: 28px;
float: left;
}
The only way I can format the "field-item odd" class but naming the css class .odd. However, this effects other parts of the site. How do I target this specific class properly? Thanks! 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. hmmmm i want a nested list for a navigation menu, vertical on the left side all buttons aligned with 1px margin in between ok it almost works but i cant get rid of the extra list item that contains the nested list how does it not show itself 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. I have a div: .gallery{width:95%;margin:0 auto;padding:5px;border:solid 1px black;} and inside I have: .galleryItem{float:left;width:150px;padding:5px;height:150px;border:solid 1px black;} .spacer{clear:both;} Used to give height to the container div. The idea is to create and even sized box for varying jpgs. How do I get the inside divs to space themselves out evenly across the space? AND the get the jpg to align itself in the middle of its containing div? Thanks. I am trying to create a layout that uses Nested DIVs, and I may be trying to force it to do something it does not like. I will post the code below, but here is an image that displays the layout. Note that Div3 and Div1 are fine, and Div 2 is fine, and the top DIV that is inside of that, #4, is where it needs to be, but the rest of the items just fall in below it. I would really not wish to use tables, but I am trying to do something that can only be done with tables? Page Code: Code: <div id="content">
<div id="usercp">
<?php include("scripts/yourmother.php"); ?>
</div>
<br />
<div id="NewsOuter"><div id="NewsTitle"><a href="viewArticle.php?id=1">ArticleTitle</a></div>
<div id="NewsInner"><div id="NewsImage"><img src="http://tweedledee.dyc.edu/~tpx/test/tpx7c/images/site/notavail100.jpg"></div>
<div id="NewsShortDesc">ArticleShort</div></div>
<div id="NewsBottom"><div id="NewsIndexDate">ArticleDate</div>
<div id="NewsIndexUser">ArticleUser</div></div>
<div style="clear:both;"></div>
</div>
</div>
And here is the relevant CSS (not counting the Content (div 1) or UserCP (div 3) Code: #Content #NewsOuter {
display: block;
float: left;
height: 162px;
width: 602px;
}
#NewsTitle {
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
}
#NewsTitle a {
display: block;
border:1px solid;
background: #FFFFFF;
color: #000000;
height:20px;
font-weight: bold;
text-align:left;
text-decoration: none;
padding: 1px 10px;
}
#NewsTitle a:hover {
color: #999999;
text-decoration: none;
}
#Content #NewsOuter #NewsInner {
width: 602px;
height: 100px;
}
#Content #NewsOuter #NewsInner #NewsImageIndex {
display: block;
float: left;
width: 100px;
height: 100px;
border: 1px solid black;
}
#Content #NewsOuter #NewsInner #NewsShortDesc {
width: 500px;
height: 100px;
font-family: Arial;
font-size: 10px;
font-style: none;
}
#Content #NewsOuter #NewsBottom {
width: 602px;
height: 20px;
}
#Content #NewsOuter #NewsBottom #NewsIndexDate {
display: block;
float: left;
width: 100px;
border: 1px solid;
border-color: #666666;
font-weight: bold;
font-family: Arial;
}
#Content #NewsOuter #NewsBottom #NewsIndexUser {
display: block;
float: right;
width: 500px;
border: 1px solid;
border-color: #000000;
Font-Family: Arial;
Font-Style: Italic;
Font-Size: 9px;
}
Also to note, the 3 items that appear below the image are not getting their formatting. Should I just use tables instead? 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 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? 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). Is it psosible to have IF statements with CSS? Example: IF table.length = 500px then bg.image = xx else if table.length < 500px bg.image = xx Thanks |
|||||||