SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2005
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE7 Browser Scaling Problem

    Ok guys, when i scale this template larger in every browser it scales up using a central position until it reaches the left side of the browser due to the "margin: 0 auto;" i have set.

    When i scale up in IE7 however it moves towards the right of the page straight away instead of scaling up using in a central position before it hits the left side of the browser and no longer can.

    Can anyone tell me if there is a way of fixing this, as i have found this example where in ie7 it works and although this example has a fixed width on it - the holder once you increase the size (in ie7) stays central instead of my layout veering right. http://www.csszengarden.com/?cssfile...197.css&page=0

    I'm using the ctrl button alongside the mouse scroller to scale up and down the site template in the browser. I know it probably seems a bit fussy what i am trying to find out but im just wondering if this is meant to happen...

    cheers, dave

    Here the code for you to see what i mean.

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style>
    
    /* Layout & Position */
    body {}
    * {padding:0; margin:0; }
    
    #testHolder {font-size:100%; position: relative; font-size:1em; width:51.875em; background:#CCCCCC; margin:10px auto;}
     
    #testHolder #testHeader {}
    #testHolder #testHeader #top {background:#9999FF}
    #testHolder #testHeader #middle {clear:both; background:#99CC33;}
    #testHolder #testHeader #middle #left {float:left; width:24.9em; background:#00CCFF}
    #testHolder #testHeader #middle #right {float:right; width:24.9em;  background:#00FFCC}
    #testHolder #testHeader #bottom {background:#9999FF;}
    
    #testHolder #testContent {background:#399993}
    
    #testHolder #testFooter {background:#993399}
    
    /* Clearfix for floating layouts */
    .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden;}
    .clearfix {	display:inline-block;}
    
     /* mac hide \*/
    	* html .clearfix {height: 1%;}
    	  .clearfix {display: block;}
     /* End hide */
     
     /* Clearfix for floating layouts */
    
    
    /* Presentation Styling */
    
    
    </style>
    <link rel="stylesheet" href="http://www.efinancialcareers.de/035/partner.css">
    </head>
    
    <body>
    	<div id="testUk">
    		<div id="testEditorialMain">
    			<div id="testHolder" class="testGenericStyles">
    				<div id="testHeader" class="clearfix">
    					<div id="top">info</div>
    					<div id="middle" class="clearfix">
    						<div id="left">
    							<h1>hehe</h1>
    						</div>
    						<div id="right">
    							hello
    						</div>
    					</div>
    					<div id="bottom">
    						nav				
    					</div>
    				</div>
    				<div id="testContent">
    					content
    				</div>
    				<div id="testFooter">
    					footer
    				</div>
    			</div>
    		</div>
    	</div>
    </body>
    </html>

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    There is no relation of body and div size, with em's this is controlled by the font size of both

    PS I don't know why you use ID's in the first place , they are unique so there is no trouble finding/or get the proper CSS to it, why give them more/overriding power #x#y#z ?????
    and why the clearfixes all over the place ???
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style>
    /* Layout & Position */
    * {padding:0; margin:0; }
    
    body{width:100&#37;;font-size:75%;}
    
    div{font-size:1em;}
    
    #testHolder {position: relative; font-size:1em; width:51.875em; background:#CCCCCC; margin:10px auto;}
     
    #testHeader {}
    #top {background:#9999FF}
    #middle {clear:both; background:#99CC33;}
    #left {float:left;width:24.9em;background:#00CCFF}
    #right{float:right; width:24.9em;  background:#00FFCC;}
    #bottom {background:#9999FF;}
    
    #testContent {background:#399993}
    
    #testFooter {background:#993399}
    
    /* Clearfix for floating layouts */
    .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden;}
    .clearfix {display:inline-block;}
    
     /* mac hide \*/
    * html .clearfix {height: 1%;}
      .clearfix {display: block;}
     /* End hide */
     
     /* Clearfix for floating layouts */
    
    
    /* Presentation Styling */
    
    
    </style>
    
    </head>
    <body>
    <div id="testUk">
    
    <div id="testEditorialMain">
    
    <div id="testHolder" class="testGenericStyles">
    
    <div id="testHeader" class="clearfix">
    
    <div id="top">info</div>
    
    <div id="middle" class="clearfix">
    
    <div id="left"><h1>hehe</h1></div>
    
    <div id="right">hello</div>
    </div>
    
    <div id="bottom">nav</div>
    
    </div>
    
    <div id="testContent">content</div>
    
    <div id="testFooter">footer</div>
    
    </div>
    </div>
    </div>
    
    
    </body>
    </html>

  3. #3
    SitePoint Zealot
    Join Date
    Dec 2005
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, thanks but it doesn't seem to fix the initial problem i spoke of.

    Its an early prototype i've knocked up so its not the cleanest. I'm specifically trying to avoid using body styling as incases the site gets mashed up with other sites and i want to minimise clashing styles and layout anomolies. Therefore the extra id tags are in there so i can style using specificity and avoid problems.
    (As i said its a prototype im testing.)

    thanks dave

  4. #4
    SitePoint Zealot
    Join Date
    Dec 2005
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, i have found the reason for this, its because the div which is centered using the "margin:0 auto" style is inside two divs i plan to use for tagging (instead of the container usually being the first div in the browser). Once these two divs are removed it centers on magnification in ie7 like the cssZenGarden example i cited.

    I change these two divs to inline etc and the problem still happens, is there any way i can get the page when magnifying to behave like these divs arent there without removing them pls.

    cheers dave.

  5. #5
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Dave,
    IE7 doesn't zoom like FF. How IE7 zooms is it acts like your page is like a big image. So when you zoom in with IE7, it is like you are using MSFT Magnifier or other screen enlargement software. Whereas FF affects the text elements only (and if their backgrounds, divs,etc can grow). To see what I mean, hop on cnn.com, zoom in some on both browsers, watch all elements especially their logo
    Ryan B | My Blog | Twitter

  6. #6
    SitePoint Zealot
    Join Date
    Dec 2005
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks im quite aware of the differences in scaling between browsers such as ff and ie. Its not an issue in comparison between the two browsers its an issue when you scale on ie7 with a centralised (margin: 0 auto; ) division.

    I apply this style to the outer most div and it works as i would have expected. I then using another test page apply this to a div this time nested inside an outer most div with no values (which i have there for different reasons), now the scaling doesn't react in the same way.

    I think you'll find with scaling these two test pages scale differently to each other. Who knows why?

    thanks dave.

  7. #7
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Dave,
    I honestly do not know what you are talking about. In your original post you saw that the zen garden layout has fixed and doesn't move. If you look at the link list, it doesn't move because it has an absolute position. My guess is the reason why the container doesn't move is because it is kind of fixed in place.
    Ryan B | My Blog | Twitter


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •