CSS - Printing Floated Text Properly?

Alrite,

Im having a little trouble hiding text and then showing the text only on the printout of the page. Here is what I have so far:

Setting up Style tags:


PHP Code:
<style type="text/CSS">
#inc
{
   display:none;    //hides text on page
}
</style>
<style type="text/CSS" media="print">
#omit
{
   display:none;    //hides text on printout
}
</style> 




... that bit works fine, it is this bit I am struggling with, how do I write the following:

PHP Code:
<style type="text/CSS" media="print">
#inc
{
   display:??? what goes here ???;    //show text on printout
}
</style> 




... here is the #inc being called:


PHP Code:
<span id="inc">
<font face="Arial" size="3" color="#000000">Text
</span> 




... so the #inc is called to hide the text on the page but displays text on printout.

Am I going in the right direction???

Thanks

Nick

In Firefox, I've got a right div that is not repsonding to an auto width in FF.

I am not a pro a CSS (yet ) and I hope that someone can give me the one line solution that I am missing.

I've included a screen shot of the problem, any help is greatly appreciated.

- K

CSS Code
Code:

#MainContainer
{
	float: 	left;
	width: 	auto; 
}

#Main
{
	margin-right: 0.2em;
}

#MainContent
{
	padding: 0.5em 0.5em 0.5em 0.5em;
}


#SidebarContainer
{
	float: 	right;
	width: 	250px;
	 	
border-top: 1px solid #C0C0C0;
	padding-top: 5px;
	clear: right;

}

#Sidebar
{	
	padding-bottom:	    5px;
	background:     	#ADADAD;
	background-image:   url(../images/SidebarBackground.jpg);
	background-repeat:  no-repeat;
	clear:left;
}

#SidebarContent
{
	margin: 0.2em 0.2em 0.2em 0.2em;
}

Hello

Can u hlp me please?

have look at www.verexelto.sk/test/test1.php - this is good version of the page but without any text in the footer.

after i try tu put any content into footer (f.e. some text)
the page wil not do this properly (the way i want it :-) )

have look at www.verexelto.sk/test/test.php (scroll down)

What should i have to do , what am i doing wrong?

Thank you

I'm having a dumb moment coding my site. I can't get the #project_content tag in my stylesheet to work properly. It should place page contents to the right of the menu on this draft page but kicks it to the bottom. Could someone please take a look at the css to see where I've gone wrong. Thanks

Im deriving a list of photos with information from my database. I want to be able to print the webpage off without any of the information being broken up between pages. Since its coming from the database I cant just use page breaks cause then I get one image per page. Is there a solution to this?

Hi,

I'm having issues trying to get text to center on a few buttons.

Here's the site: http://www.highspeeddirtcheap.com

The buttons I'm having problems with are located near the top right, labeled as: Current Deal, How We Roll, and More Deals

Moreover, the buttons don't even show up in IE6 or 7.

Any ideas of what I'm doing wrong?

Thank you.

Note: as a new user it would not let me use a link(url)

Problem:when viewing in IE8 - the text looks grainy

notes:
Using this page as an example:
fineprintnotes.com/bergincapital1210/about-us-bergin-co-difference

-text looks smooth and easy to the eye when viewing in Firefox and Chrome
-text looks smooth when using the "compatibility view" feature in IE8 - but want that look as a default for visitors
-for example - when visiting other website using IE8 such as:

savantcapital.com
The text renders- when viewing in IE8- like Firefox and Chrome or in other words smooth and not grainy

-i have the same font face as that site and not sure what a fix could be
- read up on what possible fixes I could find on the internet - such as "emulate IE 7" tag

for example on this page: url blocked -- Welcome to Internet Explorer 8 Readiness Toolkit


Questions
- has anybody had this issue?
- i don't notice the savantcapital.com website defaulting to Ie7 (using emulate ie 7 tag - how does their text look cleaner than my website?
same goes for morganstanley.com (as another example)
- i find it hard to degrade the wesbite to fix the text issue- i am not sure if thats how to put it- but would like it to use a more DOM compliant browser like ie8 if it has option in stead of reverting to IE7 view. Any thought? or fixes?

Thanks in advance.

one other note: I tried to do screen shots but it wasn't communicating the issue - the images altered the drasticness of the difference - i feel - right now i have the website not emulating ie7

Jamie

As always IE woes...

Anyway I have a design that I'm currently reworking into a css/div positioned site.

I'm almost done with it, but the problem I'm having is that I have 2 floated divs below a horizontal navigation bar. In IE these two floated divs are not positioning themselves directly beneath the nav bar like they do in FF. There looks to be a 3px or so gap between them. I will post screenshots for a better idea of what I'm talking about.

The HTML is:
Code:

<div id="container">
  <div id="top"></div>
  <div id="brands">
   ....stuff here....
  </div>
  <div id="slides"></div>  <!-- Slides and Vert_nav are not appearing directly below brands in IE-->
  <div id="vert_nav">
     ....stuff here....
  </div>
</div>

CSS
Code:

/* CSS Document */

html, body {
  background: #000000;
  padding: 0px;
  margin: 0px;
  color: #FFFFFF;
}

#container {
  width: 760px;
  padding: 0px;
  margin: 0px;
}

#top {
  width: 760px;
  height: 239px;
  background: url(../images/top.jpg) top left no-repeat;
}

#brands {
  width: 760px;
  height: 31px;
}

#slides {
  width:  667px;
  height:  350px;
  float: left;
  background: url(../images/slides.jpg) top left no-repeat;
T}

#vert_nav {
  width: 93px;
  height: 350px;
  float: right;
}

should.jpg is how the page is supposed to look.

shouldnt.jpg is how it is appearing in IE.

Hello,

I have a page where a left-floated <div> is nested within the main <div>. Content then is placed in a <div> next to the left-floated one.

My problem is that the main <div> does not stretch to the height of the left-floated <div>, rather just to the height of the content.

I placed:
Code:

<br style="clear: both;">

after the content <div> which usually does the trick but it's not working for some reason...

And even more confusing is the fact that if I change the <br> to something else like say <span>, the main <div> does stretch to the proper height BUT the content within the <h1> tag and the content <div> are not displayed until you do something like minimize the window then restore it or bring another window in front of it then bring it back to focus.

This happens in IE only.

Any ideas?

Page html/css:
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 76%;
	background-color: #f9dcb3;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}

#cRightPaneBot	{
	background-color: #D9E0EA;
	border: 1px solid #9DA7B5;
	margin: 23px 0px 0px 0px;
	padding: 15px 10px 15px 15px;
	/*
    width: 673px;
	height: 238px;
	*/	
}

.cLeftPane	{
    margin: 0px 20px 0px 0px;
	border: 1px solid #9DA7B5;
    overflow: hidden;
	float: left;
    background-color: #F5F7FB;
	height: 223px;
    /*
    */
}

h1  {
    font-size: 1.5em;
    /*
	display: inline;
	*/
}

.breakAfter {
    margin: 0px 0px 10px 0px;
}

</style>
</head>

<body>
<div id="cRightPaneBot">
	<h1 class="breakAfter">My Title</h1>
	<div class="cLeftPane" style="width: 200px;">
		hello
	</div>
	<div id="content">
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis tortor dui, imperdiet eu, porta vel, blandit in, augue. Morbi et sem ut libero tempus facilisis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed vestibulum posuere neque. Nullam quis pede. Nulla posuere neque non pede. Etiam nec ante non eros sodales feugiat. Morbi malesuada lorem at velit. Praesent augue erat, sollicitudin sit amet, imperdiet eget, ornare at, dui. Curabitur at urna. 
	</div><br style="clear: both;">
</div>
</body>
</html>

Hi, I'm having a familiar problem:
with this page

The the content on a contained and floated div is over running it's containing div.

I have had this problem before and using something like: Code:

#innerwrap:after {
	content:".";
	display:block;
	clear:both;
	height: 0; 
	clear: both; 
	visibility: hidden;
}

Has worked before, but this time it's not.

I'm having to specify a unique class and heitht for the #main box or use <br/>. It would be nice not to have to do this.

Can anybody advise me what to look into please.

Thanks
James

sure i read an article on this somewhere but cant remember where, the problem is this

Code:

<div class="floated and cleared right">
stuff
</div>

<div class="fixed width" >
<img class="floated left">
lots of text
<div>

related to my previous layout post. the problem is that the img (infact any floated element, cleared or not) falls below the right floated div! (red box in attatched gif)

if i float and clear the first div left then the img is in the correct place within it but the div itseld drops below the right floated div

help!

Hi Folks [I don't think my last attempt went through - I made a mistake],

I have a page here with a problem that's occupied me for over a day. I can't get my non-floated 'DIV#left' to sit beside my floated 'DIV#right'. The DIV#left containing the subnav slips, or is forced down the page;

http://johniwhite.com/tests/ireland/level_2.html

I'd love to hear the easy answer! Here's the CSS:

div#left_level2 {
width: 130px;
height: 50px;
vertical-align: top;
padding: 0;
margin: 0px;
/* display: inline;*/
/* border: 1px solid #0F0;*/
}
div#right_level2 {
float: right;
width: 594px;
height: 50px;
padding: 0 0 0 0;
margin-top: 0px;
margin-right: 0px;
vertical-align: top;
}

----

The code for a more simple version at
http://johniwhite.com/tests/ireland/2_col_test.htm

<div id="middle">
<div id="right_level2"><!--the floated div for content--></div>
<div id="left_level2"><!--the non-floated div for subnav--></div>
</div>
----------

Love to hear thoughts, thanks
John

Hi,
I have managed to rewrite my three column navigation page using floated divs instead of its original table (the page was written years ago and I am updating to get away from tables). This was hard for me because I am very new to CSS. My code validated and the page looks fine in IE but in Firefox the third or right column does not clear the middle column. I tried to google the problem but the explanations are way over my head. Also the only way I could get the blue border to not show up in firefox was to add the style directly to the image code. Can someone please help me. The link is www.medeaslair.net/myths.html.

Here is the CSS
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <title>Greek Myths</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="Rose A. Rosencrans" />
  <style type="text/css">
body {
  text-align: center;
  padding-top: 45px;
  background-image: url("images/tan_marble3.jpg");
  color: black;  
  font-family: papyrus;
  font-weight: bold;
  font-size: 15px; 
}

a:link {
  color: blue;
}

a:visited {
  color: green;
}

a image {
  border-style: none;
}

#container {
  margin: 0 auto;
  width: 750px;
  text-align: left;
  
}

#columnone {
  float: left;
  margin: 0;
  width: 250px;
  padding-top: 45px;
}

#columntwo {
  float: left;
  width: 250px;
  padding-top: 45px;
}


#columnthree {
  float: right;
  clear: both;
  padding-top: 25px;
}
  

h1 {
  text-align: center;
}

h3 {
  text-align: center;
}

#email {
  text-align: center;
  text-decoration: none;
  padding-top: 150px;
  border: 0;
}

ul {
 margin: 0 auto
 width: 750px;
}
   

li {
  text-size: 12px;
  text-decoration: none;
  padding-right: 4px;
  margin: 0 auto;
  margin-bottom: 2px;
  border-style: none;
  list-style-type: none;
}



</style> 
 </head>

Here is the HTML
Code:

<body>
<div id="container">
<img src="images/grapes-l.gif" style="float: left; width: 70px; height: 85px;" alt="Grapes" title="Grapes" />
<img src="images/grapestran.gif" style="float: right; width: 70px; height: 85px;" alt="Greek Man" title="Greek Man" />
<h1>Tales of Greek Mythology</h1>
<img src="images/bar66.gif" style="float: left; padding-left: 100px; width: 420px;" alt="Vine" title="Vine" />
<br />
<div id="columnone">
<ul>
<li style="font-size: 15px; text-decoration: underline; padding-bottom: 4px;">Gods and Goddesses</li>

<li><a href="aphrodite.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Aphrodite</li>

<li><a href="apollo.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Apollo</li>

<li><a href="artemis.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Artemis</li>

<li><a href="athena.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Athena</li>

<li><a href="dionysus.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Dionysus</li>

<li><a href="hades.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Hades</li>

<li><a href="hera.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Hera</li>

<li><a href="hermes.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Hermes</li>

<li><a href="poseidon.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Poseidon</li>

<li><a href="zeus.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Zeus</li>

<li style="font-size: 15px; text-decoration: underline; padding-top: 210px; padding-bottom: 4px;">Tales of Love and Woe</li>

<li><a href="hermes.html#baucis"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Baucis and Philemon</li>

<li><a href="cupid.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Cupid and Psyche</li>

<li><a href="pan.html#echo"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Echo and Narcissus</li>

<li><a href="pan.html#endymion"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Endymion</li>

<li><a href="artemis.html#orion"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Orion</li>

<li><a href="orpheus.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Orpheus and Eurydice</li>

<li style="font-size: 15px; text-decoration: underline; padding-top: 60px; padding-bottom: 4px;">Giants and Beasts</li> 

<li><a href="artemis.html#otus"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Otus and Ephialtes</li>

<li><a href="minotaur.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>The Minotaur</li>

<li><a href="cyclopes.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>The Cyclopes</li>
</ul>
</div>
<!-- end of columnone div -->



<div id="columntwo">
<ul>

<li style="text-size: 15px; text-decoration: underline;">Men and Heroes</li>

<li style="padding-top: 4px;"><a href="atreus.html#agamemnon"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Agamemnon</li>

<li><a href="atreus.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Atreus</li>

<li><a href="daedalus.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Daedalus and Icarus</li>

<li><a href="athena.html#erichthonius"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Erichthonius</li>

<li><a href="heracles.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Heracles</li>

<li><a href="apollo.html#hyacinthus"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>
Hyacinthus</li>

<li><a href="hera.html#ixion"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Ixion</li>

<li><a href="atreus.html#orestes"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>
Orestes</li>

<li><a href="dionysus.html#pentheus"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>
Pentheus</li>

<li><a href="perseus.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Perseus</li>

<li><a href="phrixus.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Phrixus</li>

<li><a href="pandora.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Prometheus</li>

<li><a href="hades.html#sisyphus"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>
Sisyphus</li>

<li><a href="atreus.html#tantalus"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>
Tantalus</li>

<li style="text-size: 15px; text-decoration: underline; padding-top: 42px;">Tales of The Sea</li>

<li style="padding-top: 4px;"><a href="sea.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" />
</a>Sea Myths</li>

<li><a href="circe.html#glaucus"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Glaucus and Scylla</li>

<li><a href="sea.html#nereus"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Nereus</li>

<li><a href="sea.html#sirens"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>The Sirens</li>

<li><a href="sea.html#triton"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Triton</li>

<li style="text-size: 15px; text-decoration: underline; padding-top: 100px;">Tales of Interest</li>

<li style="padding-top: 4px;"><a href="garden.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Mythic Garden</li>

<li><a href="samhain.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Blessed Samhain
</li>

<li><a href="thor.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Thor</li>

<li><a href="links.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Links and Credits
</li>
</ul>
</div>
<!-- end of columntwo div -->



<div id="columnthree">
<ul>
<li style="text-size: 15px; text-decoration: underline; padding-top: 20px;">Women and Witches</li>

<li style="padding-top: 2px;"><a href="heracles.html#alcmene"><img src="images/grape.gif" style="border-style: none;"
alt="grapes" /></a>Alcmene</li>

<li><a href="athena.html#arachne"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Arachne</li>

<li><a href="circe.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Circe</li>

<li><a href="dionysus.html#erigone"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Erigone and Icarius</li>

<li><a href="zeus.html#europa"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Europa</li>

<li><a href="zeus.html#io"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Io</li>

<li><a href="zeus.html#leda"><img src="images/grape.gif" style="border-style: none;" style="border-style: none;" alt="grapes" /></a>Leda</li>

<li><a href="leto.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Leto</li>

<li><a href="medea.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Medea</li>

<li><a href="leto.html#niobe"><img src="images/grape.gif" style="border-style: none;" style="border-style: none;" alt="grapes" /></a>Niobe</li>

<li><a href="pandora.html#pandora"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>
Pandora</li>

<li><a href="persephone.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Persephone</li>

<li><a href="dionysus.html#semele"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Semele
</li>

<li><a href="pan.html#syrinx"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Syrinx</li>

<li style="text-size: 15px; text-decoration: underline; padding-top: 42px;">Satyrs and Centaurs</li>

<li style="padding-top: 4px;"><a href="chiron.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Chiron</li>

<li><a href="dionysus.html#midas"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>King Midas
</li>

<li><a href="apollo.html#marsyas"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>
Apollo and Marsyas</li>

<li><a href="chiron.html#nessus"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Nessus</li>

<li><a href="pan.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Pan</li>

<li><a href="chiron.html#peirithous"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>
Peirithous</li>
</ul>
</div>
<!-- end of columnthree div -->

   </div>
  <!-- end of container div -->
 </body>
</html>

I have some tabular data that I would like displayed in two columns within a div. The div has some basic styling on it to create a block around the tables. The tables should appear side by side at the top of the div, so I floated the tables. I then found that the width of the div was always 100% unless I floated the div as well. This made the div wrap around the tables nicely, but caused the next element to appear to the right of the div, not on the next line as it normally would.

Here is the basic code I have so far: Code:

<html>
<head>
<style type="text/css">
div.box1 { 
	border: 1px solid red;
	background: #afafaf;
	padding: 2px;
	float: left;
}
div.box1 table { 
	float: left;
	border: 1px solid blue;
	margin-right: 15px;
}
</style>
</head>
<body>
<h1>Div</h1>
<div class="box1">
   <table>
    <tr>
     <td>Field1:</td>
     <td>Value</td>
    </tr>
    <tr>
     <td>Field1:</td>
     <td>Value</td>
    </tr>
    <tr>
     <td>Field1:</td>
     <td>Value</td>
    </tr>
    <tr>
     <td>Field1:</td>
     <td>Value</td>
    </tr>
   </table>
   <table>
    <tr>
     <td>Field2:</td>
     <td>Value</td>
    </tr>
    <tr>
     <td>Field2:</td>
     <td>Value</td>
    </tr>
    <tr>
     <td>Field2:</td>
     <td>Value</td>
    </tr>
   </table>
 </div>
</div>
<h1>Next Text</h1>
</body>
</html>

I would like for the "Next Text" to appear on a new line after the div. After reading this page, I added the following to my css: Code:

div.box1:after {
	content: 'clear me';
	clear: both;
	display: block;
	height: 0px;
	visibility: hidden;
}

However, this had no effect on the results in Firefox or Safari. The only way I have found to clear the div is to add style="clear: both" to the h1 tag following the div. I would prefer to not do this because it will be problematic for our graphics guys down the road. Any advice on how to clear the div and keep it wrapping around the tables?