ow please, someone help me, im so lost

[beavertje]

in 3 days my first exhibition is coming.
I want to get this site ready, but it seems it is very difficult.
Have been trying for weeks to solve the layout problems, but i cant.
I even paid a guy to fix it, but he screwed it up even more.

Anyone here, who can help me get out of this stylesheet, page layout nightmare?


I thought it was really simple, layout problem. But guess not.

my website is http://www.esseorganicskincare.nl

The problem is in the account create account page and payment pages.

Text runs through text. layout seems to be left, top, and sometimes right. I dont know where to fix it.
Also the first page categories show far apart somehow. I would love those on one line.


Please, Please help me.


Alex

[rstevenson]

Last things first: find this in your stylesheet.css file

.categoryListBoxContents {
	color:#666600;
	font:Verdana, Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size: 0.9em;
	margin-right:100px;
	}

Change the number in red to something smaller. This will tighten up the spacing of those images on the main page. Dropping it to 50px gives you three of the images on a line. Dropping it to 0 (zero) gives you four. Your choice.

The create account page looks properly lined up in Firefox. I haven't checked it in IE. If the alignment in IE is off, then you may need one of the tricks to force IE to behave. Someone more familiar with IE can help better than I can.

Rob

[rstevenson]

It looks like IE is not inserting a line break after the <legend> tag in the <fieldset> of each part of the form. Ordinarily, browsers will understand that a legend has an implied line break after it, so the legend text is displayed one line up from the fields below it. This is how your create account page appears in Firefox. But IE is starting the next line on the same line as the legend.

Having gotten that far, I don't know what to do about it. I do, however, know that the default create account page in Zen Cart does not exhibit this problem, so the quick fix would be to revert to that page until a proper fix can be found.

... ... ...

I checked your page code in the browser and it appears to be the same as the default Zen Cart page code, so that's not it. But I did notice a difference in the way legend is defined in your stylesheet. The default definition in stylesheet.css is ...

h4, h5, h6, LABEL, h4.optionName, LEGEND, ADDRESS, .sideBoxContent, .larger{
	font-size: 1.1em;
	}

... and yours is ...

h4, h5, h6, LABEL, h4.optionName, LEGEND, ADDRESS, .sideBoxContent, .larger{
	font-family: verdana, helvetica, sans-serif;
	font-size: 1em;
	float: left;
	color:#666600;
	}

If we assume that some of that is needed by the other elements, then I'd take legend out of that grouping and set it up separately, like this, removing the float: left; from it (which I think is the problem) ...

h4, h5, h6, LABEL, h4.optionName, ADDRESS, .sideBoxContent, .larger{
	font-family: verdana, helvetica, sans-serif;
	font-size: 1em;
	float: left;
	color:#666600;
	}

LEGEND {
	font-family: verdana, helvetica, sans-serif;
	font-size: 1em;
	color:#666600;
	}

I don't have the Web Dev tools in IE to test this out on your site. So give it a try and see what happens. It can't hurt, and it might fix the problem. Be sure to check all the other pages that might have form elements on them in Zen Cart to make sure something else hasn't been messed up by this change.

Rob

[beavertje]

Going to try this all straight away, tnx a zillion for taking the time and trouble to look.

be right back...

[beavertje]

i think it is looking better like that.

took away the float as well with fieldset.


looks more clean.
Have to work on more space between buttons and rows.
any suggestions?


Only thing i cannot figure out is how to get the icons on main page to form a row.

any hints?

tnx a million mate! really saved and made my week.

[rstevenson]

Those images are in separate divs, one div for each one. By default a browser will display each div on its own line. An attempt was made to make the divs behave as you want by giving them an in-line style of width:25%. This works in Firefox, and if you change the width in the stylesheet as I suggested in post #2 above, you'll even get 4 per line. But I see that, once again, IE is not behaving.

I'm stuck on this one. Someone with more experience debugging IE will need to step in.

Rob

[tony_sar]

when i remove float from h4 , things gets much better

h4, h5, h6, label, h4.optionName, legend, address, .sideBoxContent, .larger {stylesheet.css (line 71)
color:#666600;
float:left;
font-family:verdana,helvetica,sans-serif;
font-size:1em;
}

you can remove h4 from above rule and create another rule at the end of your style

h4 {
color:#666600;
font-family:verdana,helvetica,sans-serif;
font-size:1em;
}

with NO float .
give this a try and see if helps at all .

[tony_sar]

also

#checkoutShipto {stylesheet.css (line 297)
text-align:left;
width:100%;
}

if you add width:100% , then page looks ok .
but then again , i have no idea of its effect on other pages. nor on IE