CSS - When Unhiding Ie Doesn't Display Correct Right

Hi - I've just carefully taught myself to design a site in CSS (as you can tell I'm not an expert - please forgive me this!) It looks great in IE, but the CSS doesn't display at all in Firefox. What have I done wrong?

This stylesheet was developed by volunteers (local students) who weren't asked to design for cross-browser compatibility.

In FF and Netscape the background CSS 'runs out' before the content does (problematic with black background) and there isn't any space between objects (adjoining columns, text etc.).

Because I need to make the fix asap (and I am not well versed in CSS for layout) my options here are a) pay my ISP web team to make the adjustments, b) redesign site templates using tables (which I can do, but I know is regressing) or c) get some specific feedback from you folks. The code does not validate (re. W3C CSS Validator) but I'm not experienced enough in this to know how to fix it.

In the long-term, I am definitely looking to improve my knowledge in this area and appreciate your patience with me.

I have copied the code below. Many thanks for any feedback, resources, pointers etc. you may be able to provide.



body{
background-color: Black;
background-position: center;
text-align: center;
vertical-align: center;
margin: 2px;
}

h4{
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: bolder;
color: black;
}

h6{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 7.5pt;
font-weight: normal;
color: black;
}

h1{
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
font-weight: bolder;
color: black;
text-transform: uppercase;
}

h2{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: bold;
color: #8B0000;
}


div#wrapper{
background-position: center;
background-color: #F0F1EB;
width: 762px;
height: 420px;
margin: 0px;
border: 1px solid #black;
padding: 0 px;


}

div#top{
background-position: center;
background-image: url(../images/top.jpg);
width: 760px;
height: 123px;
margin: 0px;
border: 0px;
padding: 0 px;
text-align: right;
vertical-align: top;
text-transform: uppercase;
}

div#toplinks{
background-position: center;
width: 634px;
height: 15px;
margin: 0px;
border: 0px;
padding: 2 px;
float: right;
vertical-align: top;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bolder;
text-align: center;
color: white;

}

div#midlinks{
background-position: center;
background-color: #F0F1EB;
width: 760px;
height: 17px;
margin: 0px;
padding: 0 px;
border-bottom: 1px solid #9E9E9E;;
border-left: 0px;
border-right: 0px;
border-top: 1px solid #9E9E9E;
}


div#midleft{
background-color: white;
width: 126px;
height: 16px;
margin: 0px;
padding: 6 px;
float: left;
border-bottom: 0px;
border-left: 0px;
border-right: 1px solid #9E9E9E;
border-top: 0px;
text-transform: uppercase;
color: red;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bolder;
text-align: right;


}

div#midleft a, div#midleft a:hover, div#midleft a:visited, div#midleft a:active{
text-transform: uppercase;
color: red;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bolder;
text-align: right;
text-decoration: none;
}

div#midright{
width: 631px;
height: 16px;
margin: 0px;
padding: 6 px;
float: right;
border:0px;
font-family: Arial, sans-serif;
font-size: 11px;
font-weight: bolder;
text-align: left;
color: white;
text-transform: uppercase;

}

div#midright a, div#midright a:hover, div#midright a:visited, div#midright a:active{
font-family: Arial, sans-serif;
font-size: 11px;
font-weight: bolder;
text-align: left;
color: #990000;
text-transform: uppercase;
text-decoration: none;
}

div#left{
background-position: center;
background-color: #F0F1EB;
width: 125px;
margin: 0px;
padding: 7 px;
float: left;
border-bottom: 0px;
border-left: 0px;
border-right: 0px;
border-top: 0px;
text-transform: uppercase;
color: black;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: 900;
text-align: right;
}

div#left a, div#left a:hover, div#left a:visited, div#left a:active{
text-transform: uppercase;
color: #990000;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: 900;
text-align: right;
text-decoration: none;
}

div#main{
background-position: center;
background-color: White;
width: 635px;
height: 470px;
margin: 0px;
padding: 0 px;
float: right;
border-left: 1px solid #9E9E9E;

}


div#mainl{
background-position: center;
background-color: white;
width: 310px;
height: 289px;
margin: 0px;
border: 0px;
padding: 10 px;
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
text-align: left;
color: black;
}

div#main2{
background-position: center;
background-color: white;
width: 317px;
height: 450px;
margin: 0px;
padding: 10 px;
float: right;
border-bottom: 0px;
border-left: 1px solid #9E9E9E;
border-right: 0px;
border-top: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
text-align: left;
color: black;
}

div#main1col{
background-position: center;
background-color: white;
width: 625px;
height: 289px;
margin: 0px;
padding: 10 px;
border: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: normal;
text-align: left;
color: black;
}

div#main1col td, div#mainl td, div#main2 td{
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: normal;
text-align: left;
color: black;
}

div#main1col a, div#main1col a:hover, div#main1col a:active, div#main1col a:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: normal;
text-align: left;
color: #8B0000;
text-decoration: underline;
}

div#mainl a, div#mainl a:visited, div#mainl a:hover, div#mainl a:active {
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: normal;
text-align: left;
color: #8B0000;
text-decoration: underline;
}


div#main2 a, div#main2 a:visited, div#main2 a:hover, div#main2 a:active{
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: normal;
text-align: left;
color: #8B0000;
text-decoration: underline;
}

.container { position: relative; left: 1px; top: 1px;}

.text {position: absolute; left: 5px; top: 0px;}


.container a, .container a:visited, .container hover, .container a:active {color: #666; text-decoration: none;}
.text a, .text a:visited, .text hover, .text a:active{color: white; text-decoration: none;}

Hi,
I have a two column CSS layout - the stylesheet and web page that uses it are attached. I tried to put a menu in the left column (technically div) - of this web page. This is a menu that uses JS mouseover and mouseout to set the style of the children menus to block or none - to show or hide the children or submenu items.

onmouseover="document.all.child1.style.display='block'
onmouseout="document.all.child1.style.display='none'

When you mouseover the menu item, children menu items underneath it are supposed to be displayed, but they're not.

Please look at the style sheet - and web page.

Any idea why this menu works outside of the CSS two column layout, but not when I place the code inside this layout??????

Thanks
Vmusic

OK,

So I have put together what I thought was a reasonably basic xhtml page outline. I'm using a Win2k box. I checked it in Opera 7 and IE6 and it looks fine (more or less). I've also validated the xhtml and css codes. However, when I look at the page in Netscape 7.1 or Firefox, the menu kind of hangs a bit in limbo. Otherwise the rest of the page render's fine. I've included my code below. Does anyone have any suggestions since it's likely that if it doesn't work in Netscape/Firefox, it won't work in many other browsers either. Thanks!

Shawn

PS I'm not saying there is anything wrong with Firefox/Netscape, but likely my code


URL: http://www.raisetheratesottawa.org/xhtml/

=====
CSS
=====

HTML {
PADDING-RIGHT: 0px;
MARGIN-TOP: 0px;
PADDING-LEFT: 0px;
BACKGROUND-COLOR: #FF99CC;
MARGIN-BOTTOM: 20px;
PADDING-BOTTOM: 0px;
COLOR: #000000;
PADDING-TOP: 0px
}
BODY {
PADDING-RIGHT: 0px;
MARGIN-TOP: 0px;
PADDING-LEFT: 0px;
BACKGROUND-COLOR: #FF99CC;
MARGIN-BOTTOM: 20px;
PADDING-BOTTOM: 0px;
COLOR: #000000;
PADDING-TOP: 0px
}


#upper {
width:700px;
margin:0px auto;
text-align:left;
padding: 0px;
border: 5px solid #FFFFFF;
BACKGROUND-COLOR: #000000;
PADDING-RIGHT: 0px;
MARGIN-TOP: 0px;
PADDING-LEFT: 0px;
MARGIN-BOTTOM: 10px;
PADDING-BOTTOM: 0px;
PADDING-TOP: 0px
}


/* Horizontal nav */

#menu {
width:700px;
margin:0px auto;
padding: 0;
}

#menu ul {
border: 0;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
clear: left;
}

#menu ul li {
display: block;
float: left;
text-align: center;
padding: 0;
margin: 0;
}

#menu ul li a {
background: #000000;
width: 175px;
/* was 'height: 2em; */
height: 24px;
padding: 0;
/* was 'margin: 0 0 10px 0;
' this affects the margin between upper menus*/
margin: 0 0 0 0;
color: #FF0000;
text-decoration: none;
display: block;
text-align: center;
font-weight: bold;
letter-spacing: 1px;
/* was 'line-height: 2em; */
line-height: 24px;
/* was 'font-size: x-small;
' */
font-size: 10px;
font-size: 10px;
/* was 'FONT: 8px Verdana, Arial, Helvetica, Sans-Serif;*/
}




#menu ul li#one {
width: 46px;
}
#menu ul li#two a {
width: 154px;
}
#menu ul li#three a {
width: 105px;
}
#menu ul li#four a {
width: 85px;
}
#menu ul li#five a {
width: 56px;
}
#menu ul li#six a {
width: 57px;
}
#menu ul li#seven {
width: 147px;
}


#menu ul li a:hover {
color: #000000;
background: #FF0000;
}

#menu a:active {
background: #c60;
color: #fff;
}


#content {
width:700px;
margin:0px auto;
text-align:left;
padding:0px;
border:5px solid #FFFFFF;
background: url(/xhtml/graph/rtr-logo-bk.gif) #FF99CC;
}


======
XHTML
======

<!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>

<title>Test</title>

<link rel="stylesheet" href="graph/rtrcss2.css" type="text/css" />

<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />
<meta name="ROBOTS" content="No Index" />
<meta name="Copyright" content="Copyright (c) 2004" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />

<meta name="description" content="" />
<meta name="keywords" content="" />

<link rel="help" href="about.php" title="Site info." />

<meta name="Rating" content="General" />
<meta name="revisit-after" content="2 Days" />
<meta name="doc-class" content="Living Document" />


</head>

<body>

<div id="upper">

<div id="header">
<img src="graph/top-right2.jpg" width="700" height="78" alt="" />
</div>

<div id="menu"><ul>
<li id="one">&nbsp;</li>
<li id="two"><a href="link1.php" title="Link 1.">Link 1</a></li>
<li id="three"><a href="link2.php" title="Link 2.">Link 2</a></li>
<li id="four"><a href="link3.php" title="Link 3.">Link 3</a></li>
<li id="five"><a href="link4.php" title="Link 4.">Link 4</a></li>
<li id="six"><a href="link5.php" title="Link 5.">Link 5</a></li>
<li id="seven">&nbsp;</li>
</ul></div>
</div>


<div id="content">
<p>Here is some text</p>
<p>Here is some more text </p>
</div>



</body>
</html>

Okay the backgroundimage "content-header" does not display in firefox for the <div id="contentWrapper"> tag. In internet explorer it displays. Not sure what the hell is going on with it.

I hate css

http://www.mgan.net/work/10-06-04/layout1.html

There is the link, I have my styles in the header section of the html file.

Hi, all. I'm brand new to CSS and have run into my first speedbump. I've tried searching the forum already, forgive me if I missed a previously posted solution.

Today I put together a page at work and it looked correct in IE8 (which is the only browser we can use at work). When I got home, I discovered that it doesn't display properly in ANY other browser.

I've validated my code, and just can't figure out what the problem is.

(I tried to link to images here of what it should look like versus what it actually looks like, but apparently as a new user I'm not permitted to post URLs. I also don't seem to be able to insert images into this post, so if anyone would like to see the images, I guess I could email them to you.)

Can anyone tell me why the DIVs appear to be too long? Thanks in advance for any help.

Here is the HTML:

<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="comp.css" />
</HEAD>
<BODY>

<div id="parent">

<div id="left_top">
</div>

<div class="bigcontainer" id="right_top">
a very<br>special<br>place<br>on the<br>internet
</div>

<div class="container" id="left_mid">
additional reading
</div>

<div class="container" id="right_mid">
tab one | tab two | tab three | tab four | tab five
</div>


<div class="container" id="left_bottom">
first link<br>
second link<br>
third link<br>
fourth link<br>
fifth link<br>
sixth link<br>
seventh link<br>
eighth link<br>
</div>

<div id="right_bottom">
<p>
Lorem ipsum dolor sit amet...
</p>
</div>

</div>

</BODY>
</HTML>


Here is the CSS:

body
{
font-family: sans-serif;
font-size: 10px;
margin: 0;
padding: 0;
background-color: #e5e5e5;
}

div.bigcontainer
{
font-size: 20px;
font-weight: bolder;
vertical-align: middle;
padding: 20px 20px 0px 0px;
text-align: right;
}

div.container
{
font-size: 12px;
font-weight: bolder;
vertical-align: middle;
padding: 10px 20px 5px 0px;
text-align: right;
}

#parent
{
margin: 0px;
padding: 0px;
position:relative;
}

#left_top
{
width: 35%;
height: 190px;
background-color: #7d7d7d;
float: left
}

#right_top
{
width: 65%;
height: 190px;
color: #ffcc00;
background-color: #666666;
float: right;
}

#left_mid
{
width: 35%;
height: 35px;
color: #ffff99;
background-color: #ffd426;
float: left;
}

#right_mid
{
width: 65%;
height: 35px;
color: #666666;
background-color: #ffcc00;
float: right;
}

#left_bottom
{
width: 35%;
height: 100%;
padding: 20px;
color: #999999;
text-align: right;
background-color: #e5e5e5;
float: left;
}

#right_bottom
{
width: 65%;
padding: 20px;
color: #666666;
text-align: right;
background-color: #ffffff;
float: right;
}

Hi

I wonder if anyone can help. I've been trying to tidy up the layout of my home page, and I'm pretty confused by the way that the header is behaving in both Firefox and Safari - the browsers I use on my Mac.

I've got screen shots which show it looking good on most Windows browsers, but for some reason, all the text is bunched up at the top when I look at it on the Mac.

This is a link to the page:

http://www.independentliving.co.uk/index1.shtml

And this is the relevant bit of the stylesheet:

div#header {
background-image: url("header.jpg");
background-repeat: no-repeat;
color: #FFFFFF;
margin-left:auto;
margin-right:auto;
margin-top: 0;
width:780px;
height: 200px;
margin-bottom: 10px;
font-size: 0.8em;

}

#header .welcome {
text-align: left;
width: 700px;
padding-top: 90px;
padding-left: 20px;
padding-right: 20px;
color: #003366;
font-size: 0.8em;
}

p.welcome {
text-align: left;
width: 700px;
padding-top: 90px;
padding-left: 20px;
padding-right: 20px;
color: #003366;
font-size: 0.8em;
}

#header .slogan {
text-align: left;
width: 700px;
padding-left: 20px;
padding-right: 20px;
color: #003366;
font-size: 0.8em;
}

p.slogan {
text-align: left;
width: 700px
padding-left: 20px;
padding-right: 20px;
color: #003366;
}

If anyone has any ideas, I'd be really grateful. I know Mac is a minority platform, but as it's the one I use, I'm pretty keen to get it working!

Thanks

Frances

Exactly that question. I got this menu from a website.

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" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" media="all" type="text/css" href="http://www.cssplay.co.uk/css/menus.css" />
<title>Godly Menus</title>
<style type="text/css">
#menu {list-style-type:none; padding:0; margin:0; width:150px; z-index:100; float:left; height:360px; background:#000;}
#menu ul {list-style-type:none; padding:0; margin:0;}
#menu li {float:left; background:#fff url(http://www.cssplay.co.uk/menus/slide_fly/slide/slide_0.gif) no-repeat;}

#menu li.sub {background:#fff url(http://www.cssplay.co.uk/menus/slide_fly/slide/slide_0.gif) no-repeat;}

#menu li, #menu li a {display:block; color:#fff; font-family:arial, sans-serif; font-size:11px; line-height:30px; width:150px; 

text-decoration:none; cursor:pointer; font-weight:bold; text-align:center;}

#menu table {border-collapse:collapse; padding:0; margin:0 -1px -1px;}

#menu ul,
#menu :hover ul ul,
#menu :hover ul :hover ul ul {position:absolute; left:-9999px; width:150px;}

#menu :hover {color:#ff0; background:#fff url(http://www.cssplay.co.uk/menus/slide_fly/slide/slide_1.gif) no-repeat; 

z-index:500; white-space:nowrap;}

#menu :hover > a {color:#ff0; background:#fff url(http://www.cssplay.co.uk/menus/slide_fly/slide/slide_1.gif) no-repeat; 

z-index:500; white-space:nowrap;}

#menu :hover ul {position:static; height:180px; margin-top:-1px; background:#383838;}
#menu :hover ul :hover ul, 
#menu :hover ul :hover ul :hover ul {display:block; position:absolute; left:130px; top:0; height:auto; z-index:500; border:1px 

solid #fff;}

#menu :hover ul li, #menu :hover ul li a {background:#383838; text-align:left; text-indent:10px; }
#menu :hover ul li.fly a {background: #383838 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif) no-repeat 120px 

center;}
#menu :hover ul :hover {background:#255fa3; position:relative; z-index:100;}
#menu a:hover ul li.fly a:hover {background:#255fa3 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif) no-repeat 

120px center; color:#ff0;}
#menu :hover ul li.fly:hover > a {background:#255fa3 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif) no-repeat 

120px center; color:#ff0;}

#menu :hover ul :hover ul li, 
#menu :hover ul :hover ul li a
{background:#666;}
#menu :hover ul :hover ul :hover ul li {background:#666; z-index:500;}

#menu :hover ul :hover ul li.fly a {background: #626262 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif) 

no-repeat 120px center;}
#menu :hover ul :hover ul :hover {z-index:500; background:#0d72c0; color:#ff0;}
#menu a:hover ul a:hover ul li.fly a:hover {background:#0d72c0 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif) 

no-repeat 120px center; color:#ff0;}
#menu :hover ul :hover ul li.fly:hover > a {background:#0d72c0 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif) 

no-repeat 120px center; color:#ff0;}

#menu :hover ul :hover ul :hover ul li, 
#menu :hover ul :hover ul :hover ul li a {background:#888;}

#menu :hover ul :hover ul :hover ul :hover {background:#5184b8; color:#ff0;}
#menu :hover ul :hover ul :hover ul :hover a {color:#ff0;}

.menu_text {float:left; width:500px; font: 11px verdana, arial, sans-serif; border:1px solid #000; height:358px;}
.menu_text img  {display:block;}
.menu_text p {margin:0; padding:5px 10px; line-height:15px;}
</style>
</head>
<body>
<div id="info">
<ul id="menu">
<li><a href="#nogo">Home</a></li>
<li><a href="#nogo">Privacy Policy</a></li>
<li class="sub"><a href="#nogo">Types<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">European</a></li>
<li><a href="#nogo">Indian</a></li>
<li><a href="#nogo">North Africa</a></li>
<li class="fly"><a href="#nogo">American<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">South American</a></li>
<li class="fly"><a href="#nogo">North American<!--[if gte IE 

7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Grey tree frog</a></li>
<li><a href="#nogo">Green tree frog</a></li>
<li><a href="#nogo">Spring peeper</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a href="#nogo">Japanese</a></li>
<li><a href="#nogo">Chinese</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="sub"><a href="#nogo">Classifications<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li class="fly"><a href="#nogo">Pelodryadinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Cyclorana</a></li>
<li><a href="#nogo">Litoria</a></li>
<li><a href="#nogo">Nyctimystes</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="fly"><a href="#nogo7">Phyllomedusinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Agalychnis</a></li>
<li><a href="#nogo">Cruziohyla</a></li>
<li><a href="#nogo">Hylomantis</a></li>
<li><a href="#nogo">Pachymedusa</a></li>
<li><a href="#nogo">Phasmahyla</a></li>
<li><a href="#nogo">Phrynomedusa</a></li>
<li><a href="#nogo">Phyllomedusa</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="fly"><a href="#nogo">Hemiphractinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Cryptobatrachus</a></li>
<li><a href="#nogo">Flectonotus</a></li>
<li><a href="#nogo">Gastrotheca</a></li>
<li><a href="#nogo">Hemiphractus</a></li>
<li><a href="#nogo">Stefania</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="fly"><a href="#nogo">Hylinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Acris</a></li>
<li><a href="#nogo">Anotheca</a></li>
<li><a href="#nogo">Bokermannohyla</a></li>
<li><a href="#nogo">Corythomantis</a></li>
<li><a href="#nogo">Ecnomiohyla</a></li>
<li><a href="#nogo">Hyloscirtus</a></li>
<li><a href="#nogo">Megastomatohyla</a></li>
<li><a href="#nogo">Osteocephalus</a></li>
<li><a href="#nogo">Pseudacris</a></li>
<li><a href="#nogo">Sphaenorhynchus</a></li>
<li><a href="#nogo">Trachycephalus</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="fly"><a href="#nogo9">Rhacophorinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Boophis</a></li>
<li><a href="#nogo">Callixalus</a></li>
<li><a href="#nogo">Chiromantis</a></li>
<li><a href="#nogo">Cryptothylax</a></li>
<li><a href="#nogo">Mantidactylus</a></li>
<li><a href="#nogo">Rhacophorus</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="fly"><a href="#nogo">Buergeriinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Buergeria</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="sub"><a href="#nogo">References<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://en.wikipedia.org/wiki/Tree_frog">Wikipedia</a></li>
<li><a href="#nogo11">Encyclopedia</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="sub"><a href="#nogo">Links<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Complete treefrog</a></li>
<li><a href="#nogo">Old World treefrogs</a></li>
<li><a href="#nogo">Amphibian Species</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>
<div class="menu_text"><img src="http://www.cssplay.co.uk/menus/slide_fly/slide/frog.jpg" alt="tree frog" title="" />
<p>Tree frogs are frogs of the families Hylidae and Rhacophoridae.</p>
<p>There is large variation among tree frog species. Many species are not actually arboreal (do not live in trees), but 

terrestrial or aquatic (live on the ground or in the water).</p>
<p>Many arboreal frogs are green, while terrestrial and aquatic species are duller.</p>
<p>They mostly feed on insects and other invertebrates, but some larger species can feed on small vertebrates. The species 

within the genus Cyclorana are burrowing frogs, sometimes spending many years underground.</p>
</div>
</div>
</body>
</html>

Any anyway, if I take out the <link> it dissapears!! The CSS in it has nothing to do with the image. Here is the CSS in the <link> tag.

Code:

#showcase {background:#6f9c6f;}
dl.menus_list dt {background:#6f9c6f; font-size:1.5em; margin:3px 0;}
#foot {background:#8fbc8f;}
dl.menus_list dd.nil {padding:0; margin:0;}

I hate to say it but I'm baffled! Goal: Get all the CSS into the same file as the rest of my code.

Edit: Gah kravvitz I've been watching your move through your profile and you signed off!! Gay. Well I hope someone else here can help me solve this issue I'm having...

XHTML strict (no inline elements in <form)

Code:

<form ...>
<div>
<input ... />
<input ... />
</div>
</form>

Is the empty div element acceptable?

Thank you

<p>All-in-one solution for all your Web site needs <i>and</i> wants <ul>
<li>Subscriptions and Web alerts</li>
<li>Web site replication</li>
<li>Integrated Document Management</li>
<li>Next-generation HTML Form support</li></ul>


What the question is is if it is correct to mix text (inline) with a <ul> element (block-level).

Thank you

Hello all. I wouldn't say that I'm a CSS n00b because I've been using it for a while but this is my first attempt at trying to build a site without tables using CSS.

I looked at a few examples online and came up with the following for the page itself:
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"
<html>
  <head>
    <title>My Site</title>
    <script src="scripts/js/main.js"></script>
    <link rel="stylesheet" type="text/css" href="stylesheets/main.css">
  </head>
  <body>
    <div id="logo_search">
      <form name="search_form" method="POST" action="" onSubmit="return validate_form(this);"> 
        <div id="logos">
          <img align="absbottom" src="images/logo.png"><img align="absbottom" src="images/curve.png">
          <input class="search_field" type="text" name="search_field" size="20">
        </div>
      </form>
    </div>
  </body>
</html>

Where the contents of main.css are as follows:
Code:

body {
  margin: 0;
  padding: 0;
  background: #0081b3; } /* end body */
#logo_search { 
  display: block;
  background: #ffffff; }
#logos { 
  display: compact; 
  background: #ff0000;
  margin-left: 200px; } /* end #logo */
.search_field { 
  text-align: right;
  margin-left: 400px; } /* end #search_field */
form { 
  margin: 0;
  padding: 0;
} /* end form */

Thinking tabularly (I know, I can't help it), what I'm trying to accomplish is to position these items on a single row with the search field about 25-50px from the right edge of the browser and the first image beginning about 200px from the left edge of the browser with white space from the image to the left and red from the image to the right.

The code I have accomplishes this task however when the browser window shrinks, the search field wraps below the images so I'm thinking that there is a better way to do it than what I was doing.

Hi all,

There is a serious positioning problem going on with my page. It looks right in Firefox3, but in IE7 the spacing is messed up and the top left photo fails to display. I imagine it has something to do with the padding or margin for my text. Please help! I have validated in both CSS and HTML. Also, can anyone recommend any sort of tool to help with things like this in the future? I am in an intro web class so I failed to cross check browsers, bear with me...

Thanks in advance,
Amanda

Code:

<!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" xml:lang="en" lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The Dachsund Rescue of Houston</title>

<style type="text/css">

body{
background: url(images/background.jpg) no-repeat top center;}

#contain{	
		width: 800px;
		height: 640px;
		margin-left: auto;
		margin-right: auto;
			}
#menu{		width: 466px;
		height: 98px;
		float: right;
		margin-top: 15px;
		}
#dog{		width: 491px;
		height: 257px;
		margin-top: 19px;
		margin-left: 22px;
		
float: left; }
		
/* margin-top is the menu plus the remaining pixels (19) so, from the very TOP of the page. I guess you keep "adding"
*/
		


#community{	float: right;
		background: url(images/community_spot.jpg) no-repeat;
		width: 231px;
		height: 259px;
		margin-top: 19px;
		margin-right: 22px;
		 }

#arrival{	
	clear: right;
	background: url(images/arrivals.png) no-repeat;
	width: 800px;
	height: 286px;
}

.communitytext {
font-family: helvetica;
font-size: 10pt;
color: #000000;
padding: 160px 10px 0 15px; /*up, right, bottom, left */
margin: 5px auto 5px 10px; /*up, right, bottom, left */
}

.arrivaltext {
font-family: helvetica;
font-size: 10pt;
color: #000000;
padding: 105px 10px 0 10px; /*up, right, bottom, left */
margin: 15px 10px 5px 10px; /*up, right, bottom, left */
}

.arrivaltext2 {
font-family: helvetica;
font-size: 10pt;
color: #000000;
padding: 3px 10px 0 10px; /*up, right, bottom, left */
margin: 15px 10px 5px 10px; /*up, right, bottom, left */
}

</style>
</head>
<body>
<div id="contain">
<div id="menu">
<a href="about.html"><img src="images/about_btn.png" alt="About button"  title="About" border="0"/></a> 
<a href="adopt.html"><img src="images/adopt_btn.png" alt="Adopt button"  title="Adopt" border="0"/></a> 

<a href="help.html"><img src="images/help_btn.png" alt="Help button"  title="Help DROH" border="0"/></a> 
<a href="resources.html"><img src="images/resources_btn.png" alt="Resources button"  title="Resources" border="0"/></a> 
<a href="contact.html"><img src="images/contact_btn.png" alt="Contact button"  title="Contact" border="0"/></a> 
</div>
<div id="dog">
<img src="images/jumping.jpg"  alt=""  title="" border="0" /> </div>
<div id="community"> <p class="communitytext">If you love animals, fostering allows you to go through 'em and love a whole bunch of  'em - without having to keep 100 dogs at your house. MORE...</p></div>

<div id="arrival"><p class="arrivaltext">Luke is a happy-go-lucky, love bug. He is between 1-3 yrs old, with black/tan dapple. He is mixed with another breed which we suspect to be a Spaniel or Catahoula. He stands about 11/2 feet tall to the top of the head and weighs 20 lbs. </p> <p class="arrivaltext2"> Luke was rescued at the 11th hour and was emaciated when he came in.With a little bit of love and a lot of food, we found that Luke has a perky, easy-going and affectionate personality. In our house we call him Casanova because everyone who meets him, falls in love with
him. He has an intense alluring stare to draw you in, then he slowly cuddles up next to you, and when you've fallen for him, he covers you with gentle kisses. </p>  <p class="arrivaltext2"> Luke was rescued at the 11th hour and was emaciated when he came in.With a little bit of love and a lot of food, we found that Luke has a perky, easy-going and affectionate personality. In our house we call him Casanova because everyone who meets him, falls in love with
him. </p> 

</div>
</div>
</body>
</html>

Hi guys,

Is it correct to have a <div after a <form or after a <p ??

For example,
is this correct:

Code:

<form action="...


</form>

<div id="forgot_pass">
...
</div>

OR

Code:

<p id="...


</p>

<div id="forgot_pass">
...
</div>

Thank you

Is it correct to use &nbsp; in CSS??

thank you

I have been scouring this forum trying to find the correct answer. I have a list of links in an unordered list. I am using css to style the list.

The one thing I can't seem to figure out is, if I have the wrong doctypes or my css is wrong.

I have replaced the bullet for the li tags with background images. One is just a line the other is a line with an arrow. I am trying to push the type over a little past my arrow. In the css I have put a padding-left: 1 em; on the li tag. It works in IE but not firefox, so I added padding-left: 10; This seemed to push the li tag over in firefox.

The next problem was when I went to put the doc types in. I put
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
above the <html> tag. Once again it worked in IE but not Firefox.

I took out the doctype tag and inserted
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
inside the <head> tags. This seems to work in both IE and Firefox.

Is this an incorrect way to put a doc type in?
Below please see the css I am using and my header info

Code:

/*right hand nav bar*/
#nav ul{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	line-height: 13px;
	list-style-type: none;
	padding: 0;
	margin: 0;
}

#nav li{
	background: url(../images/divider_rht_nav.gif) repeat-x bottom;
	padding-top: 0.3em;
	padding-bottom: 0.6em;
	padding-left: 1 em; /*this is for IE*/
	padding-left: 10; /*this is for FireFox*/
}

#nav a {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	line-height: 13px;
	color: #325087;
}

#nav a:hover {
	color: #CC0000;
	line-height: 13px;
}

#nav li.selected {
	color: #174A4A;
	font-weight: bold;
	background-image: url(../images/divider_rht_nav_arrow.gif);
}

.heading {
	font-weight: bold;
	color: #174A4A;
	font-size:10px;
}

.headingspace {
	font-weight: bold;
	color: #174A4A;
	font-size:10px;
	margin-top: 1.5em;
}
/*end style*/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Admin Area - Login</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="../css/master.css" rel="stylesheet" type="text/css" media="screen">
<link href="../css/master_print.css" rel="stylesheet" type="text/css" media="print">
<script language="javascript" type="text/javascript" src="scripts/validate_admin_login.js"></script>
</head>