PDA

Click to See Complete Forum and Search --> : CSS newbie - Differences between browsers

KYjelly
04-14-2009, 11:38 PM
Hi guys,

Having some layout troubles between Firefox and IE on PC - hoping you guys can offer some suggestions, as Im confused.

My site is a DotNetNuke website, so alot of elements are inserted as "modules" (which limit my ability to mess with the code too much).

However, this *has* to be something simple.

The page in question is located at : http://www.woodsgrain.com.au/Default.aspx

This is how my Firefox browser renders this page on a mac:

http://i151.photobucket.com/albums/s150/KyLane/Picture1.png

You can see the bottom/right image is flush, the flash navigation along the bottom if full width, and the title image and nav line up at the top left.

This is how this page renders in IE on PC:

http://i151.photobucket.com/albums/s150/KyLane/Picture2.png

Any hints guys!? Im at my wits end.
lystar
04-15-2009, 02:02 PM
If I were to venture a guess, I would say that its the old "IE hates the box model" problem. More than likely it has nothing to do with the operating system or even the CSS you are using, its all in the browser.

Your page is also using a Transitional Doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">


Unless it is going to severely break your layout, I would try using a Strict doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

This will force the cranky old internet explorer to render some CSS it doesn't like properly, though it is definitely not a "fix all solution" and may even cause you more grieve if the code isn't written based on the current W3 standards.

If that doesn't work, read up on the box model and internet explorers issues with it: W3.orgs explanation (http://www.w3.org/TR/CSS2/box.html)
KYjelly
04-15-2009, 08:37 PM
If I were to venture a guess, I would say that its the old "IE hates the box model" problem. More than likely it has nothing to do with the operating system or even the CSS you are using, its all in the browser.

Your page is also using a Transitional Doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">


Unless it is going to severely break your layout, I would try using a Strict doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

This will force the cranky old internet explorer to render some CSS it doesn't like properly, though it is definitely not a "fix all solution" and may even cause you more grieve if the code isn't written based on the current W3 standards.

If that doesn't work, read up on the box model and internet explorers issues with it: W3.orgs explanation (http://www.w3.org/TR/CSS2/box.html)

Thanks for that Lystar.

I set up a custom doctype for my "skin", and it still appears 100% happy in Firefox, and some of the layout hiccups cleaned up in IE, but still not 100%.

Have been non stop reading and experimenting for 3 days now, and STILL cant get these small issues ironed out.

Very frustrating!
lystar
04-15-2009, 09:00 PM
Issues like these are exactly why I hate using pre-packaged plug and chug web scripts... though I completely understand why they are needed.

Unfortunately I've never been good at deciphering their code. But then again I write all my code in notepad :o

But I digress. I'm a little surprised, but your page doesn't even render properly in IE8 (up to this point I had regained some respect for the IE with the release of 8). Checking it against the W3 validator: (Validation results (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.woodsgrain.com.au%2FDefault.aspx&charset=(detect+automatically)&doctype=Inline&group=0)) returns some disheartening results. 43 errors, 40 warnings at the time of writing this. I suspect a lot of those are because you aren't finished working on the page anyway.

The way that the page doesn't quite align properly in IE screams box model bug to me... but I thought IE8 had corrected that. The only other advice I can offer would be to go to the DotNetNuke forums and see if there is some support there from the users who are more familiar with the app.

Sorry I couldn't be more helpful.
KYjelly
04-15-2009, 09:24 PM
Appreciate your help Lystar. Have spent the morning learning about the box model some more, and how confusing! Ive *nearly* got the site rendering correctly, but just as I start getting somwhere, something else goes awry.

Very, very frustrating.

But, I appreciate your advice.
KYjelly
04-15-2009, 09:35 PM
Ive cleaned up alot of my code (W3 still thinks Im a moron though) and Ive got it working in IE8, but "compatability mode" still places 1 image in limbo :(

Missed it by THAT much..