Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 6 of 6
  1. #1
    Junior Member
    Join Date
    May 2007
    Posts
    3
    Member #
    15238
    I built a website, but it has a problem that bothers the owner, and I don't know how to fix it.
    http://tanyapreminger.com/work/brain...mage-Home.html
    When changing the display size of the screen using the CONTROL button plus the mouse scroll, the CSS menu gets messed up.
    The padding between the links dissapears and does not fix itself even when going back to the original size. THIS HAPPENS IN EXPLORER ONLY.
    I tried changing the measurments from px to em but it didn't work.
    Can anybody help me?
    Here's the code-
    HTML-
    <div class="chromestyle" id="chromemenu">
    <ul>
    <li><a href="../Brain_Damage-Home.html">HOME</a></li>
    <li><a href="#" rel="dropmenu1">BACKGROUND</a></li>
    <li><a href="../Brain_Damage-Team.html">TEAM</a></li>
    <li><a href="../Brain_Damage-Technology.html">TECHNOLOGY</a></li>
    <li><a href="../Brain_Damage-Applications.html">APPLICATIONS</a></li>
    <li><a href="../Brain_Damage-Contact.html">CONTACT</a></li>
    <li><a href="../Brain_Damage-Download.html">DOWNLOAD</a></li>
    </ul>
    </div>

    CSS-

    /* ######### Style for Menu ######### */
    .chromestyle{
    width: 100%;
    height: 9px;
    font-weight: bold;
    color: #ffffff;
    text-align: middle;
    }
    .chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
    content: ".";
    display: block;
    height: 40%;
    clear: both;
    visibility: hidden;
    }
    .chromestyle ul{
    width: 97%;
    background-color: #000000;
    padding: 0px 8px;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold
    text-align: center; /*set value to "left", "center", or "right"*/
    height: 0;
    }
    .chromestyle ul li{
    display: inline;
    }
    .chromestyle ul li a{
    color: #ffffff;
    padding: 0px 8px;
    margin: 0;
    text-decoration: none;
    }
    .chromestyle ul li a:hover{
    background-color: #000000; /*THEME CHANGE HERE*/
    }

    #active a:link, #active a:visited, #active a:hover
    {
    color: #ffffff;
    text-decoration: underline;
    }


    /* ######### Style for Drop Down Menu ######### */
    .dropmenudiv{
    position:absolute;
    width: 145px;
    top: 5em;
    left: 0em;
    border: 1px solid #BBB; /*THEME CHANGE HERE*/
    border-bottom-width: 0;
    font:normal 11px Arial;
    line-height:18px;
    z-index:100;
    background-color: #000000;
    visibility: hidden;
    }

    .dropmenudiv a{
    width: 145px;
    display: block;
    text-indent: 3px;
    border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
    padding: 2px 0;
    text-decoration: none;
    font-weight: bold;
    color: #ffffff;
    }
    * html .dropmenudiv a{ /*IE only hack*/
    width: 100%;
    }
    .dropmenudiv a:hover{ /*THEME CHANGE HERE*/
    background-color: #000000;
    width: 145px;
    }

  2.  

  3. #2
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    Quote Originally Posted by tanya68
    The padding between the links dissapears and does not fix itself even when going back to the original size. THIS HAPPENS IN EXPLORER ONLY.
    No ... it happens in FF too ... well ... part of the menu disappears in FF. And there's line appearing that breaks your background.

    There's not much that can be done. You're using tables to structure your layout which is a really bad idea. See the link in my sig or the sticky at the top for why you shouldn't be using tables and how to do it with CSS and DIV.

    The other thing is, the design is not a very good "web" design because of just this problem ... font size that can be increased by the user.

    I suggest maybe you should rethink the design otherwise ... there isn't much you can do.
    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us

  4. #3
    Junior Member
    Join Date
    May 2007
    Posts
    3
    Member #
    15238
    Thank you ,Karine, for your reply,
    When you say "there isn't much to do" you mean there is nothing do to? I finished the website and I don't want to do everything all over again. Isn't there a little fix that can help just the padding problem? Or limit the font size in the menu to a fixed size?
    For future work, I will rethink my design method, but I looked in many css tutorials and arrived to the conclusion that though designing with CSS layouts has its many qualities, it is very limiting designwise. For example, my design (http://tanyapreminger.com/work/brain...mage-Home.html) cannot be achieved with CSS.
    In CSS everything is divided to div's and containers and an image cannot flow from one div to the next. Am I right?
    Thank you very much for your help, Tanya

  5. #4
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    You're right that an image can't really `flow between divs' (though with some nasty positioning trickery, it is possible), but that is only a problem in table-based layouts.

    Not only can CSS achieve everything table-based designs can (albeit sometimes with some pain, especially with columned layouts), but it will achieve it in what is typically a cleaner way, certainly a less filesize-intensive way, definitely a more readable way, and it can let you achieve things that aren't achievable with table-based layouts.

    For a layout similar to yours, see ljm's site, which, as I recall, is both all-CSS, and has a similar page-within-a-box look.

    It bears noting, by the way, that for your specific complaint, you'd put one container div that would have the full background image, and overlay another div on it with the menu and such, so that you don't need multiple divs. This makes more sense semantically, and it makes more sense to the brain, since those aren't really multiple images, they're one -- it's just the hackery that are tables that forces you to divide it into many of them.

  6. #5
    Junior Member
    Join Date
    May 2007
    Posts
    3
    Member #
    15238
    Thank you, ShadowFiend, for yor reply.
    You convinced me. I will do try to do my next website using CSS only.
    But is there any fix I can do now to the current website? You think if I'll change the padding values the messing up of the menu won't happen? I tried changing the pixels to em's, but it didn't work.
    Thank you for your help, I so don't want to re-do the website all over again now that its done but has this problem only.....
    Tanya

  7. #6
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    I understand. I can't think of a way to fix this, though, as it sounds like an issue with rendering. You could try using Javascript to intercept font size changes, but I'm not sure if you can do that (in fact, I doubt you can). You could also try using Javascript to monitor the page every, say, 500ms, and if the font size has changed (wouldn't know exactly how you'd go about establishing that -- maybe the *.style.fontSize property would change?), set a different absolute size or something for the menu.

    But these are just guesses. When it starts getting to weird rendering artifacts, sometimes there's just no way to fix it. When there is, it's usually very hackish.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 02:57 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com