I just don't get it! (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets and Accessibility



Message

Nicole -> 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 -> 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



Tailslide -> 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.



caz -> RE: I just don't get it! (6/5/2006 6:40:12)

Good advice as you would expect from Tailside Nicole, if it makes you feel any better I too was learning as I did a massive site redesign for a client. [:D] 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 [8|][:D])

When I discovered IE conditionals it was a road to Damascus day and this is the site that eplained it to me,

CSS> Conditional comments

This site also made me feel a lot better about CSS ..No, Internet Explorer did not handle it properly...




Tailslide -> 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.



Nicole -> RE: I just don't get it! (6/5/2006 6:47:31)

Thanks Tail & Caz,

I search in Google a lot about the different problems i encounter, but often as is the case I don't know whether what I'm searching for has beed worded right and sometimes I end up reading something that makes less sense than the problem itself.

Thanks for those links and the proper terms, I'll search some more and read those articles.

I don't believe there's any pressure from my client to get this done fast. He knows I'm learning and hasn't pressured me thus far. I agree that sometimes learning on a client's site is good because there is some pressure there as well as real-life problems that pop up, but on the other hand sometimes it's good to learn from scratch and at your own pace, picking and choosing what to learn next etc.

Thanks anyway, I'll read those articles and see how I go.

Nicole



womble -> RE: I just don't get it! (6/5/2006 14:45:43)

quote:

It probably doesn't take a huge amount of time to understand the basics - but beyond that you're always learning.

So true.



Nicole -> RE: I just don't get it! (6/6/2006 8:05:39)

I've just "solved' one of the problems I was having with this site whereas the left floated navigation was appearing underneath the right floated content when text-size was increased twise using the browser text resizer in IE.

(Tail, I know you said it was ow okay on your pc but I must confess it still wasn't on mine).

Anyway, using one of the links in the posts above, I used

word-wrap: break-word;

which I know makes my CSS not validate, but I wondered what others thought about using it?

Nicole

p.s. the page whhere I found this was:
http://www.brucelawson.co.uk/index.php/2005/future-proof-your-css-with-conditional-comments/





caz -> RE: I just don't get it! (6/6/2006 14:53:26)

Sometimes the devil drives when needs must Nicole and this is exactly the kind of thing that I would have in a separate IE only stylesheet so that it will not pollute the main one. As said on Bruce's site.

quote:

(I don’t know if IE7 will clean up this bug, so this may be better in a stylesheet for all IE browsers


Tailslide of course may disagree with this. [;)]



Tailslide -> 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).



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.078125