This is my first post here, and I am not a professional (as I am sure a quick look at the code below would reveal). I am trying to adapt wiki software and skins to suit the needs of a project website. The site looks ok in all browsers except IE, and I was hoping that someone here could give me some tips on how the code can be adapted, or what a separate css sheet for IE could look like to achieve the same results.
An excerpt from the css file for English language:
/* body --------------------------------------------------*/ body { margin:0; padding:0 0px; font-family:Lucida Grande, Lucida Sans Unicode, Helvetica, Arial, sans-serif; font-size:75%; line-height:1.6em; text-align:center; } body {height:100%;} html {height:100%;}
#navigation .navlinks, .navres, .selflink li a { font-size:1em; letter-spacing:0px; } * html #navigation a {width:1%;}
The div classes login, pactions, sitelang and fontsize enclosed in #header, and with the div navres enclosed in navlinks. This is what the html template looks like:
Let me know if screenshots are helpful, and I will make some to post here. Hope there is a way to get the layout to work in IE as well without too much trouble.
<hr class=\"low\" /> <div id=\"footer\" class=\"clearfix\"> <!--PageFooterFmt--> <div class='lfloat' > <p><span style='font-size:83%'>This page was last updated on 24.11., at CET</span>
<body> <div id=\"pagecont\"> <!-- as the wrapper -->
<h1> <!--PageHeaderFmt-->
DIV's are great, its true, but other elements are just as good. Firstly you can style your <body> and <html> tags, then you can use a single wrapper for the whole site.
You could even use your html/body tags as the wrapping elements - although it works ok in FF, IE says no... :cry: so don't :)
Now im not sure if you want your nav bar on the right as high as that, but you can style your whole nav bar within the "ul" tags and create it as a list. This is because the UL tag is rendered the same as a DIV - a block element.
I would use the H1 tag for your sites main header, this also renderes like a DIV because it is also a block element. This means you can use it like you would use a div, but without the need for another div!
Problems mostly happen when code gets too heavy. The more code you have, the more chance there is for something not to work across the browsers - then when you have that problem, tring to fight your way through pages of code to make it work is a real battle. Because of the nature of CSS the problem might not even origionate from the place you are seeing it manifest, cause major hairloss for you :)
personally I would recode, styling what is there first and adding divs when needed. Here are some helpful links to give you an idea about what elements are what :)
This is my first post here, and I am not a professional (as I am sure a quick look at the code below would reveal). I am trying to adapt wiki software and skins to suit the needs of a project website. The site looks ok in all browsers except IE, and I was hoping that someone here could give me some tips on how the code can be adapted, or what a separate css sheet for IE could look like to achieve the same results.
An excerpt from the css file for English language:
The div classes login, pactions, sitelang and fontsize enclosed in #header, and with the div navres enclosed in navlinks. This is what the html template looks like:
Let me know if screenshots are helpful, and I will make some to post here. Hope there is a way to get the layout to work in IE as well without too much trouble.
Cheers,
-V
Site in MSIE 6.0
Site in MSIE 7.0
Site in FF 3 (as intended, almost)
Thanks :D
For example
you open 5 divs before you get to the header, personally I would change it to be like this:
DIV's are great, its true, but other elements are just as good. Firstly you can style your <body> and <html> tags, then you can use a single wrapper for the whole site.
You could even use your html/body tags as the wrapping elements - although it works ok in FF, IE says no... :cry: so don't :)
Now im not sure if you want your nav bar on the right as high as that, but you can style your whole nav bar within the "ul" tags and create it as a list. This is because the UL tag is rendered the same as a DIV - a block element.
I would use the H1 tag for your sites main header, this also renderes like a DIV because it is also a block element. This means you can use it like you would use a div, but without the need for another div!
Problems mostly happen when code gets too heavy. The more code you have, the more chance there is for something not to work across the browsers - then when you have that problem, tring to fight your way through pages of code to make it work is a real battle. Because of the nature of CSS the problem might not even origionate from the place you are seeing it manifest, cause major hairloss for you :)
personally I would recode, styling what is there first and adding divs when needed. Here are some helpful links to give you an idea about what elements are what :)
Block Elements
Inline Elements
I hope that helps as a starter...