X-Cart forums

[Sisom]

Hi, I'm trying to set up a site for a client, and I haven't used version 4.2 before, and I have come across an odd problem: when I set
#header .line2 {
float;right
}

I can't click inside the search box, the magnifying glass and 'Advanced Search' links don't work either. If I leave it where it was (which is where I don't want it!) it works fine.

Has anybody got any ideas why this could possibly be happening?
I noticed some strange CSS positioning in the default settings while I was editing things, the logo is set to position:absolute, and I was wondering if anything else is positioned in an odd way like this. I noticed that header.tpl appears at the end of the HTML, instead of at the beginning, presumably for SEO purposes.

[ARW VISIONS]

Yeas, the footer and header are positioned absolutely so that the main body content can be delivered first.

Mind posting the url of the problem, so we can check it out?

[gb2world]

Possibly you have moved the search div with the search under another div, so you can't select the links any longer.

Use Firefox with Firebug addon - it tells you exactly what css is used where, and will show you what the problem is.

(Ashley is correct - if you don't post a link, all people can do is speculate when trying to help you.)

[Sisom]

Hi Ashley, and gb2world, thanks for your help. I have installed Firebug, I don't know how I've managed for the past few years without it- it's wonderful!

The site I am working on is at:
http://www.mrdtrading.co.uk/store/home.php?shopkey=meachin

I only started looking at it two days ago, got stuck on this problem and have spent the past few hours properly exploring the site using Firebug.
I've floated #header .line2 right, instead of using Qualiteam's
margin-left:250px
or whatever it used to say.
If I float #header .line 2 left, it works fine!

[ARW VISIONS]

Line 2, which contains the search bar, has been moved to line up directly under line 3.

You would need to add a z-index to line-2 or re-arrange line 3.

Since line 3 is your sped bar, I presume, it could grow to have link under the search bar if you don't construct this correctly.

[Sisom]

Thanks for your very quick response Ashley, in between posting and reading your reply, I had investigated Line1, Line2 and Line3 a bit more (I am used to a four year old version of X-Cart, so this was all a learning curve for me) and have moved the Speed Bar down to where I want it.

I am literally blown away by Firebug - I have been using StyleMaster for several years, but Firebug makes things so much easier for me. (I use Webuilder as my HTML editor, but can now use it for CSS too, as Firebug shows me everything I used to use StyleMaster for, only now I don't need to have yet another program open, and can edit the CSS within Firefox and see the results immediately, when I'm experimenting. Truly awesome! The ability to turn off a declaration, just by clicking on the no entry sign, is fantastic, it saves so much typing time.)

Is it me or do Qualiteam/X-Cart not seem to use floats in their CSS? I see a lot of "right:0" etc. styles, rather than "float:right". I've done quite a few websites and always used floats, and never use positioning the way they do.

[ARW VISIONS]

glad I could help

[Sisom]

I thought I'd post this comment here, as it doesn't warrant a new thread; I've just found another mistake in the CSS, line 647 in altskin.css:

.products .descr,
.product-details .details .descr
{
font-size: 13px;
font-weight: bold;
}


I edited the font size to make the product description larger, but it didn't work - then I looked in Firebug and saw that there was a style in main.css that was more specific, which is line 19:

div,th,td,p,input,select,textarea,tt,button {
font-family: verdana, arial, helvetica, sans-serif;
color: #2c3e49;
font-size: 11px;
}

so I had to add a 'p' descendant tag to the altskin.css, like this:

.products .descr p,
.product-details .details .descr p
{
font-size: 13px;
font-weight: bold;
}

I would have thought just about everybody who edited their installation would want to change the appearance of the product description text, but the way it's been set up, newbies would have a hard time working out what's going on.

Anyway, I have learnt loads today with Firebug, it's a truly awesome add on for Firefox, and I think it will save me a good third of my time when designing websites.