Forum Moderators: not2easy

Message Too Old, No Replies

Div moves in IE when I mouse over a link

holy grail css liquid layout problem

         

krisn

12:38 am on Oct 3, 2006 (gmt 0)

10+ Year Member



I have a 3 col liquid layout with a navbar in the left col. As soon as i mouse over a link (IE only), the nav bar moves to the centre! mmmm.....
any way i can stop this?

the css:

body {
margin: 0;
padding-left: 160px; /* LC fullwidth */
padding-right: 110px; /* RC fullwidth + CC padding */
min-width: 200px; /* LC fullwidth + CC padding */
background: #fff;
}

#header, #footer {
margin-left: -160px; /* LC fullwidth */
margin-right: -110px; /* RC fullwidth + CC padding */
}

.column {
position: relative;
float: left;
}

#center {
padding: 0 2px;
width: 100%;
}

#left {
width: 150px; /* LC width */
padding: 0 1px; /* LC padding */
right: 160px; /* LC fullwidth + CC padding */
margin-left: -100%;
}

#right {
width: 90px; /* RC width */
padding: 0 5px; /* RC padding */
margin-right: -100%;
}

#footer {
clear: both;
}

/*** IE Fix ***/
* html #left {
left: 90px; /* RC fullwidth */
}

#header, #footer {
font-size: large;
text-align: center;
padding: 0.3em 0;
background: #fff;
background-image: url(../images/header_bg.jpg);
}

.column {
padding-top: 1em;
text-align: justify;
}

[edited by: DrDoc at 12:42 am (utc) on Oct. 3, 2006]
[edit reason] no URLs, thanks [/edit]

SuzyUK

8:58 am on Oct 3, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi krisn and Welcome to WebmasterWorld

I *think* it a hasLayout problem related to the text-align: center of the header div, but not being sure which div is actually causing it. I can only suggest that you add {zoom: 1;} to each of the #header, #footer divs in turn.

If that doesn't help add it to the element (ul?) containing the links which you refer to.

It is also possible that you might need to add a "wrapper" div to do the job of the body element depending on the doctype you're using and add layout (that's what zoom is doing..) to that too

If any of that works then yes it's an IE layout error, and you can feel free to ask about the best way for you apply layout if you don't want to use zoom

failing all that if you can post a brief example of your HTML and CSS which reproduces the effect it would be great ta..

Suzy