beginner question, IE troubles

Discussion in 'Web Design and Development' started by gamera~, Mar 29, 2007.

  1. gamera~ macrumors member

    Joined:
    Apr 28, 2005
    Location:
    Boston MA
    #1
    Hi all,

    I am not a web dev or designer, and I don't really intend to be one; however, I've been slowly putting together a web page for my parents' business. It's nearly finished, my one big obstacle is getting it to render correctly on IE. One problem is I don't have ready access to a PC. Does anyone have tips about how to quickly get this done?

    Also, any feedback on the site is welcome.
    http://www.michaelhoywoodworking.com/new

    thanks,
    -Mike
     
  2. tutubibi macrumors 6502a

    tutubibi

    Joined:
    Sep 18, 2003
    Location:
    localhost
    #2
    Create another div for the images and make it right float. Make furniture list left float.

    <div id="content">
    <div id="furniturelist"> <-- make it width: xxx; float: left;
    <ul>
    ...........
    </ul>
    </div><!-- end tminclude -->

    <div id="image"> <-- add this, make this float:right; margin-left: xxx

    <h3>
    <img src="resources/misc/twochairs.jpg" alt="Two sidechairs" />
    </h3>

    </div>

    </div>

    If you don't have any other option to test in IE, go to some Internet Cafe and test it from there (unless you are willing to install BootCamp or some virtualization software and Windows)
     
  3. epochblue macrumors 68000

    epochblue

    Joined:
    Aug 12, 2005
    Location:
    Nashville, TN
    #4
    Why add another div? Why not just add the id to the h3 element and float that?
     
  4. tutubibi macrumors 6502a

    tutubibi

    Joined:
    Sep 18, 2003
    Location:
    localhost
    #5
    if it was always h3, definitely. But using div you can wrap anything inside and still make it positioned properly. More generic ...
     
  5. epochblue macrumors 68000

    epochblue

    Joined:
    Aug 12, 2005
    Location:
    Nashville, TN
    #6
    Granted, but if you're putting an ID on the div, you're intending for it to be used only once anyway, so just put the ID on the h3 and do it that way.

    If you ALWAYS intend to wrap the image in something (not exactly sure why, but it's not my site), use a class instead of an ID, and a div would be fine.

    And, yes, divs are generic, but they also aren't semantic in any way. So if you can use just the image tag with a class attribute that'll do the floating, that's easier to read than an image wrapped in an h3 wrapped in a div that has a class name on it.
     
  6. tutubibi macrumors 6502a

    tutubibi

    Joined:
    Sep 18, 2003
    Location:
    localhost
    #7
    You are right, class would be the right way to go. I guess my original intention was to say that any content OP wants on the right side (not only single image) would be inside such div.


    Nice find, thanks!
     
  7. epochblue macrumors 68000

    epochblue

    Joined:
    Aug 12, 2005
    Location:
    Nashville, TN
  8. gamera~ thread starter macrumors member

    Joined:
    Apr 28, 2005
    Location:
    Boston MA
    #10
    thanks, everyone, for your help. one question: was my mistake in assuming the image would render correctly, or is it due to some oddity in IE rendering? i.e. am I misusing the float attribute?
     
  9. pengu macrumors 6502a

    Joined:
    Mar 20, 2005
    Location:
    Diddily Daddily...
    #11
    just a note. /IE7/ can be good for fixing simple issues, but for advanced stuff, or any page that will need a lot of fixes (ie lots of PNG images that have alpha transparency) it will often slow down load time dramatically, and/or introduce issues of its own.

    the best solution i've found is a seperate CSS file included using conditional comments, with css/expressions to provide the necessary fixes.

    i've also written a couple of js fixes for common issues (ie, a CSS-driven drop menu that needs :hover to work, and the issue of <select> boxes being rendered OVER the menu incorrectly).
     
  10. epochblue macrumors 68000

    epochblue

    Joined:
    Aug 12, 2005
    Location:
    Nashville, TN
    #12
    The select box problem is a doozy - and a damn annoying one, too. It has to do with the fact that select boxes are considered windows unto themselves, and thus render above regular page elements. The only way I've been able to fix it in the past is to either hide the select, or put an iframe under the div I'm popping up. CRAZY annoying.

    And good call on the conditional comments - that's almost always the recommended way to use selective CSS for IE. All those CSS hacks can be troublesome and certainly aren't future-proof. ;)
     
  11. pengu macrumors 6502a

    Joined:
    Mar 20, 2005
    Location:
    Diddily Daddily...
    #13
    yeah, thats why i wrote a js function to add the iframes to a tree of UL's. write semantic markup, then fix it when you have to.. works well with the hover fix JS i wrote.. just put a foo.hover whenever you put foo:hover and its all good. i'll be making the scrips available on my site once its back up, but i'd be happy to make them available to you guys now if you want them.
     
  12. zimv20 macrumors 601

    zimv20

    Joined:
    Jul 18, 2002
    Location:
    toronto
    #15
  13. tominated macrumors 68000

    tominated

    Joined:
    Jul 7, 2006
    Location:
    Queensland, Australia
    #16
    go to the site when it is night (in the US). BTW: The site looks really nice IMHO. It is nice and simple... minimalistic, yet informative.
     

Share This Page