www.webdeveloper.com
Results 1 to 5 of 5

Thread: Browser compatibility issues with HTML5 / CSS3 website

  1. #1
    Join Date
    May 2013
    Posts
    4

    Question Browser compatibility issues with HTML5 / CSS3 website

    Hey guys,

    so I built this little website for my band and just when I thought I was finished, I discovered some major compatibility problems I'm having with browsers other than Internet Explorer (which is the one I've been working with while writing up the code)

    Most of the site is actually displayed correctly throughout all browsers, it's just the header that's giving me a headache. I's weird, really. In Firefox and Safari, the header ul (consisting of images) is displayed like 15-20px too far up while in Chrome it's completely cluttered ( ul li are not even in line and push down everything underneath)

    I already did a whole lot of research but I haven't really found anything on the same problem. I know creating several specific style sheets might do the trick but I wouldn't know at all what kind of different code I'd have to put into those...

    If there is anybody who can help me out there, I'd really appreciate it. Thanks in advance for any suggestions you may have.

    Cheers,
    Dan

  2. #2
    Join Date
    Mar 2011
    Posts
    1,137
    Go find Eric Myer's CSS Reset stylesheet. It will help eliminate margin and padding differences, which is what your description suggests is the problem.

    If you need help beyond that, post a sample page here or a link to a sample page. It's impossible to diagnose an issue without seeing the code.
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    May 2013
    Posts
    4
    Thanks. The reset code doesn't change anything though, I'm probably not doing it right..

    So here goes the code:

    <!DOCTYPE html>
    <html>
    <head>

    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <link rel="stylesheet" href="style.css" type="text/css">
    <title>ANNA FIRWAY | Start</title>
    <link rel="shortcut icon" href="images/favicon.ico" />


    </head>
    <body>
    <div id="wrapper">
    <header>

    <a href="start.html"><img src="images/headerbild.png" alt="ANNA FIRWAY live"></a>

    <nav>
    <ul>
    <li id="ticketslink"><a href="tickets.html"><img src="images/tickets.png" onmouseover="this.src='images/ticketsu.png'" onmouseout="this.src='images/tickets.png'" /></a></li>
    <li id="anfahrtlink"><a href="anfahrt.html"><img src="images/anfahrt.png" onmouseover="this.src='images/anfahrtu.png'" onmouseout="this.src='images/anfahrt.png'" /></a></li>
    <li id="kontaktlink"><a href="kontakt.html"><img src="images/kontakt.png" onmouseover="this.src='images/kontaktu.png'" onmouseout="this.src='images/kontakt.png'" /></a></li>
    <li id="impressumlink"><a href="impressum.html"><img src="images/impressum.png" onmouseover="this.src='images/impressumu.png'" onmouseout="this.src='images/impressum.png'" /></a></li>
    </ul>
    </nav>
    </header>
    <aside>

    <img src="images/stage.png" alt="stage">

    <object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_multi.swf" width="444" height="75">
    <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_multi.swf" />
    <param name="bgcolor" value="#000000" />
    <param name="FlashVars" value="mp3=http%3A//annafirway.com/hurtsobadbeispiel.mp3%7Chttp%3A//annafirway.com/prideandjoybeispiel.mp3%7Chttp%3A//annafirway.com/bottlebeispiel.mp3&amp;title=Hurt so Bad - Live 2013|Pride and Joy - Live 2013|Other side of the bottle - Live 2013&amp;width=440&amp;height=75&amp;showvolume=1&amp;showloading=never&amp;sliderwidth=15&amp;slide rheight=5&amp;loadingcolor=27affd&amp;bgcolor=000000&amp;bgcolor1=000000&amp;bgcolor2=000000&amp;sli dercolor2=27affd&amp;sliderovercolor=ff00ae&amp;buttonovercolor=ff00ae&amp;textcolor=27affd&amp;play listalpha=100&amp;currentmp3color=27affd&amp;showplaylistnumbers=0" />
    </object>
    </aside>
    <section>
    <img src="images/datenbild.png" alt="blablabla">
    </section>
    <footer>

    <ul>
    <li><a href="http://www.musikstudio-greiner.de/"target="_blank"><img id="greiner" src="images/greiner1.png" alt="Musikstudio Greiner"></a></li>
    <li><a href="http://www.der-tonladen.de"target="_blank"><img id="tonladen" src="images/tonladen.png" alt="Der Tonladen"></a><li>
    <li><a href="http://www.das-zentrum.de"target="_blank"><img id="zentrum" src="images/zentrum.png" alt="DAS ZENTRUM"></a><li>
    <li><a href="http://www.facebook.de"target="_blank"><img id="facebook" src="images/facebook.png" alt="FACEBOOK"></a><li>
    </ul>

    </footer>
    </div>
    </body>
    </html>





    #wrapper {
    width: 960px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 50px;
    font-family: arial;
    font-size: 14px;
    background-color: #27363b

    }

    body {
    background-color: black;
    }

    header {

    padding-top: 10px;
    padding-bottom: 10px;
    height: 65px;
    border-top-left-radius: none;
    border-top-right-radius: none;
    border-bottom: solid black 6px;
    border-left: solid black 3px;
    border-right: solid black 3px;
    border-top: none;
    }
    header img {


    margin-top: -4px;
    border:none;
    float: left;

    }
    header ul {

    list-style: none;
    margin-left: 430px;
    margin-top: -5px;

    }
    header ul li {
    display: inline;
    margin-left: 20px;



    }

    #ticketslink {
    margin-right: 100px;

    }
    #anfahrtlink {
    margin-right: 85px;
    }
    #kontaktlink {
    margin-right: 95px;
    }
    #impressumlink {
    margin-right: 65px;

    }

    header a {
    color: #27affd;
    text-decoration: none;
    font-size: 20px;

    }

    header a:hover{
    color: white
    }

    section {
    font-family: arial;
    font-size: 12px;
    }


    section{
    float: right;
    padding: 15px;
    width: 444px;
    height: 294px;
    border-bottom: none;
    border-left: none;
    border-right: solid black 3px;
    border-top: none;
    }

    section img {
    border: none;
    padding-top: 15px;

    }

    section a {
    outline: none;
    color: black;
    }

    aside object {
    margin-top: 40px;
    /*border: solid #27affd 1px;*/
    }


    aside {
    font-family: arial;
    font-size: 12px;
    }

    aside{
    float: left;
    padding: 15px;
    width: 444px;
    height: 294px;
    border-bottom: none;
    border-left: solid black 3px;
    border-right: solid black 6px;
    border-top: none;
    }

    aside p {
    margin-top: -5px;
    }

    aside a {
    outline: none;
    }

    aside img {
    border: none;
    /*border: solid #27affd 1px;*/
    }


    footer{
    clear: both;
    backgYround: #e6005d;
    height: 40px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom-left-radius: none;
    border-bottom-right-radius: none;
    position:relative;
    border-bottom: none;
    border-left: solid black 3px;
    border-right: solid black 3px;
    border-top: solid black 6px;

    }

    footer ul {
    list-style: none;
    position: relative;
    margin-top: 0px;
    margin-left: -50px;
    padding-top: 0px;
    padding-left: 64px;

    }

    footer ul li {
    display: inline-block;
    }

    footer img {
    border: solid 2px;
    }

    #greiner {
    margin-right: 6px;
    }
    #tonladen {
    margin-right: 20px;
    }
    #zentrum {
    margin-right: 10px;
    }
    #facebook {
    margin-right: 0px;

    }

    footer ul a {
    color: black;
    text-decoration: none;
    font-size: 16px;
    }

    footer ul a {
    outline: none;
    }



    #ticketlink {
    border: none;
    }

    /* ANFAHRT */

    #karte {
    border: solid black 2px;

    }
    #anfahrtdaten {
    margin-bottom: -150px;
    margin-top: -15px;
    position: relative;
    }

    section ul li a {
    outline: none;
    }

    section ul {
    list-style: none;
    position: relative;
    margin-top: 185px;
    padding-top: 0px;
    padding-left: 0px;
    margin-left: auto;


    }

    section ul li {

    display: inline;
    float: left;
    margin-left: 50px;
    }

    #vogel {
    display: none;
    }

    #impressum1 p {
    font-family: arial;sans-serif;
    color: #000000;
    background-color: #27363b
    }

  4. #4
    Join Date
    May 2013
    Posts
    4
    do you need me to upload the images folder, too?

  5. #5
    Join Date
    May 2013
    Posts
    4
    well, after another day of random experimenting I sort of figured it out... deleted the list the menu was in and reorganized the images individually. I have no idea why but it seems to work

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles