Hello,
First of all this is my first try to create a standards compliant website using XHTML and CSS. Sadly I'm stuck working with Safari/Firefox on a Mac for the time being, so I really haven't got a clue why the menu and content are rendered wrong in IE for Windows.
In IE 6 the navigation bar is stuck in the top left corner and to top that atleast in IE 5.5 the content is shifted to the left from the header.
Here is the URL for the website:
<!-- m --><a class="postlink" href="http://www.inspiraatio.net/audor/index.html">http://www.inspiraatio.net/audor/index.html</a><!-- m -->
and he is an image how the website renders in Safari/Firefox.
<!-- m --><a class="postlink" href="http://www.inspiraatio.net/audor/safarifirefox.jpg">http://www.inspiraatio.net/audor/safarifirefox.jpg</a><!-- m -->
Any help how to fix these rendering issues in Win IE would help really much. I'd hate to revert back to using tables for layout, now that I've almost made the change for better.
Thank you in advance!
- nasuTry the following.
#header ul {
display:block;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: small;
position: relative;
top: 70px;
left: 305px;
}
*html #header ul {
margin-top: 70px;
margin-left: 305px;
}
The "* html" prefix in code makes standards-compliant browsers, such as Mozilla, Netscape and Opera, ignore the command; while Internet Explorer accepts and understands it. Internet Explorer does not interpret the relative positioning properly.Thank you Jona! That helped for the navigation problem, but I still have to figure out how to align the content to center in older browsers (that means older than IE 6). Does anyone have a suggestion?Add "text-align: center;" to the body tag CSS declaration, the realign the text left again where needed.
IE5.x centers block elements using text-align, but it's not according to the standards.
First of all this is my first try to create a standards compliant website using XHTML and CSS. Sadly I'm stuck working with Safari/Firefox on a Mac for the time being, so I really haven't got a clue why the menu and content are rendered wrong in IE for Windows.
In IE 6 the navigation bar is stuck in the top left corner and to top that atleast in IE 5.5 the content is shifted to the left from the header.
Here is the URL for the website:
<!-- m --><a class="postlink" href="http://www.inspiraatio.net/audor/index.html">http://www.inspiraatio.net/audor/index.html</a><!-- m -->
and he is an image how the website renders in Safari/Firefox.
<!-- m --><a class="postlink" href="http://www.inspiraatio.net/audor/safarifirefox.jpg">http://www.inspiraatio.net/audor/safarifirefox.jpg</a><!-- m -->
Any help how to fix these rendering issues in Win IE would help really much. I'd hate to revert back to using tables for layout, now that I've almost made the change for better.
Thank you in advance!
- nasuTry the following.
#header ul {
display:block;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: small;
position: relative;
top: 70px;
left: 305px;
}
*html #header ul {
margin-top: 70px;
margin-left: 305px;
}
The "* html" prefix in code makes standards-compliant browsers, such as Mozilla, Netscape and Opera, ignore the command; while Internet Explorer accepts and understands it. Internet Explorer does not interpret the relative positioning properly.Thank you Jona! That helped for the navigation problem, but I still have to figure out how to align the content to center in older browsers (that means older than IE 6). Does anyone have a suggestion?Add "text-align: center;" to the body tag CSS declaration, the realign the text left again where needed.
IE5.x centers block elements using text-align, but it's not according to the standards.