Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Nov 2006
    Location
    Netherlands
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Site looks good, except in IE6

    Hello everyone,

    Nice to be on the forum and to see such a helpful community. I hope you can help me with a problem I am having.

    I am building a new website for our company, and the problem is that it looks good in all browsers I have at my disposal here (Opera 9 Linux, Mozilla Firefox 1.5.0.7 Linux & Win, Konqueror) but not in IE6. The HTML and the CSS do validate.
    I get strange whitespaces on the left and on the right and the text in the body is not visible, except for the headers. After selecting the text, it IS visible. I know this is a bug in IE, but I am unsure about how to solve this. Maybe some of you have some tips for me? Other suggestions are also welcome!

    You can see the website at the following URL: http://www.risse.nl/new/index.html

    Thanks in advance,

    Joop

  • #2
    Regular Coder
    Join Date
    Feb 2005
    Posts
    113
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Looks good in my version of IE6.
    http://www.whitehillphotography.com - Murfreesboro, TN Photographer

  • #3
    New to the CF scene
    Join Date
    Nov 2006
    Location
    Netherlands
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by brett7481 View Post
    Looks good in my version of IE6.
    That's very odd...I have tested it on 3 Windows XP machines (with SP2). It looks weird on each of them. Have you tried any of the links...because the first page looks okay for some reason.

  • #4
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    weird. took me a sec to see what you meant.

    try this and see if it fixes the issue:
    Code:
    body {
        background-color : #339BAF;
        color: black;
        font-family : sans-serif;
        margin-bottom : 0;
        margin-left : 0;
        margin-right : 0;
        margin-top : 0;
        padding-bottom : 0;
        padding-left : 0;
        padding-right : 0;
        padding-top : 0;
        text-align: center;
      }
    
    
    #content {
        background-color : #ffffff;
        color: black;
        margin: 2em auto;
        text-align: left;
        width: 85%;
      }
    
    
    #logo {
        text-align : center;
      }
    
    
    #nav {
        list-style-type : none;
        margin-bottom : 0px;
        margin-left : 0px;
        margin-right : 0px;
        margin-top : 0px;
        padding-bottom : 0;
        padding-left : 0;
        padding-right : 0;
        padding-top : 0;
        background-color : #DB9E2D;
      }
    
    
    #nav li {
        color: white;
        float : left;
        padding-bottom : 5px;
        padding-top : 5px;
        text-align : center;
        width : 14%;
      }
    
    
    #nav a {
        color : white;
        display : block;
        text-decoration : none;
        font-weight: bold;
      }
    
    
    #nav a:link {
        color : #ffffff;
      }
    
    
    #nav a:hover {
        background-color : #339BAF;
        color : #DB9E2D;
      }
    
    
    #nav li#active a {
        background-color : #339BAF;
        color : #ffffff;
      }
    I think it's the 102% on the #nav thats causing the issue.

    I didnt see the disappering text but sounds like the peek-a-boo bug.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #5
    New to the CF scene
    Join Date
    Nov 2006
    Location
    Netherlands
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks harbingerOTV,

    Your suggestion is almost good. The peek-a-boo bug is solved
    All text is visible now, and the site aligns properly in IE and also in Firefox. I changed the css a bit to restore the background color on the nav, though. The css validates and now looks like this:

    Code:
    body {
        background-color : #339BAF;
        color: black;
        font-family : sans-serif;
        margin-bottom : 0;
        margin-left : 0;
        margin-right : 0;
        margin-top : 0;
        padding-bottom : 0;
        padding-left : 0;
        padding-right : 0;
        padding-top : 0;
        text-align: center;
      }
    
    
    #content {
        background-color : #ffffff;
        color: black;
        margin: 2em auto;
        text-align: left;
        width: 85%;
      }
    
    
    #logo {
        text-align : center;
      }
    
    
    #nav {
        list-style-type : none;
        margin-bottom : 0px;
        margin-left : 0px;
        margin-right : 0px;
        margin-top : 0px;
        padding-bottom : 0;
        padding-left : 0;
        padding-right : 0;
        padding-top : 0;
        background-color : #DB9E2D;
        color:white;
      }
    
    
    #nav li {
        color: white;
        background-color:#DB9E2D;
        float : left;
        padding-bottom : 5px;
        padding-top : 5px;
        text-align : center;
        width: 14%;
      }
    
    
    #nav a {
        color : white;
        background-color: #DB9E2D;
        display : block;
        text-decoration : none;
        font-weight: bold;
      }
    
    
    #nav a:link {
        color : #ffffff;
        background-color: #DB9E2D;
      }
    
    
    #nav a:hover {
        background-color : #339BAF;
        color : #DB9E2D;
      }
    
    
    #nav li#active a {
        background-color : #339BAF;
        color : #ffffff;
      }
    However, the #nav does not completely span the width of #content anymore in Firefox. In IE, both the #nav and the #footer do not span the width of #content anymore. Any ideas on how to fix that?

  • #6
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    weird. i had to wrap the nav in a div to make it play right.
    Code:
    <div id="navholder">
    	<ul id="nav">	
    		<li id=active><A href="index.html">Home</A></li>
    		<li><A href="nieuws.html">Nieuws</A></li>
    		<li><A href="horizon.html" type="text/html">Horizon</A></li>
    		<li><A href="cultuurtechniek.html">Cultuurtechniek</A></li>
    
    		<li><A href="industrie.html">Industrie</A></li>
    		<li><A href="schoonmaak.html">Schoonmaak</A></li>
    		<li><A href="contact.html">Contact</A></li>
    	</ul>
    </div>
    and the css. sorry it's a mess, it's early here

    Code:
    body {
        background-color : #339BAF;
        color: black;
        font-family : sans-serif;
        padding: 0;
        margin: 2em 0;
        text-align: center;
      }
    
    
    #content {
        background-color : #ffffff;
        color: black;
        margin: 0 auto;
        text-align: left;
        width:85%
      }
    
    
    #logo {
        text-align : center;
      }
    
    #navholder {
    background: #ccc;
    margin: 0;
    width: 100%;
    float: left;
        background-color: #DB9E2D;
    }
    #nav {
        list-style-type : none;
        margin: 0;
        padding: 0 0 0 1.4%;
        background-color : #666;
        color:white;
    
      }
    
    
    #nav li {
        color: white;
        padding: 0;
        margin: 0;
        text-align : center;
    float: left;
    width: 14%;
      }
    
    
    #nav a {
        color : white;
        background-color: #DB9E2D;
        display : block;
        text-decoration : none;
        font-weight: bold;
        padding: 5px 0;
      }
    
    
    #nav a:link {
        color : #ffffff;
        background-color: #DB9E2D;
      }
    
    
    #nav a:hover {
        background-color : #339BAF;
        color : #DB9E2D;
      }
    
    
    #nav li#active a {
        background-color : #339BAF;
        color : #ffffff;
      }
    
    #sub {
        list-style-type : circle;
      }
    
    
    #sub li {
      }
    
    
    #sub a {
        color : #339BAF;
        background-color:white;
        text-decoration : none;
      }
    
    
    #sub a:link {
      }
    
    
    #sub a:hover {
        text-decoration: underline;
      }
    
    
    #sub li#active a {
        color: #f3930b;
        background-color:white;
      }
    
    
    h1, h2, h3 {
        color : #339BAF;
        background-color:white;
        width:50%;
        /* Fix to let IE render the header which would otherwise be invisible */;
      }
    
    
    #subtitle {
        font-size : 1.2em;
        font-style : italic;
      }
    
    
    #text {
        padding-bottom : 1em;
        padding-left : 2em;
        padding-right : 2em;
        padding-top : 1em;
        width:auto;
      }
    
    
    p a {
        color : #DB9E2D;
        background-color: white;
        text-decoration : none;
      }
    
    
    p a:hover {
        text-decoration : underline;
      }
    
    
    #footer {
        background-color : #DB9E2D;
        clear : both;
        color : #ffffff;
        text-align : right;
        width: 100%;
      }
    
    
    #footer a {
        background-color: #DB9E2D;
        color: #fff;
        text-decoration:none;
      }
    
    
    #footer a:hover {
        text-decoration:underline;
      }
    
    
    img.foto {
        float : right;
        padding-bottom : 2em;
        padding-left : 1em;
        padding-right : 1em;
      }
    
    
    img.top {
        padding-left: 1em;
        padding-right: 1em;
        padding-top:1em;
        padding-bottom:1em;
      }
    
    
    #begintext {
        clear: both;
      }
    see if that works on all the pages. I only had the home page to work with.

    if you collapse the page to less then like 700px IE breaks the nav. Might look into a min-width solution to help keep that from happening.
    Last edited by harbingerOTV; 11-08-2006 at 01:45 PM. Reason: noticed something in IE.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #7
    New to the CF scene
    Join Date
    Nov 2006
    Location
    Netherlands
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks! The code you posted (of course I'll forgive the messy css!) works excellent

    I've tested it now in Konqueror, Opera 9, Firefox 1.5.0.7 and IE 6 and it aligns beautifully.
    Should someone visit the site in a low resolution, like 800x600, the #nav wraps to the next line, but I can live with that. Especially if in the future we add more buttons to the #nav. But I will look into the min-width solution, to see if that can prevent the wrapping.

    Thanks a lot!

  • #8
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    cool, glad it worked out.

    heres a pretty simple non-javascript way to do min-width. Im not sure the min-width issue with IE7 so if it does support it you might need to change the condtional comment to suit.

    Code:
    body {
        background-color : #339BAF;
        color: black;
        font-family : sans-serif;
        padding: 0;
        margin: 2em;
        text-align: center;
      }
    #content {
        text-align: left;
        min-width: 900px;
        background-color : #ffffff;
        color: black;	
      }
    I changed your body code again to make it have a littl emore room to breathe before colapsing upon itsself. after a little play I found 950px comfortable until the "Cultuurtechniek" link ran out of horizontal space.

    then some IE stuff:
    Code:
    <!--[if IE]>
    <style type="text/css">
    #content {
    margin-left: 950px; 
    position: relative; 
    float: left; 
    z-index: 1; 
    display: inline;
    }
    #wrap {
    margin-left: -950px; 
    position: relative; 
    float: left;  
    z-index: 1; 
    text-align: left; 
    display: inline;
    background: #fff;
    }
    </style>
    <![endif]-->
    then insid ethe #content div add <div id="wrap"> and dont for get to close it right before the #contnet ends

    only IE will see it and it will apply the extra rules and it will emulate min-width.


    almost certain older browser (iemac and others) dont like negative margins, so it would be wise to use the import method to feed your css in:

    Code:
    <style type="text/css" media="screen">
        /* backslash hack hides from IEmac \*/
    	    @import url(risse.css);
        /* end hack */
    </style>
    
    <!--[if IE]>
    <style type="text/css" media="screen">
        /* backslash hack hides from IEmac \*/
    	    @import url(risse_ie.css);
        /* end hack */
    </style>
    <![endif]-->
    that should feed modern browsers the right stuff, IE the little quirky-ness for min-width and let all other browsers that can't handle it have the unstyled markup.
    Last edited by harbingerOTV; 11-09-2006 at 01:16 AM.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis


  •  

    Posting Permissions

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