container overlaps upon text resize in Firefox

eksquall · #1 Aug 1st, 2006, 00:04

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 · #2 Aug 1st, 2006, 00:42

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

You have element(s) wrapped in a element. This is not allowed.

 elements can contain elements but not the other way around.

eksquall · #3 Aug 1st, 2006, 01:34

i fixed the 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 · #4 Aug 1st, 2006, 17:25

overflow:hidden; not work?

moojoo · #5 Aug 1st, 2006, 17:26

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

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
DIV's overspilling container DIV in Firefox	Craigj1303	Web Page Design	4	May 17th, 2007 00:46
Container Problem in FireFox	asengh	Web Page Design	8	Dec 12th, 2006 17:23
Text floating out of the container in FF	Sporky	Web Page Design	3	Dec 8th, 2006 13:07
Container size difference in Explorer vs. Firefox.	Chris Passeno	Web Page Design	4	Dec 21st, 2005 15:10
CSS Expanding Border with Text Resize	melc26	Web Page Design	1	Aug 3rd, 2005 04:27

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
container overlaps upon text resize in Firefox