1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

CSS external loading help

Discussion in 'CSS' started by maherov, Jul 16, 2008.

  1. #1
    i am trying to load CSS from an external file on one of my pages but it does not load the same way as if the code was on the target page.

    My css code is
    
    <style type="text/css">
    ul#menu{
    	margin:0;
    	padding:0;
    	list-style-type:none;
    	width:700;
    	position:relative;
    	display:block;
    	height:30px;
    	text-transform:uppercase;
    	font-size:13px;
    	background:transparent url("images/images/blue.jpg") repeat-x top left;
    	font-family:Helvetica,Arial,Verdana,sans-serif;
    	margin-top: 0px;
    }
    ul#menu li{
    	display:block;
    	float: left;
    	margin:0;
    	padding:0;
    	border-right:0;
    	}
    ul#menu li a{
    	display:block;
    	float:left;
    	color:#ffffff;
    	text-decoration:none;
    	height:20px;
    	padding-top: 12px;
    	padding-right: 24px;
    	padding-bottom: 0;
    	padding-left: 20px;
    	}
    ul#menu li a:hover{
    	background:transparent url("images/images/black.jpg") repeat-x top left;	
    	}
    	
    	#div{
    	padding-bottom:0px;
    	}
    </style>
    
    Code (markup):
    this is a menu that is supposed to be blue with white text, and when an item is hovered over it turns black.
    SEMrush
    i use this code to call it
    
    <div id="div" align="center">
    <ul id="menu" name="menu">
    <li><a href='http://contact.html'>Home</a></li>
    <li><a href='http://pictures1.html'>Pictures</a></li>
    <li><a href='http://about.html'>About</a></li>
    <li><a href='http://news.html'>News</a></li>
    <li><a href='http://documentation.html'>Documentation</a></li>
    <li><a href='http://ads.html'>Ads</a></li>
    <li><a href='http://reference.html'>Contact</a></li>
    	</ul>
    </div>
    
    Code (markup):
    and this line of code to try to load it from an external file
    
    <link rel="stylesheet" href="menu_new.css" type="text/css" />
    
    Code (markup):
    for some reason, when i load it from the file, it comes out aligned to the left and it does not have the blue background, only the black color shows up when i hover over an item, but it works just fine if i paste the code on the target page.

    any help is appreciated,

    thanks
     
    maherov, Jul 16, 2008 IP
    SEMrush
  2. garyc40

    garyc40 Peon

    Messages:
    115
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #2
    It seems like some css rules of the menu is overridden by other.

    Please post the complete XHTML <head> element code.

    If you can't post it, then try moving the <link rel="stylesheet" href="menu_new.css" type="text/css" /> so that it is the last <link> element inside <head>.

    Or if it still doesn't work out right, change:

    background:transparent url("images/images/blue.jpg") repeat-x top left;
    
    Code (markup):
    into
    background:transparent url("images/images/blue.jpg") repeat-x top left !important;
    Code (markup):
    But I'm not sure, please post the code so that we can help you.
     
    garyc40, Jul 17, 2008 IP
  3. maherov

    maherov Peon

    Messages:
    198
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #3
    
    <html>
    
    <head>
    <TITLE>Advanced Process Services - System Integration, Engineering, Instrumentation</TITLE>
    <META NAME="description" CONTENT="Advanced Process Services, L.L.C. provides superior engineering, system integration and instrumentation">
    <META NAME="Keywords" CONTENT="Process control, automation, system integration, system integrators, CEMS, ISA, Advanced Process Services, APS, Bingham, Burdi, general contracting, project management, instrumentation, control valve, valve, valves, repair, valve repair, vapor recovery, gauging, repair,">
    <META http-equiv="Content-Type" content="text/html; charset=ISO-2022-JP" >
    
    	
    <script language="JavaScript1.1">
    <!--
    
    //*****************************************
    // Blending Image Slide Show Script- 
    // ã‚¥ Dynamic Drive (www.dynamicdrive.com)
    // For full source code, visit http://www.dynamicdrive.com/
    //*****************************************
    
    //specify interval between slide (in mili seconds)
    var slidespeed=3000
    
    //specify images
    var slideimages=new Array("images/banner1.gif","images/banner2.gif","images/banner3.gif")
    
    //specify corresponding links
    var slidelinks=new Array("news.html","cems.html","services.html")
    
    var newwindow=0 //open links in new window? 1=yes, 0=no
    
    var imageholder=new Array()
    var ie=document.all
    for (i=0;i<slideimages.length;i++){
    imageholder[i]=new Image()
    imageholder[i].src=slideimages[i]
    }
    
    function gotoshow(){
    if (newwindow)
    window.open(slidelinks[whichlink])
    else
    window.location=slidelinks[whichlink]
    }
    
    //-->
    </script>
    <script language="JavaScript">
    <!--
    function MM_reloadPage(init) {  //reloads the window if Nav4 resized
      if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
        document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
      else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
    }
    MM_reloadPage(true);
    // -->
    </script>
    <style type="text/css">
    
    .style1 {font-size: 18px}
    -->
    </style>
    <link rel="stylesheet" href="menu_new.css" type="text/css" /> 
    </head>
    
    
    Code (markup):
    thats the <head> in the page im trying to get to work, i added !important and i made <link> the last thing in <head> and still nothing
     
    maherov, Jul 18, 2008 IP
  4. maherov

    maherov Peon

    Messages:
    198
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #4
    i must add that i created an empty page from scratch and i tried adding that menu to it externally and i got the same results, it wont work, so i think its something in the css code not an interference from other code on the page.

    @garyc40
    thanks for your reply
     
    maherov, Jul 18, 2008 IP
  5. marinaroz

    marinaroz Member

    Messages:
    30
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    43
    #5
    Do you have this page somewhere online maybe? That would make spotting the problem much easier.

    A tip: Download the firebug extension for the firefox browser, if you don't have it yet. It allows you to see exactly which CSS rules affect your HTML, and which are overridden.
     
    marinaroz, Jul 18, 2008 IP
  6. maherov

    maherov Peon

    Messages:
    198
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #6
    thanks for the firebug tip, i had it installed a while ago and i havent used it in a long time.

    it seems that when i load the file externally it is totally ignoring
    ul#menu{
    margin:0;
    padding:0;
    list-style-type:none;
    width:700;
    position:relative;
    display:block;
    height:30px;
    text-transform:uppercase;
    font-size:13px;
    background:transparent url("images/images/blue.jpg") repeat-x top left;
    font-family:Helvetica,Arial,Verdana,sans-serif;
    margin-top: 0px;
    }

    working on figuring out why at the moment.
     
    maherov, Jul 18, 2008 IP
  7. garyc40

    garyc40 Peon

    Messages:
    115
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Hmm, your problem could also possibly be the permission to access the image file on the server. Maybe you need to chmod it or something...

    But anyway, it would be easier for me to help you if I have that page online.
     
    garyc40, Jul 18, 2008 IP
  8. Masim man

    Masim man Active Member

    Messages:
    73
    Likes Received:
    4
    Best Answers:
    2
    Trophy Points:
    58
    #8
    I tested it, and it had no problem.
    You only forgot to add a px to the ul width.
    And also you need to clean up your css codes, like you applied the margin to the ul twice.
    I think by default ul or li has no border, so we don't need border-right:0; cmiiw :).
    In html codes I found one error that the ul doen't have an attribute name (html40, xhtml).

    Here's I have a similar menu navigation, you have only to change the background color with the images and centering the div.
    http://www.htmlcssguides.com/templates/navigation/horizontal-menu-css-01.php

    Cheers
     
    Masim man, Jul 18, 2008 IP
  9. garyc40

    garyc40 Peon

    Messages:
    115
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Hi, another tip:
    try adding
    overflow: hidden;
    Code (markup):
    to ul#menu to see if it works. I'm not sure myself, but it might be the case.
     
    garyc40, Jul 19, 2008 IP
  10. justinlorder

    justinlorder Peon

    Messages:
    4,163
    Likes Received:
    61
    Best Answers:
    0
    Trophy Points:
    0
    #10
    your html source code should not begin with <html>
    you have omitted the document type.

    Refer to http://forums.digitalpoint.com/showthread.php?t=936660

    your html source code should begin with something like this
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    That is to declare your document type. The same Css work differently in different document type.
     
    justinlorder, Jul 22, 2008 IP