-
CSS IE positioning problem
Hello,
I am experiencing a CSS XHTML web design issue, which I believe is due to lack of compliance of IE. Essentially, the positioning of IE does not match that of Firefox and Safari.
Specifically, my problem can be visualized at https://www.calozgroup.org/, which displays well when opened in Firefox and Safari but suffers of header’s overlap when opened in IE.
Can anyone help? Thanks. Chris
My CSS file reads:
htlm, body { /* The default position value is “static.” */
position: relative;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
width: 80%; /* Overall width percentage of the window for all windows sizes. */
margin: auto; /* Required to adjust when the size of the window changes. */
font-family: Verdana, Helvetica, Arial, sans-serif;
background-color: Silver;
line-height: 125%;
color: navy;
font-style: normal;
}#bodycontent { /* Inheriting from body class in the XHTML files. */
position: relative;
top: -1.1em;
background-color: white;
width: 85%; /* Percentage of the body width, i.e. 0.85 * 0.8 = 68% of the overal area of the window.
The remaining percentage with respect to body for the navigation bar is (1-0.85)*0.8 = 12%.*/
left: 15%; /* This percentage corresponds to 100% of the body area – the width of the body contents = width of navigation bar. */
text-align: center;
/*top: -1.06em;*/
}#navigation {
position: absolute;
height: 100%;
width: 15%; /* The navigation bar area is 12% of the window’s width for all windows’ sizes */
background: #bed8f3;
font-weight: bold;
line-height: 200%;
}#navigation, li {
font-size: small;
list-style-type: none;
}#sitebranding h1 {
padding-top: 1.7em;
padding-bottom: 1.6em;
}#tagline p {
font-style: italic;
font-family: Georgia, Times, serif;
border-top: 0.3em solid #7da5d8;
border-bottom: 0.3em solid #7da5d8;
padding-top: .2em;
padding-bottom: .2em;
padding-left: .8em;
margin: 0;
background: #bed8f3 url(backgrounds/tagline-fade.jpg) repeat-y right;
}#search {
position: absolute;
top: 10.2em;
right: 5px;
font-size: x-small;
font-weight: bold;
}#standardtext {
padding-bottom: 10px;
margin-bottom: 20px;
width: 100%;
}h1, h2, h3 {
font-family: “Trebuchet MS”, Helvetica, Arial, sans-serif;
}h1 {
font-size: x-large;
background-color: navy;
color: white;
padding-top: 2em;
padding-bottom: .2em;
padding-left: .4em;
margin: 0;
background: navy url(backgrounds/Montreal_bg.jpg) repeat-y right bottom;
}h2 {
font-size: 130%;
font-weight: normal;
padding-top: 15px;
}h3 {
color: white;
font-size: small;
font-weight: bold;
}p {
font-size: small;
text-align: justify;
color: navy;
margin-left: 3em;
margin-right: 3em;
}a:link {
color: navy;
text-decoration: none;
}a:visited {
color: navy;
text-decoration: none;
}a:hover {
color: white;
background-color: navy;
text-decoration: none;
}a:active {
color: aqua;
background-color: navy;
text-decoration: none;
}img.feature {
float: left;
margin: 10px;
}img.research1 {
top: 150px;
left: 350px;
}img.research2 {
top: 360px;
left: 350px;
}#references {
font-size: small;
text-align: justify;
}#pub_menu {
width: 100%;
color: #FF0000;
}#gallery_pictures {
position: relative;
left: 1000px;
padding-bottom: 10px;
margin-bottom: 20px;
width: 100%;
}#members_table {
width: 100%;
font-size: 75%;
text-align: justify;
color: navy;
}#openings_table {
width: 75%;
right: 0%;
font-size: 75%;
color: navy;
}#contact_table {
width: 100%;
font-size: 75%;
text-align: justify;
color: navy;
} -
2 Replies
-
I can’t find the exact point, but I can see a lot of bad habits applied here.
Don’t mess with CSS “on the fly”. Try to have a plan. Make your design in Photoshop or Illustrator and define your rules before going into actual code.
Try using a single unit measurement. Ems, pixels, percentage, etc. Right now you have mixed units and that makes it difficult to debug.
Also, I think your main problem is you have a defined width for your navigation bars and then your content gets bigger in IE. It’s better practice to have flexible layouts so if the content changes the layout does too.
If you really want to have a fixed width in an element, then don’t mix unit measurements (I know, I already told that but I think this is the main issue here).
Go and clean your code. Define your font size from the beggining (the body) and try don’t having repetitive rules defining the same element more than once.
Sorry I can’t give you a simple fix. Also I know I shouldn’t assume how you are designing. You know your criteria, but if it’s not working, well, don’t use it.
So, use a single unit and see if that works.
I hope this helps.
-
Of course there are individual browser differences in rendering css, and in compliance with css standards. IE comes in different versions – which again don’t all render the same.
You can help yourself and minimize your problems if you try to stick to standards – compliant code. The worldwide web consortium kindly has a code validator for html online, free, at https://validator.w3.org (and another for css at https://jigsaw.w3.org/css-validator/ ) so you can check. Your linked page fails on html compiance (20 errors, when I looked today).
Some browsers (including IE) will render pages along their programmers’ understanding of along html / css guideline so long as the pages are standards compliant – they call this “standards mode”. But if a page is not correct html, the browser may change to “quirks mode”, where the programmers are trying to guess your intent. This can produce even bigger discrepancies between browsers and platforms.
Another resource that might help you is https://browsershots.org/ which will show you a target page rendered in /on multiple browsers and platforms.Btw that looks like a lot of css for one small page!
as If sites don’t achieve validation, many browsers
Reply to this Discussion! Login or Sign Up