CSS Layout Problems (with pictures and code) in IE

Answer 1

Is it ie6 specific or all ie versions? Note ie6 & early ie7 versions do not understand position fixed...more

Answer 2

It may be silly to ask but does your HTML validate? What about your CSS? I have often found that when experiencing weird or unexpected behavior in different browsers that it is because I am doing something invalid in HTML/CSS. It may not be your problem but it is probably worth a quick check

Answer 3

Hi,

Try the below code.

1)To correct the alignment of the login box.

HTML:

<div id="header-navbar">
 <div id="header-login">login content goes here</div>
</div>

CSS:

#header-navbar {
background:#000000 none repeat scroll 0 0;
height:50px;
line-height:50px;
border-top:2px solid #FFFFFF;
width:100%;
position:relative;
}

#header-login {
position:absolute;
height:12px;
top:3px;
right:5px;
text-align:left;
color:#FFFFFF;
}

2) To place the buttons exactly on left side of the page

After ending the header part of the layout. Introduce a new container name the id as #main_content{}

write the below codes.

HTML:

<div id="main_content">
 <div id="tab_projects">insert the project tab image</div>
 <div id="tab_blog">insert the blog tab image</div>
 <div id="content">some content goes here</div>
</div>

CSS:

#main_content{
position:relative;
text-align:left;
}

#content{
padding:0 0 0 50px;
}

#tab_projects{
position:absolute;
top:10px; /* adjust the top position according to your design */
left:0px;
}

#tab_blog{
position:absolute;
top:50px; /* adjust the top position according to your design */
left:0px;
}

I think this works..Just try it out.

Cheers !!