SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot musicman77's Avatar
    Join Date
    Dec 2005
    Location
    New Orleans, Louisiana, USA
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    External stylesheet for IE not working

    I made an external stylesheet for IE and it is not overriding my default stylesheet. I chwecked this by editing my default stylesheet{the one I use in FF) and it affected the look in IE.

    Code:
    External {IE} stylesheet:
    HTML Code:
    body {
    font-family: verdana,arial,helvetica,sans-serif; font-size: x-small; background-color: #FFFFFF; color: #000000; margin-top: 0px; 
    width:734px;}
    .float-left {
    float:left;width:130px;
    }
    div.toplinks {margin-left:6cm;margin-top:.2cm;}
    div.whitetext {color:#fff;font-weight:bolder;}
    div.whitetext1 {color:#fff;font-weight:bolder;}
    div.search {
    background-color: #336699;
    border:1px solid;
    border-color:#000000; 
    margin-top:.1cm;
    margin-right:2cm;
    }
    div.date {margin-left:40%;margin-top:0cm;font-weight:bolder;}
     
    DIV.write {
    background-color: #336699;
    border:1px solid;
    border-color:#000; 
    margin-top:-2.13cm;
    float:right;
    width:200px;height:90px;
    border-left:none;
    }
     
     
    div.fav {margin-top:-2.8cm;margin-left:0cm;font-weight:bolder;}
    .welcome {background-color: #336699;
    margin-left:0cm;margin-top:1cm; 
    border-left:none;
    width:100%;
    height:20px;
    font-size:16px;}
    div.welcome-table 
    {background-color: #fff;
    margin-top:2cm;
    margin-left:6cm;
    border:1px solid;
    border-color:#006699;
    }
    .float1 {float:left}
    div.mhp {
    margin-top:.4cm;margin-left:10cm;}
    div.menu1 {
     
    background-color: #ffffff;
    margin-top:-10.38cm;
    margin-left:0cm;
    border:1px solid;
    border-color:#006699;
    width:27%
    }
    .menu1 ul li{
    padding-bottom:1em;
    list-style-type: disc;
    }
    .vt {margin-top:.9cm;
    background:#336699;
    margin-left:12cm;
    color:white;
    font-size:16;
    font-weight:bolder;
    width:275px;}
    div.video-table 
    {
    margin-top:0cm;
    margin-left:12cm;
    border:none;
    }
    div.contact
    {background-color: #fff;
    margin-top:-12.5cm;
    margin-left:6cm;
    border:1px solid;
    border-color:#006699;
    width:40%;
    }
    div.video
    {background-color: #fff;
    margin-top:1cm;
    margin-left:6cm;
    border:1px solid;
    border-color:#006699;
    width:40%;
    }
    div.forum
    {background-color: #fff;
    margin-top:-5.1cm;
    margin-left:15cm;
    border:1px solid;
    border-color:#006699;
    width:200px;
    }
    div.updated {margin-top:1cm;margin-left:6cm;font-weight:bolder;}
    div.donate
    {background-color: #fff;
    margin-top:2.3cm;
    margin-left:5.2cm;
    border:1px solid;
    border-color:#006699;
    }
    div.google {margin-top:3cm;margin-left:3.2cm;
    border:1px solid;border-color:#000;
    background-color:#336699;}
    div.updated {margin-top:1cm;margin-left:6cm;font-weight:bolder;}
    div.copy {margin-left:7cm;margin-top:1cm;}
    div.copy1 {margin-left:7.9cm;margin-top:.2cm;}
    div.copy2 {margin-top:.2cm;margin-left:7cm;}
    a:link { 
    font-family: verdana,arial,helvetica,sans-serif; color: #003399; 
    }
    a:visited {
    font-family: verdana,arial,helvetica,sans-serif; color: #003399; 
    }
    a:active {
    font-family: verdana,arial,helvetica,sans-serif; color: #003399; 
    }
    a.orangelink:link {
    color: #fff;font-weight:bolder;
    } 
    .text {
    color:#000000;
    } 
    div.orangetext {color:#CC6600;font-weight:bolder;font-size:16px;}
    div.biglink {color:blue;font-size:14px;font-weight:bolder;}
    .t {background:#336699;
    width:200px;
    height:20;
    font-size:13px;font-weight:bolder;
    color:white;
    }
    .gt {margin-top:0;
    font-size:14px;
    color:gray;
    font-weight:bolder;margin-left:.2cm;}
    .gt1 {
    font-size:14px;
    color:gray;
    font-weight:bolder;
    margin-left:2.5cm;
    margin-top:-.85cm;}
    .l {margin-left:2.5cm;
    margin-top:-2cm;}
    .gt2 {
    font-size:14px;
    color:gray;
    font-weight:bolder;
    margin-left:5.5cm;
    margin-top:-.85cm;}
    .ll {margin-left:5.5cm;
    margin-top:-2cm;}
    .gt3 {
    font-size:14px;
    color:gray;
    font-weight:bolder;
    margin-left:8cm;
    margin-top:-.5cm;}
    .l2 {margin-left:8cm;
    margin-top:-2cm;}
    .gt4 {
    font-size:14px;
    color:gray;
    font-weight:bolder;
    margin-left:10cm;
    margin-top:-.86cm;}
    .l3 {margin-left:10cm;
    margin-top:-1.9cm;}
     
    Default {Firefox} stylesheet with HTML:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta content="text/html; charset=ISO-8859-1"
    http-equiv="content-type"/>
    <meta id="description" content="Online source for movie quotes"/>
    <meta id="keywords"
    content="Movie Quotes, Quotes, Movies, Movie Games, Video Quotes, Web Quotes, Web Movie Quiotes"/>
    <title>Movie Quotes Central: Your online source for movie
    quotes.</title>
     
    <style type="text/css">
    body {
    font-family: verdana,arial,helvetica,sans-serif; font-size: x-small; background-color: #FFFFFF; color: #000000; margin-top: 0px; 
    width:734px;}
    .float-left {
    float:left;width:130px;
    }
    div.toplinks {margin-left:6cm;margin-top:.2cm;}
    div.whitetext {color:#fff;font-weight:bolder;}
    div.whitetext1 {color:#fff;font-weight:bolder;}
    div.search {
    background-color: #336699;
    border:1px solid;
    border-color:#000000; 
    margin-top:.5cm;
    margin-right:2cm;
    }
    div.date {margin-left:40%;margin-top:0cm;font-weight:bolder;}
     
    DIV.write {
    background-color: #336699;
    border:1px solid;
    border-color:#000; 
    margin-top:-2.13cm;
    float:right;
    width:200px;height:90px;
    border-left:none;
    }
     
     
    div.fav {margin-top:-2.8cm;margin-left:0cm;font-weight:bolder;}
    .welcome {background-color: #336699;
    margin-left:0cm;margin-top:1cm; 
    border-left:none;
    width:100%;
    height:20px;
    font-size:16px;}
    div.welcome-table 
    {background-color: #fff;
    margin-top:2cm;
    margin-left:6cm;
    border:1px solid;
    border-color:#006699;
    }
    .float1 {float:left}
    div.mhp {
    margin-top:.4cm;margin-left:10cm;}
    div.menu1 {
     
    background-color: #ffffff;
    margin-top:-10.38cm;
    margin-left:0cm;
    border:1px solid;
    border-color:#006699;
    width:200px;
    }
    .menu1 ul li{
    padding-bottom:1em;
    list-style-type: disc;
    }
    div.pad {padding-left:0em;font-size:13px;font-weight:bolder;}
    .vt {margin-top:.9cm;
    background:#336699;
    margin-left:12cm;
    color:white;
    font-size:16;
    font-weight:bolder;
    width:275px;}
    div.video-table 
    {
    margin-top:0cm;
    margin-left:12cm;
    border:none;
    }
    div.contact
    {background-color: #fff;
    margin-top:-12.5cm;
    margin-left:6cm;
    border:1px solid;
    border-color:#006699;
    width:40%;
    }
    div.video
    {background-color: #fff;
    margin-top:2cm;
    margin-left:6cm;
    border:1px solid;
    border-color:#006699;
    width:40%;
    }
    div.forum
    {background-color: #fff;
    margin-top:-5.1cm;
    margin-left:15cm;
    border:1px solid;
    border-color:#006699;
    width:200px;
    }
    div.updated {margin-top:1cm;margin-left:6cm;font-weight:bolder;}
    div.donate
    {background-color: #fff;
    margin-top:2.3cm;
    margin-left:5.2cm;
    border:1px solid;
    border-color:#006699;
    }
    div.google {margin-top:3cm;margin-left:3.2cm;
    border:1px solid;border-color:#000;
    background-color:#336699;}
    div.updated {margin-top:1cm;margin-left:6cm;font-weight:bolder;}
    div.copy {margin-left:7cm;margin-top:1cm;}
    div.copy1 {margin-left:7.9cm;margin-top:.2cm;}
    div.copy2 {margin-top:.2cm;margin-left:7cm;}
    a:link { 
    font-family: verdana,arial,helvetica,sans-serif; color: #003399; 
    }
    a:visited {
    font-family: verdana,arial,helvetica,sans-serif; color: #003399; 
    }
    a:active {
    font-family: verdana,arial,helvetica,sans-serif; color: #003399; 
    }
    a.orangelink:link {
    color: #fff;font-weight:bolder;
    } 
    .text {
    color:#000000;
    } 
    div.orangetext {color:#CC6600;font-weight:bolder;font-size:16px;}
    div.biglink {color:blue;font-size:14px;font-weight:bolder;}
    .t {background:#336699;
    width:200px;
    height:20;
    font-size:13px;font-weight:bolder;
    color:white;
    }
    .gt {margin-top:0;
    font-size:14px;
    color:gray;
    font-weight:bolder;margin-left:.2cm;}
    .gt1 {
    font-size:14px;
    color:gray;
    font-weight:bolder;
    margin-left:2.5cm;
    margin-top:-.85cm;}
    .l {margin-left:2.5cm;
    margin-top:-2cm;}
    .gt2 {
    font-size:14px;
    color:gray;
    font-weight:bolder;
    margin-left:5.5cm;
    margin-top:-.85cm;}
    .ll {margin-left:5.5cm;
    margin-top:-2cm;}
    .gt3 {
    font-size:14px;
    color:gray;
    font-weight:bolder;
    margin-left:8cm;
    margin-top:-.5cm;}
    .l2 {margin-left:8cm;
    margin-top:-2cm;}
    .gt4 {
    font-size:14px;
    color:gray;
    font-weight:bolder;
    margin-left:10cm;
    margin-top:-.86cm;}
    .l3 {margin-left:10cm;
    margin-top:-1.9cm;}
    </style>
    <!--[if IE]>
    <style type="text/css"> @import url(iet.css); </style>
    <![endif]-->
    </head>
    <body>
    <img class="float-left"
    src="http://www.exn.ca/news/images/2000/02/23/20000223-potatoe.jpg"
    alt="MQC Logo" />
    <div class="toplinks">
    <a href=""><img src="http://i10.photobucket.com/albums/a118/musicman77/tv.jpg" width="50" height="50" border="none" /></a>
    <div class="gt">Home</div>
    <a href=""><img src="http://i10.photobucket.com/albums/a118/musicman77/m.gif" width="50" height="50" border="none" class="l" /></a>
    <div class="gt1">Contact Us</div>
    <a href=""><img src="http://i10.photobucket.com/albums/a118/musicman77/pen.gif" width="50" height="50" border="none" class="ll" /></a>
    <div class="gt2">Sign In</div>
    <div class="gt3">Forum</div>
    <a href=""><img src="http://i10.photobucket.com/albums/a118/musicman77/b.jpg" width="50" height="50" border="none" class="l2" /></a>
    <div class="gt4">Donate</div>
    <a href=""><img src="http://i10.photobucket.com/albums/a118/musicman77/coin.gif" width="50" height="40" border="none" class="l3" /></a>
    </div>
    <div class="search">
    <div class="whitetext">&nbsp;&nbsp;search movie quotes central:</div>
    <form method="get" action="http://www.google.com/search">
    <input type="text" name="q" size="31" maxlength="255" />
    <input type="submit" name="btnG" value="Search" />
    <input type="hidden" name="domains" value="moviequotescentral.com" />
    <input type="hidden" name="sitesearch" value="MovieQuotesCentral.com" />
    </form></div>
    <div class="write"><br /><div class="whitetext">&nbsp;Write a:</div>
    <ol type="square"><li><a href="" class="orangelink">movie review</a></li> 
    <li><a href="textr.htm" class="orangelink"> movie quotes review</a></li> 
    <li><a href="tgex.htm" class="orangelink">movie article</a></li></ol> </div>
    <div class="date"><script language="JavaScript1.2" type="text/javascript">
    <!-- Begin
    var months=new Array(13);
    months[1]="January";
    months[2]="February";
    months[3]="March";
    months[4]="April";
    months[5]="May";
    months[6]="June";
    months[7]="July";
    months[8]="August";
    months[9]="September";
    months[10]="October";
    months[11]="November";
    months[12]="December";
    var time=new Date();
    var lmonth=months[time.getMonth() + 1];
    var date=time.getDate();
    var year=time.getYear();
    if (year < 2000)
    year = year + 1900;
    document.write(lmonth + " ");
    document.write(date + ", " + year);
    // End -->
    </script></div>
    <div class="welcome">
    <div class="whitetext1">Welcome. Please <a href="lex.htm" 
    class="orangelink">sign in</a> to
    begin submitting movie quotes. New? <a href="thex.htm" class="orangelink">Start
    here</a>.</div></div>
     
    <br /><br />
    <div class="fav"><script language="Javascript" type="text/javascript">
    <!--Begin-->
    if ((navigator.appName == "Microsoft Internet Explorer") && (parseInt(navigator.appVersion) >= 4)) {
    var url="http://www.moviequotescentral.com";
    var title="Movie Quotes Central";
    document.write('<a href="javascript:window.ext');
    document.write('ernal.AddFavorite(url,title);" ');
    document.write('onMouseOver=" window.status=');
    document.write("'Add our site to your favorites!'; return true ");
    document.write('"onMouseOut=" window.status=');
    document.write("' '; return true ");
    document.write('">Add our site to your favorites!</a>');
    }
    else {
    var msg = "Don't forget to bookmark us!";
    if(navigator.appName == "Netscape") msg += " (CTRL-D)";
    document.write(msg);
    }
    // End -->
    </script> </div>
    <div class="welcome-table"><img class="float1" src="http://www.duplicationmedia.com/images/videocd2.gif" width="100" height="100" alt="image" /><div class="orangetext">Welcome to Movie Quotes Central</div><div class="strong">Welcome!</div> to Movie Quotes Central. To begin submitting movie quotes you must <a href="">register</a> as a quoter.<ul><li>Click here to <a href="texply.htm">Play</a> the Movie Quotes Game!</li></ul> </div>
    <div class="mhp"><a target="_self" href="#" onClick="this.style.behavior='url(#default#homepage)';
    this.setHomePage('http://www.moviequotescentral.com');">Make MQC your home page!</a></div>
    <div class="vt">&nbsp;&nbsp;&nbsp;New in Theaters</div>
    <div class="video-table"><!-- BEGIN --> 
    <script language="Javascript" src='http://www.ez-entertainment.net/features/EZnewrelease.js' type="text/javascript" />
    </script> 
    <noscript>
    [You must have Javascript enabled to see this content]
    </noscript> 
    <!-- END --></div>
    <div class="menu1">
    <div class="t">Site-Related</div>
    <ul>
    <li><a href="">Home</a></li>
    <li><a href="">Contact</a></li>
    <li><a href="">Guestbook</a></li>
    <li><a href="">FAQ/Help</a></li>
    <li><a href="">Donate</a></li>
    <li><a href="">Site Map</a></li>
    </ul>
    <div class="t">Movie Quotes</div>
    <ul>
    <li><a href="">View Movie Quotes</a></li>
    <li><a href="">Register as Quoter</a></li>
    <li><a href="">Sign In</a></li>
    <li><a href="">Submit Movie Quotes</a></li>
    </ul>
    <div class="t">Articles & Reviews</div>
    <ul>
    <li><a href="">Movie Articles</a></li>
    <li><a href="">Quote Reviews</a></li>
    <li><a href="">Movie Reviews</a></li>
    </ul>
    <div class="t">Other</div>
    <ul>
    <li><a href="">MQC Forum</a></li>
    <li><a href="">Links</a></li>
    </ul>
    </div>
    <div class="contact"><img class="float1" src="http://www.sxc.hu/pic/m/p/pi/pixx/186741_.jpg" width="100" height="100" alt="Send us an e-mail" /><div class="orangetext">E-mail Us</div><br /> We appreciate our visitors feedback. Please <a href="texeml.htm" >e-mail us</a> and tell us what you think of Movie Quotes Central.<br /> You can also <a href="gbtex.htm">sign our guestbook</a>.</div>
    <div class="video"><a href="http://www.videoeta.com" target="_top"><img src="http://www.videoeta.com/images/new_this_week_better.gif" width="320" height="190" alt="VideoETA New This Week" border="0"></a> 
    </div>
    <div class="forum"><img class="float1" src="http://images.delias.com/56239_c.jpg" width="100" height="100" alt="Movie Quotes forum" /><div class="orangetext">Movie Quotes Central Forum</div><br />Check out the <a href="texfrm.htm">Movie Quotes Central Forum</a> You can chat with other movie quote lovers about movie quotes, movies, and more!</div>
    <div class="donate"><img class="float1" src="http://www.sxc.hu/pic/m/h/he/henry37/447538_euro_money.jpg" alt="donate" width="100" height="85" /><div class="orangetext">Donate</div><br /><h5>Movie Quotes Central is ad-free. Please <a href="dnttex.htm">help us keep it that way</a>.</h5><br /></div>
    <div class="google"><!-- Search Google -->
    <form method='get' action="http://www.google.com/custom TARGET=_blank" >
    <a href="http://www.google.com/custom TARGET=_blank">
    <img src="http://www.google.com/logos/Logo_40wht.gif" border='0'
    alt='Google' align='middle'></a>
    <input type='text' id='q' size='31' maxlength='255' value="" />
    <input type='submit' id='btnG' value="Google Search" />
    <input type='hidden' id='cof' value="T:white;LW:400;
    L:http://google.com/logos/Logo_40blk.gif;LC:#FFC0FF;LH:100;
    BGC:purple;AH:center;GL:1;GALT:yellow;AWFID:5e296cf425978c37;"></FORM>
    <!-- Search Google -->
    </div>
    <div class="updated">
    <script language="JavaScript" type="javascript">
    <!-- Hide JavaScript...
    var LastUpdated = document.lastModified;
    document.writeln ("Last updated: " + LastUpdated);
    // End Hiding -->
    </script>
    </div>
    <div class="copy">&copy;2006 Movie Quotes Central. All rights reserved.</div>
    <div class="copy1"> <a href="twex.htm">Private Policy</a> | <a href="tluex.htm">Terms &amp; Conditions</a></div>
    <div class="copy2">
    <a href="texhy.htm">Movie Quotes</a> |
    <a href="ix.htm">Links</a> |
    <a href="loex.htm">Join!</a> |
    <a href="yuex.htm">Contact</a> |
    <a href="tehjx.htm">Forum</a> </div>
    <a href="#top" class="small">Top of Page</a>
    <div />
    </body>
    </html>
     

  2. #2
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    16,445
    Mentioned
    160 Post(s)
    Tagged
    1 Thread(s)

    style sheets

    It looks like the conditional comments are OK. And I have seen examples just like you're using. Is the css file in the same folder as the calling page? Maybe if you used a link tag instead of import?

  3. #3
    SitePoint Zealot musicman77's Avatar
    Join Date
    Dec 2005
    Location
    New Orleans, Louisiana, USA
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I replaced

    <!--[if IE]>
    <style type="text/css">@import url(iet.css); </style>
    <![endif]-->

    with:

    <!--[if IE]>
    <style type="text/css"> url(iet.css); </style>
    <![endif]-->

    and it isn't making any difference.

    Thanks for your help anyhow.

  4. #4
    SitePoint Zealot musicman77's Avatar
    Join Date
    Dec 2005
    Location
    New Orleans, Louisiana, USA
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't understand why this is happening, because I've used the exact same import code on other pages and it worked perfectly.

  5. #5
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    16,445
    Mentioned
    160 Post(s)
    Tagged
    1 Thread(s)

    link tag not style tag

    Actually I meant something more like this inside the comments
    <link rel='stylesheet' type='text/css' href='iet.css' >
    but yes, I don't see why it wouldn't work they way you first posted either.

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

    Your code from post 1 is working fine apart from some css errors that you should fix (run your code through the css validator).
    Code:
    <!--[if IE]>
    <style type="text/css"> @import url(iet.css); </style>
    <![endif]-->
    I have copied the page locally and the css for ie is being applied correctly. Are you sure you have the right file name for the ie stylesheet? iet.css Are you sure its not just ie.css ?

    Why are you including a whole stylesheet for ie as this is just a waste of bandwidth. Only style the differences in the ie stylesheet and then when you make changes you only have a small stylesheet to look through to update.

    Fix those errors also as they may be making you think something is not working. There are very few changes inthe ie css stylesheet so make a major change such as setting the body background to red and you will see if the style is being applied straight away and then you kniow its working and the problem must be somewhere else.

  7. #7
    SitePoint Zealot musicman77's Avatar
    Join Date
    Dec 2005
    Location
    New Orleans, Louisiana, USA
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    [QUOTE=Paul O'B]Hi,

    Your code from post 1 is working fine apart from some css errors that you should fix (run your code through the css validator).
    Code:
    <!--[if IE]>
    <style type="text/css"> @import url(iet.css); </style>
    <![endif]-->
    I have copied the page locally and the css for ie is being applied correctly. Are you sure you have the right file name for the ie stylesheet? iet.css Are you sure its not just ie.css ?
    Yes. This is very strange though. I decided to link it to another external IE stylesheet(ie5.css) and see if it would accept that one. It did. I am not sure why it isn't working for iet.css though!

    Why are you including a whole stylesheet for ie as this is just a waste of bandwidth. Only style the differences in the ie stylesheet and then when you make changes you only have a small stylesheet to look through to update.
    OK, I'll do that.

    Fix those errors also as they may be making you think something is not working. There are very few changes inthe ie css stylesheet so make a major change such as setting the body background to red and you will see if the style is being applied straight away and then you kniow its working and the problem must be somewhere else.

    Thanks for your help.


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
  •