CSS - Is It Normal For Overlapping Margins To Ignore Each Other?

Look at this in both IE and Firefox:

www.sandlotillustrated.com

In IE, there's a 2 pixel bar floating underneath the nav buttons. In Firefox it's not there. Any idea what's going on? I've debugged the heck out of it and can't see the problem.

Any help would be greatly appreciated!

Hi,

I have changed my test site so I can display an ad and so that each section is separated into different sections, anyway after changing a few things and fixing a few problems I have found that the problem is happening with my #ContentMain except I have no idea how to fix it.

Essentially #ContentMain is appearing before it should be (ignoring the formating and appearing behind everything) when it should be appearing directly after <div id="main1">
everything I have tried, I have had no success with.

Also as I have separated the gap I had between the top links and the main picture to add in in ad section (no actual css setting for it as everything I have tried hasn't worked)

Where as before my editing the content appeared where it was meant to, so any help would be greatly appreciated and if you need me to explain something in more detail let me know.

TorqueSRO - Click Me

Am I commenting lines incorrectly?

If I prefix a line with two slashes // in the CSS, firefox will ignore it.

IE will recognize it and perform the CSS styling.

For instance: Code:

table.myTable tr td
{
    background-color: red;
    //background-image: url('mypic.jpg');
}

The TD element will not have a background in firefox. It WILL have the background image in IE.

P.S. I am using IE8 on Win7 RC1 (build 7100).
Thank you

i have a table with several header columns:
Code:

<table>
<tr><th>header 1</th><th>header 2</th><th>header 3</th></tr>
<tr><td colspan=3>empty info</td></tr>
</table>

now i want to put a border inbetween the cells, to do this i simply used:
Code:

table th {
    border-left:1px solid black;
}

except this adds a border to the left hand side of the far left cell, making the table border of 1px actually 2px
if i give that end cell an id can it be ignored when applying the left border?
or would i have to add the lines:
Code:

table th#idname {
    border-left:0px;
}

Two questions:

1, I tried using min-width and it doesnt work with block level elements unless I float them or use position: absolute. What is the correct way to set the width on a block level elements?

2, Now FF also implements: word-wrap: break-word, so thats very good news. However I cant get it to ignore a minimum width. Ie I dont want a div with a min-width containing text to expand when the word-wrap is set and the text is too long. I only want it to expand when other items that are larger then the min-width are put in the div not when text is put in the div.


thanks

Sorry for the slightly ambidgious title, hard to explain my issue.
Two clips of code below, the div "test" relates to an Rss feed i'm pulling in through the javascript below. A class is automatically applied to the RSS when it loads. However, it is being displayed as a bullet list despite the stylesheet having no reference to a bulleted list.

It seems to be due to the fact it sits within a <li> class. But is there a way to tell it to ignore any style in above classes? Aim being so it loads without being in a bulleted list.

Code:

 <ul id="column3" class="column">
            <li class="widget color-orange">  
                <div class="widget-head">
                    <h3>Widget title</h3>
                </div>
                <div class="widget-content">
                    <div id="test"></div>
                </div>
            </li>

Code:

<script type="text/javascript"> $(document).ready(function () { 	$('#test').rssfeed('http://www.fmuforum.com/index.php?app=core&module=global&section=rss&type=forums&id=2', { 		limit: 5 	}); }); </script>

Thanks in advance

Hi, I'm working on my first standards compliant site, so I'm a bit of a novice with the CSS required. You can view a test page I have set up at:
67.207.72.2/test_styles.htm (forum rules won't let me include this as a url)

The css file for this page is at:
67.207.72.2/css/test_styles.css

My issue is that the right column stops short- I'd like the background color to continue down the length of the page.

To try to do this, I set the wrapping div on this section (#main_content) of the page with the appropriate background-color.

IE displays the page the way I want it to appear, but FF, Safari, and Chrome all do not. I know this means I'm doing it wrong, but I don't know what to change.

I've also tried using an image for a background for the #main_content div, and to set a height: 100% property for the column, but neither of those worked.

Can anyone point me in the right direction? Thanks for your time.

Okay here's the problem, I have used px instead of % and I have a feeling it's ruined my whole site because of the fact that users can set their font size custom which TOTALLY messes up margins and things that I have set so precisely.

Here is my site: www.msredimp.000webhost.info

At small it works perfectly and the forms stay all normal, but when it's increased or decreased it totally ruins it.

Is there a way to force the settings in Mozilla to normal size? Or any other way?

Thank you, and sorry for being such a newbie.

been trying to get this to work for a while now , but have had no luck, this works fine in IE but firefox seems to overlap my footer div. http://www.urbandream.net/mms/common/layout/site.html

if anyone could help or point me in the right direction I owuld be greatful.

Also if anyone is on a mac, I owuld be greatful of a screen shot to see how it looks.

scott

My problem can be viewed here
http://emediastudios.com.au/emma/photography/babies.html

My problem is i want the image on mouse over to be on top of the stack.

CSS
Code:

#imgmenu {position:relative; top:0px; left:0px; width: auto; background-color: #FFFFFF;  border:solid 1px #FFFFFF} 
#imgmenu .p1 {display:block; width: auto; height: auto; text-decoration:none; background: #FFFFFF; top:0; left:0; border:0;} 
#imgmenu .p1:hover {text-decoration:none; background-color: #FFFFFF; color:#000;} 
#imgmenu .large {
	display:block;
	position:absolute;
	width:0;
	height:0;
	border:0;
	top:0;
	left:0;
	z-index: 601;
	visibility: visible;
} 
#imgmenu .p1:hover .large {display:block; position:absolute; top:-85px; left:50px; width: auto; height: auto; border:3px solid #FFFFFF;} 
#info {z-index:500; height:22em;} 

HTML
Code:

<td><div id="imgmenu"> 
<a class="p1" href="#nogo" title="thumbnail image"><img src="/emma/photography/babies/Ralph3.jpg" alt="Thumbnail image" border="0" title="Thumbnail image" / ><img src="babies/big/Ralph3.jpg" alt="Enlarged view of image" name="info" class="large" id="info" title="Enlarged view of image" /></a> 
</div> </td>

Please Help

I am building a mail account (Inbox) which is using css.now there is a specific mail which contains some css elements like

[code]

<div>Dear all,</div> <div>&nbsp;</div> <div>wish u happy and safe diwali</div> <div>&nbsp;</div> <div>luv</div> <div>Vinoth<BR><BR><B><I>Palanivel_J@Dell.com</I></B> wrote:</div> <BLOCKQUOTE class=replbq style="PADDING-LEFT: 5px; MARGIN-LEFT: 5px; BORDER-LEFT: #1010ff 2px solid"> <META content="MSHTML 6.00.2900.2963" name=GENERATOR> <STYLE>v\:* { BEHAVIOR: url(#default#VML) } o\:* { BEHAVIOR: url(#default#VML) } w\:* { BEHAVIOR: url(#default#VML) } .shape { BEHAVIOR: url(#default#VML) } </STYLE> <STYLE>@page Section1 {size: 8.5in 11.0in; margin: 1.0in 1.25in 1.0in 1.25in; } P.MsoNormal { FONT-SIZE: 12pt; MARGIN: 0in 0in 0pt; FONT-FAMILY: "Times New Roman" } LI.MsoNormal { FONT-SIZE: 12pt; MARGIN: 0in 0in 0pt; FONT-FAMILY: "Times New Roman" } DIV.MsoNormal { FONT-SIZE: 12pt; MARGIN: 0in 0in 0pt; FONT-FAMILY: "Times New Roman" } A:link { COLOR: blue; TEXT-DECORATION: underline } SPAN.MsoHyperlink { COLOR: blue; TEXT-DECORATION:
underline } A:visited { COLOR: purple; TEXT-DECORATION: underline } SPAN.MsoHyperlinkFollowed {


when this mail is opened, its css interferes with the css of the page.
as a result links all over the page are colored in blue.
what is the method to avoid or ignore any css of the mail.
Regards
Rupam

Hi folks,

Can anyone possibly help me with this layout, the blue slideshow box is overlapping the login box ?

~url removed~

Also, I am viewing this at 1440x900 screen res. Is anyone having probs with the view / layout?

New construction of a website. I've had no issue with any css. As soon as I started to put in my blog (Wordpress), I realized that changing a would effect other tags that were no encased in this . I dismissed as a flaw in my code that wasn't working correctly with the Wordpress theme. However, now I'm have the same issue with an RSS reader. The code works perfectly in IE9 and Chrome v7. But, it doesn't work in Firefox.

http://www.imzac.com/truf.php
http://www.imzac.com/common/master.css

In the recent post section, you see my heading is larger and has a different weight. This is the only tag that code has allotted for these properties. However, it effects the "Continue Reading" and the link at the footer of my page. Again, no issues in IE9 and Chrome v7.

Here's the RSS feed script. What's you're looking for is about halfway down and then near the end. It's the <title> lines.

Code:

<?php
 
    <?php
 
    require_once("rsslib.php");
 
    echo RSS_Display("http://www.xul.fr/rss.xml", 15);
 
    ? >
*/
 
$RSS_Content = array();
 
function RSS_Tags($item, $type)
{
 
        $y = array();
        $tnl = $item->getElementsByTagName("title");
        $tnl = $tnl->item(0);
        $title = $tnl->firstChild->textContent;
 
        $tnl = $item->getElementsByTagName("link");
        $tnl = $tnl->item(0);
        $link = $tnl->firstChild->textContent;
        $tnl = $item->getElementsByTagName("pubDate");
        $tnl = $tnl->item(0);
        $date = $tnl->firstChild->textContent;        
 
 
        $tnl = $item->getElementsByTagName("description");
        $tnl = $tnl->item(0);
        $description = $tnl->firstChild->textContent;
        $y["title"] = $title;
        $y["link"] = $link;
        $y["date"] = $date;        
        $y["description"] = $description;
        $y["type"] = $type;
 
        return $y;
}
 
function RSS_Channel($channel)
{
    global $RSS_Content;
    $items = $channel->getElementsByTagName("item");
 
 
    // Processing channel
 
    $y = RSS_Tags($channel, 0);        // get description of channel, type 0
    array_push($RSS_Content, $y);
 
    // Processing articles
 
   foreach($items as $item)
    {
        $y = RSS_Tags($item, 1);    // get description of article, type 1
        array_push($RSS_Content, $y);
    }
}
 
function RSS_Retrieve($url)
{
    global $RSS_Content;
    $doc  = new DOMDocument();
    $doc->load($url);
    $channels = $doc->getElementsByTagName("channel");
 
    $RSS_Content = array();
    foreach($channels as $channel)
    {
         RSS_Channel($channel);
    }
}
 
function RSS_RetrieveLinks($url)
{
    global $RSS_Content;
    $doc  = new DOMDocument();
    $doc->load($url);
    $channels = $doc->getElementsByTagName("channel");
 
    $RSS_Content = array();
    foreach($channels as $channel)
 
    {
        $items = $channel->getElementsByTagName("item");
        foreach($items as $item)
        {
         $y = RSS_Tags($item, 1);    // get description of article, type 1
         array_push($RSS_Content, $y);
       }
    }
}
 
function RSS_Links($url, $size = 15)
 
{
    global $RSS_Content;
 
    $page = "<ul>";
  
    RSS_RetrieveLinks($url);
 
    if($size > 0)
 
        $recents = array_slice($RSS_Content, 0, $size + 1);

    foreach($recents as $article)
 
    {
        $type = $article["type"];
 
        if($type == <img src="http://csscreator.com/sites/all/modules/smileys/packs/Roving/innocent.png" title="Innocent" alt="Innocent" class="smiley-content" /> continue;
        $title = $article["title"]; 
        $link = $article["link"];

        $page .= "<span class=\"title\" style=\"font-color:469EB5;\"><a href=\"$link\">$title</a></span>\n";            
 
    }
 
    $page .="</ul>\n";
    return $page;
}
function RSS_Display($url, $size = 15, $site = 0, $withdate = 0)
{
    global $RSS_Content;
 
    $opened = false;
    $page = "";
    $site = (intval($site) == <img src="http://csscreator.com/sites/all/modules/smileys/packs/Roving/innocent.png" title="Innocent" alt="Innocent" class="smiley-content" /> ? 1 : 0;
 
    RSS_Retrieve($url);
    if($size > 0)
        $recents = array_slice($RSS_Content, $site, $size + 1 - $site);
 
    foreach($recents as $article)
    {
        $type = $article["type"];
        if($type == 0)
        {
            if($opened == true)
            {
                $page .="</ul>\n";
                $opened = false;
            }
            $page .="<b>";
        }
        else
        {
            if($opened == false) 
            {
                $page .= "<ul>\n";
                $opened = true;
            }
        }
        $title = $article["title"];
        $link = $article["link"];
 
        $page .= "<span class=\"title\" style=\"font-color:469EB5;\"><a href=\"$link\">$title</a></span>\n";            
        if($withdate)
        {
      $date = $article["date"];
      $page .=' <span class="rssdate">'.$date.'</span>';
    }
        $description = $article["description"];
        if($description != false) 
        { 
            $page .= "<br><span class='rssdesc'>$description</span>"; 
        } 
        $page .= "</li>\n";            

        if($type==0)
        {
            $page .="</b><br />";
        }
    }
    if($opened == true)
    {    
        $page .="</ul>\n";
    }
    return $page."\n";
}
?>

Any help will be greatly appreciated. Thanks.

http://www.mrossana.com/eesdvr/

The main thing that I am worried about here is in the header. The header looks exactly the way I want it to in Firefox (Mac and PC) and Safari (Mac), but, in Internet Explorer, the "headerborder" div overlaps the ul menu in the "header" div. The "header" ul comes before the "headerborder" div in the code, so, with the negative top marging, the "headerborder" div should be behind the ul menu. Any ideas on how to fix this in IE? Do I have to add some z-index values? Or is there a better way to do this layout? Any suggestions greatly appreciated.

according to the css 2.1 spec if you specify the margin/padding of an element in ems then it takes the measurement from that element's font size, this means that

*
{
font size: 1em;
}

h1
{
font-size: 1.5em;
margin-bottom: 1em;
}

gives h1 a margin of ... 1.5em ... which sucks. and is counter intuitive IMO. how is one supposed to go about having fixed margin spaces when using scalable fonts? now i know that margins overlap so theoretically setting

p
{
margin-top: 1em;
}

instead would work, but only where a p lies under a h1. if i had a h1 then a h2 then a p then how large would the gap be between the h1 and the h2? and how would i control that reliably?

the only way around this i can think of is this

*
{
font-size: 1em; /*let's say this equates to 10px on the device it's being viewed on*/
}

h1
{
font-size: 1.5em; /*...then this would be 15px*/
margin-bottom 0.67em; /*..this would be 67% of 15px = 10px!*/
}

h2
{
font-size: 1.2em; /*12px*/
margin-bottom: 0.83em; /*83% of 12px = ... 10px!*/
}

p
{
margin-botton: 1em;
}

Now, when i scale the font size all the margins should scale in accordance with the <p>. at least, according to my understanding of the spec. i'll try it in the next couple of hours (first thing monday morning just got to work)... anyone else thought of a scalable friendly alternative?