Welcome to WebmasterWorld Guest from 54.197.171.28

Forum Moderators: not2easy

Message Too Old, No Replies

Playing Detecive: Isolating Bugs in Complex HTML/CSS and JS

   
8:17 am on May 1, 2003 (gmt 0)

10+ Year Member



I have a 2 column page layout with a header and footer. The example page can be found at <snip>

Within the navigation column (#nav) I have inserted a vertical dynamic javascript menu where the submenus appear to the right where the body content is. My problem is when I mouse over a button, the submenu appears farther down the side of the menu than it should. It appears that the header DIV is pushing it down. Is there anyway around this?

I believe this is a CSS question since the menu works great on a page by itself. (i.e. the submenu lines up with the button you are over)

Thanks.

[edited by: Nick_W at 8:19 am (utc) on May 1, 2003]
[edit reason] no urls please [/edit]

8:26 am on May 1, 2003 (gmt 0)

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Hi, Welcome to WebmasterWorld [webmasterworld.com]

Could you post a Short and Concise [webmasterworld.com] snippet of code to demonstrate what you mean by 'header'?

Cheers!

Nick

8:47 am on May 1, 2003 (gmt 0)

10+ Year Member



Sorry about the personal url, didn't realize.

The submenu that pops out from the main menu in #nav appears to be pushed down by #header. This is the basic layout of the page. It's hard to demonstrate here since you can't see the javascript but I hope you can understand what I'm trying to say.

CSS:
#container {
background : navy;
background-color:navy;
margin : 0px;
padding : 0px;
color : #000;
}

#header {
background: url(../images/banner.gif) white no-repeat center;
border-bottom : 3px solid #D14407;
color : #000;
padding-bottom : 5px;
padding-top : 5px;
padding-left: 10px;
height: 86px;
margin : 0px;
padding : 0px;
}

#nav {
background : navy;
color : #000;
float : left;
margin-left : -1px;
width : 120px;
margin : 0px;
padding : 0px;
background-color:navy;
position : relative;
z-index : 2;
}

#content {
background : url(shield.gif);
border-left : 3px solid #D14407;
margin-left : 120px;
padding : 20px;
padding-top : 1px;
position : relative;
color : #000;
z-index : 1;
}

#footer {
background : navy;
border-top : 3px solid #D14407;
margin : 0px;
padding : 0px;
color : #000;
}

Page HTML:
<html>
<head>
<title>blah</title>
<link rel="stylesheet" href="files/css.css" type="text/css">
</head>

<body>
<div id="container">

<div id="header"></div>

<div id="nav">
<!-- navigation content, javascript goes here -->
</div>

<div id="content">
<!-- body content -->

<div class="spacer"></div>
</div>

<div id="footer">

</div>
</body></html>

[edited by: smackboy at 8:58 am (utc) on May 1, 2003]

8:56 am on May 1, 2003 (gmt 0)

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Well, you're right! it is hard to tell. Let's play 20 questions ;)

What happens if you take the #header out of the html?

Nick

9:01 am on May 1, 2003 (gmt 0)

10+ Year Member



If I remove #header from the html the submenus line up correctly right beside the the button my mouse is over.

This is why I assumed its #header causing the problem. As well, it appears the submenu appears about the distance down as what the height of #header is.

9:03 am on May 1, 2003 (gmt 0)

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member



And leaving the header in but with no padding at all?

Nick

9:07 am on May 1, 2003 (gmt 0)

10+ Year Member



Nothing, I guess I don't even need the padding. :)
9:11 am on May 1, 2003 (gmt 0)

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Hmmmm... it feels like a padding or possibly float/position thing to me. Try removing all padding from all elements then if that doesn't work try removing floats and position properties.

Gotta isolate the area, if all else fails, just try having ONLY the nav stuff on the page and nothing else...

Nick

9:25 am on May 1, 2003 (gmt 0)

10+ Year Member



It's weird, because having #nav the only thing on the page it works fine, the submenus line up with the main menu.

Having just #header and #nav causes #nav to remain below #header, as it should. The submenus, when mousing over the button, have seemed to move twice the distance.

9:35 am on May 1, 2003 (gmt 0)

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member



So, the header isn't the problem but it causes the difference I'm thinking. You need to now mess with the html that the JS spits out when you mouseover. Samething, gotta play detective and take out properties/elements one by one till you get there...

Nick

9:49 am on May 1, 2003 (gmt 0)

10+ Year Member



Oy, that ain't gonna be pretty.
9:53 am on May 1, 2003 (gmt 0)

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member



hehe, I gave the title a tweak to reflect the way this conversation has gone. Let us know when you fix it ;)

Nick

11:26 am on May 1, 2003 (gmt 0)

10+ Year Member



Interesting, I got so caught up in getting it to display correctly in IE, I just realized it works perfect in Mozilla.

Must be an IE bug. Otherwise I'm stumped.

11:17 pm on May 7, 2003 (gmt 0)

10+ Year Member



Just a guess, but there appears to be a couple of </div> missing to close "container" and "content". This can cause different problems in different browers!
11:53 pm on May 7, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Also:

#nav { 
/* ... */
margin-left: -1px;
width : 120px;
margin : 0px;
/* ... */
}

margin-left will be 0px, because margin: 0px sets all four sides, are you sure you want that?

(Ooh! same thing on #header with padding)

If you load your page up in Mozilla's DOM inspector, (Tools Web Development) and you can change the applied styles in real time without reloading (you just can't save them). You can find tutorials on Google, including <snip>

[edited by: Nick_W at 5:37 am (utc) on May 8, 2003]
[edit reason] no urls please [/edit]

12:05 am on May 9, 2003 (gmt 0)

10+ Year Member



jeremy: Thanks, but no luck. Closing the tag makes the html complete but does nothing for my problem.

drbrain: Thanks, fixed that.

Still no solution for my problem that I've found.

12:48 am on May 9, 2003 (gmt 0)

10+ Year Member



Ok, I seem to be progressing. Added position:fixed to #nav and the submenus now line up correctly. (It always seems to be the simplest thing is a solution)

I tried this before, but now notice the submenus are actually there (putting the mouse over where the submenu should be shows there is a link there) but do not show up at all. The sebmenus seem to be below the #content div when they pop out (i.e. not visible) but are clickable.

Is there anyway to get it to pop out above the content div in my setup, or am I looking at a javascript problem?

10:32 pm on May 10, 2003 (gmt 0)

10+ Year Member



Ahh-ha!

Finally, evertything works correctly. #nav set to z-index:1 and #content set to position:fixed (its always positioning).

Works great, IE and Mozilla.

Party time!

 

Featured Threads

Hot Threads This Week

Hot Threads This Month