CSS - Can I Specify Which Graphics File Formats To Print?

I've downloaded a free CSS website template with the idea of just swapping out the graphics and text using Notepad. All is going well with one major exception - I cannot seem to change the graphics in the sidebar or main body. I put the new graphics in the same folder as the original graphics then just changed the img tag to reflect the new filename.

This results in the image spacer icon displaying but the new image does not. What is strange is that the alt tag will change correctly, just no image.

I know I'm overlooking something simple, but I seem to have hit the proverbial brick wall. Any help would be most appreciated!

I tried to attach the files but don't see that option and evidently I'm not permitted to post the url. Just google "templatemo 050 metal" to pull up the files.

Thanks for reading this and offering any help!

Hi

I am haveing some trouble implimenting a sub menu on some of my pages. I want to have a menu that mirrors the titles rounded edges by placing a graphic at either end of the menu with the text set in the centre.

So far i can produce the title no problem but the menu is proving a little more tricky.

Example page with the issues

My css:

Code:

#services-menu ul{
	margin :0;
	white-space :nowrap;
	color: #FFFFFF;
	line-height: 30px;
	height: 30px;
	padding: 0px;
	background-image: url(/graphics/service_menu_back.gif);
	background-repeat: repeat-x;
}
#services-menu ul li{
	display : inline;
}
#services-menu ul li a{
	color:#FFFFFF;
	text-decoration:none;
	margin: 0px;
	padding-left: 4px;
}
#services-menu ul li.services_menu_right {
	background-image: url(/graphics/services_menu_right.gif);
	background-repeat: no-repeat;
	background-position: right top;
	height: 30px;
	float: right;
	width: 10px;
}
#services-menu ul li.services_menu_left {
	background-image: url(/graphics/service_menu_left.gif);
	background-repeat: no-repeat;
	background-position: left top;
	height: 30px;
	float: left;
	width: 10px;
}

My HTML is:

Code:

<div id="services-menu">
     <ul>
	<li class="services_menu_left"></li>
	<li><a href="/index.html">Assets</a></li>
	<li><a href="/pages/company.html" target="_self">Risk</a></li>
	<li><a href="/pages/services.html" target="_self">Surveillance</a></li> 
	<li><a href="/pages/humanitarian.html">Counter Terrorism</a></li>
	<li><a href="/pages/forms/procure.php" target="_self">Close Protection</a></li>
	<li><a href="/pages/forms/recruit.php" target="_self">Contingencey</a></li>
	<li><a href="/pages/forms/contact.php" target="_self">Training</a></li>
	<li class="services_menu_right"></li>
      </ul> 
</div>

Ps - i have tried producing the menu in the same way as i have made the title but the right hand graphic continues to drop down a line.

ANY IDEAS - I'M REALLY STUCK NOW!!!!

Hi,

First, before you get on my case, I'm using a table, because that's what the teacher wanted. And as I've never worked with CSS, let alone divs, I was more comfortable with it anyhow.

Okay, the question I have is probably very dumb, and the answer very simple, but I'm not getting it. I'm just trying to get an image aligned to the top of a cell.

http://esdcar.org/web/test/templatem2.html

I could use valign in the cell tag, and it almost works (but it doesn't quite align at the top, about 5px short), but I'd like to do it with CSS, especially as I'm going to have a different header image on every page.

The cell has its own id of contentm. Inside the img src tag, I put class="pageheader." In the stylesheet, I gave .pageheader an attribute of vertical-align: top.

But, it's not working. What am I doing wrong?

I want to construct a page like this...

Obviously, I could build a 'rigid' page in the old-fashioned way with tables, trs, and tds but I'd like to provide something a bit more flexible with divs that could survive a bit of strectching, changes in font size, etc.

Can you see what I'm getting at?

I'm not looking for a complete solution, just a few pointers as to whether it's doable/worthwhile and how one might approach it.

It's times like this when I want to give up on CSS.

Everything is fine in both Firefox and IE on my local until I use the code in Miva Merchant 5.5 on the server.

In Firefox, everything looks good and displays as it should.

But in IE (6.0) NO MENUS! The Header div (logo etc) displays fine, so it must be something with the list.


#main-nav { height: 23px; background: #CCCCCC;}

#main-nav dl { margin: 0;
padding: 0;
content-box;
}
#main-nav dt { float: left; }

#main-nav dt a {
height: 0px !important;
padding: 5px 0 0 0;
display:inline
}

#store-nav { height: 22px;
background: #EBEBEB;

}
#store-nav dl { margin: 0;
padding: 0;
content-box;
}

#store-nav dt { float: right;
padding: 0 20px 0 10px;
}

#store-nav dt a {
height: 0px !important;
padding: 0;
display:inline
}

What could it be? Is it the <dl> <dt> tags?

<div id="header">
<h1> <img src="home.gif" width="208" height="63" alt="Home" border="0" /> </h1
</div>

<div id="main-nav">
<dl>
<dt id="line"><img src="store-line.gif" border="0" width ="209" /></dt>
<dt id="company"><a href="#"><img src="company.gif" border="0" /> </a></dt>
<dt id="products"><a href="#"><img src="products.gif" border="0" /> </a></dt>
<dt id="contact"><a href="#"><img src="contact.gif" border="0" /> </a></dt>
</dl>
</div>

<div id="store-nav">
<dl>
<dt id="checkout"><a href="#"><img src="checkout.gif" border="0" /> </a></dt>
<dt id="cart"><a href="#"><img src="cart.gif" border="0" /> </a></dt>
<dt id="midspans"><a href="#"><img src="midspans.gif" border="0" /> </a></dt>
</dl>
</div>

Hi,

All the content of my web page is in a table which is 760 pixels width.

This is fine on the screen, but when printing, the right part is cut.

I tried to set a new css print stylesheet <link rel="stylesheet" type="text/css" href="print.css" media="print"> to avoid this problem, but it is not working.

I tried to change the margin and padding, but there is no change. I still have the same problem.

I tried many different configurations, but none of them worked... I did probably something wrong.

I know that the page is properly printed if I change manually the print setting (file -> page setting) margin to 5mm, but how can I do it with the css, in order than everybody who would like to print the page has the complete page printed?

Could someone help me?

Many thanks

Hello all,

I have been trying to get my website to comply with googles page speed and yahoo's yslow.

I had 2 seperate css files one for print and one for screen and they wanted them combined. I searched and searched for a way to do this and well I am going to post here how I got things to work in hopes it helps someone else.

<link href="style.css" rel="stylesheet" type="text/css" media="screen, print" >

NOTE if I make it media="all" print does not work


here is code for the main css file that combines the 2 into 1. NOTE also the print is NOT loaded until it is needed.

@media screen {
/* all screen CSS goes in here */
}

@media print {
/* all print CSS goes in here */
}



U ask why a print.css file? simple it lets me force page breaks so images don't get cut in half. it lets me set a legable size font or larger than what is displayed on screen.

Ok here is my problem... in the print.css I don't want to print my backround image. I want just a plain white background. I use a "sprite" to call picture frames for screen. These frames use part of my background image... thus they look bad printed.

How do I in the print.css file tell it NOT to print this frame.png file?

I assume I will use .noprint DISPLAY:none or something to that effect but where and how to impliment this is over my head and I cannot find any examples of how to do it.

Thanks in advance for any suggestions or help

whonoes

I've just created a print stylesheet for my site but I'm having troubles with it working in Firefox.

It works great in ie but in Firefox when a page goes onto more than one page the first page is printed but not the rest.

http://www.skillair.com/employers/employers.asp

http://www.skillair.com/stylesheet/print.css

Any help would be really great.

Thanks

Jemes

Im trying to write a better office backend. My client does alot of mailings and would like to print an avery 5163(this is not set in stone) form with addresses and send in the mail. Right Now:
1. Generate List. (I wrote the web-app that does this).
2. Copy it from the generated webpage.
3. Pastes it to M$ Word.
4. Adjust any formatting issues.
5. Print the list.

What I'd like to do is
1. Generate List. (I wrote the web-app that does this).
2. Print the list.(The page would be formatted with CSS to achieve proper scale and dimension)

Does anyone know where I would go to even get started on accomplishing this task?

I have a print style sheet which has an undesired result. Apparently by default it prints the url (and the page title) at the top of each page. Can I tell it not to do that or is that a browser preference that can't be overridden with CSS?

Hello all.
How can I print my scrollable table? I tried this..
table.sql {
overflow: visible;
}
in my print.css but it does'nt work. Please help, I'm stumped!
Tracy

Hi

Could someone assist me in making a print stylesheet for this site please!

http://calibrehr.com/new/

What I need is:

just the logo to display (remove nav)
The text in the orange block to span the width of the page
Remove subnav
Some how diplsay the text that is in the purple boxes below the main content text

I am stuck as to what to do and could really appreciate some help

Many thanks!

I need to change some page setup setting for print like orientation, headers and footers
Is it possible to define it in CSS.

Hello all,

Not sure if this is a CSS or Javascript question..

I have a page which has an external CSS sheet, with a part for the @media print styling.
On this page I'm also using (throughout my site) a javascript navigation bar.
The idea is that when user clicks on a print-button, the whole navigation bar disappears, before printing.

The Javascript seems however to add additional DIVS when loading the page which are without any ID, class or nametag, so I tried to get to this "navigationbar-div" via CSS selector combinations - just to find out that apparently CSS cannot select these divs (- maybe because they were added by javascript at runtime???). No matter what I try, it's like CSS doesn't "see" there's additional divs there..

I've also tried to select the concerning DIVs through DOM, but apparently this is still buggy even for modern browsers, so I rather not touch it..

Is there anyway I can get rid of the Javascript navigation bar in my print stylesheet?

Thanks for your help!

Hello,

I have tried to make a print page using CSS to set the display to none for areas that I don't want printed. This works fine in Firefox but Exploder always pritnts a blank page first. Has anybody had similar problems?

Thanks