All geek questions in one place

Compatibility Issues with IE7?

I am working on a site and have compatibility issues with IE7 (not working) versus IE8 / Firefox (working). Can someone take a look at the following CSS and screenshots and tell me why my site is corrupted in IE7 and what can I do to fix it?

This site is here: CollectionTree

and my css part for this view

#landingMainContainer { padding-left:10px; margin: 0 auto; text-align: center; min-height: 400px; width: 960px; } .landingTop { width:100%; min-height:400px; background:url('/Content/Images/BG_gray1_v2.png') no-repeat; } .landingTopInfo { padding-top:10px; text-align:left; width:50%; padding-left:15px; } .landingTopInfoText { padding-left:20px; padding-top:20px; float:left; color:#000000; font-size:20px; } .landingTopInfoTextTitle { font-size:26px; text-align:left; padding-left:40px; padding-top:10px; clear:left; color:#209202; } .landingTopInfoTextContents { font-size:12px; padding-left:40px; padding-top:10px; clear:left; color:#000000; } .landingTopInfoSignUpSection { clear:left; float:left; padding-left:40px; padding-top:30px; } .landingTopInfoSignUpSectionText { padding-left:10px; padding-top:10px; float:left; font-weight:normal; } .landingTopInfoImage { float:right; background:url('/Content/Images/Dashboard_mockup.png') no-repeat; width:40%; height:290px; } .landingBottomInfo { width:100%; float:left; padding-left:20px; color:#000000; } .landingBottomInfoSection { float:left; width:30%; text-align:left; font-size:10px; font-weight:normal; padding-left:20px; } .landingBottomInfoSectionText { width:66%; float:right; text-align:left; } .landingBottomInfoSectionTextFirstLine { font-size:11px; font-weight:bold; } .landingBottom { width:100%; min-height:150px; } .landingBottomLeftSection { background:url('/Content/Images/BG_gray2_v2.png') no-repeat; width:60%; min-height:140px; float:left; } .landingBottomLeftSectionTitle { font-weight:normal; font-size:19px; color:#FFFFFF; } .landingBottomLeftSectionImage { float:left; padding-left:40px; padding-top:10px; } .landingBottomLeftSectionText { padding-right:100px; padding-top:10px; float:right; } .landingBottomLeftSectionTextTitle { font-weight:bold; color:#000000; font-size:14px; } .landingBottomLeftSectionTextSentence { text-align:left; color:#000000; padding-top:10px; padding-left:15px; font-weight:normal; font-size:10px; } .landingBottomRightSection { padding-top:7px; width:35%; min-height:140px; float:right; } .landingBottomRightSectionTitle { text-align:left; color:#209202; font-weight:bold; } .landingBottomRightSectionText { width:70%; color:#000000; font-size:10px; font-weight:normal; padding-top:15px; text-align:left; float:left; } .landingBottomRightSectionTextLink { text-align:left; padding-top:20px; } a.landingBottomRightSectionTextLink:link { color: #3399FF; text-decoration: none; font-weight:bold; font-size:11px; } a.landingBottomRightSectionTextLink:active { color: #3399FF; text-decoration: none; font-weight:bold; font-size:11px; } a.landingBottomRightSectionTextLink:visited { color: #3399FF; text-decoration: none; font-weight:bold; font-size:11px; } a.landingBottomRightSectionTextLink:hover { color: #3399FF; text-decoration: underline; font-weight:bold; font-size:11px; } .landingBottomRightSectionImage { width:30%; float:right; }

Here is a screenshot of the correct website display in IE8: alt text
Full image

Here is a website crippled in IE7: alt text
Full image

What do I need to change using my CSS so that my page looks “normal” in IE7 as well as in IE8?

+3
source share
4 answers

Start by adding float: left to.landingTopInfo:

 .landingTopInfo{ float: left; padding-top:10px; text-align:left; width:50%; padding-left:15px;}

This will lead you to the stadium.

For the .landingBottomInfo area, I would pull the image and text elements (.landingBottomInfoSectionText) to the left and set the left pad to fit.

+3
source

I think this is due to the use of percent based width on a floating element.

IIRC, IE7 analyze percentage-to-pixel calculations differently, which can lead to the overall width being> 100%.

+1
source

remove the center of alignment (otherwise align left to landingMainContainter ) and then .landingTopInfo left.

 #landingMainContainer { padding-left:10px; margin: 0 auto; **text-align: left;** min-height: 400px; width: 960px; } .landingTopInfo { padding-top:10px; text-align:left; width:50%; padding-left:15px; **float:left;** }
0
source

Give landingTopInfo a padding-top: 10px;

Give landingTopInfoText a float: left; and change its padding-top to 10px

Give your monitors, images "compare" and "view" each float: left;

0
source

Source: https://habr.com/ru/post/1346272/

More articles:


All Articles