Desperate for Help- Any expert CSS guys out there?

[eyal8r]

ok guys- 2 nights in a row, I'm losing my mind. I'm an old school web guy- just started learning CSS stuff. I THINK I get the concepts, but the execution is not quite there yet.

I'm trying to re-design the header off the default template. The layout if fairly simple, IMO. I just can't get the @($*$)# thing to work!

I've got it mostly working when looking at it in FireFox. However, I switch to IE and it's just all over the place.

The big problem is I don't completely understand CSS and how divs work. I've been googling, doing tutorials, watching videos, and practicing for 2 days straight... it's just not working. I'm missing something- and it's probably VERY obvious to the trained eye.

I can't post the website, which makes this more difficult to ask for help. Is there someone who wouldn't mind taking a look at it- I can PM you the website/code and see what I'm doing wrong? I believe it's fairly simple layout. If you look at bodybuilding dot com, the header they use in their store- it's VERY similar to that, if not identical.

I would LOVE it if one of you CSS guys could take a quick peek, and let me know what I'm missing. I don't know how I could make it worth your time- maybe send some good karma your way? LOL... I sincerely appreciate any help.

[kobra]

Why can't you let us see this?

[gjh42]

If you don't want it found by search engines yet, you can break the URL into pieces so only humans can understand it.

[kobra]

you can break the URL into pieces so only humans can understand it.

If you post this ADD ONLY ONE Space to it to break the link as in

http ://www.zen-cart.com/

[eyal8r]

I was asked by the owners not to post the site anywhere until it's completed- something to do with disclosures and whatnot. However, I have to get this done and I have no options to figure it out. I'm sure you guys can take a quick look and fix it. I've got divs/css all over the place! LOL..

hcgsupply *dot* com/store

I appreciate any input you guys have.

[schoolboy]

Now that we can see the site, what is it that's not how you want it to be?

[eyal8r]

If you look at the header in FireFox, it looks *okay*- just a small change (I'll talk about that below).

But then look at it in IE, and the header is all over the place. I want it to look like it does in FireFox (or, very similar to the header at bodybuilding dot com store).

Additionally- the cart links. When you're not logged in, or your cart is empty- those links will float to the left. I'd like for it to float to the right side of the header. Once you add items to the cart, that line fills out with other links. I don't know how to fix it- tried changing the float properties, but it's no-go.

I feel like I've made soo many changes to it- the code is messy and all over the place, let alone, not working. In order for me to learn this CSS stuff- I'd LOVE for someone to show me the PROPER way to create this header so I can learn how to do it.

I sincerely appreciate all the help!

[gjh42]

Starting from the top, the stray text in IE6 is caused by incorrectly commenting out some HTML:

<!--<div id="headerWrapper"><!-- Sets margins for entire header to zero-->-->
<!--<div id="headerbg"><!-- Sets drop shadow effect as bg image in header -->-->

Try

<!--<div id="headerWrapper">--><!-- Sets margins for entire header to zero-->
<!--<div id="headerbg">--><!-- Sets drop shadow effect as bg image in header -->

You have eliminated the #headerWrapper that surrounds all of the header elements, which may not be helping in IE.
Various suggestions for your CSS are commented in the code below:

ul#mainmenu {
float: right;
padding: 0px; 
list-style-type: none;
background-image: url('../images/mainmenubg.png');
height: 40px;
/*width: 250px;*/ /*floated elements width auto collapses to just fit the content, so doesn't need to be specified*/
margin: auto;
}

#mainmenu li {
  float: left
  }

ul#mainmenu a {
background-image: url('../images/mainmenudiv.png');
background-repeat: no-repeat;
background-position: right;
padding-right: 7px;
padding-left: 7px;
display: block;
line-height: 32px;
text-decoration: none;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
color: #371C1C;
}

ul#mainmenu a:hover {
color: #FF0000;
}
  
#headerbg {
background-image: url('../images/headerbg.jpg');
background-repeat: repeat-y;
}

#logo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
	float: left;
	}/*float and position: relative; are not both needed. ie may be confused by the combination*/
	/*again, floated elements width auto collapses to just fit the content, so doesn't need to be specified. 
positioned divs default to be 100% width*/
#logo {
  /*position: relative;
  left: 40px;
  top: 0px;
  z-index: 10;*/
    margin: 0 40px;/*eliminate positioning and add margin to keep left spacing*/
  }

#SiteLabel {
  color: #3333cc;
  font-weight: bold;
	font-size: 3em;
	height: 30px;
	padding: 0.5em 0.2em;/*with fixed width eliminated, some left/right padding sets the desired spacing*/
	/*width: 100px;*//*again, floated elements width auto collapses to just fit the content, so doesn't need to be specified*/
	float: right;
	}

[eyal8r]

Glenn-
Thank you SOO MUCH for the quick reply. I didn't realize that about the width/float- that makes sense. I had been reading a tutorial that said you must ALWAYS specify a width when you float divs...

I added the #headerwrapper BACK in- and made the changes you specified. It looks about the same in FF, but IE- it's still all over the place. Also- why's there soo much space at the bottom of the Header? Lastly- I noticed the Logo won't go any higher than the bottom of the menu buttons on the right side. Any ideas here?

Structurally, am I building this the *right* way? Or, is it just really messed up?

If you, or anyone else for that matter, has any input, I'd REALLY appreciate it!
Thank you!

[dbltoe]

You've got a few minor code glitches, but looking much better.
Try using the Admin's Developers tool kit to search for contactbtn
Once you find the file it's in, you need to change

<li id=contactbtn"

to

<li id="contactbtn"

Your title has & versus the proper &amp; and an empty <p> in the footer.
Fixing all those will bring your current code up to compliant.

Just a little fix that I might do is to change the css around line 115 from

margin: auto;

to

margin: auto 4px auto auto;

That blends the menu bar into the headerbg.jpg a little better.

Doing something similar around line393, changing margin to margin: 0 4px; and adjusting the ezpagesbarbg.jpg accordingly would smooth out the sides.

Lots of other ways to experiment with moving. I always advocate getting Firebug to go with Firefox. Excellent tool for playing with the stylesheets.