I’ve been working in IT for years, but I always steered clear of web design. Now I’m working for my family business as the only IT guy, where I have no choice but to dive right into this.
We recently rehosted our e-commerce website, which meant migrating to a new CMS platform. Now I’m learning CSS the hard way. I hired a freelancer to help with programming. His day job is with a much bigger company and he said he knew CSS. For some reason, he can’t fix alignment issues or make a site that holds together on multiple platforms.
Example: Page alignment lost when page is zoomed on Mac Firefox Sample problem is at: <snip />
This page looks great in IE7. Also looks good on FF Mac, but only if the page is zoomed in one level. If you do Command-0 you’ll see the problem. The “within 5 miles” dropdown field becomes misaligned. It falls slightly below zip code.
We’ve been dealing with alignment issues like these for months. Our code doesn’t validate, but he doesn’t seem to find a problem with that. Years ago when I took HTML in school, our code had to validate.
The style sheet we’re using was not made from scratch. We started out with something provided by our e-commerce host/service provider. Trouble now is that changing one thing on the site will often ruin another page. Should we have started from scratch? Did I pick the wrong e-commerce solution?
If someone could point me in the right direction on this issue, I’m going to just start learning this stuff myself. I’m already best friends with Firebug.
Yes, dropping the within to 11px fixed this. I can’t tell you how much I appreciate your help. I am an instant fan of this forum!
Your other advice is well received. I’m going to read it over a few times once I’m past this font size / alignment issue.
We’re a small company so I might have to learn some CSS. That, and we might have to dual host this site, with the non-ecommerce pages living on Joomla where we have fewer limitations.
clearly not enough room for both the “within” text and the dropdown… I never use zoom but Ubuntu with Gnome tends to make letters just a hair too big compared to Winblows. I’ll bet simply making the text too small to read (as a test) magically makes the dropdown line up.
Windows:
and
show things fine… I notice there’s also suddenly a menu. I hope that doesn’t mean Javascript was required to get the menu to show!
The style sheet we’re using was not made from scratch. We started out with something provided by our e-commerce host/service provider. Trouble now is that changing one thing on the site will often ruin another page. Should we have started from scratch? Did I pick the wrong e-commerce solution?
Depends. I’ve been working with someone now and then on his Magento sites. I hate it with a passion, but that aside it’s not horribly written, just horrible implemented (like most templates, hundred of separate CSS files fight to the death to see who overrides who, making it very hard to figure out who’s doing what).
You could strip out 90% of the CSS and keep the really basic box CSS, check in ALL browsers (not just on a Mac), and if things look ok, slowly start adding stuff back in. When it starts getting goofy, go back and see if you can’t write from there.
Or it simply may be font-size differences between browsers and OSes. They say it’s a Good Thing to set all your boxes in something like em’s, but I know by experience that’s an excellent way to make browsers on Gnome look different than browsers on Windows and especially kills browsers like Konqueror and Epiphany who can’t seem to count em’s correctly. I’m careful where I use them.
You’re free to learn CSS yourself but if you’re a backend guy you may find it extra frustrating, esp since it looks (and on the surface is) so very easy. It took me a few years to really learn CSS where I’d feel comfortable battling bugs doing a template for eCommerce (which tends to be complicated as many eCommerce sites switch number of columns and styles from page to page… I didn’t look to see if yours did).
Yes, the FF3/Ubuntu one summarizes it. Here’s one I hosted on our server showing FF3 on Mac. This appears at no zoom (Command-0). If I’m viewing zoomed in one level (Command+), the page looks just fine.
Yes, sadly, Javascript is required for that menu to show. This is another reason I’m here, to fix the amateur issues. Our /default.aspx page is almost 100% flash, another crime I’m sure.
But first I have to tackle alignment problems that cropped up after migration. Right now I’m stressing out trying to make the page look good on a Mac, as that’s what our CEO and VP of Sales use.
Question: are you actually using zoom or is “zoom text only” selected?
It’s more often that alignment gets out of whack with text-enlarge rather than zoom as zoom usually keeps everyone in the same dimensions of each other (except in browsers who really suck at zoom like IE7).
Question 2: is this a certain eCommerce software/template? If so, which?
If you’re planning on fixing menus and whatnot, possible a rewrite of the base template is in order (no small undertaking if it’s anything like Magento arg!). Is this many many pages etc? and a live site that’s supposed to be earning money?
If so, another consideration is actually hiring a front-ender who is familiar and good with template wrangling.
We’re a small company so I might have to learn some CSS.
Hm, were I in your position I’d either
-really learn CSS super good (and all the CSS issues with Joomla if you’re using Joomla… I don’t know about them, have only heard about them)
OR
-hire a dedicated guru. Someone who only does HTML and CSS. May totally be worth the money.
Everyone, or just you, learning some CSS is not going to help except when you have really simple, obvious problems… everything else will make you lose hair. At least, that’s what I’m assuming will happen.
There’s also the issue of small text “fitting” the design but being unreadable. 11px causes me to do text-enlarge at least once.
One trick you’ll love is adding ugly background colours to everything, even if you also use Firebug. You can see places to make containers wider, or see when they are too wide, etc. Esp with floats.
I’d love to, but if it can’t be done in *.css, it can’t be done. At least that’s what the e-commerce software provider / host tells us. They let us play in *.css and they give us control over our content, but they don’t let us modify things like this search tool.
mmm… not really. You don’t have access to the template (view) files? I find it hard to believe this to be true.
Your locator form is a table layout, which is fine, you just need to move the word ‘Within’ from it’s current cell to the one above it (in the same row as ‘Zip/Postal’).
But if all you have access to is CSS then there’s not much you can do. I can’t imagine you not having access to the view files… hmm…
In that case, my original question is answered too. I should replace my current CSS pro if he got stumped on this. I hired him for the project because he claimed to only do HTML and CSS. Maybe he works better on a team at his day job.
I get a feeling this was a basic issue, something he should have been able to handle in under 48 hours.
I think the e-com provider likes to make their job easier by limiting what the customer gets access to. They offer design services too, although we opted not to go with them. (oops?)
I will ask if they can make this change for us. I’m also going to try changing just the size of the word “within” using CSS, leaving the rest of the text at 12px. It’ll be another band-aid solution.
Since “zip-code” should be a label, I would assume making “within” a label too in the HMTL would be necessary… but otherwise, whatever element wraps “within” and the select (I didn’t look at the HTML once, sorry!) could theoretically be pulled up with a negative top margin (if it’s a block… if it’s not a block then it would need to be made a block). Buuuut, I don’t like doing stuff like that partially because Safari will show differently than most other browsers… and the height it needs to be pulled up is likely dependent on line-height and font-size which is part of the current problem.
If they can remain in one line, I think visually it makes sense the way it is… “within <select>” is a sort of extension of the zip code question, or at least that’s what it looks like it is.
I wonder if the whole form or whatever the constricting element is can just be made a bit wider so the font-size doesn’t have to be reduced.
I would love to make the form wider. I gave it my best shot, trying to identify the element in firebug, but had to move on to the other problems on the site.
I have decided to study and at least learn basic CSS. People have been asking me if I did websites since 1996, and I’ve been turning them down. I was always a desktop guy, then an infrastructure guy. If I’m going to manage an e-commerce department, I’d gain some credibility knowing the basics.
It’s sort of like getting your house remodeled. If you know nothing about plumbing or electrical, you’re in for a wild ride. Know a little something about your house, and you can at least confidently hire a guru. My problem with the current guy is I hired someone to do something I was clueless about.
By the way, was the entire select box supposed to move? I pasted the code right into the end of styles.css, just as it was here. I also removed my old code where I reduced the text in lstRadius to 11px.
Well, I thought it was a clever way to solve my original problem without decreasing font sizes, although the word “within” stayed on the same line.
I had a conference call with the client, and we repeated the very painful process of clicking through pages and finding problems, then chewing me out. (I’m doing this as my contribution to the family business, so client has seen me in diapers.)
On that call, client said “there should be some space between within and the selection box.” I made that happen as fast as I could, which meant reducing the font size again. I can’t handle anymore site drama.
But I’m keeping your code sample. When the dust settles, I can experiment with the page some more.
