Jump to content

More IE display issues


dlederman

Recommended Posts

First, thanks to everyone who responded last week and for the very helpful input. Here's another question:

 

My site is divided into frames (horizontal 93%/7% split). The bottom (7%) is a menu/navigation bar that stays constant. All works well in IE 8, Chrome, Firefox, and Safari. However, when viewed in IE 7 the bottom frame is compressed so that it is too narrow to see the links and in fact is hardly visible at all. IE7 does add a scroll bar at the right, but the effect is ruined and the navigation ability is at best compromised but is really lost. It's important to make this work because a lot of the people I want to reach use IE7. Can anyone suggest a way to eliminate this and get IE 7 to display the site the way it is intended? Obviously, without screwing up the depiction in the other browsers.

Link to comment
Share on other sites

First of all, I think you should move away from framesets and frames which are intensely disliked by web developers and are bad for SEO. They are almost completely out of date. Use divs and use position: fixed; bottom: 0; for the footer or use a "sticky footer" http://www.cssstickyfooter.com/

 

However, if you want to continue with the frames, you could try a conditional comment which only targets IE7 with a higher bottom frame (say 10%) and put the conditional comment in the frameset file. I've no idea whether this will work as I've never put one in a frameset, but it might. See http://www.javascriptkit.com/howto/cc2.shtml for conditional comments.

 

Edit: I've just done a quick test with this code whick makes the bottom frame higher only in IE7:-

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta name="keywords" content="Wickham, HTML, CSS">
<meta name="description" content="HTML and CSS Tutorial with examples">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Framesets</title>
</head>
<frameset rows="93%, 7%">

<!--[if ie 7]> <frameset rows="83%, 17%"> <![endif]-->

<noframes><body><p>Your browser doesn't support 
frames</p></body></noframes>
<frame src="collieindex120119.html">
<frame src="kon120126.html" name="footer">
</frameset>

</html> 

There does seem to be some spare space at the bottom of the IE7 window. The 83% and 17% don't use 100% of the height. I've tested on a IE7 computer and it's the same as using an IE9 computer with IE7 development tools so I think it's an IE7 quirk. <frameset rows="83%, *"> has the same result.

Edited by Wickham
Link to comment
Share on other sites

Thank you for the advice and suggestions. I tried the conditional IE comment and it improved things but not enough. I am sure the issue is with IE. The sticky footer was not exactly the look I am after but it may be useful in the future. I took your advice and am eliminating the framesets in favor of divisions. All is working well and the site displays well in IE, at least as I am developing it. One question: using divs I can create a footer with fixed position in the html file for the page. I have an external style sheet that styles, among other things, the look of links. I want the links in the footer to look different from the rest of the page. I have tried to achieve this with inline styling and adding the link attributes to the external style sheet. Neither one works but there must be a way.

 

 

First of all, I think you should move away from framesets and frames which are intensely disliked by web developers and are bad for SEO. They are almost completely out of date. Use divs and use position: fixed; bottom: 0; for the footer or use a "sticky footer" http://www.cssstickyfooter.com/

 

However, if you want to continue with the frames, you could try a conditional comment which only targets IE7 with a higher bottom frame (say 10%) and put the conditional comment in the frameset file. I've no idea whether this will work as I've never put one in a frameset, but it might. See http://www.javascriptkit.com/howto/cc2.shtml for conditional comments.

 

Edit: I've just done a quick test with this code whick makes the bottom frame higher only in IE7:-

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta name="keywords" content="Wickham, HTML, CSS">
<meta name="description" content="HTML and CSS Tutorial with examples">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Framesets</title>
</head>
<frameset rows="93%, 7%">

<!--[if ie 7]> <frameset rows="83%, 17%"> <![endif]-->

<noframes><body><p>Your browser doesn't support 
frames</p></body></noframes>
<frame src="collieindex120119.html">
<frame src="kon120126.html" name="footer">
</frameset>

</html> 

There does seem to be some spare space at the bottom of the IE7 window. The 83% and 17% don't use 100% of the height. I've tested on a IE7 computer and it's the same as using an IE9 computer with IE7 development tools so I think it's an IE7 quirk. <frameset rows="83%, *"> has the same result.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...