|
CSS - Div's As Containers - Getting My Page To Work In Ie7 (nsfw)
Hi, i need a bit of help here.. i got my page up and running perfectly on FF but as for IE7.. well it does load!
I have problems with the right menu, the div's i use as containers are not working as they suppose to do. plz see for youself www.soyunapendeja.com.ar can i get a litle help here? Thank you. Similar TutorialsI have partially succeeded in making a table of products that changes column number depending on page width. The magic of DIVs. It's been a dream of mine . LOL. Problem is I can't figure out how to center the shown container objects in each row. So, unless the width of your browser is just right, everything ends up off-center. (http://www.harpgallery.com/showroomdetail/cat_id/4/) I've been looking at how Newegg does it, but I just can't figure out what they've done to get their containers to dynamically resize and float like they do. It's a work of CSS art for sure. I snipped out the code I'm using to make the page. I was hoping some of you here would have some ideas? Thanks! Code:
--The HTML--
<table border='0' cellpadding='2' cellspacing='2' bgcolor='#000000' width=100%>
<tr><td>
<div id='HomepagePrd'>
<div class='Section'>
<div class='product'>
<div class='prodImage'><a href='Product URL'><img Border='0' src='Image URL' height=150 align='top' /></a>
</div>
<div class='desc'>
<h3><a href='$PDurl' ><font color=white face=georgia,arial>Product Name</font></a></h3>
</div>
</div>
</div>
</div>
</td></tr>
</table>
--The CSS--
#HomepagePrd{width:100%;clear:both;min-width:472px;}
.Section{float:left;width:240px;}
.product{
position:relative;
width:100%;
margin:5px 2px 2px 5px;
height:180px;
}
.prodImage{text-align: center;position:relative;width:100%;}
.desc{position:relative;width:100%;margin:0px;padding:0px;}
.desc h3{text-align: center;font-size:12px;margin:0px;padding:0px;}
Hi, I need help with a container div. Something is screwy in the way I have nested my divs and I think it has something to do with position: relative or absolute. I get the difference between the two, but not the relationship. Can someone tell me what I'm doing wrong? http://idiaonline.com/websites/taz/index.php Code: <div id="container">
<div class="logo"></div><div class="top"></div>
<div class="navline"></div>
<div class="navbar">
<div class="navsquare"><img src="images/faq.gif" alt="Taz Limousine Service Policy" width="43" height="41" /><br />F.A.Q.</div>
<div class="navsquare"><img src="images/fleet.gif" alt="Our Vehicles" width="43" height="41" /><br />Fleet</div>
<div class="navsquare"><img src="images/contact.gif" alt="Contact Us" width="43" height="41" /><br />Contact</div>
<div class="navsquare"><img src="images/maps.gif" alt="Maps & Directions" /><br />Maps</div>
</div>
<div class="content">
<div id="left">
<div class="about">
<p><br />
<br />
Taz Limousine is dedicated to dependable,courteous and quality service for business or personal transportation at competitive pricing. In order to achieve that goal in a secure and comfortable environment we rely on experienced chauffeurs and well maintained vehicles that meet city, state and federal regulations. Thank you for considering Taz Limousine Service.</p>
<p> </p>
<div class="weather">
<div align="center">
<br />
<p></p>
</div>
</div>
<div style="float:right; width:150px;"><br /><br />
<h2> Atlanta, GA</h2>
</div>
</div>
</div>
<div id="mid"> <div class="rotate"><img src="images/rotate/rotate.php" alt="Limousine Service Atlanta" /></div></div>
<div id="right"><div class="special">
<h1> Reserve A Limo Today!</h1>
</div></div>
</div>
</div>
and css Code:
body, html {
font-family:Arial, Helvetica, sans-serif;
color:white;
height:100%;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
a:link {
color: #FFFFFF;
text-decoration: none;
font-weight:bold;
}
a:visited {
text-decoration: none;
color: #0066FF;
}
a:hover {
text-decoration: underline;
color: #0000FF;
}
a:active {
text-decoration: none;
color: #FFFFFF;
}
#container {
width:800px;
margin: 0px auto;
position:relative;
background:#000033;
border: thin #0000ff solid;
}
.top {
height: 108px;
width: 800px;
position: absolute;
left: 0px;
top: 0px;
background-image:url(images/gradient.jpg);
background-repeat: repeat;
z-index: 2;
}
.logo {
background-image: url(images/taz-logo.gif);
background-repeat: no-repeat;
background-position:top;
height: 60px;
width: 305px;
left: 0px;
top: 25px;
z-index:4;
position:absolute;
}
.navline {
background-image: url(images/blk-gradient.jpg);
background-repeat: repeat-x;
position: absolute;
height: 42px;
width: 100%;
left: 0px;
top: 108px;
z-index: 3;
}
.content {
background:#000033;
position: absolute;
height: 100%;
width: 100%;
left: 0px;
top: 0px;
z-index: 1;
border:solid #0000ff thin;
}
.navbar {
position: absolute;
height: 60px;
left: 60%;
top: 75px;
z-index: 15;
width:288px;
}
.navsquare {
position:relative;
float:left;
height:60px;
width:72px;
background-image:url(images/nav-square.gif);
background-repeat:no-repeat;
text-align:center;
font-size:9px;
font-style:italic;
}
.about {
position:relative;
left:5%;
top:40%;
background-image:url(images/about_taz_limousine.gif);
background-repeat:no-repeat;
width:225px;
height:150px;
font-size:10px;
padding-left:25px;
z-index:4;
}
.rotate {
position:relative;
top:10%;
z-index:3;
}
.weather {
position:absolute;
background-color:#000033;
top:159px;
background-image:url(images/weatherbox.jpg);
background-position:left;
background-repeat:no-repeat;
height:81px;
width:94px;
left: 6px;
}
.special {
background-image:url(images/special.gif);
width:271px;
height:88px;
position:absolute;
text-align:center;
top:15%;
}
#left {
float:left;
position:relative;
top:200px;
width:35%;
z-index:50;
}
#mid {
float:left;
position:relative;
top:175px;
width:35%;
}
#right {
float:left;
position:relative;
top:200px;
height:300px;
width:30%;
z-index:30;
}
h2 {
font-size:15px;
}
h1 {
font-size:18px;
font-variant:small-caps;
}
i am working for a client that is strict on making sure that all code is up to standards. the question i have is, how can i use the same class container twice in the same page and have everything up to standards? the catch is the doctype has to be XHTML 1.0 Transitional and i can't have the same id twice on the page. i'd hate to make 2 classes for the same style. any suggestions? Code: <ul id="headerfooter"> <li><a href="link1.html">header link 1</a></li> <li><a href="link2.html">header link 2</a></li> <li><a href="link3.html">header link 3</a></li> </ul> Code: <ul id="headerfooter"> <li><a href="link1.html">footer link 1</a></li> <li><a href="link2.html">footer link 2</a></li> <li><a href="link3.html">footer link 3</a></li> </ul> I am so glad that I found somewhere where I might be able to get some help! Currently brain is running so hot its close to seizing or exploding! I have a page design which has three columns each of which has a number of divs within it and a footer all contained within an empty_centre div. Each of the three columns has a container sidebarContainerLeft, midContainer, sidebarContainerRight and all of these are in a contentContainer. So, when filled with content the sidebarContainerLeft and sidebarContainerRight are correctly increasing the height of the contentContainer and the footer is correctly positioned. However when the content in the midContainer exceeds the height of sidebarContainerLeft and sidebarContainerRight the contentContainer is not increasing in height and the footer overlaps the contents of the midContainer! I am completely stuck and wondered if someone could help me!! results with skitch can be seen he - good www.rcm01.f2s.com/tmp/GoodRight.html.jpg good www.rcm01.f2s.com/tmp/GoodLeft.html.jpg bad www.rcm01.f2s.com/tmp/BadMiddle.html.jpg html:- Code: <body> <!-- This is 'empty_center' --> <div id="empty_centre" > <div id="contentContainer" > <div id="midContainer"> <div id="content" class="textcontent" > Main content goes here </div> <div class="clear"></div> <div id="content2" class="textcontent" > Another content set goes here </div> </div> <div id="sidebarContainerLeft" > <div id="phonebar" > phone number </div> <div id="adbar1" > advert 1 </div> <div id="adbar2" > advert 2 </div> </div> <div id="sidebarContainerRight" > <div id="twitter" > twitter posts go here </div> <div id="newsletter" > newsletter signup goes here </div> </div> <div class="clear"></div> <div id="footer" class="textcontent" > footer goes here </div> </div> </body> </html> css:- Code: #empty_centre {
position: absolute;
top: 20px;
left: 50%;
width: 940px;
margin-left: -470px;
height: auto;
z-index: 1;
}
.clearpad {
width: 100%;
height: 65px;
margin: 0 0 -1px;
clear: both;
}
.clear { clear: both; }
/* Page */
#contentContainer {
border-style: dotted;
height: auto;
position: absolute;
width: 940px;
}
#midContainer {
float: left;
border-style: dotted;
position: absolute;
left: 190px;
width: 460px;
}
#content {
position: relative;
background-image:url('./opaquefiller.png');
padding-right: 10px;
width: 400px;
margin-left: 20px;
padding: 10px 10px 10px 10px;
}
#content2 {
position: relative;
background-image:url('./opaquefiller.png');
width: 400px;
height: auto;
margin-left: 20px;
margin-top: 10px;
padding: 10px 10px 10px 10px;
}
#reviews {
position: relative;
background-image:url('./opaquefiller.png');
margin-top: 10px;
padding-right: 10px;
width: 490px;
padding: 10px 10px 10px 10px;
margin-left: 10px;
}
/* Sidebar */
#sidebarContainerRight {
border-style: dotted;
position: relative;
float: right;
width: 270px;
}
#sidebarContainerLeft {
border-style: dotted;
position: relative;
float: left;
width: 180px;
}
#phonebar {
background-image:url('./opaquefiller.png');
position: relative;
width: 160px;
min-height: 30px;
height: auto;
padding: 10px 10px 10px 10px;
}
#adbar1 {
background-image:url('./opaquefiller.png');
position: relative;
width: 160px;
height: auto;
margin-top: 10px;
padding: 10px 10px 10px 10px;
}
#adbar2 {
background-image:url('./opaquefiller.png');
position: relative;
width: 160px;
height: auto;
margin-top: 10px;
padding: 10px 10px 10px 10px;
}
adbar3 {
background-image:url('./opaquefiller.png');
position: relative;
width: 160px;
height: auto;
margin-top: 10px;
padding: 10px 10px 10px 10px;
}
#twitter {
background-image:url('./opaquefiller.png');
position: relative;
width: 210px;
height: auto;
padding: 10px 10px 10px 10px;
}
#newsletter {
background-image:url('./opaquefiller.png');
position: relative;
width: 210px;
min-height: 150px;
height: auto;
margin-top: 10px;
padding: 10px 10px 10px 10px;
}
/* Footer */
#footer {
position: relative;
background-image:url('./opaquefiller.png');
margin-top: 10px;
width: 940px;
height: auto;
z-index: 3;
}
Thanks for taking the time to read my question. I have two containers that I want to line up at the top. I can't seem to make them line up. I have a picture inside a <div>, then I have a paragraph. It works in IE7, but in FF, the <p> appears under the picture. If I put a width on the <p> it moves up, but never up all the way so that it is inline with the picture. I'm stumped and not sure what to do. I tried putting display:inline; on either classes, and on both classes at the same time. Not sure what else to do. If I put a width on the <p>, it looks like this in FF |------| |Icon | |---------------------------| |------| | ElevatorSpeech ES2..........| .............|---------------------------| It looks like this if I have no width on <p> |------| |Icon | |------| |---------------------------| |ElevatorSpeech ES2...........| |---------------------------| HTML: Code:
<div class="ESContainer">
<p class="Title1">Control</p>
<div class="Icon"><img src="Images/Remote.jpg" align="Zone All Control Remote Control" /></div>
<p class="ElevatorSpeech ES2">Control your surroundings with confidence, get the results you deserve.</p>
<p class="ElevatorFull"><span class="EFLargeText">Zone-All</span> has been manufacturing room comfort temperature controls for more than two decades. Its variable air volume and variable temperature solutions for zone controls are applicable to heating and cooling systems that are designed using both incremental HVAC units and central station air handlers.</p>
</div>
CSS: Code:
.Icon {
float: left;
margin-left: 10px;
padding: 0px;
height: 100px;
background-color:#FF0000;
}
.ElevatorSpeech {
font-size: 19px;
margin-left: 10px;
margin-right: 10px;
float: left;
padding: 0px;
/*width: 225px;*/
background-color:#FFFF00;
}
Thanks, Brad Hello everyone, I've been working on my school website for some time now - but I recently started over where the markup and style sheets are concerned. Both my html and css validate. This is my html source: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Secondary School</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
<!--
function view_event(url)
{
window.open(url, 'event', 'top=100, left=100, width=200, height=350');
return false;
}
//-->
</script>
</head>
<body>
<div id="container">
<h1> Secondary.School. </h1>
<div id="nav">
<ul>
<li> <a href="index.php"> Homepage </a> </li>
<li> <a href="#"> School Information </a> </li>
<li> <a href="departments.html"> Departments </a> </li>
<li> <a href="#"> Clubs </a> </li>
<li> <a href="#"> SCC </a> </li>
<li> <a href="#"> Resources </a> </li>
</ul>
</div>
<div id="primaryRail" class="rail">
<h2> Contact information </h2>
<p> <b> 127 Maple Street Testo, Orbuk, H58 435 </b> <br />
<b> Telephone: </b> (456) 245-5677 <br />
<b> Fax: </b> (456) 456-4567 </p>
</div>
<div id="secondaryRail" class="rail">
<h2> Our administration </h2>
<p> <b> Principal: </b> <i> Alan N </i> <br />
<b> Vice-Principal: </b> <i> Lucy S </i> <br />
<b> Vice-Principal: </b> <i> Candice H </i> </p>
</div>
<div id="primaryContent" class="content">
<h3> Welcome to the Secondary School website! </h3>
<p><b>XHTML TESTING</b><br />
April 11, 2007<br />
Posted by : <b>admin</b><br />
Pellentesque sit amet mauris. Nullam non lacus. Etiam auctor. In purus.
Nulla dolor lectus, posuere et, cursus a, tincidunt non, mi. Vestibulum
interdum turpis in erat vehicula consequat. Vivamus sit amet turpis vitae
massa tristique auctor. Mauris quis turpis. Quisque at mi. Suspendisse
consequat faucibus elit. Morbi scelerisque porttitor ligula. Vestibulum
non purus. <a href="#"> link testing </a><br />
<a href="#top">Top</a></p><p><b>admin</b><br />
April 11, 2007<br />
Posted by : <b>admin</b><br />
Pellentesque sit amet mauris. Nullam non lacus. Etiam auctor. In purus.
Nulla dolor lectus, posuere et, cursus a, tincidunt non, mi. Vestibulum
interdum turpis in erat vehicula consequat. Vivamus sit amet turpis vitae
massa tristique auctor. Mauris quis turpis. Quisque at mi. Suspendisse
consequat faucibus elit. Morbi scelerisque porttitor ligula. Vestibulum
non purus. <br />
<a href="#top">Top</a></p><p><b>test</b><br />
April 10, 2007<br />
Posted by : <b>mr.southern</b><br />
test<br />
<a href="#top">Top</a></p><p><b>test</b><br />
April 10, 2007<br />
Posted by : <b>mr.s</b><br />
test<br />
<a href="#top">Top</a></p><p><b>Testing</b><br />
April 09, 2007<br />
Posted by : <b>Jonathan</b><br />
This is just a test message.<br />
<a href="#top">Top</a></p><p><b>test</b><br />
April 05, 2007<br />
Posted by : <b>test</b><br />
test<br />
<a href="#top">Top</a></p><p><b>Test</b><br />
April 05, 2007<br />
Posted by : <b>Jonathan</b><br />
Test.<br />
<a href="#top">Top</a></p><p><b>Another test post.</b><br />
April 05, 2007<br />
Posted by : <b>Jonathan</b><br />
Just another test.<br />
<a href="#top">Top</a></p><p><b>Lorem ipsum dolar et sit</b><br />
April 05, 2007<br />
Posted by : <b>Jonathan</b><br />
This is just a test post.<br />
<a href="#top">Top</a></p><p><b>Lorem ipsum dolar et sit</b><br />
April 05, 2007<br />
Posted by : <b>Jonathan</b><br />
This is just a test post.<br />
<a href="#top">Top</a></p> </div>
<div id="secondaryContent" class="content">
<h2>Calendar for April 2007</h2>
<table>
<tr class="days"><td>Su</td>
<td>Mo</td>
<td>Tu</td>
<td>We</td>
<td>Th</td>
<td>Fr</td>
<td>Sa</td>
</tr>
<tr><td class="week" title="Sun, 01st April 2007">1</td>
<td class="week" title="Mon, 02nd April 2007">2</td>
<td class="week" title="Tue, 03rd April 2007">3</td>
<td class="week" title="Wed, 04th April 2007">4</td>
<td class="week" title="Thu, 05th April 2007">5</td>
<td class="week" title="Fri, 06th April 2007">6</td>
<td class="week" title="Sat, 07th April 2007">7</td>
</tr><tr>
<td class="week" title="Sun, 08th April 2007">8</td>
<td class="week" title="Mon, 09th April 2007">9</td>
<td class="week" title="Tue, 10th April 2007">10</td>
<td class="week" title="Wed, 11th April 2007">11</td>
<td class="week" title="Thu, 12th April 2007">12</td>
<td class="week" title="Fri, 13th April 2007">13</td>
<td class="week" title="Sat, 14th April 2007">14</td>
</tr><tr>
<td class="week" title="Sun, 15th April 2007">15</td>
<td class="week" title="Mon, 16th April 2007"><a href="calendar.php?dateline=1176699600" style="padding: 0px;" onclick="return view_event(this.href);"><span style="color: red; font-weight: bold;">16</span></a></td>
<td class="week" title="Tue, 17th April 2007">17</td>
<td class="week" title="Wed, 18th April 2007">18</td>
<td class="week" title="Thu, 19th April 2007">19</td>
<td class="week" title="Fri, 20th April 2007">20</td>
<td class="week" title="Sat, 21st April 2007">21</td>
</tr><tr>
<td class="week" title="Sun, 22nd April 2007">22</td>
<td class="week" title="Mon, 23rd April 2007">23</td>
<td class="week" title="Tue, 24th April 2007">24</td>
<td class="week" title="Wed, 25th April 2007">25</td>
<td class="week" title="Thu, 26th April 2007">26</td>
<td class="week" title="Fri, 27th April 2007">27</td>
<td class="week" title="Sat, 28th April 2007">28</td>
</tr><tr>
<td class="week" title="Sun, 29th April 2007">29</td>
<td class="week" title="Mon, 30th April 2007">30</td>
<td class="week"> </td>
<td class="week"> </td>
<td class="week"> </td>
<td class="week"> </td>
<td class="week"> </td>
</tr>
</table>
<a href="index.php?m=3">Previous month</a>
<a href="index.php?m=5">Next month</a>
<p style="font-weight: bold;">XHTML TESTING</p>
<p style="font-weight: bold;">admin</p>
<p style="font-weight: bold;">test</p>
<p style="font-weight: bold;">test</p>
<p style="font-weight: bold;">Testing</p>
<p style="font-weight: bold;">test</p>
<p style="font-weight: bold;">Test</p>
<p style="font-weight: bold;">Another test post.</p>
<p style="font-weight: bold;">Lorem ipsum dolar et sit</p>
<p style="font-weight: bold;">Lorem ipsum dolar et sit</p>
<p>Pellentesque sit amet mauris. Nullam non lacus. Etiam auctor. In purus.
Nulla dolor lectus, posuere et, cursus a, tincidunt non, mi. Vestibulum
interdum turpis in erat vehicula consequat. Vivamus sit amet turpis vitae
massa tristique auctor. Mauris quis turpis. Quisque at mi. Suspendisse
consequat faucibus elit. Morbi scelerisque porttitor ligula. Vestibulum
non purus. </p>
</div>
</div>
<div id="footer">
<p> <img src="images/tiger.jpg" alt="tiger logo" style="float: left;" /> | <a href="#"> homepage </a> | <a href="#"> school
information </a> | <a href="#"> departments </a> | <a href="#"> clubs </a> | <a href="#"> scc </a> | <a href="#"> resources </a> | <br />
Copyright <span style="font-size: x-small;"> 2007 </span> Secondary
School. </p>
</div>
</body>
</html>
And this is my style sheet: Code:
/* Secondary School CSS Document
/* Page and Link Formatting
---------------------------- */
a
{
text-decoration: underline;
font-family: Georgia;
padding-bottom: 3px;
color: #FF42B1;
}
#nav a
{
text-decoration: none;
font-family: Georgia;
font-size: 12px;
padding: 12px 10px 8px 10px;
color: #F9F9F9;
}
#nav a:hover
{
background: #454545;
}
#nav li
{
display: inline;
}
body
{
background: url('images/header.png') repeat-x;
margin: 0px;
padding: 0px;
text-align:center;
}
/* Divs etc...
---------------------------- */
#container
{
margin:0px auto;
width: 700px;
text-align: left;
}
#container h1
{
margin-top: 60px;
}
#primaryRail
{
width: 350px;
float: left;
}
#secondaryRail
{
width: 350px;
float: left;
}
#primaryContent
{
margin: 55px 0px 0px 0px;
width: 500px;
float: left;
}
#secondaryContent
{
margin: 55px 0px 0px 25px;
width: 175px;
float: left;
}
#footer
{
clear: both;
text-align: center;
background: #EDEDED;
border: #E2E2E2 2px solid;
}
/* Standard Elements
---------------------------- */
h1
{
font-family: Georgia;
font-weight: normal;
font-size: 2em;
color: #F9F9F9;
}
h2
{
font-family: Georgia;
font-weight: normal;
font-size: 1.5em;
color: #454545;
}
h3
{
font-family: Georgia;
font-weight: normal;
font-size: 1.5em;
color: #812F2F;
}
.rail h2
{
color: #FFD11B;
}
p
{
font-family: Georgia;
font-size: .85em;
color: #454545;
}
.rail p
{
color: #F9F9F9;
}
.content p
{
line-height: 1.5em;
}
ul
{
padding: 0px;
}
li
{
list-style: none;
}
table
{
color: #AFAFAF;
}
td
{
padding: 5px;
padding-top: 2px;
padding-bottom: 2px;
}
.days
{
background: #DCDCDC;
font-weight: bold;
font-size: .75em;
}
.week
{
background: #FFFFFF;
font-size: .75em;
}
.nomonth
{
background: #FAFAFA;
}
#swd_info
{
display: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
position: absolute;
width: 180px;
background-color: #FFFF99;
color: #000000;
border: 1px solid #000000;
padding: 3px;
font-size: 10px;
text-align: justify;
}
This is how it looks in FF, and that is how I would like to to be in FF, and any common browser that the user may be operating: img133.imageshack.us/my.php?image=ffexampletx6.jpg Thank you! Please take a look at a site I'm developing: http;//www.b4itwascool.com The CSS is he http://www.b4itwascool.com/css/main.css I'm also using a Lightbox 2.0, so that CSS is he http://www.b4itwascool.com/css/lightbox.css 1. There is a lot of extra space below the footer. I assume this is where the containers would have been had I not relatively repositioned them? How do I remove this space? 2. I want the right "steel" beam to repeat-y to the bottom of the page. I don't know why that's not working. 3. If you click the top links, you will see that sometimes the footer falls within the left "column", and sometimes it falls within the right column. How do I ensure it always falls to the right, like the way it appears on the homepage? thanks for any advice! If you are getting results as in the above image, simply add "clear:both;" to the container (blue) div which you do not want affected and it will flatten its ceiling and stop any float's escaping. -Luke When I am floating two containers or images my background color disappears. Why is that and what should I do instead? Here is what I am doing: <div class="contentWrapper"> <div class="content"> <div class="leftContent"> <img src="" alt="" /> </div> <!-- end leftContent --> <div class="rightContent"> <img src="" alt="" /> </div> <!-- end rightContent --> </div> <!-- end content --> </div> <!-- end contentWrapper --> Now the css: .contentWrapper { margin: 0; padding: 0; width: 100%; } .content { margin: 0 auto; padding: 0; width: 960px; background: #ccc; } .leftContent { margin: 0; padding: 0; width: 450px; float: left; } .leftContent img { margin: 0; padding: 0; width: 200px; height: 200px; border: #000 solid 1px; } .rightContent { margin: 0; padding: 0; width: 450px; float: right; } .rightContent img { margin: 0; padding: 0; width: 200px; height: 200px; border: #000 solid 1px; } Thanks! Hi all Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>untitled</title>
</head>
<body>
<table style="margin-bottom: 10px;" cellspacing="0" cellpadding="0">
<tr>
<td>asdf</td>
</tr>
</table>
<p style="margin-top: 10px;">asdf</p>
</body>
</html>
Why do the margin-bottom of the table and the margin-top of the p not collapse (only tested in Firefox2)? Why is there 20px between them? I don't understand the world of margins anymore... Is this an exception or a bug or what? Thanks for help, Josh Hello all. I've got a layout with three columns. The first column contains the navigation and the second two are variable content. All the columns can be any length, and consist of any number of divs; each div is a bordered block of variable-sized content. The problem is if I want to float an image around some text in the second or third column. Since the image is floating, its container doesn't extend fully, and the image overlaps the border and the block below it. However, if I put a "clear: both" spacer within the block, then the container clears elements in the left or right columns, and extends way too far down! What I really need is a way to just clear a single level of nesting, but "clear" seems to be pretty much all or nothing. I've also tried the pseudoclass :after trick to extend the box, but that didn't appear to do any good. It just added the content inside the border of each block, but doesn't enclose the image at all. I hope somebody has suggestions - I actually haven't found anything about this problem, but perhaps I'm just looking for the wrong terms. It seems like a fairly fundamental thing to do... Thanks! Hi I have the code below but i cant get it to work in IE, it works perfectly in mozilla but when in ie it messes up, i tried to re create it a different way but i keep having problems aligning the footer, if anyone can help or can edit it so it just works in IE and not mozilla it would be a great help as i can then do a browser check and load the apropriate stlye sheet. cheers CSS body { /*sets properties for the body of the document*/ background-color:#ffffff; margin:0px 0px 0px 0px; } #container { /*sets the properties for the container that all the elements are placed in.*/ margin-top: 50px; /*distance from top of browser window*/ margin-left: 50px; /*discance from left of browser window*/ margin-right: 50px; /*distance from right of browser window*/ margin-bottom: 50px; /*distance from bottom of browser window*/ padding: 0px; /*padding for the edges of the container*/ background-color: #66ccff; /*sets the background colour to blue*/ width: 80%; /*sets the width of the container*/ min-width: 241px; /*sets the minimum width of the container*/ } #footer { /*sets the properties of the footer container*/ padding: 0px; /*sets the padding*/ position: relative; /*sets the position so it is relative to the container its in*/ background-color: #FFFFFF; /*sets background colour to white*/ width: 100%; /*sets width to 100% of the container*/ clear:both; /*clears around the container....vital dont remove it.*/ } #content { /*sets the properties for the content*/ margin-left: 180px; /*margin from the left of the container...leaves space for leftnav*/ height: *%; /* sets height of content to fill all availble space*/ background-color: #66ccff; /* sets background colour to blue*/ align: right; /*aligns content frame to right of the container*/ min-height: 250px; /*sets the minimum height for the window...same as bg image for left nav*/ padding-left: 5px; /*sets the content padding to 5px so there is some space between txt and edge of frame*/ /*overflow:hidden; can also be set to visible this causes some silly problems*/ border-left: 2px solid; /* sets the left border.. needed so when the content stretches the border stretches with it*/ border-color: #663300; /*sets border colour to brown*/ } #leftnav { /*sets properties for the left nav bar*/ float:left; /* floats the navigation panel on the left of container*/ background-color : #66ccff; /* sets bg colour to blue*/ width: 180px; /*sets withd of the left nav*/ padding-top: 30px; /*sets padding from top of container*/ border-right: 2px solid; /*sets border so that when nav is extended border continues*/ border-color: #663300; /*sets border colour to brown*/ } #topleftspace { /*sets properties for the top left space where the rounded corner will go*/ position: absolute; /*sets positioning for element*/ background-color: #66ccff; /*sets bg colour to blue*/ width: 180px; /*sets witdh of element*/ height: 20px; /*sets height of element*/ } #toprightspace { /*sets propertiese for the top right space where the rounded corner goes.*/ margin-left: 180px; /*sets positioning for element*/ background-color: #66ccff; /*sets bg colour to blue*/ height: 20px; /*sets witdh of element*/ padding-left:5 px; /*sets height of element*/ } #topleftcorner { /*sets properties for the top left corner...where the gif goes*/ text-align: left; /*aligns the rounded corner gif*/ } #toprightcorner { /*sets properties for the top left corner...where the gif goes*/ text-align: right; /*aligns the rounded corner gif*/ } #topleftwhite { /*sets the top white space where text could possibly go*/ position: absolute; /*sets position*/ background-color: #FFFFFF; /*sets bg colour to white*/ width: 180px; /*sets width*/ height: 30px; /*sets height*/ border-right: 2px solid; /*sets border*/ border-color: #663300;/*sets border colour to brown*/ } #toprightwhite { /*sets the top white space where text could possibly go*/ margin-left: 180px; /*sets margin from the left of the page to cope with topleftwhite*/ background-color: #FFFFFF; /*sets bg colour to white*/ height:30px; /*sets height*/ padding-left:5px; /*sets padding*/ } #bottomleftspace { /*sets the space where the bottom rounded corner goes*/ position: absolute; /*sets position*/ background-color: #66ccff; /*sets colour*/ width: 180px; /*sets width*/ height :20px; /*sets height*/ border-right: 2px solid; /*sets border*/ border-color: #663300; /*sets border colour*/ } #bottomrightspace {/*sets space where rounded corner will go*/ margin-left: 180px; /*sets left margin to cope with left spaces*/ background-color: #66ccff; /*sets bg colour*/ height: 20px; /*sets height*/ padding-left: 5px; /*sets padding*/ } #bottomleftcorner { /*sets properties for the bottom corner gif*/ text-align: left; /*aligns the gif*/ } #bottomrightcorner { /*sets properties for the bottom corner gif*/ text-align: right; /*aligns the gif*/ } #bottomleftwhite { /*sets the white space for the bottom*/ position: absolute;/*sets position*/ background-color: #FFFFFF; /*sets the bg colour*/ width: 180px; /*sets width*/ height: 30px; /*sets height*/ border-right: 2px solid; /* sets border*/ border-color: #663300; /*sets border colour*/ } #bottomrightwhite {/*sets the white space for the bottom*/ margin-left: 180px; /*sets margin width to cope with left space*/ background-color: #FFFFFF; /*sets bg colour*/ height: 30px; /*sets height*/ padding-left: 5px; /*sets padding*/ } #heading1 { /* sets the main heading properties*/ font-size: 22px ; /* font size*/ font-weight: bold; /* font weight*/ color: black; /* font colour*/ } #contenttext {/*sets content text style*/ font-size: 12px; /*font size*/ color: #663300; /*font colour*/ } HTML <div id="container"> <div id="topleftwhite"></div> <div id="toprightwhite"></div> <div id="topleftspace"> <div id="topleftcorner"><img src="images/t-left-corner.gif" width="20" height="20"</div> </div> <div id="leftnav"><img src="images/home-menu.gif" width="179" height="251"> </div> <div id="toprightspace"><div id="toprightcorner"><img src="images/t-right-corner.gif" width="20" height="20"</div></div> <div id="content"><div id="heading1">Heading 1</div><div id="contenttext"> This is where the content would go This is where the content would go This is where the content would go This is where the content would go This is where the content would go This is where the content would go This is where the content would go This is where the content would go This is where the content would go This is where the content would go This is where the content would go This is where the content would go </div></div> <div id="footer"> <div id="bottomleftspace"> <div id="bottomleftcorner"><img src="images/b-left-corner.gif" width="20" height="20"</div> </div> <div id="bottomrightspace"> <div id="bottomrightcorner"><img src="images/b-right-corner.gif" width="20" height="20"</div> </div> <div id="bottomleftwhite"></div> <div id="bottomrightwhite"></div> </div> Hi, My site is divided into 2 columns: The left column is 760px in width. I want the right column to take up the remaining space of the screen - no matter what resolution i'm on. Here's the page: http://www.3003online.com/demos/ecoceylon/ As you can see, the left column is 760px wide, but the right column (which is currently a simple background black colour) isn't filling up the rest of the space There's even a height problem - On IE, the width of that right column is 100% on the backgorund colour. But on Firefox, it isnt... Here's the code: Code: <div id="container"> <div id="logo"> <div class="hide">test</div> </div> <div class="spacer"> </div> </div> <div id="bgcolor_area"> </div> And the CSS: Code:
body {
color:#FFFFFF ;
font-family: Trebuchet MS, Arial ;
font-size:9pt ;
font-weight:normal;
line-height: 18px;
background-color: #FFFFFF;
margin:0px;
width:100%;
height:100%;
}
#bgcolor_area {
background: #000000;
height: 100%;
width: auto;
float: left;
}
#container {
text-align: left;
width: 760px;
float: left;
}
#logo {
height: 89px;
width: 760px;
background: url(../images/0_top.jpg) no-repeat;
margin: 0;
}
Does anyone know what I'm doing wrong? Thanks a lot! I'm going mad with this, I tested the CSS a:hover function over FF 1.0.7 and IE6, and the style file is simple: PHP Code: h3 { margin:10px; color:#636500; font-family: Arial, Helvetica, sans-serif; font-style: normal; } p { margin:10px; color:#636500; font-family: Arial, Helvetica, sans-serif; font-style: normal; } a { text-decoration: none; } a:hover { color:#636500; } a:visited { color:#cecf9c; } a:link { color:#cecf9c; } searched through the forum but seems nobody has got this problem... I just want the link to change color, I imported the css file to my html and it worked for the first time. I clicked on the link and then use brower's "Back" button to test it again, but the hover feature is not working anymore. I think it may be affected by the a:visited style, but how do I make a:hover work all the time? Thanks for helping. I am generating a list with PHP that is going to be printed out and hung up for display. I would prefer if the following weren't printed. 1) Top Left - Page Title (I know I can have this disappear by having a blank title, but I would prefer to have one) 2) Top Right - Page URL 3) Bottom Left - Page number (ex: 1 of 2) 4) Bottom Right - Date Is there any way to print the list without these? I wasn't sure if there is some css I can use, or if this is something that the printer prints automatically. Thanks Hi All : Currently i'm running in .NET platform together with VB.net and ASP. I faced a problem regarding to the PAGE BREAK html tag. The problem is when i want to print out a report, it will show with scroll bar and the report is very long. So what i have to do is to apply Page-Break-After/Before into the HTML. how am i know if the report already apply the Page Break function or not? And the only style i can use is CSS. Anyone familiar with this? It's urgent !! Hope can get anyone help asap. Regards, JeFFery Howcome: html, body { color: #06F; background-color: #000; font-size: 16px; text-align: center; width: 768px; } Doesn't center the page in the browser? How can I center it? Output example on my website here. I am trying to make a pattern tile the full height of the page and match up with an image at the top. It's a little bit hard to explain and a lot easier to show, so I've documented my first two attempts below. Failed Solution 1 - Pattern as a part of a div set at height: 100%; with outer divs also set at height: 100%; See attempt 1: Code: http://www.hesterdesigns.com/Web2/yellow.html Problem is that the divs aren't growing to the height of the page, and so the pattern isn't tiling the whole height of the page. Failed Solution 2 - The Pattern is part of the body background which tiles on y. See attempt 2: Code: http://www.hesterdesigns.com/Web2/index.html Any suggestions? I'm hoping to find a way to do this using only CSS and without having to resort to Javascript solutions. |
|||||||