Click here to Skip to main content
15,397,981 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hello, I am trying to create a simple view using HTML and inline CSS which will work for Internet Explorer 11 users. Problem is, I have encountered two problems. On large screen (24 inch) everything looks like it should:
Large screen
...but on a smaller, 13 inch laptop screen top image is cut and the paragraphs below icons are not showing correctly:
Small screen

What I have tried:

My code:
HTML
<div style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: 'Avenir'" >
		<img src="@Model.BrandLogo" width="" height="" style="display: flex; align-items: center; justify-content: center; margin-left: auto; margin-right: auto;">
		<h1 style="font-weight: bold; font-size: 45px; ">
			@Model.Headline
		</h1>
		<div style="color: rgb(99, 102, 106); font-size: 22px;">
			@Model.TextBlock
		</div>
		<div id="icons" style="flex-direction: row;  display: flex; align-items: center; justify-content: space-around; margin-top: 3em; margin-right: 9em; margin-bottom: 3em; margin-left: 9em">
			<div>
				<img src="../../app/assets/images/svg/chrome.svg" alt="Chrome" width="100" height="100">
				<p style="text-align: center;">Google Chrome</p>
			</div>
			<div>
				<img src="../../app/assets/images/svg/firefox.svg" alt="Firefox" width="100" height="100">
				<p style="text-align: center;">Mozilla Firefox</p>
			</div>
			<div>
				<img src="../../app/assets/images/svg/edge.svg" alt="Edge" width="100" height="100">
				<p style="text-align: center;">Microsoft Edge</p>
			</div>
			<div>
				<img src="../../app/assets/images/svg/opera.svg" alt="Opera" width="100" height="100">
				<p style="text-align: center;">Opera</p>
			</div>
			</div>
		</div>


Does anyone knows how to fix it?
Posted
Updated 14-Jun-22 10:28am
Comments
Peter_in_2780 13-Jun-22 3:27am
   
Display the page in a window (NOT fullscreen) and watch how it behaves as you resize the window.
Use your browser's dev tools to see the dimensions of various elements, and play with the styling of them.
Richard Deeming 13-Jun-22 4:09am
   
NB: Internet Explorer is dead. You have two days until the final nail is placed in its coffin[^].

Rather than trying to write code for a deceased browser - which represents a serious security risk to your organisation - you should instead push to get everyone using a modern and still-supported browser.

If your company doesn't like the idea of moving away from a Microsoft product, then suggest Microsoft Edge. It's based on the same engine as Google Chrome, so it has the same support for modern standards.
Member 15341738 13-Jun-22 6:22am
   
We aren't using it, but this page is designated to be shown to the page's visitor who uses it.
Richard Deeming 13-Jun-22 6:25am
   
And? It's still a dead browser.

Surely it's better to concentrate on supporting current browsers, rather than worrying about cosmetic issues for dead ones?

1 solution

Why don't you use PHP for Designing Part?
   
Comments
Richard Deeming 15-Jun-22 4:12am
   
Why don't you avoid posting an irrelevant suggestion as a "solution"?

Delete this non-solution.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900