please help with css

ok...after working on this for literally DAYS...I have made progress but continue to have problems. I'm trying to customize the ezpages header.

I've read tons of stuff and just can't get this figured out. It's either a problem with the css itself...or maybe multiple stylesheets (I have the elements marked individually though)?

Surprisingly, the biggest issue is in FF...the main content is being shifted to the right...probably by a float...but I have tried clear:both EVERYWHERE and I can't seem to get it right. Whenever I put the clear in the #easypages li section, it does shift to the left but so does the nav menu.

There are also two wacky lines...will be obvious when you look. Here is the link: http://www.divaknitting.com/testzenstore

Any help would really be appreciated. My MIL is coming to stay with us for a couple of days and I really need to get focused on cleaning instead of being obsessed with this! :)

Here is the relevant code:

#ezpagesnav li li a {
	display: block;
	font-weight: normal;
	color: #060;
	padding: 0.2em 1.1em;
}

#ezpagesnav li li a:hover {
	padding: 0.2em 5px;
	border: 5px solid #499bca;
	border-width: 0 10px;
}

/*this changes the width between the headings (at least, use to when I originaly started this mess
and when adding clear:both to the end allows ff to show 
the main content box better, but shifts the whole menu to left*/

#ezpagesnav li {
	float: left;
	position: relative;	
	width: 14em;
	text-align: center;
	cursor: default;
	background-color: white;
	border: 1px solid #499bca;
	border-width: 1px 0;
}

#ezpagesnav li information {
	border-left-width: 1em;
	
}

#ezpagesnav li specialorders {
	border-right-width: 1em;	
}

#ezpagesnav li ul {
    display: none;
	position: relative;
	top: 100%;
	left: 0;
	font-weight: normal;
	padding: 0.5em 0 1em 0;
	border-right: solid 1px #499bca;
	border-left: solid 1px #499bca;
}

#ezpagesnav li>ul {
	top: auto;
	left: auto;
}

#ezpagesnav li li {
	display: block;
	float: none;
	background-color: white;
	border: 0;
}

#ezpagesnav li:hover ul, li.over ul {
	display: block;	
}

#ezpagesnav li:hover ul, #ezpagesnav li.sfhover ul {
	left: auto;
}


#ezpagesnav hr {
	display: none;	
}

Part of the problem is that you have doubled your <HEAD> section:
This is from the source of your page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
<head>
<title>Diva Knitting, Knitting Supplies and Other Cool Stuff</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="Knitting Cards Stitch Markers Sock Yarn Needles Knitting Jewelry Gift Certificates Project Spectrum Purse Handles Accessories and Notions Swifts and Winders Diva Logo Merchandise Knitting Bags Yarn Patterns/Kits Other Cool Stuff Dye knitting, knit, qiviut, yarn, luxury yarn, wool, handpainted, hand painted, hand dyed, sock yarn, Opal, diakeito, Muskox, ecommerce, open source, shop, online shopping " />
<meta name="description" content="Diva Knitting :  - Knitting Cards Stitch Markers Sock Yarn Needles Knitting Jewelry Gift Certificates Project Spectrum Purse Handles Accessories and Notions Swifts and Winders Diva Logo Merchandise Knitting Bags Yarn Patterns/Kits Other Cool Stuff Dye knitting, knit, qiviut, yarn, luxury yarn, wool, handpainted, hand painted, hand dyed, sock yarn, Opal, diakeito, Muskox, ecommerce, open source, shop, online shopping" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" /><link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> 
<meta http-equiv="imagetoolbar" content="no" />
<meta name="authors" content="The Zen Cart™ Team and others" />
<meta name="generator" content="shopping cart program by Zen Cart™, http://www.zen-cart.com" />
<base href="http://www.divaknitting.com/testzenstore/" />

<link rel="stylesheet" type="text/css" href="includes/templates/custom/css/style_imagehover.css" />
<link rel="stylesheet" type="text/css" href="includes/templates/custom/css/stylesheet.css" />
<link rel="stylesheet" type="text/css" href="includes/templates/custom/css/stylesheet_categories_menu.css" />

<link rel="stylesheet" type="text/css" href="includes/templates/custom/css/stylesheet_css_buttons.css" />
<link rel="stylesheet" type="text/css" href="includes/templates/custom/css/stylesheet_ezpagesnav.css" />
<link rel="stylesheet" type="text/css" href="includes/templates/custom/css/stylesheet_sg_picture_frame.css" />
<link rel="stylesheet" type="text/css" href="includes/templates/custom/css/stylesheet_sg_zc130.css" />
<link rel="stylesheet" type="text/css" media="print" href="includes/templates/custom/css/print_stylesheet.css" />
<script type="text/javascript" src="includes/templates/template_default/jscript/jscript_imagehover.js"></script>
<script>
var cot_loc0=(window.location.protocol == "https:")? "https://secure.comodo.net/trustlogo/javascript/cot.js" :
"http://www.trustlogo.com/trustlogo/javascript/cot.js";
document.writeln('<script language="JavaScript" src="'+cot_loc0+'" type="text\/javascript"><\/script>');
</script>
</head>
<body id="indexBody">

<div id="mainWrapper">
    <table class="centershop" border="0" cellspacing="0" cellpadding="0">
      <tr><td>

        <table width="100%" border="0" cellspacing="0" cellpadding="0" class="headerNavigation">
          <tr>
            <td align="left" valign="top" width="35%" class="headerNavigation">
              <a href="http://www.divaknitting.com/testzenstore/index.php?main_page=index&zenid=939ef51853df21fac681e8c0923cf25f">Home</a> | 
              <a href="https://www.divaknitting.com/testzenstore/index.php?main_page=login&zenid=939ef51853df21fac681e8c0923cf25f">Log In</a>
            </td>
            <td align="center" width="30%" class="headerNavigation"><form name="quick_find_header" action="http://www.divaknitting.com/testzenstore/index.php?main_page=advanced_search_result" method="get"><input type="hidden" name="main_page" value="advanced_search_result" /><input type="hidden" name="search_in_description" value="1" /><input type="hidden" name="zenid" value="939ef51853df21fac681e8c0923cf25f" /><input type="text" name="keyword" size="6" maxlength="30" style="width: 100px" value="Enter search keywords here" onfocus="if (this.value == 'Enter search keywords here') this.value = '';" /> <input type="submit" value="Search" style="width: 45px" /></form></td>

            <td align="right" valign="top" width="35%" class="headerNavigation">
            </td>
          </tr>
        </table>
        <table border="0" width="100%" cellspacing="0" cellpadding="0" class="header">
          <tr><!-- All HEADER_ definitions in the columns below are defined in includes/languages/english.php //-->
            <td valign="middle" height="64px" width="192px">
<a href="http://www.divaknitting.com/testzenstore/index.php?main_page=index&zenid=939ef51853df21fac681e8c0923cf25f"><img src="includes/templates/custom/images/logo.jpg" border="0" alt="Diva Knitting" title=" Diva Knitting " width="163" height="200" /></a>            </td>
            <td align="center" valign="top">

<h1<h1>            </td>
          </tr>
        </table>
<!--bof-optional categories tabs navigation display--><!--eof-optional categories tabs navigation display--><!--bof-header ezpage links-->


<head>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en">

<link rel="stylesheet" type="text/css" href="includes/templates/custom/css/stylesheet_ezpagesnav.css" />


<script language="JavaScript">
<!--

function SymError()
{
  return true;
}

window.onerror = SymError;

var SymRealWinOpen = window.open;

function SymWinOpen(url, name, attributes)
{
  return (new Object());
}

window.open = SymWinOpen;

//-->

</script>



</head>

<body>

You also have two stylesheets called stylesheet_ezpagenav.css you only need one.

Do I maybe have things in the wrong file then? The java script that allows the dropdowns to work in IE is supposed to be in the header...right now the code is in custom templates in the file tpl_ezpages_bar header

There is only one css in the templates/custom/css folder...that I know of anyway. Did you see it somewhere else? I may have uploaded it somewhere else accidentally since I have been doing uploads of that file all day.

Yep, its being called twice in the double <HEAD>

Ok...now I'm with you. Another header is being pulled from somewhere...I can't figure out where. I tried moving the header info to modules/ezpages_bar_header instead and that didn't work either. Also tried header.php and tpl_header to no avail. Is it a matter of disabling something...and if so, where? I can't seem to find how that works.

And with the way I'm trying to set this up, should the ezpages nav bar be on or off? I found it a few days ago to turn it on and now I can' t seem to find that option in the admin. I know it's there...somewhere...maybe I'm now blocking anything that says ezpages, lol.

look in admin -> configuration -> EZ-Pages Settings -> EZ-Pages Display Status - HeaderBar set to 0 to turn it off.

clydejones:

look in admin -> configuration -> EZ-Pages Settings -> EZ-Pages Display Status - HeaderBar set to 0 to turn it off.

LOL...that would be a big "DUH" I knew it was there but I kept looking for it near the top of the list.

Ok...now that I turned it off, there is only one header...but also none of the custom code. Should I put it in a different file? I tried putting it in tpl_header instead now, but that didn't work. Where would be the best place to put this extra header stuff now? That's why I originally put it in the ezpages header file so I could just set it to on and have it work as if the original ezpages header was activated.

What code do you need inserted? is it a mod from the download section?

No, it's not a mod...I'm trying to do it myself. I've been using the "suckerfish" code for horizontal dropdown menus to do it, which requires some javascript in the header so that it will work properly in IE and some creative styling.

I finally found in header.php in the <head> part that there is already a statement that will load any script in the templats/custom/jscript folder. So...light on...I made the folder, put the js in a file and voila...no double header anymore.

However the layout is still goofy so it must be in the css? It mostly works in IE except the dropdowns are moving the main content intead of appearing over it. It worked how it should at some point yesterday (at least that part anyway) and I have no idea what I changed to make it do what it is doing now.

In FF the main content is still being shifted to the right of the nav section, possibly from a float, but I tried using clear: and it only partially worked...the content shifted to the left but the dropdown then becomes squished to the left vertically.

In your

includes -> templates -> YOUR_TEMPLATE -> common -> tpl_header.php

first find the following:

<!--bof-branding display-->
<div id="logoWrapper">
    <div id="logo"><a href="http://www.divaknitting.com/testzenstore/"><img src="includes/templates/custom/images/logo.jpg" border="0" alt="Diva Knitting" title=" Diva Knitting " width="163" height="200" /></a></div>
    <div id="taglineWrapper">
      <div id="tagline"><h1<h1></div>
    </div>
</div>
<br class="clearBoth" />
<!--eof-branding display-->

the portion in red need to be corrected.

Next find the following:

<!--bof-header ezpage links-->
<html>

<body>

You need to delete the portions in red.

Just a hint for reference.

Always design for Firefox and then tweak your setting for IE.

Thanks for pointing those out.

For the first part, I found the tags in languages/english/custom/header.php

For the second part, I found the html and body in the tpl_ezpages_bar_header file...I didn't realize I could just start the html from the dropdows.

Layout still broken though.

In your

includes -> templates -> YOUR_TEMPLATE -> common -> tpl_header.php

find the following:

and just below it add

and see if that helps

Hot Dog!!!! Thanks so much for your help. That did it. Why there I wonder? The clear: in the css should work, shouldn't it? Just want to try to learn future reference.

Now I just need to figure out why the dropdowns are pushing the content down.

Can I ask why you have two(2) category sideboxes?

I got the menus to quit pushing the content down by adding position:absolute to these two things:

#ezpagesnav li:hover ul, li.over ul {
	display: block;
	background:#fff;
	position: absolute;
	}

#ezpagesnav hr {
	display: none;
	position: absolute;
	}

now to figure out where the bullets in FF are coming from.

clydejones:

Can I ask why you have two(2) category sideboxes?

Absolutely no reason! lol I just turned them both on when I was installing the css flyout mod. Since it's only a test store I didn't turn off the regular categories sidebox.

Glad I could help

Got the bullets to go away in FF by adding list-style to this section:

#ezpagesnav li {
	float: left;
	position: relative;
	width: 15em;
	text-align: center;
	cursor: default;
	background-color: #ffffff;
	border: 1px solid #499bca;
	border-width: 1px 0;
	list-style: none;	
	}