Two CSS Questions: Top of Page IE vs FF

[LiveTronix]

I am getting closed to finished on a somewhat complex CSS design.

http://landexcorp.com/clients/TwoRags/comps/green2.html

Issue #1:

I am using a JS Component called Nifty Corners, it works pretty good! In the two Right Widgets I have an issue with IE. It displays correctly in Firefox.

I think it has something to do with me defining the height and Nifty Corners not liking that. It also wraps the last button to the next line (but works fine in FF).

Issue #2

I am trying to align the elements in the top login bar. IE allows me to use margin-top: parameter. In FF it does nothing! Any ideas? I am not married to using a UL there but I've tried a couple options.

Other Issue

If the Content is longer in Column 1 (C1), it does not continue the Container element. I think I can simply at to the bg color to the shadow bg image to get around this. But if there is a code way to do it let me know??

This is one of the more complex CSS sites I have done, so any other critiques would be appreciated. Always happy to learn!

Thanks in advance.

Steve

[Paul O'B]

If the Content is longer in Column 1 (C1), it does not continue the Container element.

You need to clear the floats.

                    <li class="odd">8</li>
                </ul>
            </div>
        </div>
     <div style="clear:both;height:1px;overflow:hidden"></div>
    </div>
</div>
</body>
</html>

(inline style for example only)

Read the faq on floats for more clearing techniques.

[Paul O'B]

Hi,

There is the 3 pixel jog on the last button so change the html to this:

<div class="Menu">
                    <div class="ItemSel">featured</div>
                    <div class="Item">recent</div>
                    <div class="Item" style="padding-top: 4px;">&nbsp;most &nbsp; viewed</div>
                    <div class="Item" style="float: left;margin-right:0; padding-top: 4px;">most commented</div>
                </div>

Of course those should be classes and no inline styling.

You also need to remove this from the html as for some strange reason it is causes IE problems but its not needed anyway.

#Main .RightWidget .Menu .Item, .ItemSel {
    background: #671B00;
    float: left;
    margin-right: 3px;
    color: #FFFFFF;
    height: 30px;
    text-align: center;
    /*vertical-align: bottom; remove*/
    width: 75px;
    line-height: 90%;
    padding-top: 10px;
}

That lines it up for me in IE nicely.

[Paul O'B]

For the top navigation do this instead.

#Header #Navigation {
    clear:both;
    margin:0 0 0 30px;
    position:relative;
    top:10px;
}

[LiveTronix]

Thanks so much Paul! I have made our suggested changes. Any idea on the top Black bar???

Also, fixing the top Navigation causes an issue in IE now.

Thanks!!

[drhowarddrfine]

You have 48 html errors. Most are 'alt' errors but others will cause you problems sooner or later.

[Centauri]

As drhowarddrfine has said, there are many errors, including block level elements (divs) within inline elements (a) in the menu - surprised Paul hadn't picked that up.

The problem with the rounded corners in IE6 is due to IE6 not allowing elements to be smaller than what is required for the current font size - whilst the nifty corners css sets a 1px font size for the inner <b> elements, the outer <b> is causing the problem with small corners. Setting a font size and giving HasLayout to the outer <b> fixes that :

b.niftycorners, b.niftyfill {display: block; font-size: 1px; zoom: 1;}

[Paul O'B]

Thanks so much Paul! I have made our suggested changes. Any idea on the top Black bar???

Also, fixing the top Navigation causes an issue in IE now.

Thanks!!

If you implement the code I have given you the issues will all be fixed. You have not added the CSS I gave you in all three posts. This will fix the nav bar and all the corners. (At least you online version isn't showing the changes I recommended apart from the one inline css change.)

The problem with the rounded corners in IE6 is due to IE6 not allowing elements to be smaller than what is required

That is already catered for in the nifty corner css here:

b.niftycorners *{display:block;height: 1px;line-height:1px;font-size: 1px;
    overflow:hidden;border-style:solid;border-width: 0 1px}

The universal selector catches all those elements.

including block level elements (divs) within inline elements (a) in the menu - surprised Paul hadn't picked that up.

Yes I missed that It's not the cause of the problem but of course should be corrected into valid html.

[Centauri]

That is already catered for in the nifty corner css here:

b.niftycorners *{display:block;height: 1px;line-height:1px;font-size: 1px;
    overflow:hidden;border-style:solid;border-width: 0 1px}

The universal selector catches all those elements.

The universal selector catches all the internal elements but not the external <b> - if the corner is large, the font height is not a problem, but the problem occurs when a small corner size is selected.

[Paul O'B]

The universal selector catches all the internal elements but not the external <b>

That's the point

Because all the internal elements are caught it is not needed on the outer.

Check it for yourself with a small demo.

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
.test{background:red;border:1px solid #000}
b{display:block;height:1px;overflow:hidden}
</style>
</head>
<body>
<div class="test"><b></b></div>
</body>
</html>

The code I already posted fixes the corners in IE so I know it works

[Centauri]

Interesting - stupid IE. It seems to expand the div unless there is content ???!!

Anyway, I am trying to understand this problem - is this related to the vertical-align:bottom you advised to remove earlier? I try removing this dynamically using the Web Accessibity Toolbar and absolutely nothing happens - maybe this is a problem with the toolbar? I could not see the purpose of that css rule, but I could not see any difference when I removed it earlier ....

Do you vary styles etc live or download the lot to work on them ?

Cheers
Graeme

[Paul O'B]

All Good questions Graeme I can see your brain working now

stupid IE. It seems to expand the div unless there is content ???!!

Yes my thoughts entirely

It's a bit weird because you can set an empty element and then it doesn't expand the height either!

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
.test{background:red;border:1px solid #000;height:1px;}
</style>
</head>
<body>
<div class="test"><p></p></div>
</body>
</html>

Remove the p tags and the height expands to the font-size height!!

It shows you can never be sure of anything with IE.(see the odd double margin bug in this thread post#17)

is this related to the vertical-align:bottom y

No that seems to be another bug and to tell you the truth I don't know why it is having such a bad effect as it should not have an effect on those elements because they are not inline elements. It should only apply to the element it is aplied to and only if that element is an inline element or table-cell. It should not be inherited by any nested elements either.

I need to do some tests and see If I can duplicate the problem in a simpler situation to see what's going on. I only found the problem by a process of elimination and deleting things until the problem was cured.

Do you vary styles etc live or download the lot to work on them ?

If its an easy fix I'll use the live toolbar but more often than not I will download a local working copy to work with as I find that gives better results.

The was I test is to view source and copy the html locally. Grab the css files using the web developer toolbar and insert them into the head of the html. Then I do a search and replace through the whole document and change the relative addresses into absolute addresses so I can see all the images. It only takes a couple of minutes to do (unless there are hundreds of css files of course.)

I find this is the quickest way to debug because you can then keep cutting the html in half and narrow the problem down until you can isolate it.

[Paul O'B]

is this related to the vertical-align:bottom

Another interesting thing is that giving "layout" here almost fixes the corners apart from a small gap at the bottom of the text .

b.niftycorners,b.niftyfill{display:block;zoom:1.0}

However, it doesn't work as smoothly as just removing the vertical-align:bottom so there are compound issues at play here.

[Centauri]

Thanks, Paul - very interesting. Doing some experimenting, I have just found out that when using the Web Accessibility Toolbar for IE, removing a style rule from the css edit panel does not remove it from the live document - it seems that the styles are overlaid on the original styles such that only alterations to values or additional style rules have any effect, unlike the Web Developer Toolbar for FF. Looks like I will also have to download the entire site more often if I am chasing an IE6 bug - oh well, learn something new.....

[Paul O'B]

removing a style rule from the css edit panel does not remove it from the live document - it seems that the styles are overlaid on the original styles such that only alterations to values or additional style rules have any effect,

That's interesting and something worth bearing in mind when debugging as it will probably catch us all out at some time

[LiveTronix]

Thanks for all the help. The code is now 100&#37; valid, not major issues, but nice to do.

Still having some issues with the top black bar and the form. Any ideas?

[Centauri]

#LoginBar ul {
	float: right
}
#LoginBar ul li {
	display: inline;
	padding-right: 5px;
	vertical-align: top;
	float: left;
}

Seems to sort it.

[LiveTronix]

Thanks Centauri - that worked...

Think I'm in good shape with this site now. Appreciate all the help SitePointers!