Cross Platform html / css help

Discussion in 'Web Design and Development' started by kakkoiimac, Jul 17, 2008.

  1. kakkoiimac macrumors regular

    Joined:
    Sep 29, 2006
    Location:
    Paradise
    #1
    Hi all-

    I am a super noob when it comes to web design...i mean, like three days ago i first opened dreamweaver when my boss told me i need to make a website. I have never coded anything in my life.

    So i have been looking around and following tutorials and things are going pretty well. I am learning about css ( at first i thought that css was something used instead of html, not with it...:eek: ) I am sure my code is really inefficient and ugly, but I have been fairly successful getting my site looking the way i want in Safari...but when i look at it in firefox and ie 6 it look way bad.

    So two quick questions:

    Short term- i have some blue boxes showing up around my ap divs ( in which i have pictures ). This is in firefox and ie6. How can I get rid of them?

    Long term- Is there any easy way to make sure that the things you do in dreamweaver will translate the same in ie firefox and safari?

    Thanks for any help...I really appreciate it. All this web design is pretty frustrating and over whelming at times...hopefully when it is finished I have a good sense of accomplishment.
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    Not going to be able to help with unless you provide some of your code, or at minimum put up a screen shot. Preferable though, if you can, give us a link to the page, if publiclly viewable.

    Learn, learn learn. There's many nuance to web design and having things look the same in all browsers. It's just something you pick up over time, but Google is a big help when you run into specific instances as there's always a number of other people who have run across the same problem as you.
     
  3. InLikeALion macrumors 6502a

    Joined:
    Jul 18, 2007
    Location:
    Greener places than I used to live
    #3
    Also, in DW, if you go to File>Check Page>Browser Compatibility it will show you many of the warnings as to what code you've used that will be rendered incorrectly in different browsers, like IE. It's not perfect, so you still need to test in each, but it can help you with the basics until you get more used to them.
     
  4. bootedbear macrumors 6502

    bootedbear

    Joined:
    Sep 13, 2004
    Location:
    Austin, TX
    #4
    >i have some blue boxes showing up around my ap divs ( in which i have pictures ).

    I don't know what an "ap" div is... but if the image tags are within <a> tags, most browsers will put that blue border around them to indicate that they are links.

    You can prevent this with border="0" on the <img> tags.
     
  5. CoreWeb macrumors 6502

    Joined:
    Mar 2, 2007
    Location:
    Edge of reason
    #5
    A preferable way to prevent it may be to specify the following in your CSS file:
    Code:
    img {border:0px none;}
    
    That should hide the borders.

    As for the long-term problem, that is a problem which faces all web developers. Safari is a great, almost (but not quite) perfect browser (when it comes to standards). Firefox is pretty good (meaning that, generally, what you see in Safari will be duplicated pretty well, with only a little modification necessary). Internet Explorer, however, is terrible, and can be a pain in the butt to work with.

    Good luck. :)
     
  6. cromwell64 macrumors regular

    Joined:
    Jun 30, 2008
    #6
    This makes it sound like Firefox is not as good as Safari at implementing web standards which I don't believe to be the case.
     
  7. kakkoiimac thread starter macrumors regular

    Joined:
    Sep 29, 2006
    Location:
    Paradise
    #7
    Thanks fort the replies...after doing some googling, I found out that the blue borders were the default behavior for pictures that are links. Thanks for the solution on how to fix it. Now it works just fine.

    It was quite interesting that safari and firefox displayed the borders different...

    I will have to test it out on ie. Right now, the biggest incompatibility is with the spry menu that dreamweaver will make automatically. It looks great in safari and firefox, but in ie it looks like crap. Can anyone point me to a good place to find the proper hacks for spry on ie 6. I really appreciate all the help for this newbie web designer.
     
  8. kakkoiimac thread starter macrumors regular

    Joined:
    Sep 29, 2006
    Location:
    Paradise
    #8
    Thanks for all the help so far... Learning about how to make a website has been pretty good. I think that the way my boss wants his website to look is kinda ugly, but whatever - his company, his website. Anyway, now that I have it looking pretty much the way I want except for some text formating, I am looking to get it working in ie 6. Pretty much the spry menu is looks like crap.

    So I am not really sure how to hack it, or where to even find hacks for it. I dont even know what is the best way to show you guys my problem. Should I post the spry css or the template html or what? Anyway, any help in getting this menu to look right in ie6 will be a great help. Thanks
     
  9. kakkoiimac thread starter macrumors regular

    Joined:
    Sep 29, 2006
    Location:
    Paradise
    #9
    well I have spent the day messing with the css and have it looking a lot more presentable...but I am still having a little trouble with the header coming too far below the menu. So I am not sure if that is in the spry css, or in the site css. Any way, any help is much appreciated.
     
  10. cromwell64 macrumors regular

    Joined:
    Jun 30, 2008
    #10
    it's probably in the regular site css, but not being able to see any of it it is hard to say. i thought spry was a javascript framework that came with dreamweaver. if that is what it is then it shouldn't affect your layout. that doesn't mean that it isn't the culprit, it only means it shouldn't be.
     

Share This Page