Some CSS "must knows" from me, and please share yours

**potter** · 09-05-2007, 12:12 AM

I'm bored right now by the way, waiting for my gf to finish her nap. So one more post before I wake her up to head out.

Originally posted by StuartD

Certain things like top 0 and left 0 can be very different in FF and in IE... until you set things to strict.

Goes to figure I missed this originally. Ok, it's clear to me now you're just writing your code wrong. Properly written code will not be displayed differently in different browsers. Properly written code also has nothing to do with w3c valid code. You can make a shit layout but have valid code. Just like you can write a shit sentence but it'll pass through spell check ;) .

If you're having discrepancies in cross browser compatibility. Even with anything, but in this case specifically with pixel dimensions. Then you're most likely getting in over your head with advanced css design and using more complex margin or padding rules. Which is what most beginners have trouble with. They'll get good at css and try to expand into more complex designs but just run into more problems with how bad code can be rendered. I'm willing to bet the problem you had in your example had to do with improperly using either margin or padding styling.

**Matt 26z** · 09-05-2007, 12:40 AM

Originally posted by StuartD

100% entirely false.... sorry to say.

If I were to replicate a CSS design into HTML and put the two side by side, you'd be able to tell the difference without looking at the source?

Of course not.

From the surfer experience standpoint, there is no compelling reason to take an HTML plus graphics site and convert it to CSS plus graphics. The end result to the surfer will be exactly the same.

Don't think I am slamming CSS though. It's a great tool for a site with hundreds of pages. If you want to change the appearance of one thing on each page, you just update one file. But if we were to talk about gallery builders switching to CSS, what would be the point in that?

**Angie77** · 09-05-2007, 05:33 AM

this is the first time i've seen a legitimately helpful thread such as this.

**fris** · 09-05-2007, 05:39 AM

Something I came across last night which is kinda cool

text-transform:lowercase;
text-transform:uppercase;

**testpie** · 09-05-2007, 05:42 AM

Originally posted by Mutt

hey good thread - somebody posted a link to this website the other day in a thread http://www.soulacreative.com/about_us.html

so i clicked it cuz i was bored - on the right there's a menu with a Flash animation background. I like it. So I looked at the source and the style sheet to see how they put a Flash animation in the background underneath a menu and I couldn't find out how they got it there.

i'd appreciate an explanation - it's mostly a CSS layout.

thanks

If you look in their stylesheet at http://www.soulacreative.com/style.css it seems they just position the menu element accordingly to be over the top of the flash movie, and then ensure it's high presence on the Z-axis by setting the value to 9:

Code:

#right_menu #menu {margin: 30px 30px 30px 17px; width: 180px; position: absolute; z-index: 9;}

I could be wrong though.

**Elli** · 07-26-2008, 11:13 PM

Bump for a great thread!

**jact** · 07-26-2008, 11:17 PM

Fourth time in history I'm bookmarking a GFY thread. Amazing.

Good thread Stu.

Would have been better if I checked the date first too. LOL

**Supz** · 07-27-2008, 12:54 AM

Originally posted by jact

Fourth time in history I'm bookmarking a GFY thread. Amazing.

Good thread Stu.

Would have been better if I checked the date first too. LOL

still a good thread today

**StuartD** · 07-27-2008, 06:18 AM

Originally posted by AlienQ

CSS is the suck and not necessary.

I guess some things never change

**smack** · 07-27-2008, 06:38 AM

one of my favorite CSS tricks is when using it in conjunction with ASP.NET to show/hide controls.

those of you who work with .NET know that if you set the visible property of a server control to false, it won't render to the browser at all, so you can't make it visible without using a postback.

so what i like to do is leave the visible property as true, but during the page load add a "display: none" CSS attribute to the control, then use a javascript to change that to "display: inline" on the client side so i can avoid at least one more trip back to the server.

makes the page much smoother since the show/hide is all done client side.

**StuartD** · 07-27-2008, 06:50 AM

Originally posted by smack

one of my favorite CSS tricks is when using it in conjunction with ASP.NET to show/hide controls.

those of you who work with .NET know that if you set the visible property of a server control to false, it won't render to the browser at all, so you can't make it visible without using a postback.

so what i like to do is leave the visible property as true, but during the page load add a "display: none" CSS attribute to the control, then use a javascript to change that to "display: inline" on the client side so i can avoid at least one more trip back to the server.

makes the page much smoother since the show/hide is all done client side.

Indeed, I do this quite a bit... now I also add in some AJAX to streamline things even further using this same method.

Great tip

**smack** · 07-27-2008, 07:19 AM

i've just started messing around with AJAX not too long ago. at the moment it is more of a curiosity to me than anything, but i think i am going to incorporate some of it's functionality in to one of the current projects i am working on.

it makes life a hell of alot easier than writing all kinds of wacky java functions myself, and while it seems i will still need to augment it with custom java work, i don't think it will be nearly as much as before. (i hate java. i have never had any patience for any language that is case sensitive of requires ; to terminate lines, but for client side functionality, you can't beat it).

other than that though i don't really utilize all that much CSS. i am slowly starting to incorporate it more and more as needed, but i still do things relatively old school. old habits die hard. ;)

**datnukkabroke** · 12-16-2008, 05:58 PM

I cannot lie I have not built a site from scratch in a while and #1 saved me $30. I was about to pay a guy to remind me how to get the cross browser compatibility. Maybe I just smoke to much, Ya never can tell. Thanks alot for the free tip, the rest I had fresh in my memory so it wasn't helpful to me but Im sure someone else will find something useful.

**Ecchi22** · 12-17-2008, 09:39 PM

Awesome thread

I bookmarked it yesterday.

About doctype issue, from my own experience, yes, it affects layout in some cases. I can't give an example at the moment (you can call me lazy if you want), but I have to mention that StuartD is right when it comes to doctypes.

**CIVMatt** · 12-18-2008, 05:09 AM

I just want to learn how to make a simple text box on a layout

Some CSS "must knows" from me, and please share yours

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment