Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New Coder
    Join Date
    May 2008
    Posts
    36
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Im trying to solve a gap issue in IE

    Hi There, I am trying to position some elements in my header using CSS.

    I have moved my menu elemnt into place using position: relative; and a negative margin-top value.

    The layout looks correct in FF and Safari - but in IE a gap remains where the menu would have appeared if I hadn't moved it up with margin-top: -70px;

    Thanks for any help you can offer.
    Rich

    The page:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>La Pura Vida - For Better Nutrition &amp; Weight Management</title>
    <link href="includes/Styles.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="includes/chrome.js">
    /***********************************************
    * Chrome CSS Drop Down Menu- &#169; Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    </script>
    </head>
    <body>
    <div align="center">
    <div id="header">
    <div class="tagline">For Better Nutririon & Weight Managment</div>
    <div id="logo"><a href="home.php" ><span>Home</span></a></div>
    <?php include('includes/mainmenu.php'); ?></div>

    <div id="content">
    <div id="main_image"></div>
    <p class="main_content"><br />
    <span class="large">Determination + Support = Success <br />
    </span></p>
    <p class="main_content"><br />
    La Pura Vida promotes healthy weight-loss through nutrition education and one-on-one nutrition coaching. We strive to help you acquire a diet that fits within your lifestyle so you can achieve your weight-loss goals. La Pura Vida is an evidence-based practice only supporting those approaches that have proven to be successful in long-term weight-loss maintenance<br />
    <br />
    </p>
    <p class="main_content home_bullets"><strong>Services include: </strong></p>
    <p class="main_content home_bullets">&bull; Metabolic Testing<br />
    &bull; Nutrition Consultations<br />
    &bull; Nutrition Coaching</p>
    <p class="main_content">&nbsp;</p>
    <p class="main_content large"><font color="#ca321a">Learn, Apply, Achieve</font></p>
    </div>
    <div id="footer"></div>
    <?php include('includes/footer.php'); ?>
    </div>
    <script type="text/javascript">
    cssdropdown.startchrome("chromemenu","chromemenu2")
    </script>
    <script type="text/javascript">
    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
    document.write(unescape("&#37;3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
    </script>
    <script type="text/javascript">
    var pageTracker = _gat._getTracker("UA-3419453-1");
    pageTracker._initData();
    pageTracker._trackPageview();
    </script>
    </body>
    </html>


    The CSS code:
    /* CSS Document */

    * {
    margin:0;
    padding:0;
    }

    body {
    background-color: #8f82ba;
    background-image: url(/images/bg.gif);
    background-repeat: repeat-x;
    margin-top: 0px;

    }
    #logo a{
    background-image: url(/images/logo.gif);
    background-repeat: no-repeat;
    height: 110px;
    width: 179px;
    display: block;
    text-decoration: none;

    }
    #logo a span {
    visibility: hidden;
    }
    .tagline{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: bold;
    font-style: italic;
    float:right;
    margin-top: 42px;
    margin-right: 50px;
    }


    #main_image{
    display: block;
    background-image: url(/images/home_image.jpg);
    background-repeat: no-repeat;
    height: 415px;
    width: 404px;
    float: right;
    }

    .main_content{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 20px;
    color: #454545;
    margin-left: 20px;

    }
    #header {
    background-color: #ffffff;
    width: 920px;
    height: 125px;
    text-align: left;
    /*background-image: url(/images/header_logo.gif);*/
    border-bottom: 1px solid #6d64af;
    }


    #content {
    background-color: #f7f6f4;
    width: 920px;
    height: 420px;
    text-align: left;
    }

    #footer {
    width: 920px;
    height: 22px;
    background-image: url(/images/footer.png);
    }
    .chromestyle{
    font-weight: normal;
    font: normal 11px Arial;
    position: relative;
    height: 30px;
    margin-left: 200px;
    margin-top: -70px;
    }

    .chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

    .chromestyle ul{
    border: 1px solid #fff;
    width: 100%;
    /*background: url(../media/chromebg.gif) center center repeat-x; THEME CHANGE HERE*/
    padding: 4px 0;
    margin: 0;
    text-align: left; /*set value to "left", "center", or "right"*/
    }

    .chromestyle ul li{
    display: inline;
    }

    .chromestyle ul li a{
    color: #341f85;
    padding: 4px 7px;
    margin: 0;
    text-decoration: none;
    border-right: 1px solid #DADADA;
    }

    .chromestyle ul li a:hover{
    border: 1px solid #DADADA;
    /*background: url(../media/chromebg-over.gif) center center repeat-x;THEME CHANGE HERE*/
    }

    .chromestyle ul li a[rel]:after{ /*HTML to indicate drop down link*/
    content: "";
    /*content: " " url(downimage.gif); /*uncomment this line to use an image instead*/
    }


    /* ######### Style for Drop Down Menu ######### */

    .dropmenudiv{
    position:absolute;
    top: 0;
    border: 1px solid #BBB; /*THEME CHANGE HERE*/
    border-bottom-width: 0;
    font:normal 11px Arial;
    line-height:18px;
    z-index:100;
    background-color: white;
    width: 200px;
    visibility: hidden;
    filter: progidXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4); /*Add Shadow in IE. Remove if desired*/
    }

    .dropmenudiv a{
    width: auto;
    display: block;
    text-indent: 3px;
    border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
    padding: 2px 0;
    text-decoration: none;
    font-weight: normal;
    color: #333333;
    }

    * html .dropmenudiv a{ /*IE only hack*/
    width: 100%;
    }

    .dropmenudiv a:hover{ /*THEME CHANGE HERE*/
    background-color: #F0F0F0;
    }


    .large {font-size: 24px;color: #726cb6;}
    .home_bullets {
    font-size: 16px;
    font-style: italic;
    line-height: 24px;
    color: #ca321a;
    }

  • #2
    Regular Coder
    Join Date
    Mar 2007
    Posts
    157
    Thanks
    6
    Thanked 4 Times in 4 Posts
    That's a lot of code to look through. Assuming this is the part you're talking about, here's what I'd try:

    .chromestyle{
    font-weight: normal;
    font: normal 11px Arial;
    position: relative;
    height: 30px;
    margin-left: 200px;
    margin-top: -70px;
    _margin-top:-10px;
    }

    The _ will cause that rule to only apply to IE. Just play with the margin until it moves into the position you want.

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Please read http://www.codingforums.com/showthread.php?t=82672 on how to post code here, you could edit your above post!
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #4
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Code here.

    less this:- <script type="text/javascript" src="includes/chrome.js">


    http://exitfegs.co.uk/reach100.html

    Frank
    Last edited by effpeetee; 05-08-2008 at 12:55 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #5
    New Coder
    Join Date
    May 2008
    Posts
    36
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Frank, the link you sent is unavailable. Can you post again for me?
    I tried to edit my post but cant seem to figure out how.
    Thank everyone for your input...
    Rich

  • #6
    New Coder
    Join Date
    May 2008
    Posts
    36
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Fixed Gap, but caused another spacing issue

    Quote Originally Posted by jessnoonyes View Post
    The _ will cause that rule to only apply to IE. Just play with the margin until it moves into the position you want.
    This worked like a charm to solve the gap issue, except it throws off the spacing between my two menus (in IE of course) http://www.lapura-vida.com/home.php

  • #7
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Back in circulation now. Latest version from your site.

    http://exitfegs.co.uk/reach100.html



    Frank
    Last edited by effpeetee; 05-12-2008 at 09:24 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #8
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Screenshot here.
    Frank
    Attached Thumbnails Attached Thumbnails Im trying to solve a gap issue in IE-screenhunter_02-may.-12-21.53.jpg  
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • Users who have thanked effpeetee for this post:

    reach100 (05-15-2008)

  • #9
    New Coder
    Join Date
    May 2008
    Posts
    36
    Thanks
    6
    Thanked 0 Times in 0 Posts
    That looks great, doesn't seem to work in IE6 thoiugh. Any ideas?
    Thanks,
    Rich

  • #10
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by reach100 View Post
    That looks great, doesn't seem to work in IE6 thoiugh. Any ideas?
    Thanks,
    Rich
    Unfortunately I do not have IE6. If I can help in any other way, let me know.

    The sources program in my signature has many useful url's

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #11
    Regular Coder FWDrew's Avatar
    Join Date
    Apr 2008
    Location
    Missouri
    Posts
    380
    Thanks
    38
    Thanked 45 Times in 43 Posts
    Quote Originally Posted by effpeetee View Post
    Unfortunately I do not have IE6. If I can help in any other way, let me know.

    The sources program in my signature has many useful url's

    Frank
    Hi Frank,

    Just wanted to say that the sources link in your sig is really a nice reference and I have actually used it more than once, so I feel I owe you a thanks.

    You have inspired me to start putting everything useful (coding wise) I come across on a web page for my future reference, I have no idea why I didnt think of that

    Drew

  • #12
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Thanks.
    But as I am not a very good coder, I thought that the best way to help was to collect the useful url's together. The main work of the program coding was greatly helped by coders on the forum, for which my grateful thanks. I am still looking at making it easier to find things. Any suggestions welcome.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #13
    New Coder
    Join Date
    May 2008
    Posts
    36
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Finally solved it using [overflow:hidden] on my header div.
    Thanks everyone!


  •  

    Posting Permissions

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