Working on my portfolio website at www.magalidb.0fees.net, I am facing challenges with the display in different browsers. The issue arises when only the bottom half of the content within a container is visible, while the top half remains out of view or misplaced at the top of the browser window. Check it out on Firefox, Opera, or Internet Explorer to see the problem firsthand.
Although there are validation errors present, they are not causing the displayed behavior issues. The site is built using HTML5 and incorporates both regular CSS and CSS3 styling elements.
The root cause appears to be related to vertical centering, as I have centered the content inside the container both horizontally and vertically.
To achieve horizontal centering, the following CSS code was used:
#container {
min-height: 100%; /* Ensures it reaches the bottom of the browser page */
width: 940px;
margin-left: auto; /* Horizontal centering */
margin-right: auto; /* Horizontal centering */
overflow: hidden;
overflow-y: hidden; /* Fix for vertical scrollbars in IE */ }
The CSS for vertical centering is as follows:
#valigner {
width: 720px;
position: absolute;
top: 50%;
bottom: 50%;
height: 500px;
margin-top: -45%;
margin-bottom: -45%;
margin: -40% 0 0 220px; }
The 220px offset prevents content from overlapping with the sidebar.
This is the structure of the code within the body of my index page:
<body>
<div id="container">
<div id="sidebar" class="left">
<?php include('sidebars/sidebar.php'); ?>
</div>
<div id="valigner">
<div id="sidebar-bottom" class="left"></div>
<div id="head" class="right"><h1>Magali's portfolio</h1></div>
<div id="main" class="right">
<div id="content-textbox">
<div class="intro-left">
Text here.
</div>
<div class="intro-right">
<img alt="Me!" class="resizeProfile" src="images/magali.jpg">
</div>
</div> <!-- Closing content-textbox -->
</div> <!-- Closing main -->
<div id="footer" class="right">
<?php include('language.php'); ?>
</div>
</div> <!-- Closing valigner -->
</div> <!-- Closing container -->
</body>
Please visit my website (http://www.magalidb.0fees.net). It displays correctly in Chrome and Safari, but not in Firefox, Opera, and Internet Explorer. Any assistance would be greatly appreciated.
!!!EDIT!!!
I've found the solution! Everything works perfectly now.
I have updated the CSS for both container and valigner sections with the following code:
#container {
position: absolute;
top: 50%;
width: 100%;
height: 1px;
overflow: visible;
}
#valigner {
position: absolute;
left: 50%;
width: 940px;
margin-left: -470px;
height: 540px;
top: -270px
}
The new code provides logical explanations for achieving horizontal and vertical content centering. After exploring alternatives, this method proved effective. I feel somewhat silly for ignoring it initially, assuming it was outdated...
I truly appreciate all your help! Thank you.
PS: I can't respond to my own post immediately due to forum restrictions. I will edit my question again after the allotted time to provide a proper answer. Sorry for any inconvenience!