4 replies [Last post]
ranjeetsodhi
Offline
newbie
Last seen: 14 years 3 weeks ago
Joined: 2004-04-01
Posts: 4
Points: 0

I just designed this site and everything was working fine, except that for some wierd reason IE does'nt display the complete content area. Only the first few lines of the main content area are displayed and then the footer is displayed.

This error does not happen all the time. I notice it happens whenever i reload the page or if the page is already in the cache. It works fine on Safari, mozilla and Mozilla firebird.

Site with the issues: http://gigaom.com/thevoipdaily/

Strangly, the other pages on this site work just fine in IE.

The style sheet is listed below:

Quote:
body {
background: #eee;
border: 0;
color: #444;
font: 12px 'lucida grande', 'trebuchet ms', verdana, arial, helvetica, sans-serif;
margin: 0;
padding: 0;
text-align: center;
}

a,a:link,a:visited,a:active
{
text-decoration: none;
color:#486DA0;
}
a:hover{
text-decoration: none;
color:#C00000; /*1C496E; */
}

#col4 {
padding: 0;
width: 140px;
}
#comments h3 {
font-size: 9pt;
font-weight: bold;
margin: 0;
}
#comments p {
font-size: 9pt;
margin: 10px 0;
}

#container {
margin: 0px auto;
position: relative;
text-align: left;
padding:0px 0px 20px 0px;
width: 730px;
border: 2px solid #000;
margin-top: 20px;
margin-bottom: 20px;
color: #fff;
background: #CCCCCC;
}

#header{
margin: 0;
background: #CCCCCC;
padding-bottom: 15px;
border-bottom: 2px solid #000;
text-align: left;
}

#content{
/*position: relative;*/
float:left;
padding: 10px 10px;
background: #fff;
border-top: 2px solid #000;
color: #000;
width:710px;
}

#content p {
text-align: justify;
}
#entrynav {
font-size: 8pt;
margin: 0 0 1em 0;
}
#etc {
float:left;
color: #333;
text-align: left;
font-size: 90%;
/*position: absolute;
left: 495px;*/
padding-left: 25px;
top: 0;
width: 220px;
}
#etc form, div.col form {
margin: 0;
}
#etc select, div.col select {
font: 10px verdana, arial, helvetica, sans-serif;
}
#etc ul, div.col ul {
line-height: 1.5em;
margin-left: 0;
margin-right: 0;
list-style: none;
padding: 0 0 0 10px;
}
#etc ul li, div.col ul li {
/*background: url(/images/bullet.gif) no-repeat 0 5px;*/
background: url(/images/bl_arrow.gif) no-repeat 0 1px;
margin: 0;
padding: 0 0 0 10px;
}
#footer {
clear:both;
font-family:"Trebuchet MS", Georgia, "MS Serif";
margin: 0;
padding: 10px 10px 0px 10px;
border-top: 2px solid #000;
border-bottom: 2px solid #000;
background: #fff;
color: #333;
font-size: 90%;
line-height:100%;
font-variant: none;
letter-spacing: 0.09em;
}
#google {
margin-bottom: .5em;
}
#logo {
/*margin: 0 30px 15px 0;*/
margin: 0;
text-align: right;
}
#logo img {
border: 0;
padding: 0;
margin:0;
}
#nav {
float:left;
height: 22px;
margin: 0;
padding: 0;
width: 100%;
}
#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
#nav ul li {
float: left;
font-size: 12px;
line-height: 12px;
margin: 0;
padding: 0;
}
#nav ul li a {
float: left;
margin: 0 5px;
padding: 5px;
color: #333;
text-decoration: none;
text-transform: lowercase;
white-space: nowrap;
}
#nav ul li a:hover {
text-decoration: underline;
}
#searchform {
/*float:left;
width: 200px;
height: 20px;
padding-top:2px;
position: absolute;
right: 18px;
top: 123px;*/
font-size: 12px;
text-align: right;
text-transform: lowercase;
color: #000;
}

#searchform input {
background: #fff;
border: 1px solid #000;
color: #000;
font: 10px verdana, arial, helvetica, sans-serif;
padding: 2px;
}
#searchform input.submit {
background: #486DA0; /*e7651a;*/
border: 2px outset #1C496E; /*f09450;*/
color: #fff;
padding: 0;
}
* html #searchform input.submit {
border-width: 1px;
}
#searchform p {
margin: 0;
height:22px;
}
#tagline {
margin: 1em 0;
text-align: center;
}

blockquote {
font-size: 8pt;
padding:0px 5px 0px 5px;
border: 1px solid #ddd;
background: #eee;
}
body.about li.about a, body.articles li.articles a, body.blog li.blog a, body.thevoipdaily li.thevoipdaily a, body.broadbandits li.broadbandits a, body.essays li.essays a, body.nri li.nri a {
background: #f3f3f3;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
body.blog div.feature {
float:left;
margin: 0;
width: 460px;
color: #333;
text-align: left;
}

body.about div.feature {
float:left;
margin: 0;
width: 460px;
color: #333;
text-align: left;
height:100%;
}

body.broadbandits div.feature {
float:left;
margin: 0;
width: 460px;
color: #333;
text-align: left;
height:100%;
}

body.nri div.feature {
float:left;
margin: 0;
width: 460px;
color: #333;
text-align: left;
height:100%;
}

body.thevoipdaily div.feature {
float:left;
margin: 0;
width: 460px;
color: #333;
text-align: left;
height:100%;
}

/*body.blog #content{
position: left;
margin:0;
padding: 10px 10px;
background: #CCCCCC url(http://www.gigaom.com/images/backgrnd.gif) repeat-y bottom;
border-top: 2px solid #000;
color: #000;
}*/

body#content2 #content{
position: left;
margin:0;
padding: 10px 10px;
background: #CCCCCC url(http://www.gigaom.com/images/backgrnd.gif) repeat-y bottom;
border-top: 2px solid #000;
color: #000;
}

div.amazon ul {
height: 60px;
list-style: none;
margin: .5em 0 1em 0;
padding: 0;
}
div.amazon ul li {
float: left;
font-size: 10px;
background: none;
margin: 0;
padding: 0 0 1em 0;
text-align: center;
width: 82px;
}
div.amazon img {
border-width: 1px;
}
div.col {
float: left;
font-size: 8pt;
padding-right: 20px;
width: 187px; /* False value for IE4-5.x/Win. */
voice-family: "\"}\"";
voice-family: inherit;
width: 167px; /* Good value for compliant browers. */
}
html>body div.col {
width: 167px; /* Be nice to old versions of Opera. */
}
div.comment {
background: #f8f8f8;
border: 1px solid #ddd;
border-left-width: 4px;
border-right-width: 4px;
margin: 1em 0;
padding: 10px 10px 0 10px;
}

div.googlewide {
width:100%;
margin: 0px;
text-align: center;
}

#content_spacer{
clear:both;
width:100%;
height: 20px;
padding: 0;
background: #CCCCCC;
border-top: 2px solid #000;
}

h1 {
background: transparent;
background: url(http://www.gigaom.com/images/icopage1.gif) left no-repeat;
padding-left: 16px;
font-size: 130%;
font-weight: normal;
color: #333;
}
h2 {
line-height:100%;
font-size: 80%;
margin: 20px 0 0 0;
background: transparent;
color: #666;
border-bottom: 0px solid #ddd;
text-align: right;
}
h3 {
background: transparent;
background: url(http://www.gigaom.com/images/icopage1.gif) left no-repeat;
padding: 0 0 0 16px;
margin: 20px 0 0 0;
font-size: 130%;
font-weight: normal;
/*font-style: italic;*/
color: #000;
}
h4 {
margin: 10px 0;
font-size: 100%;
letter-spacing: 0.09em;
font-weight: normal;
background: transparent;
color: #666;
border-bottom: 1px dotted #ccc;
text-transform:uppercase;
}
h5 {
font-size: 8pt;
font-weight: normal;
margin: 0 0 .5em 0;
}
img {
border: 0px solid #486DA0;
padding: 2px;
vertical-align: bottom;
}
img.left {
float: left;
margin: .5em 15px 1em 0;
}
p {
line-height: 1.5em;
margin: .5em 0 1em 0;
color: #333;
}
p a {
font-weight: bold;
}
p.info_bk {
font-size: 7pt;
padding:0px 5px 0px 5px;
border: 1px solid eee;
background: #eee;
}
p.info{
font-size: 8pt;
padding:0px 5px 0px 5px;
}
p.info a.comments{
background: url(http://www.gigaom.com/images/comment.gif) left no-repeat;
padding-left: 16px;
}

p.right {
float: right;
margin: 0 0 0 20px;
}
table {
margin: 0 0 1em 0;
}
ul {
margin-bottom: 1em;
margin-top: .5em;
}
ul li {
margin-bottom: .5em;
margin-top: .5em;
}

.alt {
display: none;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.link {
font-size: 8pt;
letter-spacing: 1px;
text-transform: uppercase;
}

.img-shadow {
float:left;
background: url(http://www.gigaom.com/images/shadowAlpha.png) no-repeat bottom right !important;
background: url(http://www.gigaom.com/images/shadow.gif) no-repeat bottom right;
margin: 5px 0px 0px 5px !important;
margin: 5px 0px 0px 0px;
}

.img-shadow img {
display: block;
position: relative;
background-color: #fff;
border: 1px solid #a9a9a9;
margin: -22px 6px -10px -6px;
padding: 4px;
}

.img-shadow_right {
float:right;
background: url(http://www.gigaom.com/images/shadowAlpha.png) no-repeat bottom right !important;
background: url(http://www.gigaom.com/images/shadow.gif) no-repeat bottom right;
margin: 10px 0 0 15px !important;
margin: 10px 0 0 10px;
}

.img-shadow_right img {
display: block;
position: relative;
background-color: #fff;
border: 1px solid #a9a9a9;
margin: -6px 6px 6px -6px;
padding: 4px;
}

.calendar {
color:#000;
font-size:10px;
font-weight:normal;
line-height:140%;
padding:2px;
}
.calendarhead {
color:#000;
font-size:12px;
font-weight:normal;
padding:2px 0px 2px 0px;
letter-spacing: 3px;
text-transform:capitalize;
text-align:center;
}

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 3 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

IE 6 2 column issue.

Hi

The problem is this part of your html (starred bits where I changed the directory for testing):

<script type="text/javascript" src="*****show_ads">
</script>

Take it out and all is OK.

Something in that code is causing it.

BTW. The site design is 6 star. The best I have seen in a good long time.

Trevor

ranjeetsodhi
Offline
newbie
Last seen: 14 years 3 weeks ago
Joined: 2004-04-01
Posts: 4
Points: 0

IE 6 2 column issue.

Thanks for your help trevor... wonder why the Google Ad's caused this issue. will research more.

BTW: This didn't solve the problem... as you can see by going back to the site in IE and clicking on the top menu to get to "VoIP Daily". The page still gets cut off.

Any suggestions would be very welcome.

ranjeetsodhi
Offline
newbie
Last seen: 14 years 3 weeks ago
Joined: 2004-04-01
Posts: 4
Points: 0

IE 6 2 column issue.

fixed the problem... thanks for making me look at the code rather than the CSS Trevor. The calendar code was in a free floating div and that was causing the problem. Just embedding it into the right column div tags seems to have fixed the problem.

Thanks for your help.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 3 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

IE 6 2 column issue.

Hi

Well, that's what I did, always do, delete divs until the behavior goes away.

I like to focus on bits and always design my sites in modules, that way you can bug hunt quicker.

Trevor