Print Style Sheet - Doesn't hide elements properly 1

[IEAN]

Hi all,

I set up a print style sheet to hide my header and side menu something like this

#NavTop {display:none;}

But instead of hiding my header and side menu completely, it left a white blank space where my header and side menu use to be. Its like the header and menu are still there but they are all white. Any idea as to how I can fix this?

 

[j4606]

display none causes the element to not be displayed at all. What you are describing is behavior of visibility:hidden. Could you include more of your css and html?

I don't know the answer but my good friend Google does.

 

[IEAN]

Hi J4606,

Thank you for your reply, I have no idea why, I am sure I have display:none; instead of visibility:hidden;, my code looks something like below:

<div id="NavTop">
<span class="links">links</span>
</div>

<div id="NavLeft">
<span class="linksleft">linksleft</span>
</div>

<div id="maincontent">
<span class="content">Contents</span>
</div>

and in my print style sheet I just put

#NavTop {display:none;}
#NavLeft {display:none;}

But for some reason it is acting weird...

 

[traingamer]

Have you removed any margins from "maincontent"?

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[j4606]

From what was posted I can only guess that something else is formatting your divs. An online example or pasted source code could help me trouble shoot this faster. I can only guess that maybe the white space is caused by an absolutly posisition div, margin, padding ect.


I don't know the answer but my good friend Google does.

 

[IEAN]

Yes, the Divs are absolute positioned, one of the reason is because I need to use z-index. The other reason is probably because I am not really proficient in CSS(am just slowly migrating from my usual table layout to CSS). The scenario is pretty much I have a form(paper form) as a background then use CSS to position the elements on the form. I just can't think of how to position the elements if not use Position:Absolute, any ideas?

 

[traingamer]

By all means, you can use position:absolute on your display css, but your print css needs to have different margins and / or use different absolute postitioning.

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[IEAN]

Hi Greg,

Thank you for your reply, how do I use different absolute positioning? Do you mean that I need to reposition everything to shift to the left of the page on my print css? Please advise, thanks!

 

[j4606]

An abolute position would explain the white space. You can try floating elements inside a div. It's hard to understand exactly what you are trying to accomplish without seeing the source code for your page or a working example. anyway look at this example it will sort of show why the whitespace is showing up even when your you do not display some divs.

I don't know the answer but my good friend Google does.

 

[j4606]

forgot to include this link.

http://www.w3schools.com/css/tryit.asp?filename=trycss_position_absolute

I don't know the answer but my good friend Google does.

 

[j4606]

Also if it is a print stylesheet then you can probobly just change the position attributes and reposition everything.

I don't know the answer but my good friend Google does.

 

[IEAN]

ok, so if I have
NavTop{position:absolute;top:400px;left:200px;}
in my original page

If I want to reposition that in my print style sheet do I just put

NavTop{position:absolute;top:10px;left:10px;}

or does the name has to be different?

 

[j4606]

Names can be the same, you have the right idea.

I don't know the answer but my good friend Google does.

 

[IEAN]

Thank you j4606, how I wish there is a simpler way to do a print version of my page. I wonder if there is any drag and drop positioning tools for CSS... Anyways, thanks again!

 

[Vragabond]

It is. Use normal document flow (no positioning or static positioning) and everything will reposition itself when you choose not to display certain elements.

 

[IEAN]

Hi Vragabond, do you know of a good tutorial or book that will give me some insights on what you just mentioned? Thanks!

 

[j4606]

great site to get the basics down

http://www.w3schools.com/css/css_positioning.asp

umm as far as what vragabond mentioned Im pretty sure he just wants you to remove the positioning(no position abolute or value). Just erase all the positioning for your print css and when you use diplay:none the white space will not be there. I havn't seen your layout so while this may work it will also remove positioning(formatting) you may need for your document to look pretty.


I don't know the answer but my good friend Google does.

 

[Vragabond]

I never use absolute positioning (save a couple of elements somewhere) on my pages. It is just not necessary as most of the things usually flow normally with the document flow without special positioning. Margins and floats are sufficient for me.

 

[multichild]

Isnt it the case that float is set to none

float: none

Accend Web Solutions

http://www.accend4web.co.uk