SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE issues with divs

    Hi,

    Here is a layout that I am working on. http://talesotaku.com/v2/layoutb.php

    It looks fine in Firefox, but in IE, the right navigation panel extends too far down. I am not using IE 7. I am not sure how it looks in that version.

    One more question, why is my navigation (home, games, media..) in the wrong spot in IE? It also works correctly in Firefox.

    Any help would be greatly appreciated. Also, I tried to clear the float but it did not work.
    http://talesotaku.com
    The newest and largest Tales site on the net!

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Also, I tried to clear the float but it did not work.
    You left the dot in the classname.

    Code:
    class=".clearfix
    It should be :
    Code:
        <div id="content" class="clearfix">
    That will also fix some of your ie issues.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    IE won't render the height of an element less than the current font-size unless you set font-size to zero or add overflow:hidden.


    Code:
    #header {
        height: 12px;
        background: url(http://talesotaku.com/v2/top.jpg);
        overflow:hidden;
        }    
    #navtop {
        height: 5px;
        background: #81B7DB;
        overflow:hidden;
    }
    That will line the nav up now.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Don't set a height on your content or you will always be limited to that height. You can use min-height instead for good browsers and then a hack for ie.

    Code:
    #main-left-blue {
        margin: 0;
        padding: 0;
        float: right;
        width: 100&#37;;
        background: #DAE6ED;
        overflow: hidden;        
    min-height:500px;    
    }
    /* mac hide \*/
    * html #main-left-blue {height:500px}
    /* end hide */

  5. #5
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi.

    Thank you for the help. I recoded the layout with what you suggested but I have a couple new issues now.

    http://talesotaku.com/v2c/layoutc.php

    http://talesotaku.com/v2c/css/style.css

    In IE, the two main boxes that are soposed to be white are not. Any way to fix this? They are correct in FF.

    In FF, the right nav does not extend down the entire page like it does in IE. Any suggestions?

    Thanks again.
    http://talesotaku.com
    The newest and largest Tales site on the net!

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi, The boxes are not white because of IE's "haslayout" issues (see faq on haslayout). This is the fix:
    Code:
      #main-left-content { 	background: #DAE6ED; 	overflow: hidden; }			 * html #main-left-content {height:1%}
    The right blue section does not extend in either browser. It just happens to fit in IE at present but if you added more content you would see it is just a stand alone element. You would need to repeat the background image on the main content container instead and not on the column itself. e.g.
    Code:
      #content { 	margin: auto; 	background: #DAE6ED url(http://talesotaku.com/v2c/img/right-bg.jpg) repeat-y right top;	 	overflow:hidden; 	}
    Of course that will leave you with some tidying up to do but should show how to get the effect you want

  7. #7
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't know why this has to be so difficult.

    In FF, the background does not display the little think purple bar on the right nav. It only shows the lighter purple background.

    IE, shows the complete background but a larger version of it that moves ever farther out to the left.

    Is there a way to fix this or an easier way to put that little drop shadow that I am trying to achieve? If not, I'll just have to let the right nav end and not continue down the page.
    http://talesotaku.com
    The newest and largest Tales site on the net!

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I don't know why this has to be so difficult.
    Most of it is your making

    You are nesting unnecessary elements without dimensions and causing "layout" issues in IE. For instance you have wrapped the page in an unnecessary element called #wrap which adds nothing to the page that couldn't have already been styled directly via the body tag with no extra html needed.

    Try to keep your code tidy and concise where possible and apply extra html elements when required.

    I am not sure of the effect you are trying to get with the right navigation and I can't understand why this images is 264px wide:

    http://talesotaku.com/v2c/img/right-bg.jpg

    Yet is seems you have set the right column at 200px wide. The image should match the size of the column unless unless I am misunderstanding the effect you want.

    In firefox 64px of that image is being covered up by the left contents background colour. If the image was 200px the same size as the right column then I would assume that it would display as you wanted.

    But then I may be misconstruing what you want

  9. #9
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you. I can't believe that I forgot to shrink the image in size. It works perfect now.
    http://talesotaku.com
    The newest and largest Tales site on the net!


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
  •