17 replies to this topic

[scouseflip]

Hi

I am just learning CSS at the moment and am trying to redesign a very poor Front Page site I made a little while ago. I am starting to get the idea (I think) but am experiencing some inconsistancies that I can not correct between Firefox and IE. The site works fine in IE6, IE7 (as far as I can see!) but in Firefox it all falls apart.

Just to be clear, I am NOT asking for a site review here, but I am hoping someone can point out why the site is not working in FireFox so I can try to fix it (and also so I can avoid this in future!).

The site in question can be found at http ://www.justdine.com/justdine/justdine2.

Any advice would be much appreciated...

Thanks

[scouseflip]

Sorry just to let you know I have validated the code through w3c and although there were some errors they have been fixed without affecting the way the site renders in FireFox.

[rolf]

I feel your pain Scouseflip! As far as I can tell this problem is because IE/Microsoft doesn't feel the need to implement standards properly, specifically in this case the positioning standards. So if you get it looking right in IE your positioning is going to be off for everything else (which seems to be what's happened here) and if you get it looking right in everything else the it will look horrible in IE.

I had similar problems with our last major redesign. I started out with the noble intention of going entirely CSS for the layout but after more time than I dare to calculate trying to get it consistent in both I came to a stark choice :-

Choice 1 - accept that this CSS thing is going to take a while to get my head round and plan to spend as much time as is necessary to get it all working right, even if that takes weeks.

Choice 2 - create a browser detection script and serve a different CSS for each type of browser.

Choice 3 - use the minimum amount of tables necessary to achieve what I want to achieve quickly and then use CSS for the rest.

I didn't have the time to go with 1 or 2 so I went with 3 in the end. I'm fairly happy with the result but it does mean that a thorough shakeup has been imminent since before the site even went live, which I'm not happy about at all!

Hopefully someone can give you (and me) some better advice about how to solve the problem, but if not then you might decide that it's only worth (hours vs. income) spending so much time on being noble and it's time to crack open the tables.

Apologies in advance to any CSS purists, but I've always been a fan of heresy!! (Not to be confused with Hearsay, the winners of the UK's Popstars program, who were just awful!)

[scouseflip]

Thanks Rolf

Difficult choice! I don't have a problem with using tables where they make sense (to me at least) but I've already spent a while on this now so I reckon I'll try to get it right. At least then I'll have a better shot at getting it right first time next time... Plus although the site is for my work, it's just a pet project really - no money spent on it and it does not get any significant amount of traffic (yet!). It's for learning so I guess I should make use of it for that purpose!

Or maybe I'll go with browser detection an put up a Firefox version of the site which will just be a one liner in massive, bold font saying: "If you can't be bothered using a decent browser, you don't get to use my site!!!". Apologies for being so petty but it's been a bad day - think I'll post a seperate topic to try to work out what the point of Firefox actually is!!

Cheers again!

[torka]

If you're going to put up the one-liner page, do it for the users if IE.

It's most often the non-standard implementation of things in IE that gives coders the headaches.

--Torka

[chrishirst]

Design the site the other way around

Build the CSS and test in FireFox then tweak for IE (if any tweaking is needed)

make sure you use a FULL & Valid doctype.

[qwerty]

I agree with the advice that's been given, but I've got a question about the current code: what is the "pusher" class of div supposed to do?

[Lorinda]

Hi, scousflip, are you most concerned because your left and right columns overlap? This is because FF requires a left margin for the right column in order to push it over to the correct spot.

For example your #menu and #bodytext:
If your #menu is 140px wide, then set your #bodytext's left margin at atleast 140px and that should take care of it. Don't forget to add in any padding or margins that the left column has as well.

Here's how I set up my site's 2 column layout (you'll notice the total width of the #leftColumn is 171px with the padding-left, so I set my #rightColumn padding-left at 180px to make some extra white space between divs):

CODE

#leftColumn {
[indent]        float: left;

        width: 156px;

        clear: both;

        padding-left: 15px;
[/indent]}    

    #rightColumn { [indent]        width: 594px;

        float: none;

        clear: right;

        margin-left: 180px;

        padding: 10px;
[/indent]}

Feel free to PM me if you have more questions.

Good luck,

Lorinda

[scouseflip]

Thanks everyone - it's working in both browsers now and I can't tell you how releived I am!!!

Hi, scousflip, are you most concerned because your left and right columns overlap? This is because FF requires a left margin for the right column in order to push it over to the correct spot.

Thaks Lorinda, this was indeed the problem and I've got it working now the margins are in place (still needs a bit of tweaking to get the positions right but I'll sort that out later! - only further question is how I can get the page centered as it is in IE. I can left margin the page div but it obviously doesn't work except in the browser size I set it up in plus it messes up the position in IE. It's no biggee to be honest, I can probably experiment with it and as long as the page looks okay in FF as it is I don't really mind (for now!).

I agree with the advice that's been given, but I've got a question about the current code: what is the "pusher" class of div supposed to do?

Qwerty - in truth I can't remember what it was for... Think I used it as a quick fix to a positional problem I was having early on. When I followed Lorinda's advice and used margins, I had to delete the pusher div's anyway as they made a mess of the IE version. A case of the wrong solution to a problem making things worse - understand now that margins are the way forward!

Chris - thanks for your input. Your sentiment is echoed in my other FF post and I'll be trying to work this way in future.

Torka - fair point! Don't think the 80% of our site users that have IE would be too pleased tho!! I can see the value in FF from a development POV but from a user aspect I remain an IE man for the time being.

Thanks again everyone - don't think I could have coped with another day squinting at the screen with no real clue what I needed to do! Think I owe you a (it is Friday after all...)

[Lorinda]

Hello again, scouseflip - I'm glad things are working out. I checked out your site and it's looking great! To center it on the screen you need to add margins to the main containter of your divs (the one that wraps around them - I'm guessing on your site it's called #page?). Try setting the right and left margins to auto and that should work. Here's some code again from one of my own sites (I like call this type of div #wrapper):

#wrapper {

height: auto;

width: 800px;

margin-top: 0px;

margin-right: auto;

margin-bottom: 0px;

margin-left: auto;

}

Good luck!
Lorinda

[chrishirst]

or you could save a few bytes and use

margin:0px auto;

[1dmf]

And if you didn't know the order of the one line CSS syntax, for border, padding, margin etc it goes like this..

atribute:TOP RIGHT BOTTOM LEFT;

eg. padding:10px 5px 20px 15px;

So top is 10px, right is 5px, bottom is 20px and left is 15px.

And you can budle top/bottom and right/left together as Chris shows...

So his example margin:0 auto; is saying TOP/BOTTOM = 0px and RIGHT/LEFT = auto.

Hope that helps :-)

[scouseflip]

Thanks again for yet more very helpful info! I'm on non-web based duties today so I'll give it a go tomorrow. I really appreciate everyone taking the time to help me with this... makes it so much easier!

[Raphael]

Nice easy way to remember the global settings order is that it goes around clockwise (noon, 3pm, 6pm, 9pm), just like the Never Eat Shredded Wheat thing for remembering the order of the points of the compass

[maleman]

margin:0px auto;

Save one more byte:

margin: 0 auto;

Sorry Chris...just funnin that's all!