Desperate for Help- Any expert CSS guys out there?

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.

Why can't you let us see this?

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

gjh42:

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/

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.

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

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!

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

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

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!

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 & 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.

I added the #headerwrapper BACK in
Not to your stylesheet though
Structurally, am I building this the right way? Or, is it just really messed up?
Not sure as you have created many new divs fir reasons unknown versus using the div's present by default and adding elements to them.
Your design is simple and should not require much alteration from default

huh- nope. I made those changes, and still looks terrible in IE. The STORE text is on the left of the menu (isntead of below)- as is the Shopping Cart Text links. Any suggestions here?

I just checked the original CSS from the template- the #headerwrapper only sets the margin: 0em; padding: 0em; and nothing else. That's exactly what I have in my CSS now.

Man, this is frustrating, and I'm desperate. It seems like such an easy thing to do, too! I've got a lot to learn. I sincerely appreciate any input as to how to re-write this, or fix it.

"I had been reading a tutorial that said you must ALWAYS specify a width when you float divs..."

I have assigned widths to floated divs as a matter of course, and there are circumstances where it is necessary to get the right effect, but I have found that sometimes letting it sort itself works best. I don't recall seeing it written that a floated div shrinkwraps its content by default, but it is most likely in print somewhere, certainly in the W3C CSS spec.

Anyone else have suggestions on how to fix this? There's gotta be something I'm missing here...

Start over and build a proper template

One book that I found extremely helpful in sorting out CSS is "HTML, XHTML & CSS, 6th edition" by Elizabeth Castro. Mine has post-it notes all over the place.

While possibly being just a little abrupt:P, Kobra is correct that you will serve yourself better by starting over.

My mother would have said, "You're trying to kill a fly with a shotgun!" Or "You got on your horse and rode madly off in ALL directions."

Seriously, you have so many "fixes" and "adjustments" that every fix causes something else to look "funny".

On a side note, a compatibility update came out for IE 8 today.:no:

ugggh- that's what I was afraid of!

Well- what's this compatability update? I assume that's for ZenCart itself?

Thanks guys!

compatibility update was put out br Microsoft for IE 8