|
| |
|
|
Nicole
Posts: 2850
Joined: 9/15/2004
From: Nambucca / Kempsey, Australia
Status: offline
 |
I just don't get it! - 6/5/2006 4:57:10
I seem to be stumbling from problem to problem with CSS layout.
I’ll notice a problem with one browser, fix it and then notice another problem has developed in another browser, usually IE, and just now I’ve noticed some huge differences in the way IE 5.5 is interpreting my CSS. I’m noticing some really bizarre effects when I’m resizing the text only twice.
It’s frustrating, really frustrating, especially because last night I thought I’d ironed out all the problems for one page which was going to act as the template for the rest of the site, and today the process of adding a simple 2 column data table has turned into a major drama, mostly with box model issues (which I still struggle to understand) but also with my pure CSS, list navigational menu. IE 5.5 just wants to keep expanding the blocks with the longest text and leave all the other ones at the right length. (when text size is increased.
These issues aside, I notice a lot of you use different style sheets for different browsers, again mostly IE, and import them somehow and I wondered whether there were any “simple” explanations of this, and also whether you guys just picked this up when learning CSS layout, or you came across similar issues when you were learning and solved the problems as I seem to be, just when I encounter them.
How long did it take you all to learn CSS layout? I really feel useless at the moment. I can’t seem to grasp how different browsers are interpreting the box model, I don’t understand clear: both, I don’t understand overflow: hidden, oh gosh, I just don’t understand.
I’m learning while re-doing a clients site, is that crazy? It’s driving me nuts, is it best to learn this way or ?
Any help appreciated….
Nicole
_____________________________
|
|
|
|
Tailslide
Posts: 6296
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: I just don't get it! - 6/5/2006 5:41:12
Nicole
Don't panic! As the Hitchhiker's Guide to the Galaxy says.
Here's a fairly good explanation about conditional comments (feeding stuff to specific browsers) http://www.brucelawson.co.uk/index.php/2005/future-proof-your-css-with-conditional-comments/
As far as how long it takes - well how long is a piece of string? It probably doesn't take a huge amount of time to understand the basics - but beyond that you're always learning. I've been producing CSS layouts for nearly 3 years and I'm definitely still learning new stuff all the time.
The trick (if there is one) as far as box models issues go is to try to avoid them all together if possible by for instance not having widths, padding and borders on a single element but padding and border on one and width on the outer div. Avoidance is better than cure in this case.
I've generally found that keeping it simple is the best bet - I generally don't try for pixel perfection cross-browser. I'll try to make the design look good cross-browser, but not necessarily 100% identical. In other words, if IE is giving you a slightly bigger gap between divs and it doesn't look bad - live with it!
I've found that Faux Columns can make even simple designs look much fancier - they work cross-browser and are easy to implement.
If you really need pixel perfection, then conditional comments are the way to go.
My first evern 100% CSS site was also for a client - so you're not mad!
You'll find as you get into it more that it'll be the same issues coming up again and again - so you'll learn to avoid them or deal with them.
Most popular issues:
Clearing floats (solution - apply clearfix hack or overflow:hidden to containing div)
IE 3px gap (solution - float both divs to get round this or just live with it)
IE Peekaboo bug (solution - different solutions but easiest is to use position:relative on the offending div - must browser check it though can cause issues)
IE 5.5/5 box model (solution - avoid widths, padding and borders on the same element and or just live with the difference)
IE double margin (solution - use display:inline on one of the divs - check cross-browser)
IE haslayout issues (solution - can be very complicated or very simple depending on the element concerned. Can be as easy as appying a height or width)
There are other bugs - but 85% of the time any issue you'll run into will be one of the above.
Learn to love Position is Everything! http://www.positioniseverything.net/explorer.html
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
Tailslide
Posts: 6296
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: I just don't get it! - 6/5/2006 6:09:52
Oh and - in this particular case, add a height and width to the images in the sidebar that open a new browser window and it fixes the problem in IE5 and IE5.5.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
Tailslide
Posts: 6296
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: I just don't get it! - 6/5/2006 6:44:36
Caz reminded me - as she says, trying to figure out every CSS problem in one go is a bad bad idea.
Find a simple CSS layout (2 column say) that works well cross browser and stick to it for a while. Add more complicated bits as necessary - it'll be easier to bug hunt as you'll know that what you started out with works 100%. Many small businesses frankly don't have the content to fill out a 3 column layout so stick with one and two columns till you're happy to move on.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
Tailslide
Posts: 6296
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: I just don't get it! - 6/6/2006 16:09:00
Nope I don't particularly disagree.
I'd definitely stick all IE hacks into a conditional commented stylesheet. As far as using CSS that doesn't validate - it's up to you really. I'm not quite as pedantic about CSS as I am with the markup when it comes to validating. Reason being that CSS in general will be ignored if it's incorrect or proprietory. So it tends to be less harmful than invalid markup. If you absolutely can't get it done any other way then I wouldn't lose too much sleep over it.
I'm not saying that you shouldn't try to validate your CSS btw- if nothing else it helps spot typos and mistakes (as opposed to deliberate proprietory code errors).
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
I am not one to learn big chunks of theory and I found that solving the problems as they arose made the knowledge stick a bit better - but I still have to research items because I am a firm believer in knowing how to find the information, rather than trying to memorise it all. (Which day of the week is this btw 
