Page 1 of 1

CSS Style Sheet Expert?

Posted: Mon, 06 May 2013 11:14 pm
by Strong Eagle
Folks, I'm having an issue with a CSS style sheet. I changed the font and now my menus line up OK when on a standard monitor of varying resolutions, but they don't align properly on a iPad or on my mobile phone. Try www.catalystbusinessadvocates.com/methods and /services to see what I mean. Anyone willing to take a quick peek before I step out to hire someone?

Thanks.

Posted: Tue, 07 May 2013 6:55 am
by sundaymorningstaple
Wah Lao! Good thing you are a moderator! Have to admit, though, it's a pretty good ruse to get eyeballs to your site! :mrgreen:


Sorry, just couldn't help meself! :P Have a good evening SE.

Posted: Tue, 07 May 2013 7:48 am
by Strong Eagle
Har, har. I think my new business is one that wouldn't work very well in Singapore. Maybe with a bank as creditor. But suppliers or local private lenders? Piranhas they would be and not interested in negotiating a debt.

Maybe in the future... for now, I'm USA based.

Posted: Thu, 09 May 2013 8:46 pm
by Max Headroom
I'm afraid they're not lined up in either of my regular-sized screens (LCD flatscreen and laptop.)

This sort of positioning is quite tough to do and pretty unpredictable, given the countless screens and resolution settings out there. Best you format your pages using tables that you set at % width. That way, the table will always try to adjust accordingly, albeit not always predictably.

That said, nowadays I reckon the better known companies don't go for the one-size-fits-all website, but prefer to have one regular website and one mobile phone version.

Posted: Tue, 20 Aug 2013 6:16 pm
by abbym
Max Headroom wrote:I'm afraid they're not lined up in either of my regular-sized screens (LCD flatscreen and laptop.)

This sort of positioning is quite tough to do and pretty unpredictable, given the countless screens and resolution settings out there. Best you format your pages using tables that you set at % width. That way, the table will always try to adjust accordingly, albeit not always predictably.

That said, nowadays I reckon the better known companies don't go for the one-size-fits-all website, but prefer to have one regular website and one mobile phone version.
Max, I hope you don't take offence, but please please DO NOT use tables for layout. There are many many reasons why not - just google "tables for layout" to see. But they bulk up your markup unecessarily, making it more expensive for you to serve, and more expensive for people to use (especially mobile users on 3g), they make it difficult to make future updates, difficult to copy and paste text for users, impossible for search engines to decipher what your content is actually about so will reduce your search optimisation...the list goes on.

Going to take a look at your CSS now and see if there are any easy wins. Often though, things need a bit of an overhaul to get detail like this working correctly. And as a side note, it's probably better to use a completely separate style sheet for ipad. Clicking small areas is easy for a mouse, but tricky with a finger. A lot of websites have simplified versions for mobile use which you may want to consider doing.

Edit: Actually, your code is excellent. Very succinct and tidy mark up and clear CSS. IE has your misalignment issue as well as IOS and Android. Cross browser compat isn't my speciality so don't think I can suggest any fixes on this one. However someone on a tech forum should be able to help you on this without you having to hire someone. Look around for CSS forums and it should be easy for them as your code is so tidy.

Posted: Tue, 20 Aug 2013 7:24 pm
by x9200
Sorry, I found these arguments not really convincing. Bandwidth? C'mon, who cares about some objectively redundant text based tags if majority streams heavy weighting multimedia content and the websites just boil with all sort of idiotic and annoying flash based gadgets? Maybe if I were a purist... Equally well you could advocate to write all the non-interpreter based codes in assembler.

Posted: Tue, 20 Aug 2013 8:05 pm
by Max Headroom
I did Google some examples, but they're mostly talking about unnecessarily-nested tables, filled to the rim with spacer gifs and header gifs. These are typical Dreamweaver-type bad habits.

Nothing wrong with tables as such I reckon. They're clean and consistent and, yeah, hardly a bandwidth issue.