SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    SitePoint Addict LiveTronix's Avatar
    Join Date
    Sep 2001
    Location
    Vancouver
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Two CSS Questions: Top of Page IE vs FF

    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

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    If the Content is longer in Column 1 (C1), it does not continue the Container element.
    You need to clear the floats.

    Code:
                        <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.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    There is the 3 pixel jog on the last button so change the html to this:
    Code:
    <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.

    Code:
    #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&#37;;
        padding-top: 10px;
    }
    That lines it up for me in IE nicely.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    For the top navigation do this instead.

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

  5. #5
    SitePoint Addict LiveTronix's Avatar
    Join Date
    Sep 2001
    Location
    Vancouver
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!!

  6. #6
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You have 48 html errors. Most are 'alt' errors but others will cause you problems sooner or later.

  7. #7
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 :
    Code:
    b.niftycorners, b.niftyfill {display: block; font-size: 1px; zoom: 1;}

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by 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!!
    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.)

    Quote Originally Posted by centauri
    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:

    Code:
    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.

    Quote Originally Posted by Centauri
    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.

  9. #9
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    That is already catered for in the nifty corner css here:

    Code:
    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.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Centauri
    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.

    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">
    <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

  11. #11
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    All Good questions Graeme I can see your brain working now

    Quote Originally Posted by centauri
    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!
    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">
    <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.

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by graeme
    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.

  14. #14
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.....

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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

  16. #16
    SitePoint Addict LiveTronix's Avatar
    Join Date
    Sep 2001
    Location
    Vancouver
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  17. #17
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    #LoginBar ul {
    	float: right
    }
    #LoginBar ul li {
    	display: inline;
    	padding-right: 5px;
    	vertical-align: top;
    	float: left;
    }
    Seems to sort it.

  18. #18
    SitePoint Addict LiveTronix's Avatar
    Join Date
    Sep 2001
    Location
    Vancouver
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Centauri - that worked...

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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •