|
CSS - Triggering Layout And Displaying 'divs' As Inline For Ie
I'm having some problems with creating a layout using nested 'divs' displayed as inline-blocks. I know that for FireFox 3.0 all that needs to be done is display:inline-block; and for IE lte 8 I need to trigger layout in the 'divs' and then set them as display:inline; To my understanding setting display:inline-block; triggers layout in IE (as does zoom: 1; or giving the div depth; height and width) Then all you need is to do is <!--[if lte IE 8]> <style> display:inline;</style><![endif]--> I've achieved this layout style in a previous website, yet with the exact same technique my results are nill. Can someone please compare at my code in ff3 and IE and tell me what I'm doing wrong.
Code:
<html> <head> <!--[if IE]> <style type="text/css"> #container div {display:inline;} #ul_top li {display:inline;} #header p {display:inline;} #main_content div {display:inline;} #recreation div {display:inline;} </style> <![endif]--> <style type="text/css"> body {padding:0px; margin: 20px 0px 0px 20px; } h1 {color:#990D0D; font-size: 20px; text-indent: 40px} #limiter {width: 1003px; } #ul_top {margin:0px; text-align:right; } #ul_top li {display:inline-block; zoom:1; padding: 0px 5px 0px 0px; } #ul_top li a {color:#000; text-decoration:none; font: veranda; font-size: 11px; } #ul_top li a:hover {color:#DE6800; text-decoration: none; font: veranda; font-size: 11px; } #container {border: solid #000 1px; background: #FFF url('background.jpg'); text-align:left; width: 1000px; height: 750px; } #header {width:1000px; height:303px; background:#yellow url('red_rock_header.jpg') no-repeat; } #header p {display:inline-block; zoom:1; font-size: 20px; } p.company_name:first-letter { color:#990D0D; font-size:40px; } #main_content div {display:inline-block; vertical-align:top; zoom:1;} #recreation {width:430px;} #recreation div {display:inline-block; vertical-align:top; zoom:1;} #text_holder{ border-right: dashed black 1px; padding:15px; width: 375px;} a.rec_links {color:#DE6800; font-size: 18px; } a.rec_links:hover {color:#000; font-size: 18px; } a.pic_links { display:block; position: relative; width: 200px; height: 160px; } #climbing {border: solid #FA9928 1px; -moz-border-radius: 10px; -webkit-border-radius: 10px; width: 200px; height: 160px; padding: 5px; margin-top: 5px; background: orange url('climbing.jpg') no-repeat; } #bicycling {border: solid #FA9928 1px; -moz-border-radius: 10px; -webkit-border-radius: 10px; width: 200px; height: 160px; padding: 5px; margin-top: 5px; background: orange url('bicycling.jpg') no-repeat; } #hiking {border: solid #FA9928 1px; -moz-border-radius: 10px; -webkit-border-radius: 10px; width: 200px; height: 160px; padding: 5px; margin-top: 5px; background: orange url('hiking.jpg') no-repeat; } #wildlife {border: solid #FA9928 1px; -moz-border-radius: 10px; -webkit-border-radius: 10px; width: 200px; height: 160px; padding: 5px; margin-top: 5px; background: orange url('wildlife.jpg') no-repeat; } p.discription {font-size: 12px; text-indent: 20px; } </style> </head> <body> <div id="limiter"> <ul id="ul_top"> <li><a class="mini_link" href="#">Contact us</a></li> <li><a class="mini_link" href="#">Area Map</a></li> <li><a class="mini_link" href="#">About us</a></li> </ul> <div id="container"> <div id="header"> <p class="company_name">Red<p class="company_name">Rock</p><p class="company_name">Recreation</p> </div> <div id="main_content"> <div id="text_holder"> <h1>Red Rock Canyon Las Vegas NV:</h1><p class="discription"> Red Rock Canyon, located just a few miles west of Las Vegas, is named for the deep red 3,000-foot-high sandstone cliffs that are perched above the dusty wastelands of this part of the Mojave Desert. The view from any part of the park is breathtaking: mostly nature fills the view, but from some points you can make out the entire Las Vegas Strip in the distance!</p><p class="discription"> Climbing, hiking, and bicycling throughout the park is fun and exiting for the whole family. In the summer time water, sunscreen, and proper equipment is necessary. Elderly and young children can opt to drive around the park (a small fee for motorized vehicles aplies) along a 13-mile paved loop and still experience the scenic views.</p><p class="discription"> A visitor's center provides information on area history, geology, flora and fauna (visitors may encounter burros, big horn sheep or desert tortoises). You can also pick up a map of the park with detailed hiking routes (beginner, intermediate, and advanced levels). Rangers offer guided tours at no charge -- see website for schedules.</p> </div> <div style="width: 100px;"><p class="company_name">Red<p class="company_name">Rock</p><p class="company_name">Recreation</p></div> <div id="recreation"> <div style="text-align:center;"><a class="rec_links" href="#">Climbing</a><br /> <div id="climbing"> <a href="#" class="pic_links"></a> </div> </div> <div style="text-align:center;"><a class="rec_links" href="#">Bicycling</a><br /> <div id="bicycling"> <a href="#" class="pic_links"></a> </div> </div> <div style="text-align:center;"><a class="rec_links" href="#">Hiking</a><br /> <div id="hiking"> <a href="#" class="pic_links"></a> </div> </div> <div style="text-align:center;"><a class="rec_links" href="#">Wildlife</a><br /> <div id="wildlife"> <a href="#" class="pic_links"></a> </div> </div> </div> </div> </div> </body> </html>
Similar TutorialsI have been trying in vain to get div elements on a page to behave how i want them to. I have a list of items, in the middle of which i need to display some tablular information witha picture along side it. This i have managed to acieve fine, but i can't get the next <li> to start below these 2, it starts alongside and the wraps underneath. I have tried everything. Can anyone help? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> <!-- #wrapper{ font-family:Verdana, Arial, Helvetica, sans-serif; margin-left: 20px; width: 550px; font-size: 12px; line-height: 22px; letter-spacing: 0.5px; color: #666666; } #topimg { margin: 20px 0; padding-bottom: 20px; border-bottom: 1px dotted #CCCCCC; text-align:left; display:block; } #secondimg { margin: 0 0 0 20px; text-align:left; display:block; } #bodyimg{ padding: 20px 0px 20px 20px; float:left; display:block; } #listtable{ padding-top: 20px; padding-bottom: 20px; float:left; font-size: 10px; letter-spacing: 0.5px; color: #891C46; list-style-type: none; line-height:18px; } #listtable li{ margin: 1px; padding: 1px; } #listtable div { margin: 1px; padding: 1px; background-color: #F7F7F7; } --> </style> <title>Carlton</title> </head> <body> <div id="wrapper"> <div id="topimg"> <img src="/carlton-newsite/img/planandbuy/planandbuy.gif" width="173" height="33"> </div> <div id="secondimg"> <img src="/carlton-newsite/img/planandbuy/thebasics.gif" width="133" height="23"> </div> <ul> <li>Cinema Advertising is available in weekly blocks starting on Fridays.</li> <li>It is possible to buy <em> guaranteed admissions</em> by TV region, <em> follow specific films</em> or <em> nominate individual screens</em>. </li> <li>The minimum time unit available is 5 seconds. Prices differ based on commercial length with indeces using 30” as a base: </li> <div id="listtable"> <table width="200" border="0" cellspacing="0" cellpadding="0" class="nobullet"> <tr> <td width="105"> <li> <div>5”</div> </li> <li>10”</li> <li> <div>20”</div> </li> <li>30”</li> <li> <div>40”</div> </li> <li>45”</li> <li> <div>50”</div> </li> <li>60”</li> <li> <div>90”</div> </li> </td> <td width="95"> <li> <div>.3”</div> </li> <li>.5”</li> <li> <div>.8”</div> </li> <li>.1.00”</li> <li> <div>.1.33”</div> </li> <li>.1.50”</li> <li> <div>.1.67”</div> </li> <li>.2.00”</li> <li> <div>.3.00”</div> </li> </td> </tr> </table> </div> <div id="bodyimg"> <img src="/carlton-newsite/img/digital_adver/satelite.jpg" width="220" height="182"> </div> <li>Cinema commercials are shown on 35mm film, it is easy to get your TV ad transferred by our production department. </li> <li>Lead times from booking to getting on screen are 3 weeks, although CSA’s <em> Early Booking Incentive</em> guarantees extra value if you can book your campaign 6 weeks in advance of start date. </li> <li>Cinema Advertising Association <em> cinema buying guidelines</em> ensure your campaign meets industry agreed standards. </li> </ul> </div> </body> </html> I am trying to work on a project from HTML Utopia: Designing without Tables Using CSS. It is from Chapter 9. It should be a layout with a header and three columns. A footer was added to the bottom and floats were incorporated to the content and sidebars so that nothing interferes with the footer. So, the footer shows up okay, but the positioning of the sidebars is now screwed up. It would be nice if I could show you an image of what this looks like, but this site won't let me do that because I am a new member. I will try to describe it the best I can. Instead of being a layout with a header and three columns on top with the footer on the bottom, it has the header and middle content div on top and the two sidebars are both on the bottom with lots of space above them. The footer is on the bottom as it should be. Here is the code (this is not the whole code--this is the code I think would effect the layout): body { margin: 0; padding: 0; background-color: #050845; color: white; background-image: url(web_site_files/02_creating_the_layout/img/bg.jpg); background-repeat: repeat-x; font: small Arial, Helvetica, sans-serif; } #wrapper { background-color: #fdf8f2; color: black; margin: 30px 40px 30px 40px; padding: 10px; } #sidebar2 { float: left; width: 159px; border-top: 1px solid #b9d2e3; border-left: 1px solid #b9d2e3; border-bottom: 1px solid #b9d2e3; background-color: white; color: black; margin: 0; padding: 0; top: 1px; } #main { width: 100%; margin-top: 10px; } #sidebar { float: right; width: 220px; background-color: #256290; margin: 0; padding: 0; color: white; } Does anything look weird with the code above? If all of that looks right, then I can look and see if it is something else. I am seriously confuzzeled. I appreciate the help--I am trying to learn this on my own. (: Hello, I'm trying to make a neat CSS version of the tabled "itembox" in the attached image. I've got this far: http://offhourscomputing.com/ibdev.php The CSS for that page is: Code:
/*Item Box*/
#ib{
margin:10px;
width:38%;
overflow:hidden;
padding:3px;
border-top:2px solid #eaeaea;
border-right:2px solid #eaeaea;
border-bottom:1px solid #eaeaea;
border-left:1px solid #eaeaea;
}
#ib #l{
width:25%;
border-right:#eaeaea 1px dashed;
}
#ib #r{
width:75%;
display:inline;
}
#ib #r #n{
font-size: 12px;
font-family:Arial, Helvetica, sans-serif;
text-decoration: none; color:#000000
}
#ib #r #n,#m{
display:block;
}
/*Item Box*/
How can i have: "SAMSUNG 40GB 7200RPM Light and Slim IDE Hard Drive, Model SP0411N, OEM Drive only ...More Testing" inline with the image? (looking similar to the attached screenshot of the item boxes) Thanks. Hello, I am trying to display a three column menu (each column is a list). I created a single container. Within that I created three more containers(each about 33% width). Each internal <div> for the separate columns are set to inline. When I put text in each of the 4 pairs of <divs> they display side by side. Just fine. But If the DIV contains a list, despite the fact that the DIVs defined as inline, it still drops to the next line and things like the background color don't even render. All of the box styles are identical except for the background color. Shouldn't the <DIV> (defined with the display:inline) let me place whatever I want inside it? Just out of curiosity, I changed the first column into a 1 item list and it sifted to the right,.I don't know what that was based on. It also seemed to act like a block display, everytning went to the next line, and the background color was ignored. But the color attribute did render. ????? I haven't seen anything discussing the issues with defining lists inside of inline DIVs. I'm working with Firefox because that follows the standards better than IE although I have to make it work w/ IE too. What did has me pounding my head is how a UL tag seems to wipe out most (but not all) of the settings for the DIV containing it. I am thinking of making the columns each list items as a work around but I don't know why what I tried doesn't work. Thanks! Randy This is an simple example: Code:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
#box1 {
width:100px;
height:100px;
background-color:#FFFF33;
display:inline;
}
#box2 {
width: 100px;
height: 100px;
background-color:#FF8833;
display:inline;
}
#box3 {
width: 100px;
height: 100px;
background-color:#88FF33;
display:inline;
}
#box4 {
width: 100px;
height: 100px;
background-color:#CCCCCC;
display:inline;
}
#container {
width: 550px;
height 150px;
background-color:#CC66FF;
}
li {
list-style:none;
}
</style>
</head>
<body>
<div id="container">
<div id="box1">Column 1</div>
<div id="box2">Column 2</div>
<div id="box3">Column 3</div>
<div id="box4">
<ul>
<li>Column 4</li>
</ul>
</div>
</body>
</html>
Since this is my first post here, Hello, everyone! I can't find the answer to this simple question anywhere else, so I hope you can help. When a block-level (by default) element is set to "display: inline", can it still contain other block-level elements? BTW I want to avoid using "display: inline-block" since it is not as well-supported. Thanks a bunch, Rachel Hi everyone, I am bad at this bit and i don't really know why. I have a div and a floated UL. I want the div to sit next to the UL, however, it sits above it and I cannot get them to sit together. Could someone please just post a brief method of getting them to sit side by side and I will try and work it for myself. Thanks. Page is http://www.wellandpower.net At the bottom of my short form are two radio buttons that I wish to display inline, not vertically. My form is marked up with fieldset, legend and labels, and uses an unordered list to contain the form elements: Code:
<form action=\"preso.php\" method=\"post\">
<fieldset>
<legend>Four Ways to Search</legend>
<ul>
<li>
<label for=\"l_name\">Last Name:</label>
<input id=\"l_name\" name=\"l_name\" class=\"text\" type=\"text\" />
</li>
etc, etc...
</ul>
<ul>
<li id=\"genderButtons\">
<label for=\"maleGender\">Male</label>
<input id=\"maleGender\" name=\"gender\" class=\"radio\" type=\"radio\" value=\"m\" />
<label for=\"femaleGender\">Female</label>
<input id=\"femaleGender\" name=\"gender\" class=\"radio\" type=\"radio\" value=\"f\" />
</li>
</ul>
<submit / reset buttons displayed here >
</fieldset>
</form>";
I found several articles online concernign displaying those two rotten radio buttons inline, and all indications point to using the display:inline; selector. But I cannot for the life of me make it work. Here's the CSS I have so far for this form (directory is a <div>...</div> that wraps the form): Code:
#directory fieldset {
margin:1.5em 0 0 0; padding:0;
}
#directory legend {
margin-left: 1em;
font-weight:bold;
}
#directory fieldset ul {
list-style-type: none;
padding: 1em 1em 0 1em;
}
#directory fieldset li {
padding-bottom: 1em;
}
Can you tell me how to get those two blasted radio buttons and their labels to line up and pay attention? :-) Thank you very much for your effort. Greetings: I need to essentially create a table out of DIV tags. The reason is because I need to grant the user the ability to use scrollbars to navigate in a given cell. The problem I am running into, is when the DIV elements fall outside of the wrapper DIV, they wrap to new lines. The DIV "table" within the HTML table is by design. This is because I cannot create a scrollable subset of elements within TD tags. I am simply looking for the way to ensure the following: 1. The DIV "cells" do not wrap (as they are now) and 2. Scrollbars exist to move horizontally and vertically within the "cell" I've experimented with all sorts of combinations of CSS in several of the elements to no avail. Thanks for any help. The HTML for the table: Code: <table id="optionsMatrixTable" border="1"> <thead id="optionsMatrixTableHead"> <!-- <tr id="optionsMatrixTableHeadRow"></tr> --> <tr class="menuRow" id="optionsMatrixMenuRow"> <td colspan="7"> <label><input type="checkbox" id="autoUpdateTrigger" name="autoUpdateTime"checked="checked" /> Live update every</label> <select id="autoUpdateTime" name="autoUpdateTime"><option value="15000" selected="selected">15</option><option value="30000">30</option><option value="60000">60</option><option value="90000">90</option><option value="120000">120</option></select> seconds | Add field <select id="fieldList" name="" style="width: 250px;"></select> </td> </tr> </thead> <tbody id="optionsMatrixTableBody"> <tr id="optionsMatrixTableBodyCallsRow"> <td colspan="7" id="optionsMatrixTableBodyCallsRowContainer"> <div id="callsRowContainer"> <div id="" class="matrixContainerHeader"><div class="matrixContainer">Calls</div><div class="matrixContainer" id="dec08">Dec (19)</div><div class="matrixContainer" id="jan09">Jan (47)</div><div class="matrixContainer" id="mar09">Mar (110)</div><div class="matrixContainer" id="jun09">Jun (201)</div><div class="matrixContainer" id="sep09">Sep (290)</div><div class="matrixContainer" id="dec09">Dec (380)</div></div> <div id="" class="matrixContainer">65 calls</div> <div id="" class="matrixContainer"> <div class="matrixItemWrapper top"><span class="matrixItem" title="Price">0.18</span><span class="matrixItem" title="Implied Volitility">47.56%</span><span class="matrixItem" title="Trade"><input type="text" name="" value="" class="" id="" size="4" maxlength="10" /></span></div> <div class="matrixItemWrapper bottom"><span class="matrixItem" title="Delta">68.05</span><span class="matrixItem" title="Theta">17.05</span><span class="matrixItem" title="Vega">26.05</span></div> </div> <div id="" class="matrixContainer"> <div class="matrixItemWrapper top"><span class="matrixItem" title="Price">0.18</span><span class="matrixItem" title="Implied Volitility">47.56%</span><span class="matrixItem" title="Trade"><input type="text" name="" value="" class="" id="" size="4" maxlength="10" /></span></div> <div class="matrixItemWrapper bottom"><span class="matrixItem" title="Delta">68.05</span><span class="matrixItem" title="Theta">17.05</span><span class="matrixItem" title="Vega">26.05</span></div> </div> <div id="" class="matrixContainer"> <div class="matrixItemWrapper top"><span class="matrixItem" title="Price">0.18</span><span class="matrixItem" title="Implied Volitility">47.56%</span><span class="matrixItem" title="Trade"><input type="text" name="" value="" class="" id="" size="4" maxlength="10" /></span></div> <div class="matrixItemWrapper bottom"><span class="matrixItem" title="Delta">68.05</span><span class="matrixItem" title="Theta">17.05</span><span class="matrixItem" title="Vega">26.05</span></div> </div> <div id="" class="matrixContainer"> <div class="matrixItemWrapper top"><span class="matrixItem" title="Price">0.18</span><span class="matrixItem" title="Implied Volitility">47.56%</span><span class="matrixItem" title="Trade"><input type="text" name="" value="" class="" id="" size="4" maxlength="10" /></span></div> <div class="matrixItemWrapper bottom"><span class="matrixItem" title="Delta">68.05</span><span class="matrixItem" title="Theta">17.05</span><span class="matrixItem" title="Vega">26.05</span></div> </div> <div id="" class="matrixContainer"> <div class="matrixItemWrapper top"><span class="matrixItem" title="Price">0.18</span><span class="matrixItem" title="Implied Volitility">47.56%</span><span class="matrixItem" title="Trade"><input type="text" name="" value="" class="" id="" size="4" maxlength="10" /></span></div> <div class="matrixItemWrapper bottom"><span class="matrixItem" title="Delta">68.05</span><span class="matrixItem" title="Theta">17.05</span><span class="matrixItem" title="Vega">26.05</span></div> </div> <div id="" class="matrixContainer"> <div class="matrixItemWrapper top"><span class="matrixItem" title="Price">0.18</span><span class="matrixItem" title="Implied Volitility">47.56%</span><span class="matrixItem" title="Trade"><input type="text" name="" value="" class="" id="" size="4" maxlength="10" /></span></div> <div class="matrixItemWrapper bottom"><span class="matrixItem" title="Delta">68.05</span><span class="matrixItem" title="Theta">17.05</span><span class="matrixItem" title="Vega">26.05</span></div> </div> <div id="" class="matrixContainerFooter"></div> </div> </td> </tr> <tr id="optionsMatrixTableBodyPutsContainer"> <td colspan="7" id="optionsMatrixTableBodyPutsRowContainer"> <div id="putsRowContainer"> <div id="" class="matrixContainerHeader"><span class="matrixContainer">Puts</span><span class="matrixContainer" id="dec08">Dec (19)</span><span class="matrixContainer" id="jan09">Jan (47)</span><span class="matrixContainer" id="mar09">Mar (110)</span><span class="matrixContainer" id="jun09">Jun (201)</span><span class="matrixContainer" id="sep09">Sep (290)</span><span class="matrixContainer" id="dec09">Dec (380)</span></div> <div id="" class="matrixContainer">65 calls</div> <div id="" class="matrixContainer"> <div class="matrixItemWrapper top"><span class="matrixItem" title="Price">0.18</span><span class="matrixItem" title="Implied Volitility">47.56%</span><span class="matrixItem" title="Trade"><input type="text" name="" value="" class="" id="" size="4" maxlength="10" /></span></div> <div class="matrixItemWrapper bottom"><span class="matrixItem" title="Delta">68.05</span><span class="matrixItem" title="Theta">17.05</span><span class="matrixItem" title="Vega">26.05</span></div> </div> <div id="" class="matrixContainer"> <div class="matrixItemWrapper top"><span class="matrixItem" title="Price">0.18</span><span class="matrixItem" title="Implied Volitility">47.56%</span><span class="matrixItem" title="Trade"><input type="text" name="" value="" class="" id="" size="4" maxlength="10" /></span></div> <div class="matrixItemWrapper bottom"><span class="matrixItem" title="Delta">68.05</span><span class="matrixItem" title="Theta">17.05</span><span class="matrixItem" title="Vega">26.05</span></div> </div> <div id="" class="matrixContainer"> <div class="matrixItemWrapper top"><span class="matrixItem" title="Price">0.18</span><span class="matrixItem" title="Implied Volitility">47.56%</span><span class="matrixItem" title="Trade"><input type="text" name="" value="" class="" id="" size="4" maxlength="10" /></span></div> <div class="matrixItemWrapper bottom"><span class="matrixItem" title="Delta">68.05</span><span class="matrixItem" title="Theta">17.05</span><span class="matrixItem" title="Vega">26.05</span></div> </div> <div id="" class="matrixContainer"> <div class="matrixItemWrapper top"><span class="matrixItem" title="Price">0.18</span><span class="matrixItem" title="Implied Volitility">47.56%</span><span class="matrixItem" title="Trade"><input type="text" name="" value="" class="" id="" size="4" maxlength="10" /></span></div> <div class="matrixItemWrapper bottom"><span class="matrixItem" title="Delta">68.05</span><span class="matrixItem" title="Theta">17.05</span><span class="matrixItem" title="Vega">26.05</span></div> </div> <div id="" class="matrixContainer"> <div class="matrixItemWrapper top"><span class="matrixItem" title="Price">0.18</span><span class="matrixItem" title="Implied Volitility">47.56%</span><span class="matrixItem" title="Trade"><input type="text" name="" value="" class="" id="" size="4" maxlength="10" /></span></div> <div class="matrixItemWrapper bottom"><span class="matrixItem" title="Delta">68.05</span><span class="matrixItem" title="Theta">17.05</span><span class="matrixItem" title="Vega">26.05</span></div> </div> <div id="" class="matrixContainer"> <div class="matrixItemWrapper top"><span class="matrixItem" title="Price">0.18</span><span class="matrixItem" title="Implied Volitility">47.56%</span><span class="matrixItem" title="Trade"><input type="text" name="" value="" class="" id="" size="4" maxlength="10" /></span></div> <div class="matrixItemWrapper bottom"><span class="matrixItem" title="Delta">68.05</span><span class="matrixItem" title="Theta">17.05</span><span class="matrixItem" title="Vega">26.05</span></div> </div> <div id="" class="matrixContainerFooter"></div> </div> </td> </tr> </tbody> <tfoot> <tr class="menuRow" id="optionsMatrixEquityInformation"> <td colspan="7">Underlying: MSFT | Last: 20.83 | Change: 1.93 (0.96%)</td> </tr> </tfoot> </table> And the CSS: Code:
#optionsMatrixContainer { border: 1px solid #000; }
thead { font-weight: bold; }
.menuRow { background-color: #999; }
.loading { background-color:#FFFFCC; font-size: 80% }
.matrixItem { padding: 0 5px 0 5px; }
.matrixContainer { border: 1px solid #000; width: 175px; float: left; margin: 1px}
.matrixContainerHeader { clear: both; }
.matrixContainerFooter { clear: both; }
.matrixItemWrapper { padding: 0; margin: 0; }
.top { border-bottom: 0px; }
.bottom { border-top: 1px dashed #000; }
#callsRowContainer, #putsRowContainer { overflow: scroll; white-space: nowrap; display: block; float: left; clear: right; }
Hi, I have been puzzle for a while now working out how to do this. I have two fixed height divs which I want to appear on the same line (inline). However to maintain the fixed height they cannot be set as display: inline; (Well that works in IE but not in Firefox). Anyway I find out that setting one div to float left and the other to float right with another div with clear:both works fine. However when it comes to setting the position of the flash elements I want in each div element it works now in Firefox but not in IE. I currently have: <div id="diva"> <object id="face1" width="320" height="110"> <param name="face1" value="face1.swf"> <embed src="face1.swf" width="320" height="110"> </embed> </object> </div> <div id="divb"> <object id="face2" width="320" height="110"> <param name="face2" value="face2.swf"> <embed src="face2.swf" width="320" height="110"> </embed> </object> </div> <div id="clear"></div> With the relavent css: #div1 { background-image : url(images/bg1.gif); width: 381px; height: 346px; float: left; text-align : center; vertical-align : bottom; } #div2 { background-image : url(images/bg2.gif); width: 381px; height: 346px; float: right; text-align: center; vertical-align : bottom; } #clear { clear: both; } img { border: 0px; } #face1{ padding-top: 220px; left: 30px; } #face2{ position: relative; top: 220px; left: 10px; } Effectively what I want is: Where the divs are on the same line and are fixed height (as they have a background) and then each swf element releatively positioned inside the div...which will work in Firefox and IE! Thank you for your time. DIV blocks display incorrectly in IE8 and it's driving me insane.. I tried adjusting padding for each column amongst other things but no dice! Everything looks fine in FireFox and IE9. I'm not allowed to post links as a new user but the website is dmstriping dot com. You'll have to fix the below links yourself. Any help would be greatly appreciated! **Here are the css files:** dmstriping dot com/new site/css/style.css dmstriping dot com/new site/css/layout.css Web Site: dmstriping dot com/new site/index.html I tried for hours to make the following divs positioned as shown in the following image. I will appreciate if someone will guide me through this. When I used float, position, display etc... things messed up one way or another. Code:
<div class="friendlisting">
<a href="#"><img src=".jpg" alt="xxxx" class="profile" /></a>
<div class="fullname"><a href="#">George Lexington</a></div>
<div class="hometown">Bruges, Belgium</div>
<div class="commonfriends">13 common friends</div>
<div class="addtofriends"><img src="images/icons/user_add.png" />Add to friend list</div>
<div class="sendmessage"><img src="images/icons/email_edit.png" />Send Message</div>
</div>
#content .friendlisting { min-height:40px; padding:5px; border-bottom:1px solid #DDD; }
#content .friendlisting img.profile { width:100px; }
#content .friendlisting .fullname { width: 100px; margin:10px; }
#content .friendlisting .hometown { width: 100px; color:#CCC; margin:10px; }
#content .friendlisting .commonfriends { width:100px; height:100%; background:#ffe996; }
#content .friendlisting .commonfriends:hover { background:#FEDF62; }
I'm having display issues trying to draw a dynamic image gallery. There may be 0-12 images displayed at any time, and each one is displayed on a background image ("holder"), and has a caption. Each image is in a div with the "holder" image set as the background and a caption displayed as a span following a linebreak. At first I thought I should have the divs display:inline, but couldn't format them properly. Finally I floated them all left and wrote code to dynamically introduce a break with the class clearing every four images to create the rows. This is working fine, so I think. But once again IE/Win comes to bite me in the rear. Link: http://www.spearsphotography.com/monochrome.php CSS: (look for #gallery and it's children) http://www.spearsphotography.com/css/style.css If anyone have any ideas how I can fix this? You can see the desired result in Firefox/Safari/Opera/NN7+. You can see it break in IE. Still learning Thanks -- Aiden So I'm trying to pull info from a mysql DB and display the contents to a page. Basically, the database has 35 products which I want to display in rows of 5 with the image showing, and right beneath, the title of the product. I'm trying to use divs to display these items one after another, until it counts to 5 and then starts a new line. I'm not sure what I'm doing wrong (or missing), but on the 1st row (and various other rows, there are 5 per row.. However, there are other rows that will show any other number of items... mostly right justified. I'm sure this will be simple enough of a solution, but here's what I've been using: PHP Code: $sql = "SELECT * FROM `products`"; $result = mysql_query($sql, $conn) or die(mysql_error()); $i == 0; while($row = mysql_fetch_array($result)) { extract($row); $i ++; $image_loc = "images/products/" . $image; $j = $i/5; $display .= "<div style=\"width:150px; float:left; padding-bottom:60px; padding-left:15px; padding-right:15px;\"><img src=\"".$image_loc . "\" style=\"width:100px;\"><br />" . $item_name . "</div>"; if (is_int($j)) { $display .= "<div clear:both;></div>"; } else { } } I have tried with and without the if statement, and with/without the clear:both. The if statement is there to determine if the count has gotten to 5 so that it can start a new line. Thanks. I need to create the following layout using divs/css, but I can't figure out how to do it. Can anyone help me, please? Thanks, Gary Code: <body topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0"> <table cellspacing="0" cellpadding="0" border="0" width="760" height="100%"> <tr height="420"> <td width="600"></td> <td width="160" bgcolor="green"></td> </tr> <tr> <td width="600"></td> <td width="160" bgcolor="yellow" valign="bottom">This text is aligned to the bottom of the window, and moves up with the bottom of the window but only as far as the green block.</td> </tr> <tr height="20"> <td width="600"></td> <td width="160" bgcolor="yellow"></td> </tr> </table> A demo of this page is here , so you can see what it does. Many thanks, Gary This threads over with. hey, I'm still trying to learn the best css practices and I need some help setting this up. The page is kind of unique because the logo (HEADER) is bigger than the following content. all of the following components are in order and I need them to be centered HEADER height:216px; width: 1000px; LINK-BAR height:21px; width:961px; (this is the width of the rest of the page) BODY-CONTENT padding:50px; - COLUMN ONE - COLUMN TWO (width:231px LINK-BAR any help is very much appreciated, Thanks! Very cool new method, definitely worth a look. http://somerandomdude.net/projects/webdev/divless/ Enjoy. I've got a page whose layout I'm defining with divs and spans and css, and it *seems* at first glance that the divs in 2 separate columns are lining themselves up when they shouldn't be. The code: Basic layout defined by Code: <div class="menucolumn"> <!-- some content in my left hand column --> </div> <div class="maincolumn"> <!-- some content in my right hand column --> </div> Corresponding CSS: Code:
div.menucolumn{
float: left;
width: 200px;
margin-top: 20px;
}
div.maincolumn{
margin-left: 205px;
padding-left: 5px;
border-left: 1px solid #222222;
}
Form Fields: Code: <span class=\"formlabel\">Use MySQL (yes or no):</span> <input type=\"text\" name=\"usemysql\" class=\"formfield\"> CSS: Code: .formlabel, .formfield{
color: #222222;
text-decoration: none;
font-color: #222222;
font-family: Arial;
font-size: 12px;
font-style: normal;
font-weight: normal;
display: block;
width: 300px;
float: left;
margin-top: 5px;
}
.formlabel{
text-align: left;
width: 300px;
}
Inside the left column (menucolumn class) there are about 10 small divs which contain a link each with short text. In the right column there are 6 very large divs used to define peices of a large configuration form. As you can see by the screenshot, the first right hand div (the "Program Configuration" label in the screenshot below) and the span immediatly below it (the first field in the form) seem to be lining up with the div that contains the links on the left. How can I get the rest of the form fields to fill up that space? Hi everyone A bit of a call for help with some niggly issues - all found on the following page and css: http://www.crashingbydesign.com.au/rsaa/index.html http://www.crashingbydesign.com.au/rsaa/home.css 1. Two of the absolutely positioned divs don't show up at all in IE6, but they're fine in Opera 7.5 and Firefox 1.0PR. The ones with id's "title" and "utility" are the problem ones and I can't see what the problem is with IE. In addition to this, this div shows up in a different position in both Opera and Firefox (10 pixels higher in Opera). Please help!! 2. The links in the "mainnav" div are only clickable either at the very top of the <a> element (Firefox) or the very bottom of the <a> element (Opera), however in IE the whole <a> element is completely clickable. I can't see any element that is overlapping. What is going on?? All help appreciated. Cheers Bevester Hi, I'm having a slight problem with my css. I want to display a comment with a number of images to the right of it. e.g "Excellent" plus 5 stars next to it (note: images of stars) so i tried this: Code: <div id = "commentText"> Excellent </div> <div id = "star"> </div> <div id = "star"> </div> <div id = "star"> </div> <div id = "commentText"> Fantastic </div> <div id = "star"> </div> <div id = "star"> </div> <div id = "star"> </div> <div id = "star"> </div> css Code:
#commentText
{
font-size: 100%;
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
padding-left: 30px;
}
#star
{
display: inline;
height: 24px;
background-image: url(images/star.png);
background-repeat: no-repeat;
padding-left: 20px;
}
I currently have comment with 3 stars displayed underneath it - however they are only half being shown for some reason. Any help is appreciated to help me get the desired effect. Thanks! |
|||||||