|
CSS - Tables And Margin: Don't They Collapse With Adjacent Containers' Margins?
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 Similar TutorialsHello, first post here... I have an image floated left, with an unordered list (ul) next to it. Problem is, the margin values I set for the list are totally ignored, so the list bullets end up overlapping the image. Seems the only solution is to set margins on the image, but that also pushes away non-overlapping content, like the h3 that is above the list and positioned fine. Any ideas? Everything works fine if/when I float the list left, but that seems draconian... Code: css Code: Original - css Code img.alignleft { margin-right:0.5em; display:inline; float:left; } ul, ol, dl { line-height:1.5em; margin:0 0 1em 1em; }
HTML4Strict Code: Original - HTML4Strict Code <p><img src="" width="295" height="400" class="alignleft"/></p> <h3>A Sampling of Workshops We Have Brought to Nonprofits</h3> <ul> <li>An Introduction to Social Media for the Nonprofit</li> <li>An Introduction to Storytelling for the Nonprofit</li> <li>Using Social Media and Digital Storytelling in the Classroom</li> </ul> <p><img src="" width="295" height="400" class="alignleft"/></p> On my new design: http://codymays.net/~private_ftp/theed The header and footer of the green block have a space on them and I cannot figure out why. I had this problem with the design before, but I started over and now I only have this issue with IE6 and below. It works in all other browsers. I can clear the spaces if I set the margin-top of the block's content area to -4 and the footer's margin-top to -4. But once this is done, IE then redraws the div at the bottom of the page for no apparent reason. Any ideas/suggestions on what to do here would be appreciated. Thanks, Cody Hey there, webbsdomain.com/Max I am working on a landing page for a client and I am a bit stuck. All XHTML and CSS validates, no issues there.... The design looks and works great in ALL browsers other than IE6. The issue is with the 3 colored divisions, secondLeft, secondMiddle, and secondRight. In IE6 there is a HUGE amount of white space left between the div's with no reason that I can find. I researched the issue online and found similar issues: IE6 3px float bug and IE6 double margin bug Neither of which seem to be the issue, and the fixes they describe do not work. I am completely at a loss on this one, and any guidance anyone can offer would be VERY useful! Thanks in advance, Brian I've had this problem before but figured I'd finally write for suggestions. When tables that are aligned to a certain position of text, say to the right of the text, have style="margin-left: 10px" to avoid running right into the text, in I.E. that margin gets applied to the first line of the text as well. Easier to show: http://wandp.american.edu/community_events.php Notice the indentation in the text in IE that isn't in Firefox. I think what I did as a workaround before is give the table a white left border, or make an extra table column. Would like to avoid either (the border part because I might decide to change the background colo or use this in several apps). Any thoughts? Thanks, Jeremy I've had this problem before but figured I'd finally write for suggestions. When tables that are aligned to a certain position of text, say to the right of the text, have style="margin-left: 10px" to avoid running right into the text, in I.E. that margin gets applied to the first line of the text as well. Easier to show: http://wandp.american.edu/community_events.php Notice the indentation in the text in IE that isn't in Firefox. I think what I did as a workaround before is give the table a white left border, or make an extra table column. Would like to avoid either (the border part because I might decide to change the background color or use this in several apps). Any thoughts? Thanks, Jeremy Hi, I'm working on this webpage http://www.dkwebconsultants.com/jaclo/subnav.php?SubGroupID=24 and it works fine in Mozilla. However, in IE there is a thin white space between the td that says "handshowers" in it and the blue above as well as the the left side of the page. The same thing for the slightly lighter td below it and the left side of the page. I've been reading and error checking all day, but i can't figure this one out. the php/html code is as follows: Code:
<table class="nicetable">
<?php include "header.html" ?> <!-- This is one table row, the table has two td's-->
<tr>
<td height="410">
<table class="nicesubnavtable">
<tr>
<td id="subnavtop">
<script language="JavaScript1.2" type="text/javascript">
<!--
myTest.writeMenuBar();
//-->
</script>
</td>
</tr>
<tr>
<td id="subnavbottom">
<?php
$sql = "SELECT * FROM SubGroup WHERE GroupID = '$GroupID'";
$result = mysql_query($sql) or die (mysql_error()."<br />Couldn't execute query: $sql");
$num_results = mysql_num_rows($result);
echo "<br>";
for($i=0; $i < $num_results; $i++){
$row = mysql_fetch_array($result);
$tempSubGroupID = $row['SubGroupID'];
$tempName = stripslashes($row['Name']);
if($SubGroupID == $tempSubGroupID){
echo "<a id='snsgnamesblue' href='subnav.php?SubGroupID=$tempSubGroupID'>$tempName</a>";
}
else{
echo "<a id='snsgnames' href='subnav.php?SubGroupID=$tempSubGroupID'>$tempName</a>";
}
}
?>
</td>
</tr>
</table>
</td>
<td id="mainareanav">
<?php
$sql1 = "SELECT * FROM IndividualItem WHERE SubGroupID = '$SubGroupID'";
$result1 = mysql_query($sql1) or die (mysql_error()."<br />Couldn't execute query: $sql");
$num_results1 = mysql_num_rows($result1);
for($i=0; $i < $num_results1; $i++){
$row = mysql_fetch_array($result1);
$tempItemID = $row['ItemID'];
$tempNickName = stripslashes($row['NickName']);
$filename = stripslashes($row['ThumbImageName']);
$filenamearray = explode('.', $filename);
$fnameNoExt = $filenamearray[0];
//print the nickname, if no nickname print the itemID
if($tempNickName == "") echo "<a id=\"itemnames\" href=\"product.php?itemID=$tempSubGroupID\" onMouseover=\"changeit('pic1','$fnameNoExt');\" onMouseout=\"changeit('pic1','image_off');\">$tempItemID</a> \n";
else echo "<a id=\"itemnames\" href=\"product.php?itemID=$tempSubGroupID\" onMouseover=\"changeit('pic1','$fnameNoExt');\" onMouseout=\"changeit('pic1','image_off');\">$tempNickName</a> \n";
}
//<td id="subnavright">
//<img src="images/thumb/blankthumb.jpg" id="thumb" name="pic1">
//</td>
?>
</td>
</tr>
<?php include "footer.html" ?> <!-- This is three table rows, public links, user links, search and contact-->
</table>
The relevant CSS code is: Code:
body {
font-family : Arial, Helvetica, sans-serif;
font-size: 16px;
margin: 0;
padding: 0
}
.nicetable {
border-collapse:collapse;
}
.nicesubnavtable {
border-collapse:collapse;
width: 200px;
margin: 0px;
padding: 0px;
border-bottom: 2px solid #BAB6B7;
}
#subnavbar {
vertical-align: top;
}
#subnavmiddle {
background-color: white;
width: 220px;
height: 410px;
vertical-align: top;
padding-left: 15px;
}
#subnavright{
width: 240px;
vertical-align: top;
border-right: 1px solid #797D7E
}
#subnavtop{
background-color: #F3D891;
height: 60px;
width: 185px;
border-top: 2px solid #F3D891;
border-left: 2px solid #F3D891;
}
#subnavbottom{
background-color: #FAE1A8;
height: 350px;
width: 185px;
padding-right: 15px;
border-left: 2px solid #FAE1A8;
vertical-align: top;
}
I'm using tables for the layout and css for the style. I've tried many variations on table layout and haven't come up with anything. If anyone has any ideas, please let me know. Thanks, dk Hi! Could some experienced CSS developer please confirm this: All paddings, and right and left margins, always combine (what I mean is if you have a left object with a 5px right margin and a right object with a 5px left margin, the distance between the two will be 10px). However, bottom & top margins never combine. Is all this true? I am having a problem where I have a <div> that holds my body image, margin: 0 auto; Inside that is my content <div> with margin:15px; but this is visually dropping the background image's margin by 15px. The problem compounds every time I add another margin/padding requirement into the rest of the <div>. Code: html, body {
margin:0px;
padding:0px;
background-image:url(images/interface/background.png);
}
#body_image {
width:935;
margin:0 auto;
padding:0px;
background-image:url(images/interface/body.png);
background-repeat:no-repeat;
background-position:center;
}
#container {
width:904px;
height:750px;
margin:15px;
}
#slug {
height:15px;
}
Code: <div id="body_image"> <div id="container"> <div id="header">Header</div> <div id="nav">Nav</div> <div id="sidebar">Sidebar</div> <div id="content">Content</div> <div id="footer">Footer</div> </div> </div> The extent of my CSS is a few tutorials online and the class I took 10 years ago where the teacher said "Here's CSS, you can't do much more than change your font size and color with it... on to tables!" Thought it'd only be fair to give you a little background. I am trying to create something similar to tooltips and having a problem. I know that the browsers support tooltips with the title attribute but I'm looking to do something different. Also, I know that IE has bugs with hovering on non-anchor tags but I'm trying to make this work in a standards-compliant browser (I'm not using IE). I've tried the code given by SantaKlauss and it worked fine. But why doesn't this work (a simple example to illustrate the problem)? Code:
<style type="text/css">
.test:hover + div
{
background-color: red;
}
</style>
<img class='test' src='test.gif' />
<div>here is some text</div>
If I remove the :hover pseudo-class declaration like this: Code:
.test + div
{
background-color: red;
}
It correctly sets the background color on the div following the image. So why doesn't the first example work with the hover pseudo-class?? Thanks in advance, Jeremiah i have two p tags one after the other.. <p>text</p> <p>text</p> and I did: Code:
#head p {
float:left;
margin-top:2%;
font-style:oblique;
font-size:150%;
color:green;
}
#head p+p {
float:right;
font-size:75%;
color:red;
}
the problem is that if i do margin-top:4% to the first p; this also changes that in the adjacent p? is this correct? Hey everyone, I have a footer with two images that link to various associations for home building. In firefox when I over over the link which has a nested image. The next element is a paragraph which is hidden unless the link is hovered over. In IE the paragraphs don't show. I don't know why since I'm using a:hover, well actually it's #link-ID.hover. PHP Code: <div id="footer" style=""> <div id="foot-left" style=""> <div id="cedia"> <a id="cedia-link" href="http://www.cedia.net/"> <img src="images/cedia.png"> </a> <p id="cedia-info"> Custom<br> Electronic<br> Design &<br> Installation<br> Association </p> </div> <div id="ochba"> <a id="ochba-link" href="http://www.gohba.ca/"> <img src="images/ochba.png"> </a> <p id="ochba-info"> Ottowa-Carleton<br> Home<br> Builders<br> Association </p> </div> </div> <div id="foot-right" style=""> <p>To contact us:</p> <address> Phone: 613-838-4800<br> Fax: 613-838-3800<br> Email: info@moorhousecabling.ca<br> 9 Mary Hill Crescent, Richmond, Ontario, K0A 2Z0 </address> </div> </div> Code: css
#footer{
float:left;
clear:both;
width:800px;
overflow:hidden;
height:140px;
}
#foot-left{
float:left;
clear:none;
width:216px;
height:100%;
}
#cedia{
font-size:small;
width:50%;
float:left;
clear:none;
}
#cedia-link:hover + #cedia-info{
display:block;
}
#cedia img{
margin-left:40px;
float:left;
clear:none;
border:0;
}
#cedia-info{
margin:0 0 0 40px;
padding:0;
display:none;
float:left;
clear:both;
}
#ochba{
font-size:small;
width:50%;
float:left;
clear:none;
}
#ochba-link:hover + #ochba-info{
display:block;
}
#ochba img{
margin-right:40px;
float:right;
clear:none;
border:0;
}
#ochba-info{
margin:0;
padding:0;
display:none;
float:left;
clear:both;
}
#foot-right{
float:left;
clear:none;
background-color:#e6232b;
font-size:x-small;
padding:20px 0 0 20px;
height:100%;
width:563px;
color:#ffffff;
font-weight:bold;
}
Unfortunately no matter what I do to my routers firewall, including turning it off and also trying to add the webserver host to the DMZ. Either way all the port scanners I've used said that port 80 was not responding to SYN connection requests at all. Basically the port is in stealth mode. I cannot give you a live sample of the site. Any ideas or help would be greatly appreciated. So I'm trying to be "proper" and move from tables to divs. But one thing keeps getting me. Say I have a shadow that is to the left and right of my center content page. Easy enough w/ tables. (I'm really dumbing this all down). <table> <tr> <td background="images/shadow.gif"><img src="images/spacer.gif"></td> <td>My content here<br /><br /><br />etc.</td> <td background="images/shadow_r.gif"><img src="images/spacer.gif"></td> </tr> </table> In tables, that height of the left and right cells automatically move with the content of the right cell, so that if there's more or less text, the shadow gets longer or shorter. Now, this is how I'm seeing DIVs would work. <div style="float:left; background-image:url(../images/shadow.gif);background-position:top right; background-repeat:repeat-y;"><img src="images/spacer.gif"></div> <div style="float:left">My content here<br /><br /><br />etc.</div> <div style="float:left; background-image:url(../images/shadow_r.gif);background-position:top left; background-repeat:repeat-y;"><img src="images/spacer.gif"></div> But in this case, the divs to the left and right do not automatically adjust to be the height of the div in the center. So I just get one pixel of height for the shadow "cells". Is there a way to use CSS and still do this? Thanks, JBL Internet Explorer 7 has an odd way of dealing with adjacent left and right floats in a container without set width. Instead of leaving the parent div to its natural content width as a float, IE7 forces the right-floating div to float right until it meets an element with a fixed width, or otherwise the document margin. IE8 and other browsers float the items correctly. The example below was meant to do a menu with rounded buttons, the two rounded images floated to the left and right edges of the button containing the text. The button should only be the width of the text link plus the rounding divs. This is easily fixed by adding a fixed width to the floating container div. However this may not always be the desirable action when div content widths may vary -- especially if space is at premium. Is there any decent way to fix this without resorting to ugly hacks? An easy way to make rounded corners for buttons that are floating. Perhaps use ul/li as the menu item container elements -- would that make any difference? ul/li come with their semantic limitations however, as far as their contents are concerned. (No divs for one.) Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Page</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body{
background-color:#ffffff;
font: 12px Verdana;
}
.container {
border: 1px solid #000;
padding: 5px;
background-color: #eee;
width: 500px;
}
.button_holder {
float: left;
margin: 1px;
/* width: 100px; */ /* IE7 wants width! Comment out and it floats right. */
}
.top_button_left {
/* background-image: url(../images/top_button_left.png); */
background-repeat: no-repeat;
background-color: #bbb;
width: 5px;
height: 31px;
float: left;
cursor: pointer;
}
.top_button_right {
/* background-image: url(../images/top_button_right.png); */
background-repeat: no-repeat;
background-color: #bbb;
width: 5px;
height: 31px;
float: right; /* This bugs the hell out of IE7: right float inside left float floats to the right of the first container with specified width */
cursor: pointer;
}
.top_button_mid {
/* background-image: url(../images/top_button_mid.png); */
background-repeat: repeat-x;
background-color: #ccc;
height: 31px;
cursor: pointer;
float: left;
}
.top_button_link {
padding-top: 7px;
padding-left: 13px;
padding-right: 13px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<b>Three buttons, the sides of which float to the right extreme in IE7</b>
<br />
<br />
<div class="button_holder">
<div class="top_button_mid">
<div class="top_button_right"></div>
<div class="top_button_left"></div>
<div class="top_button_link">
<a href="index.html" title="Home">Home</a>
</div>
</div>
</div>
<div class="button_holder">
<div class="top_button_mid">
<div class="top_button_right"></div>
<div class="top_button_left"></div>
<div class="top_button_link">
<a href="other.html" title="Home">Other</a>
</div>
</div>
</div>
<div class="button_holder">
<div class="top_button_mid">
<div class="top_button_right"></div>
<div class="top_button_left"></div>
<div class="top_button_link">
<a href="weather.html" title="Home">Weather</a>
</div>
</div>
</div>
<br style="clear: both;" />
</div>
</body>
</html>
Does anyone know how I can place two adjacent divs to fit the full width of the browser when one div is a set pixel width and the other i think has to be %? Here's my code: Code: <div style="position: absolute; top: 0px; left: 0px; width: 260px;"> <a href="http://www.thencollection.com/"><img src="images/logo.jpg" width="260px" height="55px" border="0" alt="The N Collection Logo" /></a></div> <div style="margin-left: 260px; width: 100%; height: 55px; background-color: #FFDC00;"> </div> Right now the header extends the browser width. Thanks in advance! I actually am having two problems, the one I alluded to in the subject and one I posted previously but got no response. This time, I'm including a URL and a CSS link in the hopes that someone might be able to help me out. The problem I posted earlier is regarding my navigation column and footer being omitted about 80% of the time in IE5/Win. Obviously, that's a huge problem. Of the browsers I've tested, it only happens in IE5/Win. The second problem is a bizarre issue regarding list items and the copy of the website. For some reason, in both IE5/Win and IE6/Win, the copy in the main column is slightly indented when there are list items (i.e. my navigation links!). This doesn't happen in any other browser I've tested and let me tell you, it's really cramping my style, because it makes the copy look like crap. Anyway, here's the URL of a test page: I've removed the page link. And here's the CSS link: http://dev.homedecorbuyer.com/stylesheets/default.css * Note: about 8 lines of CSS are on a different stylesheet, but only have to do with color and the header graphic. Please help. Whenever I can lend a helping hand on this forum, I post; it's my way of paying it forward. Any assistance would be greatly appreciated. Hi All, A seemingly simple problem which has me pulling my (already thinning) hair out: I'm working on a simple page header: a 100px-wide image floated to the left, a 150px wide div filled with text floated to the right. I need the header to stretch to fit the whole page, which is easy enough: float the image to the left, float the div to the right. Now, if a user shrinks the browser to, lets say 200px wide, it's forcing the div to stack below the image. I would like for it get closer and closer to the image as the browser is narrowed, until it's sitting just beside it. I can do this with a min-width on a container div, but of course, that doesn't work on IE--and I'd rather not use the "expression" min-width hack. I could do it with a table, but I'm trying to go table-free if I can. It seems like something that should be easy as pie, but I'm finding that it's more akin to baking a souffle. Thanks, all. rjgfx Hi, So, there's the adjacent child selector element + element, but I was wondering if there was something that did the reverse of that selector. For example, let's say I have this: Code:
<div id="menu">
<div class="option">1</div
<div class="option">2</div>
<div class="option">3</div>
<div class="option">4</div>
</div>
I know I can use the element + element selector to quickly style every option div but the first, but is there some selector to quickly style every option element but the last. Thanks. --Surgery I'm a bit baffled on this issue. Please visit this page - www.atrachapter.com Focus on the main image in the body of the page and mouse over the left hand navigation. The image jumps to the left. I have tried looking at all the css to see what is causing this but am baffled. Any help would be apprecaited. Thanks. Tom I've been looking through many, many forums trying to resolve this issue, so please forgive me if there is a solution to this that I've missed. Here's the deal: On some installs of Firefox (4.0), the body is being positioned 28px lower than the top of the screen. I set the <html> tag to have a light blue background to troubleshoot the issue, and now there is a light blue bar across the top of the page, proving that it is the body of the page that is lower than it should be. I thought it was a Firefox "collapsing margin" issue, so I added "margin:0; to almost everything, and it didn't help. I'm trying to do this without having to absolutely position everything. Here's the site: www-dot-myportlandtours-dot-com here's the css: www-dot-myportlandtours-dot-com/wp-content/themes/myportlandtours/style.css Anybody have insight into this? Hi All, This seems to be a bit of a recurring problem for me in a lot of the new CSS designs I'm trying... but it seems that IE interprets both padding and margins differently than how firefox interprets them. Sometimes it seems to do it the same, and other times differently. Take a look at this: http://zeroonedesign.com/beta/newsite/index.html CSS he http://zeroonedesign.com/beta/newsite/style.css Now look at it first in Firefox (the desired effect) and then in IE. IE seems to be incapable of understanding this particular piece of the code Code:
#menu {padding-top:140px;text-align:left;padding-left:38px;}
#menu ul{margin:0px;}
#menu ul li{display:inline;margin-right:10px;padding:5px 7px 5px 7px;color:#fff;}
#menu ul li a{color:#fff;font-size:10pt;text-decoration:none;}
#menu ul li a:hover{color:#fff;font-size:10pt;border-bottom:3px solid #fff;}
#menu ul li a.selected{color:#f88000;font-size:10pt;border-bottom:2px solid #f88000;}
Ideas? Help? I know the box model is different for IE than it is for FF but I've tried the box model hack and it doesn't seem to do anything. |
|||||||