Solved

css media print problem

Posted on 2006-06-11
21
581 Views
Last Modified: 2013-12-03
For some reasons I can not control the font-size of my #footerInfo.

the web page is at www.massimobrillante.com

and below the full css "layoutPrint"

body {
background: white;
font-size: 10pt;
font-family:Verdana, Arial, Helvetica, sans-serif;
}

#mainNav, #footerImages, #footerKeywords, #content img, #header img { display:none; }

h1, h2{
font-family:"Times New Roman", Times, serif;
font-size: 12pt;
}

br.breakHere {
page-break-before:always;
} /* this is a <br class="breakHere" /> to add to the page to break it at print-mode*/
 
#header{
font-family:"Times New Roman", Times, serif;
font-size: 12pt;
margin: 0 5%;
padding: 0;
border: 0;
float: none;
width:auto;
background-image:none;
background:#FFFFFF;
}

#wrapper{
width: auto;
margin: 0 5%;
padding: 0;
border: 0;
float: none;
color: black;
background:none;
text-align:left;
}
   
#content {
width: 100%;
margin: 0 5%;
padding: 0;
border: 0;
float: none;
color: black;
background:none;
text-align:left;
}

#footerInfo{
margin: 0 5%;
padding: 0;
border: 0;
float: none;
background:#FFFFFF;
color:#FF0000;
text-align:left;
font-family:"Times New Roman", Times, serif;
font-size:16pt;
}
0
Comment
Question by:brillox
  • 11
  • 10
21 Comments
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 16880774
You should validate your code.  The link to the stylesheet is outside the <head>.
Should be like this instead:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/mainTemplate.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<link href="Stylesheets/layoutPrint.css" rel="stylesheet" type="text/css" media="print" />
<!-- InstanceBeginEditable name="head" -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Massimo Brillante</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="Stylesheets/layout.css" rel="stylesheet" type="text/css" media="screen" />
<link href="Stylesheets/links.css" rel="stylesheet" type="text/css" media="screen" />
<link href="Stylesheets/format.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<!-- InstanceEndEditable -->
0
 

Author Comment

by:brillox
ID: 16880805
This is Macromedia 8 adding the link there....  (do not know why ??)

however I also tried to move the link to the stylesheet within the <head> </head.  but the result does not change...

As you can see I moved now the link to the stylesheet....
0
 
LVL 30

Accepted Solution

by:
GrandSchtroumpf earned 125 total points
ID: 16880990
Your code still does not validate:
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.massimobrillante.com%2F
http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A%2F%2Fwww.massimobrillante.com%2F

Try changing the order:

#footerInfo{
font-size:16pt;
margin: 0 5%;
padding: 0;
border: 0;
float: none;
background:#FFFFFF;
color:#FF0000;
text-align:left;
font-family:"Times New Roman", Times, serif;
}

also, try using the "important" precedence modifier:

#footerInfo{
font-size:16pt !important;
margin: 0 5%;
padding: 0;
border: 0;
float: none;
background:#FFFFFF;
color:#FF0000;
text-align:left;
font-family:"Times New Roman", Times, serif;
}

This way you'll know if there is a conflict somewhere.
0
 

Author Comment

by:brillox
ID: 16881030
I found the solution.. sorry that was me maybe still sleeping.. within the footerInfo i have the text as <h6>

therefore I now changed my css part for it like this..

/* notice the    h6  */

#footerInfo h6{
font-size:12pt ;
margin: 0 5%;
padding: 0;
border: 0;
float: none;
background:#FFFFFF;
color:#FF0000;
text-align:left;
font-family:"Times New Roman", Times, serif;
}
0
 

Author Comment

by:brillox
ID: 16881039
However I do not understand what page the validator above is talking above

Target: http://www.massimobrillante.com/
Please, validate your XML document first!

Line 13

Column 3

The element type "meta" must be terminated by the matching end-tag "</meta>".

is validating my index page or the template page... and why is asking to validate an XML document..
0
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 16881057
> within the footerInfo i have the text as <h6>
Well, it makes sense that you could not change your font-size then.
I did not notice you had an h6 there... that's a very awkward place to have an h6.

H-tags are not just like other containers, they are headers.
An <h6> should be preceded by another <h6> or an <h5>.
An <h5> should be preceded by another <h5> or an <h4>.
and so forth.

So, just get rid of the h6 tag.  That won't make any difference for search engines.  Except that future serach engines will probably penalize the misuse of the h-tags.
0
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 16881076
> However I do not understand what page the validator above is talking above

First, you should not serve XHTML as HTML.  Those 2 are not compatible.  And IE does not support proper XHTML, so you are better off using an HTML doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

The error you are getting is because your meta tags are not closed.
XHTML is based on XML (while HTML is based on SGML), and XML requires all the tags to be closed.
This means you need to use this in XHTML:
<meta name="description" content="" />
<meta name="keywords" content="" />

But you don't need that if you use an HTML doctype.
0
 

Author Comment

by:brillox
ID: 16881116
Thank for your suggestions and I will immediately get taht <h6> out..

I will also change the DOTYPE as you suggested.. however my metatags at the moment they do end with />

<meta name="description" content="">
<meta name="keywords" content="">
<link href="../Stylesheets/layout.css" rel="stylesheet" type="text/css" media="screen" />
<link href="../Stylesheets/links.css" rel="stylesheet" type="text/css" media="screen" />
<link href="../Stylesheets/format.css" rel="stylesheet" type="text/css" media="screen" />
<link href="../Stylesheets/layoutPrint.css" rel="stylesheet" type="text/css" media="print" />

so just for my couriosity..

why i still get the validation error ??
0
 

Author Comment

by:brillox
ID: 16881143
Now if I validate the code I get this

Target: http://www.massimobrillante.com/
Please, validate your XML document first!

Line 81

Column 5

The declaration for the entity "ContentType" must end with '>'.

but I still do not understand if is the index page been validated or the template attached to it.

at line 81 in the index AND in the template I have this code
<li>Contact us</li>

so what I have to end with ??
 maybe the validator needs to be validated !!
0
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 16881270
This your index page that is beeing validated, not your template.

Your page is almost valid, you just need to do some minor changes:

<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templat
should be
<html><!-- InstanceBegin template="/Templat

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
should be
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

Then you have a bunch of </h3> and </p> that do not have a matching opening tag just remove them.

all your
<li id="headerList">
should be
<li class="headerList">
(You cannot have 2 elements with the same ID on one page)

all your
... redirect?tag=holidaysnopro-20&path=subst/home/home.html">
should be
... redirect?tag=holidaysnopro-20&amp;path=subst/home/home.html">
0
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Author Comment

by:brillox
ID: 16882160
Thanks GrandSchtroumpf,

I modified the page as you suggested, howver I do have closing tags for <h3> and <p> as you can see from my html code attached below. i could not find none of them without an opening tag.

I will assign the point and I will choice the aswer where you suggested to validate my coder as I believe that this post is now more on code validation rather than CSS and this is entirely my fault..

Many thanks for your help


<img src="images/index/indexCollage.jpg" alt="Amalfi Coast self catering" name="collage" class="collage"/><br /><br />
     <h3>Thank You for visiting Holidays NO Problem website !!  </h3>
<p>As the top Amalfi Coast self catering accommodation specialists... Holidays No Problem would like to invite you in experiencing all the wonders of the extremely stunning Amalfi Coast, while staying in the best Amalfi Coast Accommodation. Make the most of your Amalfi Coast holiday and stay in one of our accommodation.<br /></p>
 
<h3>The cheapest tariffs on the web...</h3>
<p> Browse through Holidays No Problem website and you will clearly find the cheapest tariffs to go with the best Amalfi Coast properties. We clearly prove to have the cheapest rates by far, together with the best Amalfi Coast accommodation...never forgetting on-going friendly efficient and personal service.<br /></p>

<h3>choose your Amalfi Coast villa or apartment...</h3>
<p>We have a wide variety of properties which include villas and apartments around the whole of the Amalfi Coast touching areas in Sorrento, Positano and also Ravello.<br /></p>
 
 <h3>Holidays No Problem is ready to assist you online right now !!</h3>
 <p>For fast, real-time personalised online assistance, click on the &quot;LIVE HELP&quot; image on the navigation bar on your left, you will be chatting online with one of our customer care representatives who will assist you either for general enquiries regarding availability of any of our Amalfi Coast accommodation, or to complete your booking in real time. If the image displays &quot;Live Help offline&quot;, then click to the image and an email form will pop up to enable you to send us an e-mail message.  You can also send us an email advising us when you would like to talk with our online representative then we will arrange a personal online appointment with you (obviously free of any charge).<br class="breakHere" /> </p>

<h3>Holidays No Problem &quot;customer service&quot;...</h3>
<p>At Holidays NO Problem we know that customer service, reliability and speed are the key factors for customer satisfaction. We strive to give excellent customer service... <span class="style1 style2">we</span> truly aim to satisfy you... the client. You can rely on us and trust us to work efficiently and cater for your every need.<br />
</p>

<h3>We have a Resort Manager and Representatives...</h3>
<p>Our resort Manager and friendly representatives around the Amalfi Coast will give you a second to none service throughout your stay in one of our villas or apartments on the Amalfi Coast. <br /></p>

<h3>All our properties have been personally selected...</h3>
<p>And must all be of high standard to be included in our website. Additionally we carry out frequent inspections to ensure that our properties are maintained throughout the year.</p><br />

<h3>A personal touch...</h3>
<p>Our Amalfi Coast accommodation are privately owned and are all furnished to suit every kind of taste, thus giving each individual villa and apartment it's very own unique style</h3></p>
0
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 16883601
remove the </h3> on line 50:
# <p>Our Amalfi Coast accommodation are privately owned and are all furnished to suit every kind of taste, thus giving each individual villa and apartment it's very own unique style</h3></p>

remove the </p> on line 51:
#  <!-- InstanceEndEditable --></p>
0
 

Author Comment

by:brillox
ID: 16884074
thanks...

I should give more attention to the code and also be aware of the autocode added by Dreamweaver....

0
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 16884518
One more small effort and you'll get a valid page:

1.
<link href="Stylesheets/layout.css" rel="stylesheet" type="text/css" media="screen" />
<link href="Stylesheets/links.css" rel="stylesheet" type="text/css" media="screen" />
<link href="Stylesheets/format.css" rel="stylesheet" type="text/css" media="screen" />
<link href="Stylesheets/layoutPrint.css" rel="stylesheet" type="text/css" media="print" />
should be
<link href="Stylesheets/layout.css" rel="stylesheet" type="text/css" media="screen">
<link href="Stylesheets/links.css" rel="stylesheet" type="text/css" media="screen">
<link href="Stylesheets/format.css" rel="stylesheet" type="text/css" media="screen">
<link href="Stylesheets/layoutPrint.css" rel="stylesheet" type="text/css" media="print">

2.
<A HREF="http://www.amazon.com/exec/obidos/redirect?tag=holidaysnopro-20&path=subst/home/home.html">
should be
<A HREF="http://www.amazon.com/exec/obidos/redirect?tag=holidaysnopro-20&amp;path=subst/home/home.html">

3.
All your images need to have an ALT attribute.
You can use an empty value if you want, but it's better not to.
If you don't want the alt value to appear as tooltip in IE, then specify an empty title attribute.
example:
<img id="logo" src="images/hnp/logo_small.jpg" alt="company logo" title="">
0
 

Author Comment

by:brillox
ID: 16885215
Done..

but I now get problems with the path within the amazon link
0
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 16885553
0
 

Author Comment

by:brillox
ID: 16885674
DONE IT (thanks to your help)

Now I have the nice W3C validated logo...

for the CSS validation I have a long work to do ..
0
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 16886394
> Now I have the nice W3C validated logo...
Congratulations!  Doesn't that feel good?

Now for the CSS, you only have 2 errors...


#header img{
width 21%;
max-width:150px;
float:left;
padding-right:2%;
}

should be

#header img{
width: 21%;
max-width:150px;
float:left;
padding-right:2%;
}

(your forgot the colon on the width)


And it does not like your border here:

#wrapper{
width:95%;
min-width:750px;
background:url(../images/hnp/backgroundForWrap.gif) repeat-y 70% 0;
border:#000000 inset thin solid;
margin:0 auto;
text-align:left;
}

Try this instead:

border-color: #000000;
border-style: inset thin solid;
0
 

Author Comment

by:brillox
ID: 16887298
And now.. another one  
My website is now also CSS valid.
... WOW.. for the first time since 2000 I have a valid code !!

Because I will apply this template basically to the whole site, I assume that giving some attention to the single page html code, i should be able to have all pages valid...

However with a bit of practice in reading the validator result, I may be able to find and correect the mistakes by myself...  if not then THE EXPERTS are here..

I feel you deserve more points for your efforts.. However you teached me a good lesson...

Thanks very much

Massimo
0
 

Author Comment

by:brillox
ID: 16887305
I may open a new post soon because I am quite happy with the navigation link effects.. however if you try to compress the page in your browser... then the effects is a bit "squeezed" in particular the hover one..

0
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 16887934
Great!
However, there is a problem with your link:

<A HREF="http://www.amazon.com/exec/obidos/redirect?tag=holidaysnopro-20&;path=subst/home/home.html">
should be:
<A HREF="http://www.amazon.com/exec/obidos/redirect?tag=holidaysnopro-20&amp;path=subst/home/home.html">

("&;" should be "&amp;")
I guess Dreamweaver changed that by itself...  That's why plain text editors are much more superior.


And now that your CSS is also valid, if you want, you can make adjustments not to have any warning as well...  That's even better but not required.
The main warnings are about the colors you use.  You should always specify both background and foreground colors at the same time for all levels, this ensures that the contrast will always be sufficient.  If you use graphics as background, that's not always possible...

Now that all your code is valid, you can expect different browsers to interpret it more-or-less the same way.
If they don't it's the browser's fault, not yours.

=)
0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now