Jump to content

IE7 issue with disappearing borders when zoom

factor5

By factor5
in HTML/XHTML

Recommended Posts

factor5 Newbie

factor5

Posted
Posted

Hi, allI have to build a very complex form layout and this layout should look same under IE6, IE7, FF2 and FF3. Now all is okay but found strange zoom behaviuor under IE7 where some of the borders that the form has just disappears or looks wider than they should (1px) when the page is zoomed (ctrl+mouse wheel up/down).Bellow is the sample test that triggers the behaviour:

<!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>		<TITLE>test layout</TITLE>		<style>		body {			font-size: 1em;		}		.wrapper {			padding: 1px 2px;			margin: 5px;		}		.formCell { 			border: 1px solid black;			float: left; 			height: 1.6em; 			text-align: left;		}		.firstCell {			clear: left;		}	</style>			</HEAD>	<BODY>		<div class="wrapper" style="width: 50em;">						<div class="formCell firstCell" style="width: 13em; border-width: 1px 0px 0px 1px;">r1c1</div>			<div class="formCell" style="width: 7em; border-width: 1px 0px 0px 1px;">r1c2</div>			<div class="formCell" style="width: 10em; border-width: 1px 0px 0px 1px;">r1c3</div>			<div class="formCell" style="width: 19em; border-width: 1px 1px 0px 1px;">r1c4</div>						<div class="formCell firstCell" style="width: 10em; border-width: 1px 0px 0px 1px;">r2c1</div>			<div class="formCell" style="width: 20em; border-width: 1px 0px 0px 0px;">r2c2</div>			<div class="formCell" style="width: 6em; border-width: 1px 0px 0px 1px;">r2c3</div>			<div class="formCell" style="width: 4em; border-width: 1px 0px 0px 1px;">r2c4</div>			<div class="formCell" style="width: 9em; border-width: 1px 1px 0px 1px;">r2c5</div>						<div class="formCell firstCell" style="width: 10em; border-width: 1px 0px 1px 1px;">r3c1</div>			<div class="formCell" style="width: 20em; border-width: 1px 0px 1px 1px;">r3c2</div>			<div class="formCell" style="width: 10em; border-width: 1px 0px 1px 1px;">r3c3</div>			<div class="formCell" style="width: 9em; border-width: 1px 1px 1px 1px;">r3c4</div>								</div>	</BODY></HTML>

I would appreciate any advice or suggestion on how to workaround this annoing behaviuor.

Link to comment
Share on other sites
Jerry62704 Member

Jerry62704

Posted
Posted
No, I haven't. What is the problem with tha one I gave in my first post?
1) It requires the person trying to help you to go to extra work.2) It is easier to use web tools (firebug, iedeveloper) from within a browser pointing to an existing page.You might want to clean up the following (but they are not related to the problem, it is just better to do it right than wrong):1) tags in lower case (DOCTYPE isn't a tag which is why it is in upper case).2) inpage styles are <style type="text/css">3) if you are going to the trouble of having a inpage style, don't put them on the elements (see below)4) add the universal reset (* {padding:0; margin:0;}) to the cssI see your inline styles are to make each div a different width and border style so it may be needed. Sigh. Can't have everything I guess.I like the addition classes. Once the pseudo classes are universal that will clean up a lot of the need for a "first" class.
Link to comment
Share on other sites
factor5 Newbie

factor5

Posted
  • Author
Posted
1) It requires the person trying to help you to go to extra work.2) It is easier to use web tools (firebug, iedeveloper) from within a browser pointing to an existing page.You might want to clean up the following (but they are not related to the problem, it is just better to do it right than wrong):1) tags in lower case (DOCTYPE isn't a tag which is why it is in upper case).2) inpage styles are <style type="text/css">3) if you are going to the trouble of having a inpage style, don't put them on the elements (see below)4) add the universal reset (* {padding:0; margin:0;}) to the cssI see your inline styles are to make each div a different width and border style so it may be needed. Sigh. Can't have everything I guess.I like the addition classes. Once the pseudo classes are universal that will clean up a lot of the need for a "first" class.
I'll try to get in mind your first advice (why is it so hard to just copy/paste the html in a text editor and save as html :) ).Now on the second part of your post:1. I'm using transitional docktype - so its okay.2. Agree :) 3. Those inline styles are found in a different stylesheet int the real code and this is not the couse of the problem.4. I've 4 different stylesheets: reset, typography, main and one for our beloved IE to fix some issues - what you suggest is made in the real code.I'm not sure I understand what exactly you mean here
I like the addition classes. Once the pseudo classes are universal that will clean up a lot of the need for a "first" class.
thanks for your time
Link to comment
Share on other sites
Jerry62704 Member

Jerry62704

Posted
Posted
I'll try to get in mind your first advice (why is it so hard to just copy/paste the html in a text editor and save as html :) ).Now on the second part of your post:1. I'm using transitional docktype - so its okay.2. Agree :) 3. Those inline styles are found in a different stylesheet int the real code and this is not the couse of the problem.4. I've 4 different stylesheets: reset, typography, main and one for our beloved IE to fix some issues - what you suggest is made in the real code.I'm not sure I understand what exactly you mean herethanks for your time
Browsers all have defaults (yes, they all have a default css style sheet) and many are different defaults. To build a page that will display similarly in different browsers, you have to "level the playing field" so they all behave more in sync (not the band). A big difference is how they pad things and how they apply margins.All browsers understand a universal "tag" - "*". Using it allows you to have one line of code instead of using the "padding:0;margin:0;" on every tag to reset them to a standard starting position. Then you build the page the way you want it to be displayed by putting the spacing you want, not what the browser wants.AFA the lower case tags that is required for xhtml, let me tell you a story. In the 70s I worked for an insurance company using PL/1, VSAM and IMS DB/DC. I noticed our dates were just the two year digits ("79" as opposed to "1979"). We were saving space as the disk packs were limited (3330s as I recall). Fast forward to 1998. Suddenly it was realized that all that data was going to be in trouble in two years. The 2000 bug. It could have been avoided and MANY hours of OT avoided if they had bought the 3350s for the greater space and started changing back then.Lower case tags will be required down the road. You don't want to be in a position of having to retro-fit all your pages. OTOH, it will work today and I'll bet for many years to come. User choice.
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...