CSS height and positioning for IE

[vidarg]

Hi!

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:

Code:

/* 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%;}

/* header
————————————————–*/
#header {
height:100px;
_height:auto;
_position:fixed;
width:600px;
float:right;
padding:4px 0px 0 0px;
}

#header .sitelang ul {
margin:0px;
padding:0px;}

#header .sitelang li {
margin:2px 0 0 0px;
padding:0px;
float:left;
font-size:1.2em;
line-height:0.85em;
list-style-type:none;
white-space:nowrap;}

#header .sitelang li a {
padding:0px 5px 4px 5px;
background:#444444;}

#header .fontsize ul {
margin:0px;
padding:0px;}

#header .fontsize li {
margin:-10px 0 0 0px;
padding:0px;
font-size:0.8em;
font-weight:bold;
list-style-type:none;}

#header .fontsize li a {
display:block;
margin:0px 0 0 0;
height:2.2em;
width:1em;
float:left;
line-height:1em;
text-align:center;
color:white;

background:#cccccc;
border-right:1px solid #eCeCeC;
}

#header .login {
margin:0px 0px;
width:100%;
list-style-type:none;}

#header .login li {
float:right;
margin:0px;
padding:0px;
padding-right:0px;
list-style-type:none;
white-space:nowrap;}

#header .login ul {
margin:0;
padding:0;
list-style-type:none;
}
#header .login li a {
display:block;
padding:0 5px 0px 5px;
clear:right;
line-height:1.6em;
background:#444444;
border-left:1px solid #eCeCeC;
list-style-type:none;
}

#header .pactions li {float:right;}

#header .pactions li a{
display:block;
padding:0 5px 1px 5px;
color:white;
clear:right;
font-size:0.95em;
background:#cccccc;
line-height:1.7em;
border-left:1px solid #eCeCeC;
list-style-type:none;
white-space:nowrap;
}

#header .pactions ul li {
list-style-type:none;}

#header .pagegroup {
padding: 14px 0 7px;
display: block;
}
#pagetitle {
float:left;
clear:both;
margin:-77px 0px 0 65px;
}

#pagetitle h1 {
font-size:1.1em;
line-height:1.2em;
font-weight:normal;
}

#sitelogo {
}
#header .sitetitle {
font-size: 22px;
width:600px;
line-height:1.1em;
padding: 60px 0 0px 0px;
text-align: left;
}

/* navigation
————————————————–*/
#navigation {
height:1.6em;
line-height:1.6em;
width:600px;
clear:right;
float:left;
_line-height:0px;
}
#navigation ul {
margin:0px;
padding:0px;
}

#navigation li {
float:left;
margin:0px;
padding:0px;
padding-left:0px;
list-style-type:none;
white-space:nowrap;
}

#navigation .navres li {
border-right:0px solid;
float:right;
margin:0px;
padding:0px;
padding-left:0px;
list-style-type:none;
white-space:nowrap;
}

#navigation .navlinks li a {
display:block;
padding:0 5px 0 5px;
border-left:1px solid #eCeCeC;
border-bottom:1px solid #eCeCeC;
}

#navigation .navres a {
float:right;
display:block;
padding:0 5px 0 5px;
background:#cccccc;
border-left:1px solid #eCeCeC;
border-bottom:1px solid #eCeCeC;
}

#navigation .navres ul {
float:right;
display:block;
padding:0 0 0 0;
background:#cccccc;
border-left:1px solid #eCeCeC;
border-bottom:1px solid #eCeCeC;
}

#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:

Code:

{$Titlespaced}

---

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

[vidarg]

Some screenshots to illustrate:

Site in MSIE 6.0
Site in MSIE 7.0
Site in FF 3 (as intended, almost)

[vidarg]

Here’s the code for the page as displayed:

Code:

• Login to edit

• +
  A
• –
  A

• ?????

Reconstruction of Mohajareen, Nahr al-Bared

en_title

• Home
• Background
• Project Goals
• Newsblog
• Get Involved

---

Project Goals

Test image, height should be reduced.

Result 1

text…

Result 2

text…

Result 3

text…

---

This page was last updated on 24.11., at CET

Blix-1.0.0, pmwiki-2.2.0-beta62

Donor

• linktext

Implemented by

• linktext
• linktext

Contributors

• • Test1
• • Test2

Where is Mohajareen?

Useful Links

• • Lebanon Support
• • IDMC on Lebanon
• • Link 3
• • Link 4

edit SideBar

mohajareen.net © NRC (Norwegian Refugee Council) 2008

[Author]

Posts