We have to develop a page, which is laid out using CSS. The following CSS guidelines have to be met:
-No css hacks?
-Must work with the following browsers:IE 6,7, FF2,3, Safari 3& Opera
-No change to HTML?
All relevant files attachd - HTML/CSS/screens.
We are having a allighnment issue, which we resolved using HACKS described. We need to resolve without hacks.
We have done a lot of research, so please quote only if you can solve the specific problem. IF YOU GET CLOSE TO THE SOLUTION IT'S OF NO USE TO US. IT HAS TO BE COMPLETE SOLUTION. SO YOU MUST HAVE GOOD KNOWLEDGE OF CSS.
Screen1-problem lower left box -Left margin is very wide in IE6 so we have used Css Hack for all the browser except IE6
margin-left:45px !important; /* it is a kind of css hack for IE7, ff2, ff3, Safari, Opera (windows and mac) */
margin-left:25px;/* this line is for IE6 */
Screen 2 -problem lower right box
Here top mrgn is very wide in IE6&7 so we have used following Css class to solve the problem which is a CSS hack
? ? ? ? ? //margin-top:-4px; /* it is a kind of css hack for IE*/
Screen 3- Problem of space between welcome text at top&top link box
Here space between welcome text and top link box is too much in IE6&7
? ? ? ? ? //margin-top:-20px;/* it is a kind of css hack for IE*/
Please find screen shots of HTML CSS file in attached ZIP file.