Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    IE8 problem with DIVs

    I have a page that is not working the way I need it to in IE8.

    I have 2 vertical DIVs. The one on the left will be used for navigating. I'm using a navigation tree and the DIV can grow/shrink depending on the text of the link. The DIV on the right contains an iFrame. I want the iFrame to fill the entire remaining screen imediately to the right of the nav tree. If the browser window is too small then there should be scrollbars. I don't want the DIV to wrap underneath the nav tree.

    My code has 2 problems. The DIV on the right is lined up on the right side of the screen. It should be up against the right edge of the navigation DIV. The width is also not filling out the available space. It should fill from the navigation DIV to the edge of the screen. There should also be no wrapping of the DIVs if the screen is made smaller.

    Code:
    html
    {
    	height:100%; 
    }
    
    body 
    { 
    	margin:0; 
    	padding:0; 
    	min-height:100%; 
    	height:auto; 
    	height:100%; 
    } 
    
    #divnavColumn 
    {
    	min-height:100%; 
    	height:auto; 
    	height:100%; 
    	margin: 0 px;
    }
    
    .navColumn 
    {
    	BACKGROUND-COLOR: #4863a0; 
    	PADDING-RIGHT: 8px; 
    	FLOAT: left; 
    	min-height:100%; 
    	height:auto; 
    	height:100%; 
    	margin: 0 px;
    }
    
    #contentColumn 
    {
    	WIDTH: auto; 
    	FLOAT: right; 
    	min-height:100%; 
    	height:auto; 
    	height:100%; 
    	margin: 0 px;
    }
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
    <HTML xmlns="http://www.w3.org/1999/xhtml">
    <HEAD id=ctl00_Head1>
    <META content="text/html; charset=utf-8" http-equiv=Content-Type>
    <LINK 
    rel=stylesheet type=text/css href="Help/StyleSheet.css" media=screen>
    
    <META name=GENERATOR content="MSHTML 8.00.7601.17824"></HEAD>
    <BODY>
    <FORM>
    
    <DIV id=ctl00_divnavColumn class=navColumn>
    	Row 1<BR>
    	Row 2
    </DIV>
    
    <DIV id=contentColumn>
    	<IFRAME id=ContentIFrame height="100%" src="Help/WA21F1P21_ALT.htm" frameBorder=0 width="100%"></IFRAME>
    </DIV>
    
    </FORM>
    </BODY>
    </HTML>
    Thanks for any help

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,307
    Thanks
    23
    Thanked 612 Times in 611 Posts
    You say you have a div to the left and one to the right, wrong.
    You have two divs one on top one below. The second div can not appear with any other div since you have width="100%" in the definition.

    Your top div has id=ctl00_divnavColumn, but you never use that for styling. You do have #divnavColumn in the style sheet. (Is that a mistake?)

    You use
    height:auto;
    height:100%

    height:auto; is the default for height and does not need to be stated. And why state it if your going to change it to height:100% in the next line?

    To see your divs side by side change the iframe to width="50%" and you might want to consider the use of floats.

  • #3
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the reply

    What do you mean I should consider using floats? navColumn and contentColumn both have Float:left and float:right in them.

    Currently if I run this in IE8, navColumn appears on the left and contentColumn appears on the right the way I want it. The problem is contentColumn isn't wide enough and it lines up all the way to the right not up against the navColumn. I also tried setting them both to Float:left but contentColumn is still only maybe 200px wide instead of filling the remainder of the screen. Changing the iFrame width=50% only made if half the size (100px).

    You are correct about ctl00_divnavColumn that was a mistake. I changed it to divnavColumn in the HTML.

    This is how I want it:
    IE8 problem with DIVs-correct.png

    This is how it currently looks in IE8 (at width 50%)
    IE8 problem with DIVs-wrong.png

    Thanks

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,307
    Thanks
    23
    Thanked 612 Times in 611 Posts
    I do not have access to Help/WA21F1P21_ALT.htm so I have no idea what it's dimensions are. So I used yahoo.com, it's 960px wide. So that's the dimensions used, you might want to change it.

    Some place in the code we have to state at lest one dimension so the percentage has a base. I didn't use percents, it's all in pixels. Window size is 1060px across. The frame is 960pxs across. That left 100px for the nav div and the scroll bar.

    That's really not enough for a nav column.......

    Code:
    <!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3c.org/tr/1999/rec-html401-19991224/loose.dtd">
    <html>
    <head>
    <meta content="text/html; charset=utf-8" http-equiv=content-type>
    <meta name=generator content="mshtml 8.00.7601.17824">
    <style type="text/css">
    html, body
    {
    	margin:0;
    	padding:0;
    	height:100%;
    	width: 1060px;
    }
    #nav_column
    {
    	background-color: #4863a0;
    	width: 50px;
    	height: 650px;
    	padding-left:10px;
    	float: left;
    }
    #content_column
    {
    	float:right;
    }
    </style>
    </head>
    <body>
    	<div id=nav_column>
    		row 1<br>
    		row 2
    	</div>
    
    	<div id=content_column>
    		<iframe id=contentiframe height="650px" width="990px;" src="Help/WA21F1P21_ALT.htm" frameborder=0></iframe>
    	</div>
    </body>
    </html>
    P.S. Yahoo will not let it's page appear in an iframe. That's why it's not in the above code.


  •  

    Posting Permissions

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