|
CSS - Removing Elements For Print, Or Not....
I am trying to create a print-friendly page using css and as well as formatting the background and font i want to remove the other 3 frames on the site. I have tried to assign them class="noprint" so i can remove them using ".noprint { display: none; }" but they still appear on the print preview in ie6 & ff1.0. The background and font are correctly formatted to the instructions in the css file so i know that some of it is working. Could it be that the class is not being correctly assigned, what is the proper technique to assign a frame a particular class? Do i have to assign a class to all the elements within the frame too?
Any help would be hugely appreciated as i'm tearing my hair out here! SalP Similar TutorialsHi folks, I guess this is a fairly straightforward question, so apologies if it has been asked before (I couldn't find anything while searching). I'm trying to implement this excellent tabbing interface however I'm running into problems attempting to display a Google maps image in one of the tabs, where the map will no cover the area it is supposed to. If you can see the images below you'll that the map does not extend over the grey area. I think the issue is down to the style applied, but of course removing it means the tabs will not work. The map is contained within its own div inside the tab, is there any method can I use to remove the inherited style of a nested element that specifically displays the map? Any help appreciated. I have two items (text) floated left. But when I hit print preview the second text label "wraps" under the first so the are both aligned left. I would like to keep positions fixed when viewing and printing. Happens in both FF and IE. Thanks, Doug We're having a weird problem with a print stylesheet - a little bit of the javascript menu appear on the printed over the top of the content. eg: (http://www.lawhandbook.sa.gov.au/ch10.php ) - Print Preview this page and you will see "Chapters A-Z" in the middle. This seems to happen in all browsers. We've looked into many css solutions to the issue - but to no avail - we cant make the damn thing disappear. One long winded solution is to change the stylesheet to be built dynamically - so a call to ch10.php=true would build the page differently. But this seems to defeat the purpose of using a print stylesheet in the first place. Another long winded soltuion is to change the (Rather old) menu script - but that not really an option in this case either. So my question is - What happens when a browser prints a page? Does it send anything back to the server indicating it is loading the print stylesheet instead? (eg: Some sort of request variable) Or does the client's browser simple request the CSS file and reformat the page it has already downloaded? If so I could detect this event with PHP or Javascript to not load the offending menus when the print css had been loaded I have pages the when viewed for print in Firefox, show the page going below the page margin and not continuing to the next logical printed page. This image below, shows better than I can explain. Has anyone ever seen this before?...Any ideas how to make it preview and print correctly? Hi guys .... I've been all over google looking for the answer and nothing I've tried works. I'm trying to make a print-friendly css page but my browsers (FF and IE7) both ignore the CSS and apply their own standards to it no matter what I do, it's driving me positively INSANE because it feels like I've done everything according to the instructions I found online for print CSS. Could you please take a look at my code and make some suggestions? You'd be saving my sanity. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "(URL address blocked: See forum rules)"> <html xmlns="(URL address blocked: See forum rules)" lang="en" xml:lang="en"> <head> <title>CLOColors3</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="mainstyle.css" type="text/css" /> <link rel="stylesheet" href="mainstyleprint.css" media="print" type="text/css" /> the print css: Code:
@media print {
html{
height:auto;}
body{
background-color:#FFF;}
#header{
display:none;}
#body{
position:relative;
background-color:#FFF;
background-image:none;
height:auto;
width:auto;
left:0px;
top:0px;
z-index:0;
padding-bottom:0px;}
#textbox{
position:relative;
overflow:visible;
float:none;
margin-left: 0px;
top: 0px;
width:auto;
bottom:0px;
background-color:#FFF;
border:hidden;
border-color:#FFF;
z-index:0;
padding:0px;}
#textbox img{
display:none;}
.searchbar{
display:none;}
#linkbar{
display:none;}
.map{
display:none;}
.video{
display:none;}
#linktext{
display:none;}
#clear_both{
display:none;}
#menu{
display:none;}
#footer{
display:none;}
}
Currently the main CSS is being used and none of the elements I set to be "hidden" are hidden. Help!!! UPDATE: Ok, so IE seems to be PARTIALLY responding to the print CSS. It responds to all the "display:none;" commands but refuses to format the #textbox div according to my instructions, a border persists and the div has an overflow scrollbar for some reason. Firefox is still unresponsive. Hello all, I'm having a bit of trouble with a list of relative, floated <li> elements, each containing a single absolutely positioned div that appears on hover. I'm using the :hover pseudo-class currently but I will use JavaScript for IE6 once it displays correctly. The code is below. The problem is that the <div> appears on top of it's parent element but behind all other elements. Code:
#wrapper-body ul.staff-list{
list-style-type:none;
padding-top:10px;
position:relative;
}
#wrapper-body ul.staff-list-team{ width:313px; padding-top:0; padding-bottom:15px; margin-bottom:20px; border-bottom:1px solid #d7e3a9; }
#wrapper-body ul.staff-list li{
float:left;
width:230px;
position:relative;
padding:8px 0 8px 15px;
z-index:1;
}
#wrapper-body ul.staff-list-team li{ width:151px; padding-left:0; padding-left:5px; }
#wrapper-body ul.staff-list-team li.right{ padding-left:5px; }
#wrapper-body ul.staff-list-clerks li{ float:none; width:310px; padding-left:5px; }
#wrapper-body ul li.highlight{ background-color:#f4f6ec; }
#wrapper-body ul.staff-list li p{
padding:0 0 9px 0;
margin-left:91px;
}
#wrapper-body ul.staff-list li small{
padding:0 0 5px 0;
margin-left:91px;
}
#wrapper-body ul.staff-list-clerks li span{
color:#A6302B;
display:block;
float:left;
}
#wrapper-body ul.staff-list-clerks li span.clerk-name{ width:140px; }
#wrapper-body ul.staff-list-clerks li span.clerk-phone{ width:120px; background:url(../img/structure/clerks-phone.gif) 0 2px no-repeat; padding-left:23px; }
#wrapper-body ul.staff-list-clerks li a.clerk-email{ display:block; float:left; height:16px; width:16px; background:url(../img/structure/clerks-mail.gif) 0 3px no-repeat; }
#wrapper-body ul.staff-list li div.staff-list-detail{
display:none;
background:url(../img/structure/staff-list-bottom.gif) left bottom repeat-x;
padding-bottom:3px;
margin-top:-15px;
left:4px;
z-index:10;
top:15px;
position:absolute;
}
#wrapper-body ul.staff-list li div.staff-list-detail a{ background:url(../img/structure/staff-list-bullet.gif) no-repeat 0 4px; padding-left:8px; }
#wrapper-body ul.staff-list li:hover div.staff-list-detail{
display:block;
}
An image of what is happening below: Thanks for reading! Hi I have been using CSS for menus, content, etc for a while now, its great. But now I am using a table to display a list of products pulled from a database. I recently read that the table will not start to display until the whole of the <table> tag has loaded. This has become an issue, I think, because the table is slow to load. Should I consider scrapping the table and using CSS instead to display the list of products? Would CSS help at all? Thanks Jake Hi there, I have a menu system which uses <UL> etc, but it displays the bullet point. Is there a way to remove these bulllets? Many thanks! In ff3 at least theres white space under my log in box and I cant figure out how to get rid of it. I must have played with it over 30 minutes now and Its stumping me the url is www.devwebsites.com heres the code Code:
<style type="text/css">
body {
color:#333333;
font-family:verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;
font-size:small;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
}
a:link, body_alink
{
color: #FFFFFF;
text-decoration: underline;
}
a:visited, body_avisited
{
color: #4B5970;
text-decoration: underline;
}
a:hover, a:active, body_ahover
{
color: #FF6600;
text-decoration: underline;
}
#nav {
padding:0;
color: #FFFFFF;
background: url(images/navbar1.png) 0 0 repeat-x;
float:left;
list-style-type: none;
width:947px;
border:1px solid #42432d;
border-width:1px 0;
}
.login{
float:right;
height:54px;
margin:0;
background-color: #cccccc;
width:325px;
font-family:verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;
font-size:11px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
}
#nav a:link,
#nav a:visited {
color:#FFF;
padding:10px 10px 10px 10px;
float:left;
width:auto;
border-right:1px solid #42432d;
text-decoration:none;
text-shadow: 2px 2px 2px #555;
text-transform:uppercase;
}
#nav li:first-child a {
border-left:1px solid #42432d;
}
#nav a:hover {
color:#FFF;
}
.logo{
margin-top:25px;
margin-left:25px;
float:left;
}
.search{
margin-right:40px;
margin-top:100px;
float:right;
}
#toplogo{
margin-left:25px;
margin-top:10px;
float:left;
border: 1px solid black;
width:945px;
height:70px;
}
.align{
float:left;
padding-top:15px;
padding-left: 10px;
width:200px;
}
.footer{
clear:both;
}
</style>
</head>
<body>
<div class="logo">
<img src="images/devwebsites.gif" title="BBoardX Home" height="100px" width="575px"alt="banner" />
</div>
<div class="search">
<form action="#" style="display:inline">
Search Forums
<input type="text" value="" name="search" style="background:url(images/browse.gif) left no-repeat; padding-left:25px;" />
<input type="button" value="Search" name="buttonSearch" />
</form>
</div
<div id="toplogo">
<div class="align">
<img src="images/folder-16.gif"alt="folder" /> BBoardX Forums
</div>
<div class="login">
<form action="login.php">
User Name<input type="text" name="username" value="User Name"
onclick="if(this.value=='User Name')this.value=''";
onblur="if(this.value=='')this.value='User Name'";
/><input type="checkbox" name="remember" />Remember me<br />
Password <input type="text" name="password" value="" />
<input type="button" name="logged" value="Log in" />
</form>
</div>
and yes ryan420 i know what your going to say when (if) you see this thread link lol I would like to remove the right and left toolbars from a website I visit. The website is http://www.fark.com. how would i go about this using css with mozilla. What do I need to add to my usercontent.css? Sorry if this is the wrong place to post. Thanks. Hi, I have a site with a large Flash header. I'm trying to remove the scroll bar for the width of the site, but I can't figure out how. you can see the site he my site Any ideas of how to go about this? Can a Flash file be made into a background image? thanks Im trying to remove the bullet icon from the unordered list but I can't make it work in FF or IE... XHTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <link rel="stylesheet" type="text/css" href="css/menu.css" /> <title>Test</title> </head> <body> <div class="menu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Community</a></li> <li><a href="#">General</a></li> </ul> </div> </body> </html> and the CSS: Code: ul.menu {
list-style: none;
padding: 0;
margin: 0;
}
It's probably something really obvious! Hey guys! I have the following code in my CSS that controls the links in my document. The trouble is all my visited links appear as not underlined and all my unvisted links appear underlined? could someone help me to remove this? I can't get it to work PHP Code: #nav.a:link{ color: #FFF; text-decoration: none; background: transparent; padding: 0px 0px 0px 5px; } #nav a:visited { color: #FFF; text-decoration: none; background: #9CC9E3; background: transparent; padding: 0px 0px 0px 5px; } #nav a:hover { color: #9CC9E3; text-decoration: none; background: #9CC9E3; background: transparent; padding: 0px 0px 0px 5px; } Thanks Charlie What is the correct way to remove the space between paragraphs? I have p { margin-top: -12px; } but IE/Win appears to be clipping the top of the topmost paragraph containers. What is the most compatible way to do this? If you look at this page: http://www.heavens-host.com/index.php In Opera and Firefox there is no space between the heading tag in the middle and right columns. In IE however, there is a big gap. I have both of them set to a margin and padding of 0px; Am I missing something to get this working in IE? Here is the middle colum header and relevant css Code:
<div>
<h3><span>Welcome to</span> <span>Heavens Host</span></h3>
<img>
<p>Text</p>
</div>
#middle_column
{
padding:0px;
margin:0px;
width:392px;
float:left;
}
#middle_column p
{
margin:15px;
}
.dark_heading
{
color:#134774;
margin:0px;
padding:0px;
}
.light_heading
{
color:#3196F7;
margin:0px;
padding:0px;
}
.section_heading
{
padding:0px;
margin: 0px 0px 0px 15px;
}
And here is the right column Code:
<div>
<h3><span>Client</span> <span>Testimonial</span></h3>
<img>
<p>Text</p>
</div>
.right_content
{
width:200px;
padding:10px 0px;
margin:0px;
height:150px;
}
.right_content p
{
margin:5px;
}
.right_content h3
{
width:190px;
margin:0px 5px 0px 0px;
padding:0px;
text-align:right;
}
Hi everyone, Just two really quick questions. Is there a way to get the list-style-image property to work for in-line unordered lists? And is there a way to remove the first bullet in the list? Thanks for any help. I have a page that has a bunch of thumbnails on it and using css to format those images, i've added a margin to both sides for spacing. The class is applied to the href and set to have the img as a descendant. When the page renders in FF, there is no problem. But when it renders in IE, i get the nice little hyperlink underline where the margin is between two thumbnails. Any help would be great. HTML <a href="hometour/defiancemo/P9010045.jpg" class="thumbs" target="_blank"> <img src="hometour/defiancemo/thumbs/P9010045.jpg" alt="" /> </a> CSS a.thumbs img {margin: 0px 5px 10px 5px;text-decoration: none;color: #019934} Hey everyone, I am wondering if there is a way to get rid of the border that a:active has by default. Because I find that border annoying. I thought adding border: 0 would do the job, but doesn't appear to, anyone have any thoughts? Hi All, I have my site that uses CSS, however at times I want certain parts of it to not use the CSS. Not whole pages, just a section of a page. Is there anyway to remove all CSS formating in a section? So eg: <div style='none'> Some HTML </div> TIA Charlie I'm building a navagation bar. I want to have several lists, each with a heading. Due to space and visual concerns, I would like to eliminate the blank line between the heading and each list. Here's what I have: Code: <div id="navigation"> <span class="nav_title">Archives</span> <ul> <li>[...]</li> </ul> <p> <span class="nav_title">Categories</span> <ul> <li>[...]</li> </ul> [...] </div> And this is the corresponding CSS (just the ul part, obviously): Code: #navigation ul {
list-style-position: inside;
list-style-type: disc;
padding: 0;
margin-top: 0px;
padding-top: 0px;
display: block;
}
What I have right here works, but it only works for the first list. All the other lists have a blank line between the heading and the following list -- but the first does not. I find it weird that this would work for the first time it is used, but not for the second time. I tested it by replacing the heading and list with other headings and lists and got the same result -- the *first* heading blends with the list, but the rest do not. You can view this problem here (it's in the navigation bar on the right-hand side. "Archives" blends with its list, but nothing else does.) In case you couldn't tell, I'm trying to hack out my own WordPress theme atm -- don't yell at my table layout yet, I'm converting it from another theme and haven't finished yet |
|||||||