SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Hybrid View

  1. #1
    <code></code><WoW></WoW> nukeemusn's Avatar
    Join Date
    Apr 2006
    Location
    Honolulu, HI
    Posts
    329
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Yum! Browser compatability issues!

    So I'm building my churches site pro-bono, but being the nice guy I am, am not scrimping on things like standards compliance or the like.

    Now I've only been working this for about a day, and have been checking my results in IE6, because that's what most of my church uses. It looks freaking GREAT in IE6 so far, but it looks like par-boiled butt in Firefox. I'm specifically noticing one really weird issue and one not-so-weird-but-still-totally-annoying issue.

    The weird one is that my content background image, whuch shows up fine in IE, doens't show up in FF.

    The not so weird one is the way my content div's align themselves. They look right in IE, but not so much in FF.

    My testing server for this site is here Joy of Christ Site Prototype.

    Any and all help would be appreciated.
    My Blog
    The Obsidian Order - WoW Guild on US-Nagrand
    nukeemusn = Nuclear Electricians Mate US Navy

  2. #2
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, as an agnostic who donates to churches of all denominations like it was going out of style (hmm, guess I do take after Franklin to an extent)

    Hang on, rewrite for cross browser in progress.

    -- edit --

    early report - you're using a lot of negative margin settings to compensate for the fact IE tends to throw an extra few spaces around things and doesn't default to zero margin on most elements - this is a good cause for cross browser issues. I'm pulling those for a global margin/padding override.

    and just found your real problem - you are clearing the left float after each float left - while yes, that does put the next left float under the current, it also means that PROPER float behavior is for the right floats to not 'ride up'.

    Since this is a simple two column layout, your best bet is going to be to just use separate DIV containers for each column, as this type of 'float trick' is more headache than it's worth.

  3. #3
    <code></code><WoW></WoW> nukeemusn's Avatar
    Join Date
    Apr 2006
    Location
    Honolulu, HI
    Posts
    329
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you deathshadow. You're a trooper.
    I took your advice and div'd the columns and they look great in both browsers now. I'll go through and globalize my IE -margin hacks. But for some reason I'm still not seeting my background image in my content section...


    --edit--

    I updated the code on the server...
    My Blog
    The Obsidian Order - WoW Guild on US-Nagrand
    nukeemusn = Nuclear Electricians Mate US Navy

  4. #4
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, here's a recode that works cross browser.

    http://battletech.hopto.org/for_others/nukeemusn/

    You'll notice a few less classes and a lot less CSS (about 30% less give or take)

    You were trying to use height:100% which NEVER works right (percentile heights outside of a fixed one is generally ignored by browsers) in an attempt (I assume) to stretch the brown side-bars to the bottom of the screen - I assigned those bars as the overall page background to get the effect I believe you were aiming for.... since your menu and logo backgrounds are white, they overwrite it nicely up-top.

    I added some extra padding top/bottom to the inner boxes, as your borders were running right up to each-other. You want that removed, just pull the margin:5px 0px; from .inner_element - though you would then probably want to add a padding-top to #left_column and #right_column so the content boxes aren't flush against the menu.

    Oh, and this one is XHTML 1.0 Strict... and has been tested in IE 6 and 7, Firefox 1.5, Opera 9.02 and Safari 2.0.4... and I took the liberty of centering the whole thing.

    Enjoy - any questions, fire away.

  5. #5
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, BTW, it's refreshing to see someone taking the effort to tab format their code for something coherent. Always nice to see someone else taking the time to make it legible.

  6. #6
    <code></code><WoW></WoW> nukeemusn's Avatar
    Join Date
    Apr 2006
    Location
    Honolulu, HI
    Posts
    329
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    deathshadow, you're a saint. I only hope I can repay the favor one day. I'm still relatively new to web design (I'm starting to think I started my company a little prematurely, but oh well. ), and people like you make this job worth it.

    And thanks for noticing.

    It looks beautiful, and you can bet I'm going to spen the next few hours lookint at is and making sue I know exaclty what is going on so that I don't make the same mistakes next time. You even managed to read my mind and center the layout, which was something I was going to try to do later.

    AWESOME! THANKS!
    My Blog
    The Obsidian Order - WoW Guild on US-Nagrand
    nukeemusn = Nuclear Electricians Mate US Navy

  7. #7
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, from the html side of things if you're still 'relatively new' you are off to a REALLY good start.

    Your CSS was most of your problem - and I think that stems from your testing in IE first and foremost, generally the most common mistake beginners make.

    I target Opera first and foremost, though I test any layout changes in all three (Firefox, Opera and IE) simultaneously... Most people here will tell you design for FF first, which is generally fine as well.

    As a rule, if you code to work in Opera (or FF) there just aren't that many things that won't work in Opera, FF, Safari or anything else besides IE. It generally takes less (if any) 'hacks' to make a 'Standards' layout work in IE, than it does to make a IE layout work in a standards compliant browser.

  8. #8
    <code></code><WoW></WoW> nukeemusn's Avatar
    Join Date
    Apr 2006
    Location
    Honolulu, HI
    Posts
    329
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm quickly coming to realize that. I screwed myself up. I have a client who specifically asked my to code for IE, because most of her visitors are types who use AOL, and thus don't know firefox exists. So I got in to (bad) habit of testing in IE first. Man did it ever throw me off.

    Once again, you've been an enormous help. And I can't thank you enough. (Well, actually, I probably could thank you enough, but by that point you'd be so sick of hearing it you'd shoot me. )
    My Blog
    The Obsidian Order - WoW Guild on US-Nagrand
    nukeemusn = Nuclear Electricians Mate US Navy

  9. #9
    <code></code><WoW></WoW> nukeemusn's Avatar
    Join Date
    Apr 2006
    Location
    Honolulu, HI
    Posts
    329
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    FYI, THIS is the old site. You can see why i'm re-designing it. I'm also oging to move it to a paid server, so the church isn't acting like a free ad machine...
    My Blog
    The Obsidian Order - WoW Guild on US-Nagrand
    nukeemusn = Nuclear Electricians Mate US Navy


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •