IE won't break and FF won't hover

First Problem:
IE won't break. If the article content is less than the length of the section stories. Section stories goes passed the interface border. I thought a simple clear:both would have worked but it is not.

Second Problem
In IE I can select articles in the "most clicked" section. However in FF I can only select from the 3 item down - why? Never saw that before.

Any help would be appreciated a great deal - THANKS!


The Site:
www.antiguasun.com/newsite

The CSS:
body
{
margin:0;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
background-color:white;
background-color:#D5D5D5;
color:black;
}

#noArticle
{
width:350px;
height:600px;
font-size:15px;
font-weight:bold;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
#errorPage
{
padding:25px;
height:50px;
text-align:center;
}
#centerFace
{
position:relative;
top:0px;
left:0px;
}
#interFace
{
margin:0;
text-align:left;
width:980px;
/*height:800px;*/
border:1px solid #2C2C2C;
border-top:0px;
background-color:white;
position:relative;
}

#headerSection
{
background-image:url(../Images/HeaderBackground.jpg);
background-repeat:repeat-x;
width:980px;
height:120px;
overflow:hidden;
position:absolute;
top:0px;
left:0px;
}
#logo
{
background-image:url(../Images/LogoASun.jpg);
width:303px;
height:65px;
overflow:hidden;
position:absolute;
top:0px;
left:5px;
}
#banner
{
/*background-image:url(/ASun/NewSite/Images/Banner.jpg);*/
width:469px;
height:60px;
overflow:hidden;
position:absolute;
right:3px;
top:0px;
}
#bannerBottom
{
/* has the same width as article content */
position:relative;
/*bottom:30px;
bottom:5px;*/
border:0px solid red;
}
#dateSelect select, #siteSelect select, #dateSelect input
{
font-size:10px;
border:1px solid white;
}

#dateSelect input {width:30px;font-weight:bold;}
#dateSelect
{
position:absolute;
/*
left:165px;
top:67px;
*/
left:310px;
top:32px;
}

#siteSelect
{
position:absolute;
/*
left:5px;
top:68px;
*/
left:310px;
top:5px;
}

#menu
{
position:absolute;
left:5px;
top:72px;
font-size:12px;
color:#ff7e19;
}

#menu a, #menu a:visited
{
text-decoration:none;
color:#ff7e19;
/*color:#0677c3;
color:#0892ee;*/
}

#menu a:hover, #menu a:visited:hover
{
color:#2C2C2C;
}

#menu a.menuSubA, #menu a.menuSubASelected
{
font-size:11px;
}

#menu a.menuSubASelected, #menu a.menuSubASelected:visited
{
color:white;
}

#menu a.menuSubA:hover, #menu a.menuSubASelected:hover
{
color:white;
}

#menu span
{
color:gray;
}

#tabcontentcontainer .tabcontent .noArticles
{
color:white;
}

#personalLinks
{
position:absolute;
right:5px;
top:60px;
font-size:10px;
color:#BFBFBF;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
#personalLinks a, #personalLinks a:visited, #personalLinks a:visited:hover, #personalLinks a:hover
{
color:#BFBFBF;
text-decoration:none;
}

#personalLinks a:visited:hover, #personalLinks a:hover
{
color:white;
}


#searchBox
{
position:absolute;
top:98px;
right:8px;
color:#BFBFBF;
}

#searchBox input
{
border:1px solid #ff7e19;
font-size:10px;
color:black;
text-transform:uppercase;
}
#breadCrumb, #footer, #disclaimer
{
color:#0677c3;
}
#bottomPiece
{
text-align:left;
width:970px;
position:relative;
background-color:white;
margin-top:50px;
bottom:5px;
left:5px;
}
#breadCrumb
{
border:0px solid navy;
width:980px;
position:absolute;
top:120px;
left:5px;
font-size:9px;
}
#footer
{
position:absolute;
left:0px;
bottom:3px;
font-size:11px;
}
#disclaimer
{
position:absolute;
right:3px;
bottom:3px;
font-size:11px;
}

#sectionsSection
{
border:0px solid black;
position:relative;
/*height:658px;*/
margin:5px;
margin-bottom:150px;
width:965px;
}

#sectionStories
{
width:350px;
/*border:1px solid #ff7e19;*/
border:1px solid #D5D5D5;
position:relative;
/*top:121px;*/
/*left:485px;*/
/*height:492px;*/
overflow:auto;

/*top:-72px;*/
left:0px;
margin-left:10px;
float:right;
margin-top:-10px;
}

#topStories
{
width:350px;
height:114px;
height:97px;
border:1px solid #D5D5D5;
background-color:navy;
position:relative;
/*clear:right;*/
margin:0;
margin-left:10px;
margin-bottom:5px;
float:right;
left:0px;
}

#topStoriesGraphic
{
background-image:url(../Images/TopStories.jpg);
width:87px;
height:87px;
position:absolute;
top:13px;
left:10px;

position:relative;
left:0px;
top:0px;
margin-left:5px;
margin-top:5px;
float:left;
}

#topStoriesContent
{
position:absolute;
top:1px;
left:100px;
height:110px;
height:93px;
/*width:377px;*/
width:240px;
overflow:auto;
border:0px solid red;

position:relative;
left:0px;
top:0px;
float:right;
margin-left:5px;
padding-right:5px;
}

#topStoriesContent a
{
display:block;
color:#ff7e19;
text-decoration:none;
margin-bottom:5px;
}
#topStoriesContent a:hover
{
color:white;
}

#topStoriesContent a img
{
display:inline;
padding:0;
margin:0;
border:0px;
position:relative;
top:3px;
}

#theWeather, #theWeatherDetail
{
position:relative;
border:1px solid #D5D5D5;
border:1px solid #0066CC;
margin-bottom:10px;
font-size:10px;
padding:3px;
padding-right:3px;
height:270px;
height:200px;
overflow:hidden;
width:114px;
}
#theWeather img {visibility:hidden;top:-100px;position:absolute;}

#theWeatherDetail
{
padding-right:5px;
overflow:auto;
}

#theWeatherDetail .theWeatherMoreInfo {display:none;}
.theWeatherMoreInfo
{
font-weight:100;
color:red;
}
#theWeather span
{
font-weight:bold;
}

#bannerRight
{
border:0px solid black;
position:relative;
/*position:absolute;*/

top:140px;
/*top:0px;
left:845px;*/
float:right;
}

#bannerRight .actualBanner
{
width:120px;
height:240px;
overflow:hidden;
border:0px;
display:block;
margin-bottom:10px;
}


#contentSection
{
position:relative;
/*top:100px;
left:0px;*/
border:0px solid green;
top:140px;

}

#clearThem {height:1px;clear:both;}
.clearThem {height:1px;clear:both;}

#searchSection
{
width:835px;
/*height:1000px;
min-height:300px;*/
border:0px solid #D5D5D5;
position:relative;
margin-bottom:200px;
}


#searchForm, #searchForm table, #searchForm input, #searchForm select
{
z-index:1;
position:relative;
left:0;
top:0;
}
#searchForm table
{
border:1px solid navy;
margin-bottom:10px;
}

#searchForm table input, #searchForm table select
{
font-size:12px;

}
#searchForm table input
{
text-transform:uppercase;
border:1px solid blue;
}
#searchForm table input
{
border:1px solid silver;
}
#searchResults
{
position:relative;
top:5px;
left:0px;
border:0px solid blue;
width:830px;
}
#searchResults a {color:red;}
.searchResultsPageInfo
{
margin-bottom:10px;
}
.searchResultsPagnation
{
position:relative;
left:5px;
margin-bottom:10px;
text-align:center;
background-color:navy;
width:823px;
padding-top:5px;
padding-bottom:5px;
}

.searchResultsPagnation div
{
display:inline;
width:50px;
margin-right:10px;
color:#6C6C6C;
}
.searchResultsPagnation div a
{
color:#FF3300;
text-decoration:none;
}


.searchResultsRow, .searchResultsRowEven, .searchResultsRowOdd
{
position:relative;
width:830px;
height:35px;
top:0px;
left:0px;

}
.searchResultsRowEven
{
/*background-color:#F8F8F8;*/
margin-bottom:5px;
border:1px solid #C0C0C0;
height:100px;
}
.searchResultsRowOdd
{
/*background-color:#F2F2F2;*/
margin-bottom:5px;
border:1px solid #C0C0C0;
height:100px;
}

.searchResultsResultNumber
{
position:absolute;
top:3px;
left:5px;
width:150px;
border:0px solid black;
}
.searchResultsResultSection
{
position:absolute;
top:3px;
left:160px;
width:150px;
border:0px solid black;
}
.searchResultsResultRank
{
position:absolute;
top:3px;
left:315px;
width:90px;
border:0px solid black;
}
.searchResultsResultSummary
{
position:absolute;
top:3px;
left:410px;
width:415px;
height:50px;
overflow:auto;
border:0px solid black;
}
.searchResultsResultSummaryContent
{
position:absolute;
top:15px;
position:relative;
top:20px;
left:10px;
width:815px;
height:70px;
overflow:auto;
border:0px solid black;
}

#sectionStoriesHeader
{
font-weight:bold;
text-transform:uppercase;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
text-align:center;
margin-bottom:10px;
}
#sectionStories a
{
color:red;
text-decoration:none;
}

#articleSummary
{
position:relative;
/*float:left;*/
/*clear:left;*/
/*width:475px;*/
}
#articleMainTitle, #articleDate, #articlebyLine
{
/*display:block;*/
position:relative;
margin-bottom:5px;
border:0px solid red;
/*width:475px;*/
clear:left;
}

#articleMainTitle
{
font-weight:bold;
font-size:16px;
}

#articleDate
{
font-size:13px;
text-transform:capitalize;
}

#articlebyLine
{
font-size:13px;
}

#articlePics
{
/*margin-bottom:25px*/
}

#articlePics img
{
border:1px solid #999999;
}

#articleContent
{
position:relative;
width:475px;
text-align:justify;
/*top:-492px;
top:-540px;*/


width:835px;
/*top:0px;*/
border:0px solid red;
}

#articleContent img
{
border: 1px solid black;
border-color:#CCCCCC;
}

#articleContent .articleActualImage
{
max-height:500px;
height:auto !important;
/*height:50px;*/

max-width:400px;
width:auto !important;
/*width:50px;*/
overflow:hidden;
}

#articleContentRightSection
{
float:right;
width:350px;
margin-left:10px;
clear:none;
}

.sectionItem
{
margin-left:3px;
margin-bottom:10px;
border:0px solid black;
width:340px;
position:relative;
left:0px;
top:0px;
width:98%;
height:111px;
overflow:auto;
}

.sectionItemImage
{
float:left;
margin-right:5px;
border:1px solid silver;
display:inline;
}
.sectionItemImage:hover
{
border:1px solid #FF6600;
}
.sectionItemText
{
/*position:absolute;
top:2px;
left:155px;*/
padding-right:10px;
border:0px solid blue;
}
.tabcontent span
{
text-align:center;
font-size:10px;
}

 

Your site times out without loading, server down?

Without looking at the page, though, I'll bet the problem is all that absolute positioning. Get rid of it.

cheers,

gary

 

Timed out? Wow! Thanks for that - by any chance how long did it take before it timed out?

PS: The absolute positioning occurs within relatively positioned items.

Any thoughts any body - I just looked at the site and I'm in Antigua. Actually the server is in Texas so you should have an easier time than me getting responses

thanks

 

I am convinced you have elements overlaying one another. I can't find it, without a major debugging effort; you're just nested way too deeply.[1] Firefox's web developer extension clearly shows the links covered by at least a headline and a dateline. IE does not deal with z-index correctly, which may explain why it's not affected. I'd lose the relative and absolute positioning.

You have a number of syntactical errors in the markup, one of which is a style element within the body. The styles should be ignored, but may or may not be, depending on the browser. That's one of the problems with browsers being fault tolerant.

The first time, the get timed out whenever the Firefox default value said it was tired of waiting. This time, it was not snappy, but loaded well enough.

cheers,

gary

[1] Get the Tidy extension for Firefox if you're on Windows, or get Tidy from W3 if you're on a modern OS, eg. Linux or OS X. Tidy will clean and validate your code, then pretty print it to file.

 

Wow - thanks for that - I'll check them out - 'preciate it

 

I've decided to put a height on that 'column' and let the text scroll across. I guess I can't go wrong there...

Thanks everyone - and I'll definitely update both the CSS and other stuff the validator told me to do - wow!

 

Ok - I made the visual changes - now I'm working on the other stuff - thanks alot for all of your help