Alignment and size of tile_back.gif

[Tantirx]

OK I think the pic below says everything. I am having some minor alignment issues. What I have done so far is added a height attribute to the css file whenever tile_back.gif is used.

I am using version 1.3.9h and it is not modded and no addons except for the new image handler2 upgrade.

See the issue your self at http://www.oceanabyssaquatics.ca/store/

Here is the pic of specifically where the issues are


Thanks in advance for your assistance.

[stevesh]

tile_back gif is 30px high. and Zencart has no way of stretching it, so it looks like it's displaying the image and then starting to repeat it.

If you want the headers that tall, you'll have to create an image 45px high.

[Tantirx]

tile_back gif is 30px high. and Zencart has no way of stretching it, so it looks like it's displaying the image and then starting to repeat it.

If you want the headers that tall, you'll have to create an image 45px high.

OOPS!! Ok I had done a test to see the top header part as 45px tall and forgot to put it back....that issue is now fixed....my bad.

Do the headers for each section not use the tile_back.gif image and therefore be would they not be identical in alignment and size?

OK if you look closer you will see the following where the "Categories" header is one or two pixels lower than the "Breadcrumbs" bar.


In this case the "Search" bar appears to be one pixel or so taller than the "Breadcrumb" bar. The top alignment is fine though.



In this final example; you will see that the Bars for a few different sections are of different height. EG: the "Languages" and "Who's Online" bars are not as tall as the "Currencies" or the "Search" bar (despite the fact that they all use the same graphic).

Once again how do I make everything line up perfectly and have ALL of the bars be an identical height.

[Tantirx]

Bump...

[Tantirx]

Re-Bump

[rbarbour]

OK if you look closer you will see the following where the "Categories" header is one or two pixels lower than the "Breadcrumbs" bar.

you could add to your stylesheet:
#navColumnOneWrapper, #navColumnTwoWrapper
{margin-top:2px;}

hope this helps!

[rbarbour]

disregard other post - it will conflict

[Tantirx]

I guess I have completely stumped some of you...lol.

[stevesh]

Those kinds of tiny alignment issues aren't usually that difficult to fix.

Install the Firefox browser and the Web Developer plugin for Firefox. You can use those to see where in the stylesheet you change the styling of the various page elements.

Ctrl-Shift-Y will allow you to hover over a section of the page and see the class and id names for that section in the box at the top. The statements in the stylesheet that begin with # are id's and the ones that begin with dots are classes.

Ctrl-Shift-E will open the CSS editor and allow you to edit the stylesheet and see the changes in real time without changing anything permanently. An essential tool.

Some prefer Firebug, which does much the same thing.

You can also look at the source code of the page. In this case, you'll notice that the sidebox headers for the Currencies and Search boxes are inside <label> tags (I don't know why), so would be styled in different rules.

[Tantirx]

Those kinds of tiny alignment issues aren't usually that difficult to fix.

Install the Firefox browser and the Web Developer plugin for Firefox. You can use those to see where in the stylesheet you change the styling of the various page elements.

Ctrl-Shift-Y will allow you to hover over a section of the page and see the class and id names for that section in the box at the top. The statements in the stylesheet that begin with # are id's and the ones that begin with dots are classes.

Ctrl-Shift-E will open the CSS editor and allow you to edit the stylesheet and see the changes in real time without changing anything permanently. An essential tool.

Some prefer Firebug, which does much the same thing.

You can also look at the source code of the page. In this case, you'll notice that the sidebox headers for the Currencies and Search boxes are inside <label> tags (I don't know why), so would be styled in different rules.

I actually do have Firefox and I also use the Web Developer plugin but never thought to use it for this purpose...I'll give it a try :)

Are the "Label" tages not suposed to be used? Why would they be used on some of the bars and not on others?