container overlaps upon text resize in Firefox

[eksquall]

hey guys , i decided to use px for my text size so that it doesnt get resized, however it doesnt get resized in IE only , in Firefox it does get resized when u try to increase/decrease the text size.

But the problem is that when u make the text really big , it goes out of the container its supposed to be in while in Firefox. Also sometimes on IE the same thing happens without resizing the text size and i have to refresh the page to make it go normal. Any way to make it so the #content container doesnt overlap upon resize or any other situation?

please try resizing the text in Firefox and in IE ,from the default page goto roster and back again to News page , u will see that the container is out of place. (the #content div has a red border)

http://t-ek.awardspace.com


my css code:

Code: Select all

body  {background-image:url(images/bg.gif) } 




#maincontainer   { 
      position:absolute; 
      top:0px; 
      left:0px; 
      margin-left:13%; 
      width:780px; 
      border:solid; 
      border-color:green; 
      border-width:0px; 
      height:600px; 
      background-color:#757575; 
      } 
       
#borderleft      { 

      border:solid; 
      border-color:white; 
      border-width:0px; 
      width:16px; 
      background-image:url(images/leftborder.jpg); 
      background-repeat:repeat-y; 
      background-position:left; 
      height:100%; 
       
            } 
             
#bartop    { 
      position:absolute; 
      top:0px; 
      border:solid; 
      border-color:blue; 
      border-width:0px; 
      width:748px; 
      margin-left:16px; 
      height:24px; 
       
       
      } 

#borderright      { 
      position:absolute; 
      border:solid; 
      border-color:white; 
      border-width:0px; 
      width:16px; 
      background-image:url(images/rightborder.jpg); 
      background-repeat:repeat-y; 
      background-position:right; 
      height:100%; 
      top:0px; 
      right:0px; 
       
            } 
             
#logo img    { 
      width:748px; 
      height:152px; 
       
      } 


#logo      { 
       
      position:absolute; 
      top:24px; 
      left:16px; 
      border:solid; 
      border-color:red; 
      border-width:0px; 
      width:748px; 
      margin-top:-3px; 
       
      } 
       
#nav       { 
      position:absolute; 
      top:176px; 
      left:16px; 
      border:solid; 
      border-color:yellow; 
      border-width:0px; 
      height:25px; 
      width:748px; 
      margin-top:-2px; 
      padding-left:1px; 
      } 


#filler1      { 
      position:absolute; 
      left:0px; 
      width:3px; 
      height:25px; 
      display:inline; 
      border:solid; 
      border-color:red; 
      border-width:0px; 
       
      } 


#news      { 
      position:absolute; 
      left:3px; 
      width:93px; 
      height:25px; 
      display:inline; 
       
      } 

#roster      { 
      position:absolute; 
      left:96px; 
      width:78px; 
      height:25px; 
      display:inline; 
    
      } 


#servers      { 
      position:absolute; 
      width:82px; 
      height:25px; 
      display:inline; 
      left:174px; 
      } 

#cs      { 
      position:absolute; 
      width:237px; 
      height:25px; 
      display:inline; 
      left:256px; 
      } 


#matches   { 
      position:absolute; 
      width:80px; 
      height:25px; 
      display:inline; 
      left:493px; 
      } 

#files      { 
      position:absolute; 
      width:76px; 
      height:25px; 
      display:inline; 
      left:573px; 
      border:solid; 
      border-color:red; 
      border-width:0px; 
      } 
       
#links      { 
      position:absolute; 
      width:95px; 
      height:25px; 
      border:solid; 
      border-color:red; 
      border-width:0px; 
      left:649px; 
      display:inline; 
      }       

#barbottom   { 
      position:absolute; 
      left:16px; 
      top:200px; 
      width:748px; 
      border:solid; 
      border-color:red; 
      border-width:0px; 
    
      } 
       
#mcontent      { 
       
      position:absolute; 
      top:216px; 
      bottom:33px; 
      left:16px; 
      width:748px; 
      border:solid; 
      border-color:blue; 
      border-width:0px; 
      background-color:#757575; 

       
      } 
#content         { 
       
      padding-top:10px; 
      position:absolute; 
      bottom:0px; 
      top:0px; 
      border:solid; 
      border-color:red; 
      border-width:1px; 
      width:748px; 
     
       
       
      }    

#barlast   { 
      position:absolute; 
      left:16px; 
      bottom:0px; 
      width:748px; 
       
       
      }    


.textmain   { 
      font-family:Arial,Verdana,"Arial Black","Helvetica Bold",sans-serif; 
      font-weight:bold; 
      font-size:12px; 
      color:white; 
      white-space:pre; 
      text-align:justify; 
      word-spacing:1px; 
      } 
       

       

a:link {border-width:0px}

[ukgeoff]

Could be wrong but I suspect it's to do with your faulty coding.

You have <p> element(s) wrapped in a <span> element. This is not allowed.

<p> elements can contain <span> elements but not the other way around.

[eksquall]

i fixed the <p> tag locations but still the problem exits.

could it be because im using text-wrap: pre ?

im sure its something to do with my #content div and #textmain coding

plz help

[moojoo]

overflow:hidden; not work?

[moojoo]

Woops damn quick post. Overflow hidden will allow the resize, keep the containing divs proportions and auto generate a scroll bar as needed.