Hello,
this code works fine in IE but in FF the menu scrunches up and the image doesn't display properly; nav.gif is 165 x 21 pixels and is the menu background for each nav element:
.nav
{
PADDING-RIGHT: 4px;
PADDING-LEFT: 12px;
FONT-WEIGHT: bold;
FONT-SIZE: 11px;
background-image: url(../images/nav.gif);
PADDING-BOTTOM: 4px;
WIDTH: 165px;
CURSOR: hand;
COLOR: #ffffff;
PADDING-TOP: 4px;
BACKGROUND-REPEAT: no-repeat;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
HEIGHT: 21px;
TEXT-DECORATION: none
}
and the HTML:
<TD background="epson_files/images/left.gif" bgColor=#006600>
<A class=nav href=http://www.webdeveloper.com/forum/archive/index.php/"index.htm">Home</A><BR>
<A class=nav href=http://www.webdeveloper.com/forum/archive/index.php/"about.htm">About Us</A><BR>
<A class=nav href=http://www.webdeveloper.com/forum/archive/index.php/"services.htm">Our Services</A><BR>
<A class=nav href=http://www.webdeveloper.com/forum/archive/index.php/"gallery/gallery.htm">Gallery</A><BR>
<A class=nav href=http://www.webdeveloper.com/forum/archive/index.php/"contact.asp">Contact Us</A><BR>
<A class=nav href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.streetmap.co.uk/" target="_blank">Location</A>
</TD>
Anything really obvious that I've done wrong?
Thanks for any suggestions,
MarkWrong or lack of DTD (<!-- m --><a class="postlink" href="http://www.w3.org/International/articles/serving-xhtml/#quirks">http://www.w3.org/International/article ... ml/#quirks</a><!-- m -->)
Misuse of the break element.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>styled</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.nav
{
background:#060 url(epson_files/images/left.gif) no-repeat;
}
.nav a
{
display:block;
background:#060 url(../images/nav.gif) no-repeat;
width: 165px;
color: #ffffff;
padding: 4px 4px 4px 12px;
font: bold 11px Verdana, Arial, Helvetica, sans-serif;
height: 21px;
text-decoration: none
}
</style>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0" summary="">
<tr>
<TD class="nav">
<A href=http://www.webdeveloper.com/forum/archive/index.php/"index.htm">Home</A>
<A href=http://www.webdeveloper.com/forum/archive/index.php/"about.htm">About Us</A>
<A href=http://www.webdeveloper.com/forum/archive/index.php/"services.htm">Our Services</A>
<A href=http://www.webdeveloper.com/forum/archive/index.php/"gallery/gallery.htm">Gallery</A>
<A href=http://www.webdeveloper.com/forum/archive/index.php/"contact.asp">Contact Us</A>
<A href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.streetmap.co.uk/">Location</A>
</TD>
</tr>
</table>
</body>
</html>
The links should be in a list element, not a table.Hello,
thanks for the reply.
I copied and pasted the code from a complete .asp page with a separate .css - rather than post several hundred lines of code I posted the lines that I thought were relevant.
Do you really think that the DOCTYPE will affect how css works in FF vs. IE? My dtd is
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
Back to the css, is it possibly the display: block?
FF and IE views attached.
Thanks again,
MarkIt looks like Firefox didn't get the new style sheet. Try Ctrl + Shift + R refreshing.What do you mean the new style sheet? The site has been live for 12 months, no new code.
Thanks.
what is the difference between:
background-image: url(../images/nav.gif);
and
background:#060 url(../images/nav.gif) no-repeat;
?
What does the #060 do?
Thanks again
Oh, sorry. I thought you applied Fang's code. But yeah, it is the display: block. Links are inline elements, which means they can't get a width and height.
The reason it works in IE-Win is partially explained by the answer to your doctype question.
A proper doctype tag puts Web browsers into standards compliance mode. Otherwise, they are in quirks mode. For the table-based layout, I'd stick with your current doctype and just add the display: block to the .nav a {} style declaration. Just remember that HTML and CSS have been standardized by the World Wide Web Consortium. Love 'em or hate 'em, if you don't properly use standard code, you're going to run into browser quirks.
<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/">http://www.w3.org/TR/CSS21/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/doctype">http://www.alistapart.com/articles/doctype</a><!-- m -->
EDIT: And with Internet Explorer, heck even standard code exposes quirks (<!-- m --><a class="postlink" href="http://www.positioniseverything.net/explorer.html">http://www.positioniseverything.net/explorer.html</a><!-- m -->).I've had a play with code provided and it seems the <BR> and the display:block are conflicting- I'll have another look later, this one isn't paying and I won't be re-using the code...
I didn't mean if I omit the DTD, I meant if I use STRICT or TRANSITIONAL.
I think W3C is a good thing and I usually code to meet W3C for HTML, css and WAI (508 in the US) but this was some old code that I used for a quick n dirty job and didn't test in FF. The customer doesn't know, it's just bugging me...
Thanks again for all your help!
Mark
p.s. can you explain further: Links are inline elements, which means they can't get a width and height.
I know what the result means, how do I get the block to be the correct size?
Latest attached in FF.
Inline elements ignore any width or height:<a style="border:1px solid red; width:10em;" href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.streetmap.co.uk/">Location</a>
<a style="border:1px solid red; width:10em; display:block;" href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.streetmap.co.uk/">Location</a>
Making an inline element a block will allow it to apply width and height.
background:#060 url(../images/nav.gif) no-repeat;The #060 (#006600) is the background color. When you use a background image, always give a background color. The user may have images switched off in their browser!The <TD> has a background colour set.
Did you look at FF2.gif? Any ideas why it won't meet up?
Thanks.Need to see the html and css to help.The code is broken at the moment (late night tinkering) when it's mended I'll post again.
this code works fine in IE but in FF the menu scrunches up and the image doesn't display properly; nav.gif is 165 x 21 pixels and is the menu background for each nav element:
.nav
{
PADDING-RIGHT: 4px;
PADDING-LEFT: 12px;
FONT-WEIGHT: bold;
FONT-SIZE: 11px;
background-image: url(../images/nav.gif);
PADDING-BOTTOM: 4px;
WIDTH: 165px;
CURSOR: hand;
COLOR: #ffffff;
PADDING-TOP: 4px;
BACKGROUND-REPEAT: no-repeat;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
HEIGHT: 21px;
TEXT-DECORATION: none
}
and the HTML:
<TD background="epson_files/images/left.gif" bgColor=#006600>
<A class=nav href=http://www.webdeveloper.com/forum/archive/index.php/"index.htm">Home</A><BR>
<A class=nav href=http://www.webdeveloper.com/forum/archive/index.php/"about.htm">About Us</A><BR>
<A class=nav href=http://www.webdeveloper.com/forum/archive/index.php/"services.htm">Our Services</A><BR>
<A class=nav href=http://www.webdeveloper.com/forum/archive/index.php/"gallery/gallery.htm">Gallery</A><BR>
<A class=nav href=http://www.webdeveloper.com/forum/archive/index.php/"contact.asp">Contact Us</A><BR>
<A class=nav href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.streetmap.co.uk/" target="_blank">Location</A>
</TD>
Anything really obvious that I've done wrong?
Thanks for any suggestions,
MarkWrong or lack of DTD (<!-- m --><a class="postlink" href="http://www.w3.org/International/articles/serving-xhtml/#quirks">http://www.w3.org/International/article ... ml/#quirks</a><!-- m -->)
Misuse of the break element.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>styled</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.nav
{
background:#060 url(epson_files/images/left.gif) no-repeat;
}
.nav a
{
display:block;
background:#060 url(../images/nav.gif) no-repeat;
width: 165px;
color: #ffffff;
padding: 4px 4px 4px 12px;
font: bold 11px Verdana, Arial, Helvetica, sans-serif;
height: 21px;
text-decoration: none
}
</style>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0" summary="">
<tr>
<TD class="nav">
<A href=http://www.webdeveloper.com/forum/archive/index.php/"index.htm">Home</A>
<A href=http://www.webdeveloper.com/forum/archive/index.php/"about.htm">About Us</A>
<A href=http://www.webdeveloper.com/forum/archive/index.php/"services.htm">Our Services</A>
<A href=http://www.webdeveloper.com/forum/archive/index.php/"gallery/gallery.htm">Gallery</A>
<A href=http://www.webdeveloper.com/forum/archive/index.php/"contact.asp">Contact Us</A>
<A href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.streetmap.co.uk/">Location</A>
</TD>
</tr>
</table>
</body>
</html>
The links should be in a list element, not a table.Hello,
thanks for the reply.
I copied and pasted the code from a complete .asp page with a separate .css - rather than post several hundred lines of code I posted the lines that I thought were relevant.
Do you really think that the DOCTYPE will affect how css works in FF vs. IE? My dtd is
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
Back to the css, is it possibly the display: block?
FF and IE views attached.
Thanks again,
MarkIt looks like Firefox didn't get the new style sheet. Try Ctrl + Shift + R refreshing.What do you mean the new style sheet? The site has been live for 12 months, no new code.
Thanks.
what is the difference between:
background-image: url(../images/nav.gif);
and
background:#060 url(../images/nav.gif) no-repeat;
?
What does the #060 do?
Thanks again
Oh, sorry. I thought you applied Fang's code. But yeah, it is the display: block. Links are inline elements, which means they can't get a width and height.The reason it works in IE-Win is partially explained by the answer to your doctype question.
A proper doctype tag puts Web browsers into standards compliance mode. Otherwise, they are in quirks mode. For the table-based layout, I'd stick with your current doctype and just add the display: block to the .nav a {} style declaration. Just remember that HTML and CSS have been standardized by the World Wide Web Consortium. Love 'em or hate 'em, if you don't properly use standard code, you're going to run into browser quirks.
<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/">http://www.w3.org/TR/CSS21/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/doctype">http://www.alistapart.com/articles/doctype</a><!-- m -->
EDIT: And with Internet Explorer, heck even standard code exposes quirks (<!-- m --><a class="postlink" href="http://www.positioniseverything.net/explorer.html">http://www.positioniseverything.net/explorer.html</a><!-- m -->).I've had a play with code provided and it seems the <BR> and the display:block are conflicting- I'll have another look later, this one isn't paying and I won't be re-using the code...
I didn't mean if I omit the DTD, I meant if I use STRICT or TRANSITIONAL.
I think W3C is a good thing and I usually code to meet W3C for HTML, css and WAI (508 in the US) but this was some old code that I used for a quick n dirty job and didn't test in FF. The customer doesn't know, it's just bugging me...
Thanks again for all your help!
Mark
p.s. can you explain further: Links are inline elements, which means they can't get a width and height.
I know what the result means, how do I get the block to be the correct size?
Latest attached in FF.
Inline elements ignore any width or height:<a style="border:1px solid red; width:10em;" href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.streetmap.co.uk/">Location</a><a style="border:1px solid red; width:10em; display:block;" href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.streetmap.co.uk/">Location</a>
Making an inline element a block will allow it to apply width and height.
background:#060 url(../images/nav.gif) no-repeat;The #060 (#006600) is the background color. When you use a background image, always give a background color. The user may have images switched off in their browser!The <TD> has a background colour set.
Did you look at FF2.gif? Any ideas why it won't meet up?
Thanks.Need to see the html and css to help.The code is broken at the moment (late night tinkering) when it's mended I'll post again.