Thanks for the pointer to the validating page francky- I added the closing div
but the problem continues with background image not being shown(except in
Internet Explorer and windows OS) Does anyone know why this is happening and
what I can do to make the background image show?
#navbar { Z-INDEX: 10; CLEAR: both; BACKGROUND: url(navtile.gif)
repeat-x left top; MARGIN: 0px; WIDTH: 760px; POSITION: relative
}
The link to the page is www.villa-corti.com/menus.htm
Here is a copy of the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd";>
<HEAD>
<TITLE>Example</TITLE>
<STYLE type="text/css">
BODY {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN:
0px; FONT: 11px Verdana; PADDING-TOP: 0px
}
#navimagel {
width:85px;
height:115px;
z-index:5;
float: left;
left: 13px;
top: 0px;
}
#navimager {
Z-INDEX: 9; LEFT: 250px; FLOAT: left; WIDTH: 186px; POSITION:
relative; TOP: 0px; HEIGHT: 90px
}
#logo {
Z-INDEX: 3; LEFT: 100px; FLOAT: left; WIDTH: 238px; POSITION:
relative; TOP: 46px; HEIGHT: 73px
}
#tabsH {
z-index: 6; FONT-SIZE: 93%; BACKGROUND: #fff; FLOAT: left; WIDTH:
100%; TOP: 160px; LINE-HEIGHT: normal
}
#tabsH UL {
PADDING-RIGHT: 10px; PADDING-LEFT: 94px; PADDING-BOTTOM: 0px; MARGIN:
0px; PADDING-TOP: 10px; LIST-STYLE-TYPE: none
}
#tabsH LI {
PADDING-RIGHT: 0px; DISPLAY: inline; PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
#tabsH A {
PADDING-RIGHT: 0px; PADDING-LEFT: 4px; BACKGROUND: url(tableftH.gif)
no-repeat left top; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px;
PADDING-TOP: 0px; TEXT-DECORATION: none
}
#tabsH A SPAN {
PADDING-RIGHT: 15px; DISPLAY: block; PADDING-LEFT: 6px; BACKGROUND:
url(tabrightH.gif) no-repeat right top; FLOAT: left; PADDING-BOTTOM: 4px;
COLOR: #fff; PADDING-TOP: 5px
}
#tabsH A SPAN {
FLOAT: none
}
#tabsH A:hover SPAN {
COLOR: #fff
}
#tabsH A:hover {
BACKGROUND-POSITION: 0% -42px
}
#tabsH A:hover SPAN {
BACKGROUND-POSITION: 100% -42px
}
/* large navigation */
#navbar { Z-INDEX: 10; CLEAR: both; BACKGROUND: url(navtile.gif)
repeat-x left top; MARGIN: 0px; WIDTH: 760px; POSITION: relative
}
#navbar UL {
PADDING-LEFT: 1em; MARGIN: 0px; LIST-STYLE-TYPE: none
}
#navbar LI {
PADDING-RIGHT: 0px; DISPLAY: inline; PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
#navbar A:link {
BORDER-RIGHT: #c63 1px solid; PADDING-RIGHT: 6px; PADDING-LEFT: 6px;
FONT-SIZE: 12px; FLOAT: left; PADDING-BOTTOM: 5px; COLOR: #ccc;
LINE-HEIGHT: 12px; PADDING-TOP: 5px; WHITE-SPACE: nowrap; TEXT-DECORATION: none
}
#navbar A:visited {
BORDER-RIGHT: #c63 1px solid; PADDING-RIGHT: 6px; PADDING-LEFT: 6px;
FONT-SIZE: 1.1em; FLOAT: left; PADDING-BOTTOM: 5px; COLOR: #fff;
LINE-HEIGHT: 10px; PADDING-TOP: 5px; WHITE-SPACE: nowrap; TEXT-DECORATION:
none
}
#navbar A.active:link {
TEXT-DECORATION: underline
}
#navbar A.active:visited {
TEXT-DECORATION: underline
}
#navbar A:hover {
TEXT-DECORATION: underline
}
#navimagel img,#navimager img {
margin-bottom: -100px;
position: relative;
}
/* layout */
#rightcolumn {
PADDING-RIGHT: 10px; PADDING-LEFT: 10px; FLOAT: right; PADDING-BOTTOM:
10px; WIDTH: 155px; PADDING-TOP: 0px; TEXT-ALIGN: center;
position:absolute;
height:215px;
z-index:7;
left: 372px;
}
#maincontent {
position:absolute;
width:350px;
height:215px;
z-index:7;
left: 10px;
top: 250px;
}
#testimonials {
position:absolute;
width:350px;
height:73px;
z-index:3;
left: 10px;
top: 400px;
}
#points {
position:absolute;
width:178px;
height:73px;
z-index:3;
left: 350px;
top: 420px;
}
#points2 {
position:absolute;
width:138px;
height:73px;
z-index:3;
left: 550px;
top: 420px;
}
</STYLE>
</HEAD>
<BODY>
<DIV id=navimagel><IMG alt="lodgeadog" src="images/lake3.jpg"></DIV>
<DIV id=logo><IMG alt="lodgeadog" src="images/lodgeadog.jpg"></DIV>
<DIV id=navimager><IMG alt="lodgeadog" src="images/dog1.jpg"></DIV>
<DIV id=tabsH>
<UL>
<LI><A title=home
href="menus.cfm"><SPAN>home</SPAN></A>
<LI><A title="register"
href="register.cfm"><SPAN>register</SPAN></A>
<LI><A title="" href=""><SPAN>aaaaaaaaa aaaa aa</SPAN></A>
<LI><A title="Longer Link Text" href=""><SPAN>aaaaa aa aaa
aaaaa</SPAN></A>
<LI><A title="Link 5" href=""><SPAN>about us</SPAN></A>
</LI></UL></DIV>
<DIV id=navbar>
<UL>
<LI><A href="">Search</A>
<LI><A href="">Insurance</A>
<LI><A href="">McKeef Foundation</A>
<LI><A href="">Dog Carers</A>
<LI><A href="">Shop</A>
<LI><A href="">Register</A>
<LI><A href="">Dog Mating</A>
<LI><A href="">Advertise</A>
</LI></UL></DIV>
</BODY></HTML>
francky <[EMAIL PROTECTED]> wrote:
ed gooddy wrote:
>Hi David and all,
> OK hereis the link: http://www.villa-corti.com/menus.htm
>Here are the problems:
>With the following browsers and OSs the background image in the
>navbar div doesn´t show-why oh why?! Thanks for any pointers:
>[...]
>(big ul)
>[...]
>Other problems with comments:
>[...]
>(small ul)
>And here is the code:
>[...]
>Thank-you all for any help in my all div mission!!
>
Hi Ed,
First I did the security check: valid css and valid html?
The css-validator is congratulating - the html-validator is notifying 1
error (apart from a missing charset definition in the head): there is a
missing
. :-)
See result
.
What happens after repairing?
Success and greetings,
francky
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Send instant messages to your online friends http://uk.messenger.yahoo.com
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
