strange CSS issue

zoliky · #1 (**permalink**) 06-06-07, 04:50 AM

I have the following HTML (CSS in head):

HTML 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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#page {
	width: 700px;
	margin: 0 auto;
}


#main {
	width: 500px;
	overflow-x: hidden;
}

</style>
</head>

<body>
<div id="page">
	<div id="main">
	<a href="http://webldsjfhjsdhjhgjhdfjkhgjkdfhsjgkhjkghsdjkhgjksdhjkghdjkfshgjkhdfsjkghjkdfhgjkhdfjkghjkdfhgkjdhfsjkghdfjkhgjkdfhkghsd.com">http://webldsjfhjsdhjhgjhdfjkhgjkdfhsjgkhjkghsdjkhgjksdhjkghdjkfshgjkhdfsjkghjkdfhgjkhdfjkghjkdfhgkjdhfsjkghdfjkhgjkdfhkghsd.com</a>
	Much much text ... More than A4 paper.
	Much much text ... More than A4 paper.
	Much much text ... More than A4 paper.
	Much much text ... More than A4 paper.
	......
        ......
</div>
</div>

</body>
</html>

Before (without overflow-x: hidden) : http://img178.imageshack.us/img178/7489/beforeox4.jpg
After (with overflow-x: hidden enabled) : http://img178.imageshack.us/img178/8748/afterbm0.jpg

The "After" example do what exactly I need, cut the long link name, but I have a problem. With "overflow-x: hidden" enabled I see the following problem at Print Preview ( Mozilla Firefox) : http://img215.imageshack.us/img215/793/printkj4.jpg

Any idea how to solve this problem ? I appreciat any help !

Thanks

Vicious · #2 (**permalink**) 06-06-07, 07:36 AM

Have you tried actually printing it? Maybe it's just a problem with the print preview.

zoliky · #3 (**permalink**) 06-06-07, 08:54 AM

Yes printing work but I don't know why I see the strange issue in Print Preview.. I think a solution need to exist.

zoliky · #4 (**permalink**) 06-06-07, 10:17 AM

I think CSS by default use media="all", and this media cause the problem.

I need to specify media="screen" and everything work fine.. The overflow-x exist only on screen.

jfulton · #5 (**permalink**) 06-06-07, 04:33 PM

I ran into a similar problem before...best bet: stay away from floats and overflow when creating print styles.

Here are some good links:
http://www.contractwebdevelopment.co...ntent-overflow
http://css-discuss.incutio.com/?page=PrintStylesheets

zoliky · #6 (**permalink**) 06-07-07, 03:26 AM

Exist a way to disable the overflow in print.css file?

For example this style sheet has overflow:

HTML Code:

<style type="text/css" media="all">@import "themes/mytheme/style.css";</style>

And this is a separate style sheet for printing:

HTML Code:

<style type="text/css" media="print">@import "themes/mytheme/print.css";</style>

Thank you!

Vicious · #7 (**permalink**) 06-07-07, 07:03 AM

Is that a question? Because you already gave the answer yourself: 2 separate css files. In the one for print, you can remove the overflow thing.

zoliky · #8 (**permalink**) 06-07-07, 07:33 AM

Thanks I solve the problem

Jfulton I use the following in print.css to override style.css :

CSS Code:

#main {
    overflow-x: visible !important;
    float: none;
}