HighDots Forums  

Help: Menu bar is 20 pixels too high on IE7

Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)


Discuss Help: Menu bar is 20 pixels too high on IE7 in the Cascading Style Sheets forum.



Reply
 
Thread Tools Display Modes
  #1  
Old   
Kevin Killion
 
Posts: n/a

Default Help: Menu bar is 20 pixels too high on IE7 - 04-24-2008 , 04:11 PM







I am building a website for a school, but running into a display problem
between IE and CSS. (The site is http://stmary-stthomas.org/ )

The main horizontal menu bar looks just fine on Mac and PC with most
browsers.

But on the PC with IE7, the menu bar winds up about 20 pixels too high.


The menu is drawn in a DIV with class "navbar", which is inside a DIV
with class "navcontainer":


#navcontainer {
position:absolute;
top:115px; /* This works on most browsers,
but would have to be 135 for IE7 */
}

#navbar {
height: 32px;
padding: 0px 0px 0px 0px;
margin: 0;
position: relative;
z-index: 900;
float: none;
width: 100%;
font: 14px "Lucida, Verdana, sans-serif;
}


Help! Does anyone have any idea of what's wrong, *OR* how I can tweak
this to make the "top" of the menu position come out correctly on IE7?

THANKS!!!!

Kevin Killion

Reply With Quote
  #2  
Old   
dorayme
 
Posts: n/a

Default Re: Help: Menu bar is 20 pixels too high on IE7 - 04-24-2008 , 06:19 PM






In article <kevin-ED6C69.16114824042008 (AT) newsclstr03 (DOT) news.prodigy.net>,
Kevin Killion <kevin (AT) shsmedia (DOT) com> wrote:

Quote:
I am building a website for a school, but running into a display problem
between IE and CSS. (The site is http://stmary-stthomas.org/ )

The main horizontal menu bar looks just fine on Mac and PC with most
browsers.
....
#navcontainer {
position:absolute;
top:115px; /* This works on most browsers,
but would have to be 135 for IE7 */


Help! Does anyone have any idea of what's wrong, *OR* how I can tweak
this to make the "top" of the menu position come out correctly on IE7?

Put this under any stylesheet links that you have in the head

<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->

Moreover, make sure you have no inline styles pertaining to this issue
in the body.

And now, make a new text file and call it ie7.css and type in this file:

#navcontainer {
position:absolute;
top:115px; 135px in it.

(I noticed, for the first time ever, that a notice popped up on my
screen saying you have requested I send you an email if I reply. Sorry
Kevin, but I don't talk to strange men so intimately.)

--
dorayme


Reply With Quote
Reply




Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off



Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.