please help with css

**cherylkemp** · 21 Jul 2006, 12:35 AM

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:

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;	
}

**clydejones** · 21 Jul 2006, 01:14 AM

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

Code:

<!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&trade; Team and others" />
<meta name="generator" content="shopping cart program by Zen Cart&trade;, 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&amp;zenid=939ef51853df21fac681e8c0923cf25f">Home</a>&nbsp;|&nbsp;
              <a href="https://www.divaknitting.com/testzenstore/index.php?main_page=login&amp;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 = '';" />&nbsp;<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&amp;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>

**clydejones** · 21 Jul 2006, 01:32 AM

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

**cherylkemp** · 21 Jul 2006, 03:22 AM

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.

**clydejones** · 21 Jul 2006, 03:29 AM

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

**cherylkemp** · 21 Jul 2006, 11:28 AM

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.

**clydejones** · 21 Jul 2006, 12:05 PM

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

**cherylkemp** · 21 Jul 2006, 12:17 PM

Originally Posted by 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.

**clydejones** · 21 Jul 2006, 12:49 PM

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

**cherylkemp** · 21 Jul 2006, 01:27 PM

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.

Thread: please help with css

Thread Tools

Search Thread

Display

please help with css

Re: please help with css

Re: please help with css

Re: please help with css

Re: please help with css

Re: please help with css

Re: please help with css

Re: please help with css

Re: please help with css

Re: please help with css

Similar Threads

v139h Please help me implementing a custom cursor with CSS

v150 Please help... File merge with numinix CSS/JS loader

Please help displaying images with CSS

problem with css on IE! Please Help Me!

Converting OS css to Zencart Css help please.

Bookmarks

Bookmarks

Posting Permissions