Welcome to WebmasterWorld Guest from 54.147.10.12

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)

New User

10+ Year Member

joined:May 1, 2003
posts:10
votes: 0


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)

Senior Member

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

joined:Feb 4, 2002
posts:5044
votes: 0


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)

New User

10+ Year Member

joined:May 1, 2003
posts:10
votes: 0


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)

Senior Member

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

joined:Feb 4, 2002
posts:5044
votes: 0


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)

New User

10+ Year Member

joined:May 1, 2003
posts:10
votes: 0


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)

Senior Member

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

joined:Feb 4, 2002
posts:5044
votes: 0


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

Nick

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

New User

10+ Year Member

joined:May 1, 2003
posts:10
votes: 0


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

Senior Member

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

joined:Feb 4, 2002
posts:5044
votes: 0


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)

New User

10+ Year Member

joined:May 1, 2003
posts:10
votes: 0


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)

Senior Member

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

joined:Feb 4, 2002
posts:5044
votes: 0


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)

New User

10+ Year Member

joined:May 1, 2003
posts:10
votes: 0


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

Senior Member

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

joined:Feb 4, 2002
posts:5044
votes: 0


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)

New User

10+ Year Member

joined:May 1, 2003
posts:10
votes: 0


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)

New User

10+ Year Member

joined:Apr 24, 2003
posts:25
votes: 0


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)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 18, 2003
posts:827
votes: 0


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)

New User

10+ Year Member

joined:May 1, 2003
posts:10
votes: 0


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)

New User

10+ Year Member

joined:May 1, 2003
posts:10
votes: 0


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)

New User

10+ Year Member

joined:May 1, 2003
posts:10
votes: 0


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!