SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Site works in all browsers except IE7

    I have a site built in CSS that seems to be having some kind of float issue at the bottom of the page. I have several DIVs layered with background images and one of these DIVs has three DIVs contained in it. the DIV with the three smaller DIV's is the one having the isue. This DIVs background moves to the top, and the three smaller DIVs float higher into another div.

    I can show page HTML and CSS

    <Page HTML>


    <div id="middle" class="content clear"></div>
    <div id="right_side" class="content clear">
    <h2 class="home">We also know seizures aren&rsquo;t your only concern.</h2>
    <h3>Fortunately, this Web site can help. </h3>
    <p class="intro">Read on for valuable information about <a href="<&#37;=pagePath %>about-epilepsy.html">epilepsy</a> and <a href="<%=pagePath %>about-topamax.html">TOPAMAX</a>&mdash; to help you get the most out of<br /> your treatment.</p>
    </div>
    </div>
    <div id="callouts" class="clear">
    <ul>
    <li id="callout1">
    <h3>Safety Tips <br />&amp; Resources</h3>
    <p>Learn about an education <br />effort to provide patients and healthcare professionals with safety tips and resources. <br /><a href="http://www.rxforsafety.com" target="_blank">Learn More &raquo;</a></p>
    </li>

    <li id="callout2">
    <h3>The Free Everyday <br />
    Essentials&trade; Program</h3>
    <p>Get expert answers, help finding resources in <br />your area, and more. <!-- <a href="<%=request.getContextPath()%>/exit.html?url=https://www.healthcarehost.net/everydayessentials/"> Join Now &raquo;</a> -->COMING SOON!</p>
    </li>
    <li id="callout3">
    <h3><br />Expressions of Courage</h3>
    <p>This collection of artwork by people with epilepsy illustrates both the profound effect that epilepsy can have on a human life and the courage so many show in facing it. <a href="http://www.expressionsofcourage.com" target="_blank">View the Gallery &raquo;</a></p>
    </li>
    </ul>
    </div>
    <Page CSS>

    #home #callouts ul li a {
    color:#fecb00;
    text-decoration:none;
    }
    #home #callouts ul li a:hover {
    color:#fff;
    text-decoration:underline;
    }
    /** 5 | Content **/
    #home #main div.content {
    float:left;
    clear:none;
    }
    #home #main div.content div {
    width:200px;
    padding:0;
    }
    #home #callouts ul {
    margin-top:35px;
    _margin-top:70px;
    padding-bottom:30px;
    /* border:solid 1px black;*/
    background:url(../images/callout_bottom_bg.jpg) bottom left no-repeat;
    _height:1px;
    }
    #home #callouts ul li {
    float:left;
    display:block;
    padding:0px 20px;
    color:white;
    }
    #home #callouts ul li h3 {
    margin-left:40px;
    margin-bottom:10px;
    }
    #home #callouts li#callout1 {
    width:160px;
    background: url(../images/RxForSafety.gif) 20px 0 no-repeat;
    _height:2px;
    /* border:solid 1px red;*/
    }
    #home #callouts li#callout1 h3 {
    margin-left:60px;
    }
    #home #callouts li#callout2 {
    width:258px;
    background: url(../images/essentials_icon.gif) 20px 0 no-repeat;
    /* border:solid 1px red;*/
    }
    #home #callouts li#callout3 {
    width:261px;
    /* border:solid 1px red;*/
    background-image: url(../images/expressions_icon.gif);
    background-repeat: no-repeat;
    background-position: 20px 0;}
    #home #main div#left_side {
    width:201px;
    /* background:url(../images/leftside_bg.jpg) bottom left no-repeat;*/
    /* border:solid 1px green;*/

    div#callouts {
    /* border:solid 1px red;*/
    width:1000px;
    background:url(../images/callout_bg_new.jpg) top left no-repeat;
    padding:40px 100px 0 100px;
    position:absolute;
    top:448px;
    _height:1px;
    }
    #callouts { width: 960px; background: url(../images/home_callout_bg.gif) 0 bottom; position: absolute; left: -68px; top: 460px; z-index: 50; }
    #callouts #wrap { padding: 0 0 0 100px; background: url(../images/home_VTD.gif) top left no-repeat; }
    #callouts ul { padding: 70px 0 10px 0; margin: 0 0 20px 0; color: #D8D3BF; float: left; }
    * html #callouts ul { float: none; width: 100%; }
    #callouts ul li { float: left;/* padding-top:4px;*/}
    #callouts ul li.one { width: 150px; background: url(../images/RxForSafety.gif) no-repeat; }
    #callouts ul li.two { width: 250px; margin-left: 50px; background: url(../images/essentials_icon.gif) no-repeat; }
    #callouts ul li.three {
    width: 250px;
    margin-left: 0;
    background-image: url(../images/expressions_icon.gif);
    background-repeat: no-repeat;
    background-position: left top;
    }
    #callouts ul li.three strong { padding-left: 42px; }
    #callouts ul li.one strong {padding-left:65px;}
    #callouts ul li.two strong {padding-left:45px;}
    #callouts ul li a { color: #FFF; }
    #callouts strong { color: #FFF; font-size: 1.2em; display: block; }
    .callout {
    background: url(../images/callout_bg.jpg) right repeat-y;
    width: 180px; float: right; position: relative; top: 2px;
    border-top: 2px solid #FFE3AE; border-bottom: 3px double #004487;
    margin: 0 0 1.75em 1.75em; padding: 0 1.5em 1em 0; font-size: .95em; }
    Last edited by bazzer7rose; Sep 12, 2007 at 09:37. Reason: Adding page HTML and CSS

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,347
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I can show page HTML and CSS
    Please post the url and we'll take a look

  3. #3
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    www.topamaxepilepsy.com. I will add page layout and CSS to previous post if that helps

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,347
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Why are you using a shortened version of the clear method?

    The full clear method to cater for all browsers is as follows.

    Code:
    .clear:after {
        content:"."; 
        display:block; 
        height:0; 
        clear:both; 
        visibility:hidden;
    }
    .clear {display:inline-block;}
    /* mac hide \*/
    * html .clear {height: 1&#37;;}
    .clear{display: block;}
    /* End hide */
    Don't ever be tempted to change a single character in the above (including the comments) as everything is crucial for this to work cross browser.

    Adding the above will make the images show correctly but you have other serious errors.

    All your IE6 hacks using the horrid underscore property hack _etc are not read by ie7 yet it needs some of the margins and padding that you gave to IE. It won't need any of the height:1px hacks but it will probably need the padding and margin hacks that you gave ie6 due to the way the page is constructed.

    Use conditional comments instead of those ugly underscore hacks and supply ie6 and ie7 the code they need.

    However I would guess that nearly all the hacks are unnecessary and are probably due to coding errors in your structure or not catering for collapsing margins correctly, But I don't have time to go through them all to check whether they are actually needed or not

    Hope it helps anyway

  5. #5
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I replaced the clear code that you recommened but now I am having the same problem in Foirefox that I am having inn IE7

    Is there a possible simple fix that can be done to the floats in that area of the web page to get the grapbackground to go to the bottom of the DIV?

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,347
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I replaced the clear code that you recommened but now I am having the same problem in Foirefox that I am having inn IE7

    Is there a possible simple fix that can be done to the floats in that area of the web page to get the grapbackground to go to the bottom of the DIV?
    I gave you a simple fix !! Did you not read any of my post ?

    The fix I gave you works in Firefox and Ie7 (and ie6) and is a simple fix that just needs the code adding as I showed you above.

    It will make no difference to firefox at all because the extra styles are for ie6, ie7, ie5 mac.

    You have not uploaded the new code so I can't tell you what you did wrong but you did do something wrong, I can assure you.

    I have the code working locally in Ie6, Ie7 and firefox using the fixes I mentioned above.

    If you update the code I gave and apply the other fixes (margin/padding fixes) needed for ie7 via conditional comments then I will take a look again if it's not working but you should know that my code always works

  7. #7
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just so you know, I did not build this one, I have been given the job of resolving the issue, so this code may be alittle past my pay scale. I am viewing the changes locally and I still see an issue. This is the fulll page of CSS with changes you sent(minus the hack adjustments).

    /** 1 | defaults **/
    * { margin: 0; padding: 0; border: 0; }
    body { text-align: center; font: 62.5&#37;/1.3 Arial, Helvetica, sans-serif; background: #FFE3AE url(../images/body_bg.jpg) top center repeat-x; color: #333; }
    /** 2 | structure **/
    #home #container { position: relative; }
    #container {
    margin: 0 auto;
    text-align: left;
    /* border:solid 1px green;*/
    width:1000px;
    }
    #container #main {
    width:800px;
    margin-left:100px;
    }
    /** 3 | Nav **/


    #home #nav { list-style: none; font-size: 1.2em; display: block; width: 200px; padding-bottom: 40px; margin: 41px 0 0 0; text-indent:-1000em;}
    #home #nav li { display: inline; list-style:none;}
    #home #nav li a:link, #home #nav li a:visited { background: url(../images/nav.png) no-repeat; display: block; height: 60px; }
    #home #nav li a#about { background-position: 0 0; }
    #home #nav li a#about:hover, #home #nav li a#about.current { background-position: -200px 0; }
    #home #nav li a#TOPAMAX { background-position: 0 -60px; }
    #home #nav li a#TOPAMAX:hover, #home #nav li a#TOPAMAX.current { background-position: -200px -60px; }
    #home #nav li a#hcps { background-position: 0 -120px; }
    #home #nav li a#hcps:hover, #home #nav li a#hcps.current { background-position: -200px -120px; }
    #home #nav li a#isinav { background-position: 0 -182px; height: 57px; }
    #home #nav li a#isinav:hover, #home #nav li a#isinav.current { background-position: -200px -182px; }
    #home #nav li a#prescribing { background-position: 0 -240px; height: 40px; }
    #home #nav li a#prescribing:hover, #home #nav li a#prescribing.current { background-position: -200px -240px; }

    /** 3.1 | util **/
    #util ul {margin:0 auto; height:20px;list-style:none;}
    #util { border-top: 5px solid #004487; background: #333; width: 100%; height:auto; text-align: center; }
    #util ul { width: 600px;text-align:center;}
    #util ul li { float: left; }
    #util ul li a:link, #util ul li a:visited { color: #FFF; display: block; padding: 0 10px; margin: 3px 0; border-left: 1px solid #666; text-decoration: none; font-size: 100%; font-weight: 900; }
    #util ul li a:hover { text-decoration: underline; }
    #util ul li a.first { border: none; padding-left: 0; }

    /** 4 | headlines **/
    #home #main {
    font-size: 1.2em;
    background: url(../images/grad_bg.jpg) 0px 24px repeat-x;
    padding: 0; top: 90px;
    position: relative;
    display: block;
    width:800px;
    height:600px;
    }
    #home h1 {
    background: url(/topamaxepilepsy/images/headline.png) no-repeat;
    text-indent: -90000px;
    height: 95px;
    width: 800px;
    position: absolute;
    top: -80px;
    left:80px;
    margin: 0;
    _background-image: none;
    _filter: progidXImageTransform.Microsoft.AlphaImageLoader(src='images/headline.png', sizingMethod='image');
    }
    #home h2 {
    background: url(../images/seizure.png) no-repeat;
    text-indent: -90000px;
    height:108px;
    width: 215px;
    margin-left:20px;
    margin-top:35px;
    _background-image: none;
    _filter: progidXImageTransform.Microsoft.AlphaImageLoader(src='images/seizure.png', sizingMethod='image');

    }
    #home #main h3.rounded {
    margin:0;
    padding:0;
    height:24px;
    width:100%;
    background: url(../images/rounded_top.gif);
    }
    #home #main a {
    color:#fecb00;
    text-decoration:none;
    }
    #home #main a:hover {
    color:#fff;
    text-decoration:underline;
    }
    #home #callouts ul li a {
    color:#fecb00;
    text-decoration:none;
    }
    #home #callouts ul li a:hover {
    color:#fff;
    text-decoration:underline;
    }
    /** 5 | Content **/
    #home #main div.content {
    float:left;
    clear:none;
    }
    #home #main div.content div {
    width:200px;
    padding:0;
    }
    #home #callouts ul {
    margin-top:35px;
    _margin-top:70px;
    padding-bottom:30px;
    /* border:solid 1px black;*/
    background:url(../images/callout_bottom_bg.jpg) bottom left no-repeat;
    _height:1px;
    }
    #home #callouts ul li {
    float:left;
    display:block;
    padding:0px 20px;
    color:white;
    }
    #home #callouts ul li h3 {
    margin-left:40px;
    margin-bottom:10px;
    }
    #home #callouts li#callout1 {
    width:160px;
    background: url(../images/RxForSafety.gif) 20px 0 no-repeat;
    _height:2px;
    /* border:solid 1px red;*/
    }
    #home #callouts li#callout1 h3 {
    margin-left:60px;
    }
    #home #callouts li#callout2 {
    width:258px;
    background: url(../images/essentials_icon.gif) 20px 0 no-repeat;
    /* border:solid 1px red;*/
    }
    #home #callouts li#callout3 {
    width:261px;
    /* border:solid 1px red;*/
    background-image: url(../images/expressions_icon.gif);
    background-repeat: no-repeat;
    background-position: 20px 0;}
    #home #main div#left_side {
    width:201px;
    /* background:url(../images/leftside_bg.jpg) bottom left no-repeat;*/
    /* border:solid 1px green;*/
    }
    #home #main div#right_side {
    width:301px;
    /* background:url(../images/rightside_bg.jpg) bottom right no-repeat;*/

    /* border:solid 1px black;*/
    }

    #home #main div#right_side h3 {
    font:bold 14px/1.3em Arial, Helvetica, sans-serif;
    color:#fecb00;
    padding:40px 0 20px 20px;
    }
    #home #main div#right_side p{
    color:#ffffff;
    padding:0 20px;
    }
    #home #main div#middle {
    width:298px;
    height:350px;

    }
    /** 5.2 | Callouts **/
    div#callouts {
    /* border:solid 1px red;*/
    width:1000px;
    background:url(../images/callout_bg_new.jpg) top left no-repeat;
    padding:40px 100px 0 100px;
    position:absolute;
    top:448px;
    _height:1px;
    }
    div#main_image {
    position:absolute;
    top:123px;
    right:401px;
    z-index:1000;
    }
    #warning, #safetyRX, #togetherRX, #isi { font-size: 1.1em; width:550px; }
    #warning { background: url(../images/home_warning.gif) 110px 0 no-repeat; padding: 1em 50px 2em 330px; margin-top: 10em; _padding-top:11em;font-size: 1em; height:80px;
    _background-position:110px 10em;}
    * html #warning { margin-top: 19em; }
    #warning h3 { color: #6B710B; font-weight: bold; }
    #warning a:link, #warning a:visited, #safetyRX a:link, #safetyRX a:visited, #togetherRX a:link, #togetherRX a:visited, #isi a:link, #isi a:visited { color: #333; font-weight: bold; }

    #safetyRX { padding: 0 50px 1em 330px; background: url(../images/RxForSafety.gif) 260px 14px no-repeat; }
    #safetyRX h3 { color: #004487; font-weight: bold; }

    #togetherRX { padding: 0 50px 1em 330px; background: url(../images/togetherRX.gif) 130px 0 no-repeat; }
    #togetherRX h3 { color: #004487; font-weight: bold; }

    /** | ISI **/
    p { margin-bottom: 1em; }
    h1 { color: #004487; font-size: 175%; font-family: "Rockwell", Times New Roman, Times, serif; margin-bottom: .25em; }
    h2 { color: #004487; font-size: 140%; margin: 1em 0 .25em 0; }
    h3 { color: #ffffff; font-size: 110%; font-weight:bold; }
    h4 { color: #666; font-size: 100%; margin: 1.5em 0 .25em 0; }

    #home #isi { padding: 5px 50px 5em 330px; background: url(../images/OMN.gif) 114px 6px no-repeat; margin-top: 0; top: 0; }
    #isi { padding: 150px 50px 5em 210px; background: url(../images/content_bottom.jpg) top no-repeat; position: relative; top: 78px; }
    #isi h3 { color: #004487; font-weight: bold; text-transform: uppercase; }

    /** ?? | hacks **/
    .clear:after {
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
    }
    .clear {display:inline-block;}
    /* mac hide \*/
    * html .clear {height: 1%;}
    .clear{display: block;}
    /* End hide */

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,347
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    This looks much the same to meunless I'm missing something.

    Code:
    <!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>
    <!-- START HTML HEAD -->
    <!-- START META DATA FROM meta_data.properties -->
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>TOPAMAX for Epilepsy</title>
    <meta name="Description" content="TOPAMAX is a safe, well tolerated antiseizure medicine, proven to be effective in controlling a broad range of seizures in adults and children age 2 or older. TOPAMAX can make a significant difference in the lives of people with Epilepsy." />
    <meta name="Keywords" content="Topamax; topamax; topiramate; epilepsy; seizures; neurology; seizure; causes of seizures; cause of epilepsy; seizure disorder; seizure medication; epilepsy children; epilepsy symptoms; epilepsy treatment; epilepsy medication; epilepsy treatments; seizure disorder; epilepsy drug; epilepsy symptom; seizure medications; seizure treatment; seizure medicine; anti seizure medication; information on epilepsy; Types of Epilepsy; epilepsy treatments; epilepsy medications; Epilepsy Facts; epilepsy symptoms; Epileptic Seizures; antiepileptic drug" />
    <!--  <link href="/topamaxepilepsy/css/screen.css" rel="stylesheet" type="text/css" media="screen" />
    <link href="/topamaxepilepsy/css/print.css" rel="stylesheet" type="text/css" media="print" />-->
    <!-- <link href="/topamaxepilepsy/css/main.css" rel="stylesheet" type="text/css" /> -->
    <link rel="stylesheet" href="/topamaxepilepsy/css/home.css" type="text/css" media="screen" title="no title" charset="utf-8" />
    <script type="text/javascript" src="http://www.topamaxepilepsy.com/topamaxepilepsy/javascript/bookmark.js"></script>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.2.1/build/utilities/utilities.js"></script>
    <script src="http://www.topamaxepilepsy.com/topamaxepilepsy/javascript/main.js" type="text/javascript" charset="utf-8"></script>
    <!-- END HTML HEAD -->
    <style type="text/css">
    /** 1 | defaults **/
    * { margin: 0; padding: 0; border: 0; }
    body { text-align: center;  font: 62.5&#37;/1.3 Arial, Helvetica, sans-serif; background: #FFE3AE url(http://www.topamaxepilepsy.com/topamaxepilepsy/images/body_bg.jpg) top center repeat-x; color: #333; }
    /** 2 | structure **/
    #home #container { position: relative; }
    #container { 
        margin: 0 auto; 
        text-align: left; 
    /*    border:solid 1px green;*/
        width:1000px;
    }
    #container #main {
        width:800px;
        margin-left:100px;
    }
    /** 3 | Nav **/
    
    
    #home #nav { list-style: none; font-size: 1.2em;  display: block; width: 200px; padding-bottom: 40px; margin: 41px 0 0 0; text-indent:-1000em;}
        #home #nav li { display: inline; list-style:none;}
        #home #nav li a:link, #home #nav li a:visited { background: url(http://www.topamaxepilepsy.com/topamaxepilepsy/images/nav.png) no-repeat; display: block; height: 60px; }
        #home #nav li a#about { background-position: 0 0; }
        #home #nav li a#about:hover, #home #nav li a#about.current { background-position: -200px 0; }
        #home #nav li a#TOPAMAX { background-position: 0 -60px; }
        #home #nav li a#TOPAMAX:hover, #home #nav li a#TOPAMAX.current { background-position: -200px -60px; }
        #home #nav li a#hcps { background-position: 0 -120px; }
        #home #nav li a#hcps:hover, #home #nav li a#hcps.current { background-position: -200px -120px; }
        #home #nav li a#isinav { background-position: 0 -182px; height: 57px; }
        #home #nav li a#isinav:hover, #home #nav li a#isinav.current { background-position: -200px -182px; }
        #home #nav li a#prescribing { background-position: 0 -240px; height: 40px; }
        #home #nav li a#prescribing:hover, #home #nav li a#prescribing.current { background-position: -200px -240px; }
    
    /** 3.1 | util **/
    #util ul {margin:0 auto; height:20px;list-style:none;}
    #util { border-top: 5px solid #004487; background: #333; width: 100%; height:auto; text-align: center; }
    #util ul { width: 600px;text-align:center;}
    #util ul li { float: left; }
    #util ul li a:link, #util ul li a:visited { color: #FFF; display: block; padding: 0 10px; margin: 3px 0; border-left: 1px solid #666; text-decoration: none; font-size: 100%; font-weight: 900; }
    #util ul li a:hover { text-decoration: underline; }
    #util ul li a.first { border: none; padding-left: 0; }
    
    /** 4 | headlines **/
    #home #main { 
        font-size: 1.2em; 
        background: url(http://www.topamaxepilepsy.com/topamaxepilepsy/images/grad_bg.jpg) 0px 24px repeat-x; 
        padding: 0; top: 90px; 
        position: relative; 
        display: block; 
        width:800px; 
        height:600px;
        }
    #home h1 { 
        background: url(http://www.topamaxepilepsy.com/topamaxepilepsy/images/headline.png) no-repeat; 
        text-indent: -90000px; 
        height: 95px;
         width: 800px; 
        position: absolute; 
        top: -80px; 
        left:80px; 
        margin: 0; 
        _background-image: none;
        _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.topamaxepilepsy.com/topamaxepilepsy/images/headline.png', sizingMethod='image');
        }
    #home  h2 { 
        background: url(http://www.topamaxepilepsy.com/topamaxepilepsy/images/seizure.png) no-repeat; 
        text-indent: -90000px; 
        height:108px; 
        width: 215px; 
        margin-left:20px;
        margin-top:35px;
        _background-image: none;
        _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.topamaxepilepsy.com/topamaxepilepsy/images/seizure.png', sizingMethod='image');
        
    }
    #home #main h3.rounded {
        margin:0;
        padding:0;
        height:24px;
        width:100%;
        background: url(http://www.topamaxepilepsy.com/topamaxepilepsy/images/rounded_top.gif);
    }
    #home #main a {
        color:#fecb00;
        text-decoration:none;
    }
    #home #main a:hover {
        color:#fff;
        text-decoration:underline;
    }
    #home #callouts ul li a {
        color:#fecb00;
        text-decoration:none;
    }
    #home #callouts ul li a:hover {
        color:#fff;
        text-decoration:underline;
    }
    /** 5 | Content **/
    #home #main div.content {
        float:left;
        clear:none;
    }
    #home #main div.content div {
        width:200px;
        padding:0;
    }
    #home #callouts ul {
        margin-top:35px;
        padding-bottom:30px;
    /*    border:solid 1px black;*/
        background:url(http://www.topamaxepilepsy.com/topamaxepilepsy/images/callout_bottom_bg.jpg) bottom left no-repeat;
        _height:1px;
    }
    #home #callouts ul li {
        float:left;
        display:block;
        padding:0px 20px;
        color:white;
    }
    #home #callouts ul li h3 {
        margin-left:40px;
        margin-bottom:10px;
    }
    #home #callouts li#callout1 {
        width:160px;
        background: url(http://www.topamaxepilepsy.com/topamaxepilepsy/images/RxForSafety.gif) 20px 0 no-repeat;  
        _height:2px;
    /*    border:solid 1px red;*/
    }
    #home #callouts li#callout1 h3 {
        margin-left:60px;
    }
    #home #callouts li#callout2 {
        width:258px;
        background: url(http://www.topamaxepilepsy.com/topamaxepilepsy/images/essentials_icon.gif) 20px 0 no-repeat;
        /*    border:solid 1px red;*/
    }
    #home #callouts li#callout3 {
        width:261px;
    /*    border:solid 1px red;*/
    background-image: url(http://www.topamaxepilepsy.com/topamaxepilepsy/images/expressions_icon.gif);
    background-repeat: no-repeat;
    background-position: 20px 0;}
    #home #main div#left_side {
        width:201px;
    /*    background:url(http://www.topamaxepilepsy.com/topamaxepilepsy/images/leftside_bg.jpg) bottom left no-repeat;*/
    /*    border:solid 1px green;*/
    }
    #home #main div#right_side {
        width:301px;
    /*    background:url(http://www.topamaxepilepsy.com/topamaxepilepsy/images/rightside_bg.jpg) bottom right no-repeat;*/
        
    /*    border:solid 1px black;*/
    }
    
    #home #main div#right_side h3 {
        font:bold 14px/1.3em Arial, Helvetica, sans-serif;
        color:#fecb00;
        padding:40px 0  20px 20px;
    }
    #home #main div#right_side  p{
        color:#ffffff;
        padding:0 20px;
    }
    #home #main div#middle {
        width:298px;
        height:350px;
    
    }
    /** 5.2 | Callouts **/
    div#callouts {
    /*    border:solid 1px red;*/
        width:1000px;
        background:url(http://www.topamaxepilepsy.com/topamaxepilepsy/images/callout_bg_new.jpg) top left no-repeat;
        padding:40px 100px 0 100px;
        position:absolute;
        top:448px;
        _height:1px;
    }
    div#main_image {
        position:absolute;
        top:123px;
        right:401px;
        z-index:1000;
    }
    #warning, #safetyRX, #togetherRX, #isi { font-size: 1.1em; width:550px; }
    #warning { background: url(http://www.topamaxepilepsy.com/topamaxepilepsy/images/home_warning.gif) 110px 0 no-repeat; padding: 1em 50px 2em 330px; margin-top: 10em;font-size: 1em; height:80px;
        background-position:110px 0em;}
        #warning h3 { color: #6B710B; font-weight: bold; }
        #warning a:link, #warning a:visited, #safetyRX a:link, #safetyRX a:visited, #togetherRX a:link, #togetherRX a:visited, #isi a:link, #isi a:visited { color: #333; font-weight: bold; }
    
    #safetyRX { padding: 0 50px 1em 330px; background: url(http://www.topamaxepilepsy.com/topamaxepilepsy/images/RxForSafety.gif) 260px 14px no-repeat; }
        #safetyRX h3 { color: #004487; font-weight: bold; }
    
    #togetherRX { padding: 0 50px 1em 330px; background: url(http://www.topamaxepilepsy.com/topamaxepilepsy/images/togetherRX.gif) 130px 0 no-repeat; }
        #togetherRX h3 { color: #004487; font-weight: bold; }
    
    /**  | ISI **/
    p { margin-bottom: 1em; }
    h1 { color: #004487; font-size: 175%; font-family: "Rockwell", Times New Roman, Times, serif; margin-bottom: .25em; }
    h2 { color: #004487; font-size: 140%; margin: 1em 0 .25em 0; }
    h3 { color: #ffffff; font-size: 110%; font-weight:bold; }
    h4 { color: #666; font-size: 100%; margin: 1.5em 0 .25em 0; }
    
    #home #isi { padding: 5px 50px 5em 330px; background: url(http://www.topamaxepilepsy.com/topamaxepilepsy/images/OMN.gif) 114px 6px no-repeat; margin-top: 0; top: 0; }
    #isi { padding: 150px 50px 5em 210px; background: url(http://www.topamaxepilepsy.com/topamaxepilepsy/images/content_bottom.jpg) top no-repeat; position: relative; top: 78px; }
        #isi h3 { color: #004487; font-weight: bold; text-transform: uppercase; }
    
    /** ?? | hacks **/
    .clear:after {
        content:"."; 
        display:block; 
        height:0; 
        clear:both; 
        visibility:hidden;
    }
    .clear {display:inline-block;}
    /* mac hide \*/
    * html .clear {height: 1%;}
    .clear{display: block;}
    /* End hide */
    </style>
    <!--[if IE ]>
    <style type="text/css">
    #home #callouts ul {margin-top:70px;}
    #warning { 
        margin-top: 19em;  
        padding-top:11em;
        background-position:110px 10em;
    }
    </style>
    <![endif]-->
    </head>
    <body id="home">
    <div id="util">
        <!-- START HEADER TOP NAV -->
        <ul>
            <li><a href="/topamaxepilepsy/index.html" class="first"><strong>Home</strong></a></li>
            <li><a href="/topamaxepilepsy/sitemap.html">Site Map</a></li>
            <li><a href="/topamaxepilepsy/contact.html">Contact Us</a></li>
            <li><a href="/topamaxepilepsy/legal.html">Legal Notice</a></li>
            <li><a href="/topamaxepilepsy/privacy.html">Privacy Policy</a></li>
            <li><a href="http://www.topamax.com" target="_blank">TOPAMAX for Migraine</a></li>
        </ul>
        <!-- END HEADER TOP NAV -->
    </div>
    <div id="container" class="clear">
        <div id="main_image"><img src="http://www.topamaxepilepsy.com/topamaxepilepsy/images/home_image_1.jpg" alt="TOPAMAX girl" width="298" height="391" class="girl" id="rotated" /></div>
        <div id="main" class="clear">
            <h1 class="home">We know you&rsquo;re concerned about seizures</h1>
            <h3 class="rounded"></h3>
            <div id="left_side" class="content clear">
                <!-- START NAV -->
                <div id="nav">
                    <ul>
                        <!-- level 1 -->
                        <li> <a href="about-epilepsy.html" class="inactive" id="about"><i>About Epilepsy and its Treatment</i></a></li>
                        <li> <a href="about-topamax.html" class="inactive" id="TOPAMAX"><i>About TOPAMAX for Epilepsy</i></a></li>
                        <li> <a href="health-care-professionals.html" class="inactive" id="hcps"><i>For Healthcare Professionals</i></a></li>
                        <li> <a href="isi.html" class="inactive" id="isinav"><i>Important Safety Information</i></a></li>
                        <li> <a href="prescribing-info.html" class="inactive" id="prescribing"><i>Full U.S. Prescribing Information</i></a></li>
                    </ul>
                    <!-- level 1 -->
                </div>
                <!-- END NAV -->
            </div>
            <!-- START HOME COPY -->
            <div id="middle" class="content clear"></div>
            <div id="right_side" class="content clear">
                <h2 class="home">We also know seizures aren&rsquo;t your only concern.</h2>
                <h3>Fortunately, this Web site can help. </h3>
                <p class="intro">Read on for valuable information about <a href="/topamaxepilepsy/about-epilepsy.html">epilepsy</a> and <a href="/topamaxepilepsy/about-topamax.html">TOPAMAX</a>&mdash; to help you get the most out of<br />
                    your treatment.</p>
            </div>
        </div>
        <div id="callouts" class="clear">
            <ul id="callout_wrap" class="clear">
                <li id="callout1">
                    <h3>Safety Tips <br />
                        &amp; Resources</h3>
                    <p>Learn about an education <br />
                        effort to provide patients and healthcare professionals with safety tips and resources. <br />
                        <a href="http://www.rxforsafety.com" target="_blank">Learn More &raquo;</a></p>
                </li>
                <li id="callout2">
                    <h3>The Free Everyday <br />
                        Essentials&trade; Program</h3>
                    <p>Get expert answers, help finding resources in <br />
                        your area, and more.
                        <!-- <a href="/topamaxepilepsy/exit.html?url=https://www.healthcarehost.net/everydayessentials/"> Join Now &raquo;</a> -->
                        COMING SOON!</p>
                </li>
                <li id="callout3">
                    <h3><br />
                        Expressions of Courage</h3>
                    <p>This collection of artwork by people with epilepsy illustrates both the profound effect that epilepsy can have on a human life and the courage so many show in facing it. <a href="http://www.expressionsofcourage.com" target="_blank">View the Gallery &raquo;</a></p>
                </li>
            </ul>
        </div>
        <!-- END HOME COPY -->
        <!-- START FOOTER -->
        <div id="warning">
            <h3>Attention TOPAMAX Patients and Medical Professionals.</h3>
            <p>Dispensing errors have been reported between TOPAMAX<sup>&reg;</sup> (topiramate) Tablets and TOPROL-XL<sup>&reg;</sup> (metroprolol
                succinate) extended-release tablets. Please visit <a href="http://www.RxforSafety.com" target="_blank">www.RxforSafety.com</a> for
                complete information, and be sure to <strong>check your tablets</strong> to ensure you are taking
                the right medicine.</p>
        </div>
        <!-- END FOOTER -->
        <!-- START FOOTER -->
        <div id="togetherRX">
            <h3>TogetherRX</h3>
            <p>Learn more about a free prescription savings program for eligible individuals and families who lack prescription drug coverage and are not eligible for Medicare. <a href="/topamaxepilepsy/exit.html?url=http://www.togetherrxaccess.com/home.html">Learn More &raquo;</a></p>
        </div>
        <!-- END FOOTER -->
        <!-- START FOOTER -->
        <!-- For getting the content page last updated date & time -Start -->
        <!-- For getting the content page last updated date & time -End -->
        <div id="isi">
            <h3>About TOPAMAX</h3>
            <p>TOPAMAX is approved as initial monotherapy in patients 10 years of age and older with partial-onset
                or primary generalized tonic-clonic seizures.</p>
            <p>Effectiveness was demonstrated in a controlled trial in patients with epilepsy who had no more
                than 2 seizures in the 3 months prior to enrollment. Safety and effectiveness in patients
                who were converted to monotherapy from a previous regimen of other anticonvulsant drugs have not
                been established in controlled trials.</p>
            <p>TOPAMAX is approved as add-on therapy for patients 2 years of age and older with primary generalized
                tonic-clonic seizures, partial-onset seizures, or seizures associated with Lennox-Gastaut syndrome.</p>
            <h3>Important Safety Information</h3>
            <p>Serious risks associated with TOPAMAX include lowered bicarbonate levels in the blood resulting in an 
                increase in the acidity of the blood (metabolic acidosis).   Symptoms could include hyperventilation 
                (rapid, deep breathing), tiredness, loss of appetite, irregular heartbeat or changes in the level of alertness. 
                Call your doctor immediately if you get these symptoms.  Your doctor may want to do simple blood tests.  Chronic, 
                untreated metabolic acidosis may increase the risk for kidney stones or bone disease. </p>
            <p>Other serious risks include decreased sweating, increased body temperature, kidney stones, sleepiness, 
                dizziness, confusion, difficulty concentrating, and increased eye pressure (glaucoma).  Call your doctor 
                immediately if you have any decrease in vision or eye pain.  These problems can lead to blindness if not 
                treated right away. </p>
            <p>More common side effects in adults are nervousness, coordination problems, fatigue, speech problems, slowed 
                thinking, memory difficulty, tingling in arms and legs, and double vision; and in children, fatigue, loss of appetite, 
                nervousness, memory difficulty, aggressive behavior, and weight loss.</p>
            <p>As monotherapy, the most common side effects of TOPAMAX (in the 400 mg/day group and at a rate higher than the 50 
                mg/day group) in adults were tingling in arms and legs, weight decrease, sleepiness, loss of appetite, dizziness, and 
                difficulty with memory; and in children, weight decrease, upper respiratory tract infection, tingling in arms and legs, 
                loss of appetite, diarrhea, and mood problems.</p>
            <p>In combination with other antiepileptic drugs (AEDs), the most common side effects of TOPAMAX in adults (200 to 400 mg/day) 
                were sleepiness, dizziness, nervousness, loss of muscle coordination, fatigue, speech disorders and related problems, psychomotor 
                slowing, abnormal vision, difficulty with memory, tingling in arms and legs, and double vision; and in children (5 to 9 mg/kg/day), fatigue, 
                sleepiness, loss of appetite, nervousness, difficulty with concentration/attention, difficulty with memory, aggressive reaction, and weight decrease.</p>
            <p>Tell your doctor about other medications you take.</p>
            <p>Please see <a href="/topamaxepilepsy/prescribing-info.html">full U.S. Prescribing Information</a>.</p>
            <p>&copy; Ortho-McNeil Neurologics, Inc. 1999-2007. All rights reserved.</p>
            <p>Your use of the information on this site is subject to the terms of our <a href="/topamaxepilepsy/legal.html">Legal Statement</a>. Please see our <a href="/topamaxepilepsy/privacy.html">Privacy Policy.</a></p>
            <p>This site is published by Ortho-McNeil Neurologics, Inc., which is solely responsible for its contents.</p>
            <p>Capitalized product names are trademarks of <a href="http://www.ortho-mcneilneurologics.com" target="_blank">Ortho-McNeil Neurologics, Inc.</a></p>
            <p>This information is intended for use by our customers, patients and healthcare professionals in the United States only. Ortho-McNeil Neurologics, Inc. recognizes that the Internet is a global communications medium; however, laws, regulatory requirements and medical practices for pharmaceutical products vary from country to country. The prescribing information included here may not be appropriate for use outside the United States.</p>
            <p><b>This site was last modified on: Jul 31 2007 at 10:43:17 EDT</b></p>
        </div>
        <script type="text/javascript" src="http://www.jzmsurvey.com/0090/JZM_Recruit150.js">
    </script>
        <script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
    </script>
        <!-- END FOOTER -->
    </div>
    </body>
    </html>

    The css is in the head so I changed the img urls to absolute so I could see the images therefore you will need to change them back to relative when you externalize the css. However if you just preview that code into your browser and view while you are online you can check the page as is.

    The page is valid also.

  9. #9
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First, i would like to thank you for your help. I grabbed what you have here and it does work in all browsers. So you are a very talented coder. but when i pull the CSS out and place it back into the environment I run into the same issue. Your thoughts?

  10. #10
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I see what the issue is for me. Can the below code be placed in a JSP page? I don't think I can place that into a CSS page. And I don't have an HTML page to work with. Can I call an HTML page with this in it? Again thanks for your help.

    <!--[if IE ]>
    <style type="text/css">
    #home #callouts ul {margin-top:70px;}
    #warning {
    margin-top: 19em;
    padding-top:11em;
    background-position:110px 10em;
    }
    </style>
    <![endif]-->

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,347
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I'm not sure I understand why you can't have that code in your page. Surely you are putting a link to the stylesheet in the page so you must have some access.

    If you are only limited to adding css then you will have to use a hack for ie7 which is not really a good idea because its a live browser and you never know when bugs will get fixed.

    Anyway this code will do the same as the other code and can be added to the css.

    Code:
    * html #home #callouts ul,
    *+html  #home #callouts ul {margin-top:70px;}
    * html #warning,
    *+html #warning {
    margin-top: 19em;
    padding-top:11em;
    background-position:110px 10em;
    }
    Just bear in mind that it isn't future proof unlike the conditional comments version.

  12. #12
    SitePoint Addict
    Join Date
    Jun 2007
    Location
    Sydney, Australia
    Posts
    253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    paul, why not just use the simple clearer?

    with the overflow auto, clear both, height 1 px and margin -1px?

    and bazzer7rose:

    next time post your code using [code] or [html] (not sure if there is one for css)

  13. #13
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, IE5.5 and IE6 will ignore those rules. They will ignore any rule that uses the "+" combinator anywhere in its selector(s), even if there are multiple selector chains, each separated by a comma, and one of the others would normally apply to an element in the document.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,347
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Quote Originally Posted by Kravvitz
    even if there are multiple selector chains, each separated by a comma,
    Thanks Kravvitz, I did that in a rush and forgot about that. Good Catch

    Code:
    * html #home #callouts ul {margin-top:70px;}
    *+html  #home #callouts ul {margin-top:70px;}
    * html #warning {
    margin-top: 19em;
    padding-top:11em;
    background-position:110px 10em;
    }
    
    *+html #warning {
    margin-top: 19em;
    padding-top:11em;
    background-position:110px 10em;
    }
    Quote Originally Posted by zneboja
    paul, why not just use the simple clearer?
    Well of course you could use a simple clearer but that would mean adding extra html to the page and the page already had the clearer class in place anyway .


Bookmarks

Posting Permissions

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