Weird Problem in IE

nolimit · 27 Feb 2006 at 15:09

I'm having Link positioning problems in IE. works fine in FireFox and Safari.

this is the website www.e-bluesky.net

this is the css file

Code:

/* CSS Document */
body {
font-size: small; 
font-family: "Lucida Grande", sans-serif;
margin: 0;
padding: 0;
background-color: #fff;
}
* html body { 
font-size: x-small; /*for IE5/Win */
f\ont-size: small; /*for other IE versions */
}
h1 {
}
h2 {
}
p {
}
strong {
padding: 10px;
}
#container {
width: 750px;
margin: 0 auto;
background: url(bg_container.gif) repeat-y 70% 0;
}
#header {
border-bottom: 3px solid #0000FF;
background: url(banner.jpg) no-repeat;
height: 149px;
}
#msg {
background: #000000;
color: #0000FF;
font-size: 80%;
}
#content {
float: left;
width: 65%;
margin-right: 5%;
}
#content .gutter {
padding: 15px;
}
#sidebar {
float: right;
width: 30%;
}
#sidebar .gutter {
padding: 15px;
}
.nav {
top: 0px;
margin: 0 0 20px 0;
padding: 0 0 12px 0;
font-size: 85%;
line-height: 1.5em;
color: 666;
background: fff;
}
.nav li {
padding: 12px;
list-style: none;
}
.nav ul li {
margin: 0 0 0 12px;
padding: 0 0 0 18px;
}
#footer {
clear: both;
background: #000;
text-align: right;
color:#889FBE;
padding: 5px;
}

I dont know if it needs some sort of IE hack but can't figure it.

iCraig · 27 Feb 2006 at 15:15

Hmm, I've dropped it into CSS Vista and it certainly is an odd problem.

I think its something to do with your margins in IE that force your "gutter" DIV to drop to the bottom.

I don't have time to pick it all apart, but I'll take a look later if you're still having trouble.

D4VE · 27 Feb 2006 at 16:00

Id set a width for the menu personally and one for the content and go from there.

nolimit · 27 Feb 2006 at 21:45

I think I fixed it.

took this part of the code

#content {
float: left;
width: 65%;
margin-right: 5%; <------- Deleted this code.
}

now it works on Internet Explorer, FireFox, Safari exactly same. 1 thing I'm worried is the content width is 65%, sidebar width is 30%, so the remaining 5% width is not used.

So if I dont use the remaining 5% width is it a problem in the future?

Al Vallario · 27 Feb 2006 at 22:31

Technically speaking, it's no use putting fluid width elements inside a fixed width box, as you're defying the point of fluid widths. Just give the #content and #sidebar elements fixed pixel widths instead of percentages.

Also, what's up with the redundant .gutter attribute? Surely you can apply the padding to the element you're embedding that in and remove the redundant code?

av.