PDA

View Full Version : positioned divs's not moving with screen


kt1978
04-16-2010, 01:25 AM
Hi all

I have got a strange problem that seems to have just happened.

http://www.daisychainchildrensnursery.com

you will see the menu buttons are in AP Div's. The problem is they are not moving with the screen on resize in IE8.

I'm positive they were working fine before.

The strange thing is it all works fine in preview in browser (F12), which is IE8.

The also work fine in other browsers.

Is there a reason for this???

Here is the CSS

* {
margin: 0;
padding: 0;
}
body {
min-width:800px;
margin: 30px 6% 30px 6%;
background-image: url(../images/img_bg.jpg);
font-family: "Comic Sans MS", Arial;
}
h1 {
font-family: "Kristen ITC", "Comic Sans MS", Arial;
font-size: 24px;
font-weight: bold;
}
h2 {
font-family: "Kristen ITC", "Comic Sans MS", Arial;
font-size: 20px;
font-weight: normal;
}
h3 {
font-family: "Bradley Hand ITC", "Kristen ITC", "Comic Sans MS", Arial;
font-size: 36px;
font-weight: bold;
}
p {
font-family: "Comic Sans MS", Arial;
font-size: 12px;
}
#img_stem_1 {
height: 20px;
background-image: url(../images/img_stem_1.gif);
}
#header {
background-color: #FFFFFF;
height: 150px;
background-repeat: no-repeat;
background-position: center;
background-image: url(../images/imgLogo.gif);
}
#header .img_1 {
margin-top: 15px;
margin-left: 20px;
height: 114px;
width: 155px;
float: left;
}
#header .img_2 {
margin-top: 15px;
margin-right: 20px;
height: 114px;
width: 155px;
float: right;
}
#img_stem_2 {
height: 20px;
background-image: url(../images/img_stem_2.gif);
background-color: #FFFF00;
margin: 0;
}
#left {
width:220px;
min-height:320px; /* for modern browsers */
_height:320px;
float: left;
}
#wrapper {
background-image: url(../images/img_bg_320.jpg);
clear: both;
}
#right {
width: 300px;
float: right;
}
.outer {
display: table;
height: 320px;
min-height:320px;
overflow: hidden;
vertical-align: middle;
width: auto;
}
.inner {
display: table-cell;
vertical-align: middle;
text-align: center !important;
width: 100%;
}
#wrapper .outer .inner #cntr {
display: table-cell;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#img_stem_3 {
height: 20px;
background-image: url(../images/img_stem_1.gif);
background-color: #FFFF00;
clear: both;
}
#img_stem_4 {
height: 20px;
background-image: url(../images/img_stem_2.gif);
}
#footer_left_new {
float: left;
width: 150px;
height: 120px;
background-color: #FFFFFF;
}
#footer_right_new {
float: right;
width: 150px;
height: 120px;
text-align:right;
background-color: #FFFFFF;
}
#footer_center_new {
height: 120px;
text-align:center;
margin-right: auto;
margin-left: auto;
background-color: #FFFFFF;
}
.footer_txt {
font-family: Calibri, Arial;
font-size: 12px;
}
#menu {
display:block;
list-style:none;
height: 320px;
width: 220px;
position: relative;
}
#menu span {
display:block;
position: absolute;
}
#menu a {
text-indent:-900%;
position:absolute;
outline:none;
}
#menu a:hover {
background-position:left bottom;
z-index:3;
}
#menu a:hover span {
background-position:left bottom;
z-index:3;
}
#menu a:active {
background-position:left bottom;
z-index:3;
}
#menu a:active span {
background-position:left bottom;
z-index:3;
}
#menu .home {
width:220px;
height:40px;
background:url(../images/new_btn_home.gif) no-repeat;
left:3px;
top:0px;
}
#menu .home span {
width:70px;
height:70px;
background:url(../images/new_btn_daisy.gif) no-repeat;
left:-10px;
top:-15px;
}
#menu .staff {
width:220px;
height:40px;
background:url(../images/new_btn_staff.gif) no-repeat;
left:-13px;
top:40px;
}
#menu .staff span {
width:70px;
height:70px;
background:url(../images/new_btn_daisy.gif) no-repeat;
left:-10px;
top:-15px;
}
#menu .brochure {
width:220px;
height:40px;
background:url(../images/new_btn_brochure.gif) no-repeat;
left:3px;
top:80px;
}
#menu .brochure span {
width:70px;
height:70px;
background:url(../images/new_btn_daisy.gif) no-repeat;
left:-10px;
top:-15px;
}
#menu .gallery {
width:220px;
height:40px;
background:url(../images/new_btn_gallery.gif) no-repeat;
left:-13px;
top:120px;
}
#menu .gallery span {
width:70px;
height:70px;
background:url(../images/new_btn_daisy.gif) no-repeat;
left:-10px;
top:-15px;
}
#menu .menu {
width:220px;
height:40px;
background:url(../images/new_btn_menu.gif) no-repeat;
left:3px;
top:160px;
}
#menu .menu span {
width:70px;
height:70px;
background:url(../images/new_btn_daisy.gif) no-repeat;
left:-10px;
top:-15px;
}
#menu .ofsted {
width:220px;
height:40px;
background:url(../images/new_btn_ofsted.gif) no-repeat;
left:-13px;
top:200px;
}
#menu .ofsted span {
width:70px;
height:70px;
background:url(../images/new_btn_daisy.gif) no-repeat;
left:-10px;
top:-15px;
}
#menu .contact {
width:220px;
height:40px;
background:url(../images/new_btn_contact.gif) no-repeat;
left:3px;
top:240px;
}
#menu .contact span {
width:70px;
height:70px;
background:url(../images/new_btn_daisy.gif) no-repeat;
left:-10px;
top:-15px;
}
#menu .terms {
width:220px;
height:40px;
background:url(../images/new_btn_terms.gif) no-repeat;
left:-13px;
top:280px;
}
#menu .terms span {
width:70px;
height:70px;
background:url(../images/new_btn_daisy.gif) no-repeat;
left:-10px;
top:-15px;
}
#menu .perm {
background-position:left center;
z-index:2;
}
#menu .perm span{
background-position:left center;
z-index:2;
}
.inner #scroll {
background-color: #FFFFFF;
margin: 50px;
height: 280px;
overflow: auto;
border: 2px solid #000000;
padding: 8px;
text-align: center;
font-family: "Comic Sans MS", Arial;
}
.inner #scroll p {
text-align: left;
font-size: 11px;
}
.inner #scroll span {
font-size: 12px;
font-weight: bold;
}
.inner #scroll a {
text-align: center;
}


Cheers

kt1978
04-16-2010, 09:21 AM
Hi everyone

I have just tried this on another pc and it is fine in IE, the buttons move with the screen as expected.

Has anyone viewed this notice a problem or do all the buttons move with the screen????

Would be great to know that it is just IE on this PC. Iwill try an re-install?

Unless anyone would know what might be causing this?

Thanks

Corrosive
04-16-2010, 09:32 AM
Your buttons are behaving as they should do in Firefox here but IE6 is displaying the symptoms you described.

kt1978
04-16-2010, 10:21 AM
Thanks! Anyone else check IE versions? I can't check at the minute as none of IE's work properly! Re-installing soon!

Does anyone know how to fix this?

If it is fine in IE7 onwards I suppose that is ok! Just puzzling as I'm sure it worked fine yesterday !

Huh, before I started learning web design I could understand what all the fuss and complaining was about IE! Now I know! Thing is, it's the only one I really use, along with the majority I presume!!!

kt1978
04-22-2010, 10:10 PM
Hi all

I done a system restore in the end to a point when I knew it worked ok in IE8 and that has done the trick.

Strange though, as the only programs I'd installed were other browsers.

Still doesn't work in IE versions older than IE8 but its not a major problem.