Anonymous asked in Computers & InternetProgramming & Design · 1 decade ago

Do professional web designers have trouble creating site layouts because of different browsers?

I'm a graphic design student thats doing a little web design but I end up with so many problems for what I think are simple layouts. I wanted rollovers, and I had to keep researching different methods because they wouldnt work for some browsers.

I'm testing in Firefox and IE6.. javascript rollovers were being blocked by IE6 because of Active X.. but they work fine in FF. Another method worked in IE6 but not FF! Finally I was able to code method that worked for both.

Right now I'm using Frontpage and have everyting in rows and columns in a table. But there is one space in a cell I did not create and I cant delete for some reason. So I previewed in FF, its no longer there! I preview in IE.. and what do you know, there it is!

I'm probably having all these problems because I'm just intermediate doing this on the side..? Or do professionals have to deal with all these multiple browser issues too..?

4 Answers

  • 1 decade ago
    Favorite Answer

    I do web design and coding, and yeh, I would say that everyone comes accross problems like this. However, professionals, because they are professional, they know easy work arounds for most of these annoying bugs so for them, it is less likely to be a problem

    Although, the other day, I was coding a design using Div's and CSS and amazingly, there were no browser problems, and I was expecting quite a few...

    Hope this answers your question :D


  • 1 decade ago

    Yes, but most web designers like myself are used to testing on all browsers and most sites won't go live until they all work.

    I would like to tell you there is a easy solution but there just isn't. All sites have be tested on opera, firefox, ie, safari, and netscape on both pc and mac. Most web standards if used correctly will work on all browsers.

    I can tell you that things that don't like scroll bar styling will not likely be used on a professional site.

    As for Active X controls. It is up to the user to install the Active X control, you can not design for that.

    As for the space, it is most def. something in the code. If you would like to send the code to be I would be more then happy to fix the problem.

  • 1 decade ago

    Dreamweaver CS3 has a new Check Compatibility Function in it that will detect issues across multiple browsers.

  • 1 decade ago

    you can use css for rollovers and this works in all browsers, here is an example of how

    By taking advantage of the CSS pseudo-class of a:hover. When you hover over a link, the image changes, not by using javascript (as traditionally used for such things), but by simply invoking the CSS hover pseudo-class which causes that image to change!

    The HTML

    <ul id="nav">

    <li><a href="../default.htm" id="home" class="rollover" title="Home Page" accesskey="1"><img src="../images/nav/home.png" alt="Home Page" width="172" height="58" /></a></li>

    <li><a href="../photogalleries.shtml" id="web" class="rollover" title="Photo Galleries" accesskey="2"><img src="../images/nav/galleries.png" alt="Galleries" width="171" height="58" /></a></li>

    <li><a href="../webstuff.shtml" id="about" class="rollover" title="Web Stuff" accesskey="3"><img src="../images/nav/webstuff.png" alt="Web Stuff" width="170" height="58" /></a></li>

    <li><a href="../links.shtml" id="links" class="rollover" title="Links" accesskey="4"><img src="../images/nav/links.png" alt="Links" width="168" height="58" title="Contact Us" /></a></li>

    <li><a href="../contact.shtm" id="contact" class="rollover" title="Contact Me" accesskey="5"><img src="../images/nav/contact.png" alt="Contact Me" width="169" height="58" title="Contact Us" /></a></li>


    The CSS

    .rollover {display: block;height: 100%;}

    .rollover img {width: 100%;height: 100%;border: 0;}

    .rollover:hover { visibility: visible; }

    .rollover:hover img { visibility: hidden; }

    #home, #contact, #web, #about, #links, #terms {height: 58px;}

    #home {width: 172px;background: url(../images/nav/hover/home.png);}

    #web {background: url(../images/nav/hover/galleries.png);width: 171px;}

    #about {background: url(../imagesf/nav/hover/webstuff.png);width: 170px;}

    #links {background: url(../images/nav/hover/links.png);width: 168px;}

    #contact {background: url(../images/nav/hover/contact.png);width: 169px;}

    .navigation {display:none}

    as a professional designer, i face these problems every day, it is a case of learning and finding out ( the internet is the biggest reference libary in the world ) . sometimes its just trial and error, but 9 times out of 10, there is usually a soloution, all you have to do is hunt for it

Still have questions? Get your answers by asking now.