homepage Welcome to WebmasterWorld Guest from 54.198.42.105
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

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




msg:1190349
 8:17 am on May 1, 2003 (gmt 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]

 

Nick_W




msg:1190350
 8:26 am on May 1, 2003 (gmt 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

smackboy




msg:1190351
 8:47 am on May 1, 2003 (gmt 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]

Nick_W




msg:1190352
 8:56 am on May 1, 2003 (gmt 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

smackboy




msg:1190353
 9:01 am on May 1, 2003 (gmt 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.

Nick_W




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

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

Nick

smackboy




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

Nothing, I guess I don't even need the padding. :)

Nick_W




msg:1190356
 9:11 am on May 1, 2003 (gmt 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

smackboy




msg:1190357
 9:25 am on May 1, 2003 (gmt 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.

Nick_W




msg:1190358
 9:35 am on May 1, 2003 (gmt 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

smackboy




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

Oy, that ain't gonna be pretty.

Nick_W




msg:1190360
 9:53 am on May 1, 2003 (gmt 0)

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

Nick

smackboy




msg:1190361
 11:26 am on May 1, 2003 (gmt 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.

jeremy




msg:1190362
 11:17 pm on May 7, 2003 (gmt 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!

drbrain




msg:1190363
 11:53 pm on May 7, 2003 (gmt 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]

smackboy




msg:1190364
 12:05 am on May 9, 2003 (gmt 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.

smackboy




msg:1190365
 12:48 am on May 9, 2003 (gmt 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?

smackboy




msg:1190366
 10:32 pm on May 10, 2003 (gmt 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!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved