CSS external loading help

maherov Peon

Messages:: 198

Likes Received:: 3

Best Answers:: 0

Trophy Points:: 0

#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.

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

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

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

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

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

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

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

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

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

justinlorder Peon

Messages:: 4,160

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

Log in or Sign up

Advertising (learn more)

CSS external loading help

maherov Peon

garyc40 Peon

maherov Peon

maherov Peon

marinaroz Member

maherov Peon

garyc40 Peon

Masim man Active Member

garyc40 Peon

justinlorder Peon

Log in or Sign up

Advertising (learn more)

CSS external loading help

maherov Peon

garyc40 Peon

maherov Peon

maherov Peon

marinaroz Member

maherov Peon

garyc40 Peon

Masim man Active Member

garyc40 Peon

justinlorder Peon

Useful Searches