No replies
soap_box
soap_box's picture
Offline
newbie
Last seen: 13 years 34 weeks ago
Joined: 2008-08-26
Posts: 2
Points: 0

Hi everyone, I'm new here so sorry if I get anything wrong.

I'm primarily a graphics person, coding isn't exactly my forte, so I've struggled and my CSS/html is messy. And I'm pretty sure I have that 'divitis' thing.

At the request of a client I made a sketchy cartoon-like design where the menu flowed out of the limitations of the main content of the site. The problem was I needed the overflowing part to move out of the window if the window/resolution was too small. I did this with this class for the div containing the menu:

.extendmenu {position:relative;left:-115px; width:398px;float:left; }

Which was working fine, until I realised I needed to add overflow: auto to my main container in order to make the news items stretch the page downwards in FF. Now the menu is getting cropped off (just in firefox).

You can see the problem if you view this page (work in progress - yes it's called that... it's not my site!) in both firefox and internet explorer, and note the menu buttons.

Here's (all) the CSS if it helps my cause:

body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #cecece;
	background-image:url(images/background.png);
	background-repeat:repeat-x;
	margin: 0;
	padding: 0;
	text-align: center; 
	color: #000000;
}
 
A:link {text-decoration: none; color:#3366FF;}
A:visited {text-decoration: none; color:#336699;}
A:active {text-decoration: none; }
A:hover {text-decoration: underline; color:#3366FF;}
 
A.blacklink:link {text-decoration: none; color:#000000;}
A.blacklink:visited {text-decoration: none; color:#000033}
A.blacklink:active {text-decoration: none; }
A.blacklink:hover {text-decoration: none; color:#3366FF;}
 
img {border:none;}
 
table tr td {	padding:0 0 0 0;
	margin: 0 0 0 0;}
 
.outercentral #container2 {
	width: 100%;  
	margin: 0 auto;
	border: none;
	text-align: left;
	}
 
	.outercentral #container {
	width: 909px;  
	margin: 0 auto;
	border: none;
	text-align: left;
		}
 
	.outercentral #mainContent {
	width: 909px;
	padding: 0 0 0 0; 
	margin: 0 auto;
}
 
#header {
height:167px;
text-align:left;
padding: 0 0 0 0;
background-image:url(images/headerbg.gif)}
 
#footer {
bottom:0px; position:relative;width:909px;height:124px;
background-image:url(images/footer.gif);background-repeat:no-repeat;
margin:0 auto; background-color:#cecece;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
padding:30px 0 0 0;
text-align:center;}
 
.video {text-align:center; padding:60px 0 0 50px;}
.generalblank {text-align:center; padding:60px 0 0 50px;position:absolute;width:500px;}
 
.left {
   float: left;
   padding: 37px 0 0 27px;
}
.right {
  float: right;
  text-align:right;
}
 
.bubbleballcontainer {
	width: 352px;}
.speech {
	width:202px;
	float:left;
	text-align:left;
	padding:0 0 0 0;
	margin: 0 0 0 0;}
 
.speech2 {
width:142px;
padding:65px 0 0 0;
text-align:center;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:18px;}
 
.ball {float: right;}
 
.repeat {background-image:url(images/repeatbg.gif);background-position:center;
background-repeat:repeat-y;overflow:auto;}
 
.site {background-image:url(images/mainbgshape.gif);
background-position:top; background-repeat:no-repeat;
min-height:712px;
padding:0px;}
 
.extendmenu {position:relative;left:-115px; width:398px;float:left; }
.mainmenu {position:relative; text-align:right;}
 
.titleprog {text-align:left; position:relative;float:left;left:-115px;overflow:auto;}
 
div.friends {font-family:Verdana, Arial, Helvetica, sans-serif;font-size:9px;text-align:center;padding:20px 0 0 75px;}
 
.575 {position:absolute;}
 
#pagehead {padding:0;margin:0;border:0;width:511px;}
 
.leftcellt {width:200px;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:22px;
font-weight:bold;}
 
p.status {font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;}
 
.newsitem {}
 
.newstop {background-image:url(images/newsbgt.gif);
			width:511px;
			height:11px;}
 
.newsmiddle {background-image:url(images/newsbgm.gif);
			 background-repeat:repeat-y;
			 padding:0;margin:0;width:511px;
			  	 }
 
.innernews {padding:15px 20px 5px 20px;
			font-family:Verdana, Arial, Helvetica, sans-serif;
			  font-size:11px;}
 
.newsbottom {background-image:url(images/newsbgb.gif);
background-position:top; background-repeat:no-repeat;
			width:511px;
			height:46px;}
 
.newshead {font-family:Georgia, "Times New Roman", Times, serif;font-size:17px;}
.byline {font-family:Geneva, Arial, Helvetica, sans-serif;font-size:9px;}

Also dont tell me off for using a table or class for divs Tongue i know it's bad practice, but unless its causing my problem I don't want to change it.

I would REALLY appreciate anyone telling me what I need to do to fix this, I'm not getting paid much for it and so far its taking a lot of hard work!
thanks
soap