...

View Full Version : Site looks good, except in IE6



Joop
11-07-2006, 11:36 AM
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

brett7481
11-07-2006, 06:42 PM
Looks good in my version of IE6.

Joop
11-07-2006, 08:52 PM
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.

harbingerOTV
11-08-2006, 01:48 AM
weird. took me a sec to see what you meant.

try this and see if it fixes the issue:


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.

Joop
11-08-2006, 09:51 AM
Thanks harbingerOTV,

Your suggestion is almost good. The peek-a-boo bug is solved :thumbsup:
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:


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?

harbingerOTV
11-08-2006, 02:43 PM
weird. i had to wrap the nav in a div to make it play right.


<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 ;)



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.

Joop
11-08-2006, 05:21 PM
Thanks! The code you posted (of course I'll forgive the messy css!) works excellent :thumbsup:

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!

harbingerOTV
11-09-2006, 02:13 AM
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.



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:


<!--[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:



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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum