css media print problem
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;
}
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;
}
ASKER
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....
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....
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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;
}
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;
}
ASKER
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..
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..
> 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.
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.
> 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.
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.
ASKER
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/layou
<link href="../Stylesheets/links
<link href="../Stylesheets/forma
<link href="../Stylesheets/layou
so just for my couriosity..
why i still get the validation error ??
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/layou
<link href="../Stylesheets/links
<link href="../Stylesheets/forma
<link href="../Stylesheets/layou
so just for my couriosity..
why i still get the validation error ??
ASKER
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 !!
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 !!
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
should be
... redirect?tag=holidaysnopro
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
should be
... redirect?tag=holidaysnopro
ASKER
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/indexCol
<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 "LIVE HELP" 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 "Live Help offline", 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 "customer service"...</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>
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/indexCol
<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 "LIVE HELP" 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 "Live Help offline", 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 "customer service"...</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>
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>
# <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>
ASKER
thanks...
I should give more attention to the code and also be aware of the autocode added by Dreamweaver....
I should give more attention to the code and also be aware of the autocode added by Dreamweaver....
One more small effort and you'll get a valid page:
1.
<link href="Stylesheets/layout.c
<link href="Stylesheets/links.cs
<link href="Stylesheets/format.c
<link href="Stylesheets/layoutPr
should be
<link href="Stylesheets/layout.c
<link href="Stylesheets/links.cs
<link href="Stylesheets/format.c
<link href="Stylesheets/layoutPr
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&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
1.
<link href="Stylesheets/layout.c
<link href="Stylesheets/links.cs
<link href="Stylesheets/format.c
<link href="Stylesheets/layoutPr
should be
<link href="Stylesheets/layout.c
<link href="Stylesheets/links.cs
<link href="Stylesheets/format.c
<link href="Stylesheets/layoutPr
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&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
ASKER
Done..
but I now get problems with the path within the amazon link
but I now get problems with the path within the amazon 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&path=subst/home/home.html">
Notice the "&" is encoded into "&"
should be
<A HREF="http://www.amazon.com/exec/obidos/redirect?tag=holidaysnopro-20&path=subst/home/home.html">
Notice the "&" is encoded into "&"
ASKER
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 ..
Now I have the nice W3C validated logo...
for the CSS validation I have a long work to do ..
> 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/h
border:#000000 inset thin solid;
margin:0 auto;
text-align:left;
}
Try this instead:
border-color: #000000;
border-style: inset thin solid;
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/h
border:#000000 inset thin solid;
margin:0 auto;
text-align:left;
}
Try this instead:
border-color: #000000;
border-style: inset thin solid;
ASKER
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
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
ASKER
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..
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&path=subst/home/home.html">
("&;" should be "&")
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.
=)
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&path=subst/home/home.html">
("&;" should be "&")
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.
=)
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/mainT
<head>
<link href="Stylesheets/layoutPr
<!-- 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.c
<link href="Stylesheets/links.cs
<link href="Stylesheets/format.c
</head>
<!-- InstanceEndEditable -->