Forum Moderators: not2easy

Message Too Old, No Replies

Vertical absolute position in IE vs Firefox not the same

         

bbcompent1

5:36 pm on Jan 20, 2010 (gmt 0)

10+ Year Member



I need some guidance on what I should do to get IE and FF to agree with each other. I set my absolute top position to 57px and it shows fine in FF but in IE, there is this stupid offset. Can an inline offset be applied just to IE? Here is the tag that's giving me fits. Thanks all.

<div style="position:absolute; top: 57px; left: 440px;">

bbcompent1

3:11 pm on Jan 21, 2010 (gmt 0)

10+ Year Member



Does anyone have any ideas how I can fix this vertical position problem?

limbo

11:51 am on Feb 2, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi bbcompent1

Could be many factors - I'd implement a CSS reset (if you haven't already) - might clear up any offset issues caused directly by browsers control of HTML tags.

If that doesn't work, perhaps you could expand on the HTML a little, so we can see the problem in context.

bbcompent1

7:59 pm on Feb 3, 2010 (gmt 0)

10+ Year Member



Ok, I think I have located where the actual problem is, its inside my dropline.css file which handles the appearance of the menu. Here is what I have:


.droplinebar{
overflow: hidden;
padding-top:27px;
padding-left:17px;
}

.droplinebar ul{
margin: 0;
padding: 0;
width:93%;
/*float: left;*/
font: bold 13px Arial;
background: transparent center center repeat-x; /*default background of menu bar*/
}

.droplinebar ul li{
display: inline;
padding-top:20px;
}

.droplinebar ul li a{
float: left;
color: white;
padding: 9px 11px;
text-decoration: none;
}

/*.droplinebar ul li a:visited{
color: black;
font: bold;
}*/

.droplinebar ul li a:hover, .droplinebar ul li .current{ /*background of main menu bar links onMouseover*/
color: white;
font: bold;
background: black center center repeat-x;
}

/* Sub level menus*/
.droplinebar ul li ul{
position: absolute;
z-index: 100;
left: 0;
top: 0;
/* background: white; sub menu background color */
background: white center center repeat-x;
visibility: hidden;
text-align:center;
}

/* Sub level menu links style */
.droplinebar ul li ul li a{
font: bold 13px Verdana;
color: black;
padding-left: 20px;
padding-right: 20px;
margin: 0;
text-align:center;
}

.droplinebar ul li ul li a:hover{ /*sub menu links' background color onMouseover */
background: #333333;
}

bbcompent1

1:38 pm on Feb 5, 2010 (gmt 0)

10+ Year Member



Is there no one who can help me?

bbcompent1

5:21 pm on Feb 5, 2010 (gmt 0)

10+ Year Member



Never mind folks, I got it. Using a CSS Reset did the trick. Everything lines up like a dream now.