Hey guys, I am currently a bit new to CSS, and trying to convert some of my pages over to CSS to see what the big hoop-la is all about. I don't know, I have tried for a while now, but I cant even get my main page to work in Firefox, despite it works fine in IE? Wierd. www.highpoly3d.com I'm just puzzled why something so simple refuses to work here..
You were coding against a buggy browser in its quirks (buggier) mode. You may not have anything come before the DTD, or IE goes into quirks mode. Due to that, you wrote some bad style rules to compensate. Firefox rendered just what you told it to. To see what's happening, make these changes: .cellRight { font-family: Arial, Helvetica, sans-serif; font-size: 16px; height: 150px; width: 350px; border: thin none #000000; background-image: url(news_table/cell.png); background-repeat: no-repeat; background-color: #fff; font-weight: bold; color: #0000FF; float: right; padding: 50px; clear: right; } Code (markup): and view the page. Then remove the comment line from above the DTD and view again. Make the same edits to #cellLeft. And kill the Flash loop. Once through the animation is one thing, looping is annoying. Also, Flash navigation is inaccessible to a whole potload of people. Always code for modern browsers, Firefox being best of breed right now. Then fix things for the stupid browsers like IE. Oh, wait! It's the only stupid browser. cheers, gary
Ok thanks I'll try and edit again for some more hours. BTW, isn't a comment, a comment, a comment? If I have a comment line above the DTD, shouldn't it just be ignored? I only have it there for testing purposes.
KK, just wanted to reply here and say thankyou. I did your changes, and it works now in both browsers. My only problem is it doesnt display right in DreamWeaver while editing, but I guess that is just a fault of DW. Obviously I have a long way to go to even master the basics here.
The thing with the comment above the DTD is just another IE bug. Forget DW's preview. It's not a browser; it doesn't count. As for DW, don't use any of its code generation. Use it only as a text editor and as a site management tool. cheers, gary
Well the last few hours have been interesting. I did a few little changes trying to get some enhancements ready for the future. I also added another row of two blocks since the last 4 were finaly working ok. Now all of a sudden, I have it working perfect in Firefox, but if I view the same page in IE, then you'll see how the positioning seems to be way off. ARgghgh.
So back up to the last working point. Add stuff back in a bit at a time, testing each step. When it breaks again, you'll know which step did you in. cheers, gary
I tried doing that, it seems when I add the 5'th block, everything goes to hell in IE. I've been trying to rename stuff, but I don't know. Maybe a bug in I.E. i'll keep punching at it.
Why are you making so many classes? It seems one over-all class to describe the blocks, and a right and left should do it. Better, yet, make a right and a left column and simply stack your blocks in the columns. cheers, gary
Well, the background changes for a couple of those blocks, so I have a difference class, for the different background. I guess I could do some short-cuts but I'm still learning this css. Good news is I FINALLY fixed that stupid IE problem.... And now.. onto developing some other things.
Alright KK, I took your advice, did more research, and tadda... I made a left and right colmn for my blocks, which helps make my css smaller. I also went on doing some more adjustments. And now I think I came into my final problem. My blocks are 500 pixels across each. I adjusted the web page's default margins to 0, so I should get a TRUE 1024x rez when my monitor is at that setting. This should give plenty room for my 500x blocks, giving a total of 1000x pixels, and saving 24x in reserve for the vertical scroll bar. Sure, works in theory, and it works in Firefox. But hell, why IE has a problem with this, I do not know. Looking at that, it seems IE is somehow bloating the size of my columns just enough pixels so that it forces it to be drawn below the other column, instead of beside it. ARghhhh!!! One head-ache after another here.
IE has two buggy behaviors that come to mind. The first is that IE expands the container instead of allowing oversized content to overflow. The other is called the three pixel jog. Either can cause your problem. Additionally, IE's doubled margin bug can caused problems directly or contribute to the expanding box buggy behavior. It is precautionary to build as much slack into things as possible, due to IE's sorry-***ed[1] behavior. cheers, gary [1] Self-censored. While it is not uncommon to see "a pain in the ***", or "my page is f**ked up", or "what the f**k is happening" in posts, and without any warning notice, my use of sorry-***ed as an adjective describing developers who code popup ads was deemed "inappropriate language". I will restrain myself even if it is a totally appropriate description.
Ok, KK, i read through those links... I also spent part of the evening doing one s test after another and I think I got the problem fixed. For some reason, adding a DOTTED border doesnt really change much in Firefox, but in IE it bloats the size of the blocks a bit. I also noticed that a THIN border looks a lot THICKER in IE than it does in Firefox. I usualy add on dotted borders to check the size of my blocks when building.
In Firefox and maybe Opera, you can use the outline property. It's like a border, but lies on the inside edge of the padded size; that is, it doesn't enlarge the box. Won't help in IE, though. cheers, gary
But how does the browser know what comments look like in your document if it doesn't know what kind of document it is? MEM # // /* */ ; <!-- --> C Those are all valid comments in different scenarios. Sure, some of them a browser doesn't currently see, but what about in the future?