By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,785 Members | 1,079 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,785 IT Pros & Developers. It's quick & easy.

Another problem with the DIV menu

P: n/a
Like I have said in a couple of different questions I have a DIV menu.
Now I am almost complete with my site and I am testing it on different
browsers. My problem is that when I look at the Div menu in IE
everything is okay but when I go to Netscape or Opera the DIV menu
shows about 5 pixes below where it does in IE so the menu doesn't look
like it is connected to the banner.
Jul 20 '05 #1
Share this Question
Share on Google+
16 Replies


P: n/a

"Mark Constant" <co*******@mix-net.net> wrote in message
news:ce**************************@posting.google.c om...
Like I have said in a couple of different questions I have a DIV menu.
Now I am almost complete with my site and I am testing it on different
browsers. My problem is that when I look at the Div menu in IE
everything is okay but when I go to Netscape or Opera the DIV menu
shows about 5 pixes below where it does in IE so the menu doesn't look
like it is connected to the banner.


Url?

Without seeing the actual website, one can only guess what is going on.
Try adding this declaration to your div rule:

margin-top: 0;

Regards,
Jim Roberts

Jul 20 '05 #2

P: n/a

"Mark Constant" <co*******@mix-net.net> wrote in message
news:ce**************************@posting.google.c om...
Like I have said in a couple of different questions I have a DIV menu.
Now I am almost complete with my site and I am testing it on different
browsers. My problem is that when I look at the Div menu in IE
everything is okay but when I go to Netscape or Opera the DIV menu
shows about 5 pixes below where it does in IE so the menu doesn't look
like it is connected to the banner.


Url?

Without seeing the actual website, one can only guess what is going on.
Try adding this declaration to your div rule:

margin-top: 0;

Regards,
Jim Roberts

Jul 20 '05 #3

P: n/a
"Jim Roberts" <jr******@msn.com> wrote in message news:<c6************@ID-184466.news.uni-berlin.de>...
"Mark Constant" <co*******@mix-net.net> wrote in message
news:ce**************************@posting.google.c om...
Like I have said in a couple of different questions I have a DIV menu.
Now I am almost complete with my site and I am testing it on different
browsers. My problem is that when I look at the Div menu in IE
everything is okay but when I go to Netscape or Opera the DIV menu
shows about 5 pixes below where it does in IE so the menu doesn't look
like it is connected to the banner.


Url?

Without seeing the actual website, one can only guess what is going on.
Try adding this declaration to your div rule:

margin-top: 0;

Regards,
Jim Roberts


I will try the margin-top: 0 but I can't post my website since it is
in a restricted school website. Here is the code for my DIV Layer if
that helps.

#TutorialsLayer {
position:absolute;
padding: 4px 4px 4px 4px;
left: 442px;
top: 154px;
width: 140px;
height: 85px;
z-index:2;
background-color: #4169E1;
layer-background-color: #4169E1;
visibility: hidden;
}
Jul 20 '05 #4

P: n/a
"Jim Roberts" <jr******@msn.com> wrote in message news:<c6************@ID-184466.news.uni-berlin.de>...
"Mark Constant" <co*******@mix-net.net> wrote in message
news:ce**************************@posting.google.c om...
Like I have said in a couple of different questions I have a DIV menu.
Now I am almost complete with my site and I am testing it on different
browsers. My problem is that when I look at the Div menu in IE
everything is okay but when I go to Netscape or Opera the DIV menu
shows about 5 pixes below where it does in IE so the menu doesn't look
like it is connected to the banner.


Url?

Without seeing the actual website, one can only guess what is going on.
Try adding this declaration to your div rule:

margin-top: 0;

Regards,
Jim Roberts


I will try the margin-top: 0 but I can't post my website since it is
in a restricted school website. Here is the code for my DIV Layer if
that helps.

#TutorialsLayer {
position:absolute;
padding: 4px 4px 4px 4px;
left: 442px;
top: 154px;
width: 140px;
height: 85px;
z-index:2;
background-color: #4169E1;
layer-background-color: #4169E1;
visibility: hidden;
}
Jul 20 '05 #5

P: n/a

"Mark Constant" <co*******@mix-net.net> wrote in ...

I will try the margin-top: 0 but I can't post my website since it is
in a restricted school website. Here is the code for my DIV Layer if
that helps.

#TutorialsLayer {
position:absolute;
padding: 4px 4px 4px 4px;
left: 442px;
top: 154px;
width: 140px;
height: 85px;
z-index:2;
background-color: #4169E1;
layer-background-color: #4169E1;
visibility: hidden;
}


You may need to adjust the bottom margin of the element which is above
this div.

Regards,
Jim

Jul 20 '05 #6

P: n/a

"Mark Constant" <co*******@mix-net.net> wrote in ...

I will try the margin-top: 0 but I can't post my website since it is
in a restricted school website. Here is the code for my DIV Layer if
that helps.

#TutorialsLayer {
position:absolute;
padding: 4px 4px 4px 4px;
left: 442px;
top: 154px;
width: 140px;
height: 85px;
z-index:2;
background-color: #4169E1;
layer-background-color: #4169E1;
visibility: hidden;
}


You may need to adjust the bottom margin of the element which is above
this div.

Regards,
Jim

Jul 20 '05 #7

P: n/a
"Jim Roberts" <jr******@msn.com> wrote in message news:<c6************@ID-184466.news.uni-berlin.de>...
"Mark Constant" <co*******@mix-net.net> wrote in ...

I will try the margin-top: 0 but I can't post my website since it is
in a restricted school website. Here is the code for my DIV Layer if
that helps.

#TutorialsLayer {
position:absolute;
padding: 4px 4px 4px 4px;
left: 442px;
top: 154px;
width: 140px;
height: 85px;
z-index:2;
background-color: #4169E1;
layer-background-color: #4169E1;
visibility: hidden;
}


You may need to adjust the bottom margin of the element which is above
this div.

Regards,
Jim

I added margin-top: 0; to the TutorialsLayer and that didn't work.
Since the div is shown when you go over an image I tried added
margin-bottom: 0 to the table the image belonged to and that didn't
work. It works perfectly in IE but not in Netscape/Opera/Mozilla. I
will try to describe the layout of my page if that helps. It has three
table rows. The first row is a banner that is colspan="6". The next
row has my images that are links. The Tutorial image is the only one
that has a drop down menu. The last row is colspan="6" and is my main
body. When I run the javascript over the Tutorial image it opens up a
DIV menu. It is right under the Tutorial image in IE but in everything
else it is about 3px below the Tutorial image. Is there any other code
that might help?
Jul 20 '05 #8

P: n/a
"Jim Roberts" <jr******@msn.com> wrote in message news:<c6************@ID-184466.news.uni-berlin.de>...
"Mark Constant" <co*******@mix-net.net> wrote in ...

I will try the margin-top: 0 but I can't post my website since it is
in a restricted school website. Here is the code for my DIV Layer if
that helps.

#TutorialsLayer {
position:absolute;
padding: 4px 4px 4px 4px;
left: 442px;
top: 154px;
width: 140px;
height: 85px;
z-index:2;
background-color: #4169E1;
layer-background-color: #4169E1;
visibility: hidden;
}


You may need to adjust the bottom margin of the element which is above
this div.

Regards,
Jim

I added margin-top: 0; to the TutorialsLayer and that didn't work.
Since the div is shown when you go over an image I tried added
margin-bottom: 0 to the table the image belonged to and that didn't
work. It works perfectly in IE but not in Netscape/Opera/Mozilla. I
will try to describe the layout of my page if that helps. It has three
table rows. The first row is a banner that is colspan="6". The next
row has my images that are links. The Tutorial image is the only one
that has a drop down menu. The last row is colspan="6" and is my main
body. When I run the javascript over the Tutorial image it opens up a
DIV menu. It is right under the Tutorial image in IE but in everything
else it is about 3px below the Tutorial image. Is there any other code
that might help?
Jul 20 '05 #9

P: n/a
"Jim Roberts" <jr******@msn.com> wrote in message news:<c6************@ID-184466.news.uni-berlin.de>...
"Mark Constant" <co*******@mix-net.net> wrote in ...

I will try the margin-top: 0 but I can't post my website since it is
in a restricted school website. Here is the code for my DIV Layer if
that helps.

#TutorialsLayer {
position:absolute;
padding: 4px 4px 4px 4px;
left: 442px;
top: 154px;
width: 140px;
height: 85px;
z-index:2;
background-color: #4169E1;
layer-background-color: #4169E1;
visibility: hidden;
}


You may need to adjust the bottom margin of the element which is above
this div.

Regards,
Jim


I just tried replicating the problem with just a basic page and the
same thing happens. It must be something with the way IE sees
coordinates compared to other browsers. I just don't know the best way
to fix it.
Jul 20 '05 #10

P: n/a
"Jim Roberts" <jr******@msn.com> wrote in message news:<c6************@ID-184466.news.uni-berlin.de>...
"Mark Constant" <co*******@mix-net.net> wrote in ...

I will try the margin-top: 0 but I can't post my website since it is
in a restricted school website. Here is the code for my DIV Layer if
that helps.

#TutorialsLayer {
position:absolute;
padding: 4px 4px 4px 4px;
left: 442px;
top: 154px;
width: 140px;
height: 85px;
z-index:2;
background-color: #4169E1;
layer-background-color: #4169E1;
visibility: hidden;
}


You may need to adjust the bottom margin of the element which is above
this div.

Regards,
Jim


I just tried replicating the problem with just a basic page and the
same thing happens. It must be something with the way IE sees
coordinates compared to other browsers. I just don't know the best way
to fix it.
Jul 20 '05 #11

P: n/a

"Mark Constant" <co*******@mix-net.net> wrote...

I just tried replicating the problem with just a basic page and the
same thing happens. It must be something with the way IE sees
coordinates compared to other browsers. I just don't know the
best way to fix it.


It could be because default margins and paddings vary from browser to
browser.

When I create a page, I set the margins/paddings to zero for all
elements and then work from there.

It's hard to tell when you can't see the page.

This might be worth a try:

body {margin:0; padding:0;}

If the body margin and padding isn't already set. If, for instance, the
right and left margins have been declared, just set the top and bottom
to zero.

Regards,
Jim

Jul 20 '05 #12

P: n/a

"Mark Constant" <co*******@mix-net.net> wrote...

I just tried replicating the problem with just a basic page and the
same thing happens. It must be something with the way IE sees
coordinates compared to other browsers. I just don't know the
best way to fix it.


It could be because default margins and paddings vary from browser to
browser.

When I create a page, I set the margins/paddings to zero for all
elements and then work from there.

It's hard to tell when you can't see the page.

This might be worth a try:

body {margin:0; padding:0;}

If the body margin and padding isn't already set. If, for instance, the
right and left margins have been declared, just set the top and bottom
to zero.

Regards,
Jim

Jul 20 '05 #13

P: n/a
"Jim Roberts" <jr******@msn.com> wrote in message news:<c6************@ID-184466.news.uni-berlin.de>...
"Mark Constant" <co*******@mix-net.net> wrote...

I just tried replicating the problem with just a basic page and the
same thing happens. It must be something with the way IE sees
coordinates compared to other browsers. I just don't know the
best way to fix it.


It could be because default margins and paddings vary from browser to
browser.

When I create a page, I set the margins/paddings to zero for all
elements and then work from there.

It's hard to tell when you can't see the page.

This might be worth a try:

body {margin:0; padding:0;}

If the body margin and padding isn't already set. If, for instance, the
right and left margins have been declared, just set the top and bottom
to zero.

Regards,
Jim


I just tried it on my test page and it worked!!!! Now all I have to do
is test it on my Final Project. Thank you so much.
Jul 20 '05 #14

P: n/a
"Jim Roberts" <jr******@msn.com> wrote in message news:<c6************@ID-184466.news.uni-berlin.de>...
"Mark Constant" <co*******@mix-net.net> wrote...

I just tried replicating the problem with just a basic page and the
same thing happens. It must be something with the way IE sees
coordinates compared to other browsers. I just don't know the
best way to fix it.


It could be because default margins and paddings vary from browser to
browser.

When I create a page, I set the margins/paddings to zero for all
elements and then work from there.

It's hard to tell when you can't see the page.

This might be worth a try:

body {margin:0; padding:0;}

If the body margin and padding isn't already set. If, for instance, the
right and left margins have been declared, just set the top and bottom
to zero.

Regards,
Jim


I just tried it on my test page and it worked!!!! Now all I have to do
is test it on my Final Project. Thank you so much.
Jul 20 '05 #15

P: n/a

"Mark Constant" <co*******@mix-net.net> wrote...

I just tried it on my test page and it worked!!!! Now all I have to do
is test it on my Final Project. Thank you so much.


You're welcome.

Cheers,
Jim

Jul 20 '05 #16

P: n/a

"Mark Constant" <co*******@mix-net.net> wrote...

I just tried it on my test page and it worked!!!! Now all I have to do
is test it on my Final Project. Thank you so much.


You're welcome.

Cheers,
Jim

Jul 20 '05 #17

This discussion thread is closed

Replies have been disabled for this discussion.