|
CSS - Overflow Property Means Netscape Does Not Display Content - Need Help!
Hi
Could someone tell me why the content is not showing in Netscape 7 please This is the site http://www.hardingscatering.co.uk/06/index.htm I have put an overflow property on the container div, so FF can show white as the bground colour. But when viewed in Netscape the content is not there and on other pages a scroll bar appears. I always have trouble with this, and would really like to know what I am doing wrong. Thanks for any help. Similar TutorialsMy CSS works in IE and Mozilla but not Netscape or Opera I have a 2 column website, built with 2 relative position DIVs, with overflow set to auto. Because of this, I turned off overflow on the body tag and on the html tag (overflow: hidden;). I didn't want to have 2 scroll bars on the right side of the window. When I first tested this on 4 browsers, IE, Mozilla, Netscape and Opera, it worked great, only having one scroll bar on the right side of the window when the page was longer than the window height. But when I moved to a new host server recently, I discovered that Netscape and Opera stopped working. They now simply give me blank screens. When I remove the "overflow: hidden;" specifications from the body tag and the HTML tag in my CSS file, Netscape and Opera once again display my web pages. However, now I get 2 scrollbars on the right side of all 4 browsers (in IE, the second scrollbar isn't actually there, but the space holder for the scrollbar is there). Is there a cross browser way for doing what I'm trying to do? Or am I faced with detecting the browser type on the server-side, and setting the style sheet appropriately? Here are the related parts of my CSS: /* CSS styles */ BODY { font-family : Verdana, Arial, Helvetica, sans-serif ; font-size : 10pt; background : Black; color : White; margin: 0; padding: 0; border-width: 0; overflow: hidden; } HTML { overflow: hidden; } #LeftNavDIV { position:relative; width:185px; height:100%; float:left; padding:2px 0px 0px 0px; margin:0px 0px 0px 0px; border:1px solid white; overflow:auto; } #ContentDIV { position:relative; height:100%; width:75%; float:right; padding:0px 0px 0px 0px; margin:0px 0px 0px 0px; border:0px dashed #336699; overflow:auto; } <div id="whatever"><img src="..." /></div> div#whatever { overflow: hidden; background-color: gray; } div#whatever img{ float:right; } When I set overflow: visible; the image is not properly wrapped within the div. When I set overflow: hidden; the image is properly contained within the div. (you can see with gray background) My question is, w3schools.com says that overflow property visible - show the content even if it overflows hidden - hide the part of the content that overflows With those definitions, I should be seeing the image chopped by div and don't even see it at all? Safari does not recognize the CSS property overflow. Does anyone have a workaround for this? I have been made aware of this bug just today, Safari does not handle this gracefully, it actually renders the div very very poorly, destroying it really. I would remove the overflow element but i need it. Hi, I have faced a strange issue with the CSS overflow property while using nested DIVs.The DIV with class main has the DIV main-1a as its child which in turn has the DIV with class main-1a-child as its child. As the height of main is not fixed, so it is supposed to increase with main-1a and main-1a-child. But in Mozila FireFox, the height of main is not getting increased with the child DIVs. When the overflow property is set to hidden in main, then only the height of main gets increased with its childs. The issue is fine in IE6 regardless of the overflow property. Any help/explanation in this regard will be very helpful. <html> <head> <title>My Page</title> <style type="text/css"> .main { position:relative; width:800px; display:block; border:1px solid #000000; margin:auto; padding:10px 10px 10px 10px; background:#BABB99; height:100%; overflow:hidden; } .main-1a { width:780px; float:left; background:#FFFFFF; border:1px solid #FF0000; padding:10px 10px 10px 10px; } .main-1a-child { width:760px; float:left; border:1px solid #000000; padding:10px 10px 10px 10px; background:#BABB99; } </style> </head> <body> <div class="main"> <div class="main-1a"> <div class="main-1a-child"> <p>text of div1 a2</p> <p>snkjkjsd</p> <p>snkjkjsd</p> <p>snkjkjsd</p> </div> </div> </div> </body> </html> Anyone know of a good way to break up a long word from an element with a certain width? Say I have a word like wordddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd, I'd want it to show up properly. Here's the best I've come up with: Code:
<html>
<head>
<style type="text/css">
div
{
background-color:#00FFFF;
width:150px;
overflow: hidden;
}
</style>
</head>
<body>
<div>
Longworddddddddddddddddddddddddddddddddddd
</div>
</body>
</html>
As you see, just cutting off the word isn't really ideal. Is there a way to auto-break up long words or something? My documentation for css shows that content: url(); works in navigator but not in ie. The info I've got is dated. Does the content property work in the newer ie browsers? I currently have a drop down menu on a sidebar that when you roll over the buttons(each its own list item) a drop down menu appears over top of the buttons underneath the one your mouse is on. This works fine in Firefox of course but in IE the drop down menu goes underneath the other buttons. Any suggestions how to fix this? 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;} I have a layer 'main' that contains two columns - one on the left called 'left', one on the right called 'right'. Both columns are layers themselves. 'main' has a background colour 'left' and 'right' have a fixed size background image which does not repeat. JavaScript determines the size of the window and then sets the height of these three layers exactly. This is supposed to be a minimum height to ensure the page is filled initially, however I have used the following code (explained later): Code:
if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
myHeight = document.documentElement.clientHeight;
}
else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
myHeight = document.body.clientHeight;
}
// main height
var pageHeight = myHeight;
document.getElementById("main").style.height = pageHeight+"px";
// content height
var leftHeight = pageHeight - 233;
document.getElementById("left").style.height = leftHeight+"px";
document.getElementById("right").style.height = leftHeight+"px";
Content on 'right' may extend beyond the height of the page and therefore makes the page scroll. When the content in 'right' expands - it is hoped that the size of 'main' expands so that the background colour of this layer fills the space where the content overflows. Using the above JavaScript and this HTML - that works as desired in IE7. Code:
<div id="main" style="position: relative; margin: 0 auto; width: 680px; background: #E1E6EA; text-align: left; padding: 0; z-index: 2">
<div id="left" style="float: left; text-align: center; margin: 0; padding: 0; width: 198px; background: #E1E6EA; background-image: url('images/left.jpg'); background-repeat: no-repeat; z-index: 3">
blah
</div>
<div id="right" style="float: right; text-align: center; margin: 0; padding: 0; width: 482px; background: #E1E6EA; background-image: url('images/right.jpg'); background-repeat: repeat-x; z-index: 3; overflow: inherit">
badly coded extra bit to extend the layer
<br><br><br><br><br><br>
gfdgf
<br><br><br><br><br><br><br><br><br>
gfgf
<br><br><br><br>yhyuyuy
<br><br><br><br><br><br>
gfdgf
<br><br><br><br><br><br><br><br><br>
gfgf
<br><br><br><br>yhyuyuy
</div>
</div>
As the content of 'right' expands so does the background behind everything. HOWEVER - this only works in IE and not the other two test browsers: Safari and Firefox. To remedy this - I tried minHeight instead of height. The outcome of that - the background behind 'right' extends (because the background colour continues past the minHeight) but the background behind 'left' is just not shown and the background of 'main' does not extent. Therefore it has a background on the left hand side until the minHeight of 'main' then the left hand side has no background after that point. That's in Firefox and Safari. With this "solution" in IE - it goes a bit weird but since it doesn't even work right in the other two I ignore that for now. So - it either works in IE or not at all. Hence why I am currently using the code that at least works in a browser. Any suggestions to get it working in all? Dear all, IE problems trying to get a large amount of content to sit in a smaller div with overflow set to auto. In FF it works perfectly, but in IE the outer div ignores the width value I have set and instead expands to the width of the content. My code: Code: <div id="calendarWrapper" style="width:800px;height:600px;overflow:scroll;"> <div style="width:4000px;height:1000px;overflow:auto;background-image:url(img/calendarBackground.gif);position:relative"> <div style="background-color:#FFFFCC;position:absolute;top:76px;left:150px;width:1000px;height:74px;">Test</div> <div style="background-color:#FFFFCC;position:absolute;top:151px;left:300px;width:750px;height:74px;">Test</div> <div style="background-color:#FFFFCC;position:absolute;top:1px;left:75px;width:100px;height:74px;">Test</div> </div> </div> I found a couple more threads similar to this but none with a solution. any help most appreciated. Mark Hi everyone. I recently redesigned my website and while it looks great in firefox, I'm having huge problems in IE 6.0. I have several pages with >50 thumbnails, and whenever these pages load in IE, scrollbars appear to the right and bottom of the div and quickly move by themselves to the upper left hand corner of the screen as the thumbnails load, shrinking the content into a little box of nothing in the upper left hand corner. The link to the site is in my profile, I am not allowed to post a url here since I'm new. The main page of the site is fine, but any of the links at the left will cause the problem because of all the thumbnails. I have been using "Group Photos" as the page to test. I am still a newbie at CSS and got this template for free and have tweaked it a bit. It came with an IE hack ("fix.css") that maybe isn't working properly. This is the IE hack: Code:
html
{overflow:hidden;}
body
{height:100%; width:100%; overflow:auto;}
Here is the relevant code from my main stylesheet ("eyecandy.css"): Code:
#sidebar
{position:absolute; top:0; left:0; width:220px; height:100%; overflow:auto; background:#e0e0e0; text-align:right;}
body > #sidebar
{position:fixed;}
#menu a
{display:block; width:202px; padding:2px 18px 3px 0; color:#606060; background:#e0e0e0; font-size:1.1em; font-weight:normal; text-decoration:none; letter-spacing:-1px;}
#content
{width:685px; margin:0 0 0 240px; padding:20px 0; background:#fafafa;}
Can anyone help? I hate I can't even post a link to the site directly or even the css file to make it easier. Both the CSS files I named are in the parent directory if you want to see them. Hello, I'm trying to make "tool-tip text" that I can position and style when a user rolls over a link. I have an id called menuTipsAppointments that I want to keep hidden until the user rolls over my Appointments anchor. I'm starting with: Code: #menuTipsAppointments {
display: none;
}
Then I do this: Code: a#appointments:hover {
display:block;
width: 30px;
height: 61px;
background-image: url(images/pin-over.png);
background-repeat: no-repeat;
background-position: top left;
#menuTipsAppointments display: block;
}
The extra bits in this block (above the menuTipsAppointments id) are related to the link's FIR. If my syntax is okay, I'm guessing that I can't do this with :hover, and am hoping for another way to go about it. This is my first site and is already quite messy, so whatever works is cool. Many thanks! I'm trying to get my show/hide script working in Opera 6 and having no luck. So I know I can set CSS properties with JavaScript in Opera 6 (I'm testing on Mac) as I've managed to make it work with the visibility property. However doing: Code: document.getElementById(el).style.display = 'block'; does nothing... if I do an alert on the display setting of the element it always says undefined. I've also tried doing a className switch, but doing this : Code: <div id="el" class="hidden">...</div> alert(document.getElementById(el).className); Also gives me a 'undefined' message. Opera 6 is the only thing that's playing up on me at the moment so any help would be greatly appreciated. -D Hey, I have a feeling that this will not be difficult to solve, but I've come to the point where I don't really know what to do any more. They say two heads are better than one; that's why working in a team is so great, because there are people from different walks of life. So, any help you can provide me from your experiences would be great! I have five buttons that do not show up on firefox, and the images are called into play through CSS using background. You will find the code below: This is the CSS: Code:
.borderBelowNav
{
position: absolute;
top: 0;
left: 80px;
width: 937px;
height: 141px;
z-index: 2;
}
img.borderBelowNav
{
display: block;
margin-left: auto;
margin-right: auto;
}
.divNav
{
position: absolute;
top: 55px;
left: 175px;
width: 785px;
height: 61px;
z-index: 3;
}
ul#mainNav,
ul#mainNav li
{
margin: 0;
padding: 0;
}
ul#mainNav li
{
display: inline;
}
ul#mainNav li a
{
width: 138px;
height: 69px;
}
ul#mainNav li#quienesSomos a
{
width: 138px;
background: url(../images/quienesSection.gif)
no-repeat 0 0;
top: 0;
left: 0;
}
ul#mainNav li#quienesSomos a:hover
{
background-position: 0 -72.9px;
top: 0;
left: 0;
}
ul#mainNav li#campamentos a
{
width: 138px;
background: url(../images/campamentosSection.gif) no-repeat 12px 0;
top: 0;
left: 0;
}
ul#mainNav li#campamentos a:hover
{
background-position: 12px -71.2px;
top: 0;
left: 0;
}
ul#mainNav li#noticias a
{
width: 150px;
background: url(../images/noticiasSection.gif) no-repeat 14px 0;
top: 0;
left: 0;
}
ul#mainNav li#noticias a:hover
{
background-position: 14px -72.5px;
top: 0;
left: 0;
}
ul#mainNav li#aplicacion a
{
width: 150px;
background: url(../images/aplicacionSection.gif) no-repeat 0px 0;
top: 0;
left: 0;
}
ul#mainNav li#aplicacion a:hover
{
background-position: 0px -76.1px;
top: 0;
left: 0;
}
ul#mainNav li#contactos a
{
width: 150px;
background: url(../images/contactosSection.gif) no-repeat 0px 0;
top: 0;
left: 0;
}
ul#mainNav li#contactos a:hover
{
background-position: 0px -72.2px;
top: 0;
left: 0;
}
This is the HTML: Code: <img class="background" src="images/treesInFog.jpg" alt="" /> <img class="innerBackground" src="images/bgroundmain02.jpg" alt="" /> <!--This div is for the black border behind the nav--> <div class="borderBelowNav"> <img class="borderBelowNav" src="images/borderBelowNav.jpg" alt="" /> </div> <div class="divNav"> <ul id="mainNav"> <li id="quienesSomos"><a href="quienesSomos.php" title="Quienes Somos"> </a></li> <li id="campamentos"><a href="campamentos.php" title="Campamentos"> </a></li> <li id="noticias"><a href="#" title="Noticias"> </a></li> <li id="aplicacion"><a href="aplicacion.php" title="Aplicacion"> </a></li> <li id="contactos"><a href="#" title="Contactos"> </a></li> </ul> </div> Im writing a combination navigation bar and contextual layout box model for a large dynamically generated site. The contextual layout is so that i can set a variable in the appropriate markup and then have the correct collumns display. I have two problems. #1. When I mouse over the menus and try to go down my menus they dissapear. If I take out the layout styling they work properly in both IE and Firefox. #2. Anyway to get the menus to appear above form elements? I would appreciate any help.... my code... Quote: /* default layout.php */ body { color: #000; background-color: #fff; margin: 0; } p, h1, h2, h3, h4 { margin: 0; padding: 1em; } h2, h3, h4 { color: #cc0000; } #layoutlogic-abc, #layoutlogic-ab, #layoutlogic-a { background-color: #fff; margin: 0 -1px; width: 100%; border:1px solid black; } #footer { color: #000; position: relative; z-index: 13; width: 100%; } #footer a { color: black; } #layoutlogic-abc .page { background-color: #fff; width: auto; border-right: 150px solid #eee; border-left: 200px solid #eee; } #layoutlogic-ab .page { background-color: #fff; width: auto; border-left: 200px solid #eee; } #layoutlogic-a .page { background-color: #fff; width: auto; } .section { margin: 0; width: 100%; } .col-a, .col-b, .col-c { position: relative; float: left; padding: 2.5em; } .col-a a, .col-b a, .col-c a{ color: blue; } .col-a { margin-right: 1px; } .col-b { margin: 0 -3px 0 -2px; } .col-c { margin-left: 1px; } #layoutlogic-abc .col-a, #layoutlogic-ab .col-a { margin-left: -200px; z-index: 10; width: 200px; padding-top: 1em; } #layoutlogic-abc .col-b, #layoutlogic-ab .col-b { z-index: 20; width: 100%; padding-top: 1em; border: 1px solid black; } #layoutlogic-abc .col-c { color: #fff; margin-right: -150px; z-index: 10; width: 150px; padding-top: 1em; } #layoutlogic-a .col-b, #layoutlogic-ab .col-c, #layoutlogic-a .col-c { display: none; } .floatright { float: right; margin: 1em 1em 0 2em; } .floatleft { float: left; margin: .8em 0 .8em 1.6em; } .clear { clear: both; } .page > .section { border-bottom: 1px solid transparent; } .garamond {font-family: garamond;} ."Times New Roman" {font-family: "Times New Roman";} .verdana {font-family: verdana;} .arial {font-family: arial;} ."Times New Roman" {font-family: "Times New Roman";} and my markup: PHP Code: <body> <div align="center"><h1><img src="/images/banner.gif" alt="UCWDC Banner" /></h1></div> <div id="nav"> <ul class="level1"> <li><a href="/home/"><?= $menu1 ?></a></li> <li class="submenu"><a href="/my_ucwdc/"><?= $menu2 ?></a> <ul class="level2"> <li><a href="/my_ucwdc/my_account.php"><?= $menu2array[0] ?></a></li> <li class="submenu"><a href="/my_ucwdc/online_community.php"><?= $menu2array[1] ?></a> <ul class="level3"> <li><a href="/my_ucwdc/forum.php"><?= $submenu2array[0] ?></a></li> <li><a href="/my_ucwdc/marketplace.php"><?= $submenu2array[1] ?></a></li> <li><a href="/contacts/teachers_dir.php"><?= $submenu2array[2] ?></a></li> </ul></li> <li><a href="/my_ucwdc/membership.php"><?php echo ($menu2array[2])?></a></li> <li><a href="/my_ucwdc/history.php"><?= $menu2array[3] ?></a></li> <li><a href="/contacts/officers.php"><?= $menu2array[4] ?></a></li> <li><a href="/contacts/regional_rep.php"><?= $menu2array[5] ?></a></li> <li><a href="/contacts/members_dir.php"><?= $menu2array[6] ?></a></li> <li><a href="/events/results.php"><?php echo($menu2array[7])?></a></li> </ul></li> <li class="submenu"><a href="/events/"><?= $menu3 ?></a> <ul class="level2"> <li><a href="/events/events_by_date.php"><?= $menu3array[1] ?></a></li> <li><a href="/events/event_reviews.php"><?= $menu3array[2] ?></a></li> <li><a href="/events/results.php"><?= $menu3array[0] ?></a></li> <li><a href="/events/register.php"><?= $menu3array[3] ?></a></li> </ul></li> <li class="submenu"><a href="/competition/"><?= $menu4 ?></a> <ul class="level2"> <li class="submenu"><a href="/rules/"><?= $menu4array[0] ?></a> <ul class="level3"> <li><a href="/rules/couples.php">Couples</a></li> <li><a href="/rules/line.php">Line Dance</a></li> <li><a href="/rules/pro_am.php">Pro-Am</a></li> <li><a href="/rules/team.php">Team</a></li> </ul></li> <li class="submenu"><a href="/dances/"><?= $menu4array[1] ?></a> <ul class="level3"> <li><a href="/dances/triple_2.php"><?= $dancesarray[0] ?></a></li> <li><a href="/dances/polka.php"><?= $dancesarray[1] ?></a></li> <li><a href="/dances/night_club.php"><?= $dancesarray[2] ?></a></li> <li><a href="/dances/cha_cah.php"><?= $dancesarray[3] ?></a></li> <li><a href="/dances/waltz.php"><?= $dancesarray[4] ?></a></li> <li><a href="/dances/2_step.php"><?= $dancesarray[5] ?></a></li> <li><a href="/dances/east_coast_swing.php"><?= $dancesarray[6] ?></a></li> <li><a href="/dances/west_coast_swing.php"><?= $dancesarray[7] ?></a></li> </ul></li> <li class="submenu"><a href="/music/"><?= $menu4array[2] ?></a> <ul class="level3"> <li><a href="/music/release_dates.php"><?= $musicarray[0] ?></a></li> <li><a href="/music/music_news"><?= $musicarray[3] ?></a></li> <li><a href="/music/dj_forum"><?= $musicarray[2] ?></a></li> <li><a href="/music/music_match.php"><?= $musicarray[1] ?></a></li> </ul></li> </ul></li> <li class="submenu"><a href="/worlds/"><?= $menu5?></a> <ul class="level2"> <li><a href="/worlds/worlds_register.php"><?= $menu5array[0] ?></a></li> <li><a href="/worlds/worlds_swing.php"><?= $menu5array[1] ?></a></li> <li><a href="/worlds/worlds_workshops.php"><?= $menu5array[2] ?></a></li> <li><a href="/worlds/worlds_schedule.php"><?= $menu5array[3] ?></a></li> <li><a href="/worlds/worlds_line.php"><?= $menu5array[4] ?></a></li> <li><a href="/worlds/worlds_competitors.php"><?= $menu5array[5] ?></a></li> <li><a href="/worlds/worlds_hotels.php"><?= $menu5array[6] ?></a></li> <li><a href="/worlds/worlds_sponsor.php"><?= $menu5array[7] ?></a></li> <li><a href="/worlds/worlds_contacts.php"><?= $menu5array[8] ?></a></li> <li><a href="/wolrds/worlds_updates.php"><?= $menu5array[9] ?></a></li> </ul></li> <li class="submenu"><a href="/judge/"><?= $menu6?></a> <ul class="level2"> <li><a href="/judge/about_judge.php"><?= $menu6array[0] ?></a></li> <li><a href="/contacts/judge_pool.php"><?= $menu6array[1] ?></a></li> <li><a href="/judge/judge_curriculum.php"><?= $menu6array[2] ?></a></li> </ul></li> <li class="submenu"><a href="/classes/"><?= $menu8 ?></a> <ul class="level2"> <li><a href="/classes/zip_code_match.php"><?= $menu8array[0] ?></a></li> <li><a href="/classes/classes_events.php"><?= $menu8array[1] ?></a></li> <li><a href="/contacts/teachers_dir.php"><?= $menu8array[2] ?></a></li> <li><a href="/classes/classes_judging.php"><?= $menu8array[3] ?></a></li> </ul></li> <li class="submenu"><a href="/contacts/"><?= $menu9 ?></a> <ul class="level2"> <li><a href="/contacts/officers.php"><?= $menu9array[0] ?></a></li> <li><a href="/contacts/regional_rep.php"><?= $menu9array[1] ?></a></li> <li><a href="/contacts/teachers_dir.php"><?= $menu9array[2] ?></a></li> <li><a href="/contacts/judge_pool.php"><?= $menu9array[3] ?></a></li> <li><a href="/contacts/members_dir.php"><?= $menu9array[4] ?></a></li> <li><a href="/contacts/webmaster.php"><?= $menu9array[5] ?></a></li> </ul></li> </ul> </div> <div id="layoutlogic-abc"> <div class="page"> <div class="section"> <div class="col-a"> <fieldset><legend>Login:</legend> <table width="100%" border="0"> <tr> <td align="right">Username:</td><td align="center"><input type="text" size="10" /></td> </tr> <tr> <td align="right">Password:</td><td align="center"><input type="password" size="10" /></td> </tr> <tr> <td colspan="2" align="center"><a href="#">Forgot Password?</a></td> </tr> <tr> <td colspan="2" align="center"><a href="new-member.html">Not a Member yet?</a></td> </tr> </table> </fieldset> <div align="center"><input type="submit" value="Login"></div> <hr /> <p>left Content </p> <hr /> </div> <div class="col-b"> <div class="floatright"><img src="header2.jpg"></div> <p >Content</p> </div> <div class="col-c"> <p>Content</p> </div> <div class="clear"></div> </div> </div> <div id="footer"><h3>Footer</h3><p>Site Design and Maintenence by <a href="#">WestonWebWorks.com</a>.</p></div> </div> </body> </html> Thanks What does this syntax mean? li:hover > a I found it in a CSS file and I don't know what the greater than symbol means. Thanks, Carla Hi All, Hopefully I'm asking this in the right place-- this may be more of a CSS/HTML question. I currently have a DIV at the top of my webpage, with it's style as "none." [code] <div id='confirm' style="Display:none;"><p>Item Has Been Updated</p></div> Anyway, I have a little function that changes the display to "block" when an action occurs with database. Doing so, it display the DIV fine. However, it moves the "entire" page (meaning the rest of my DIVS) downward. This is kind of an eyesore when everything moves like that. Besides moving the DIV to the bottom of the page, how would I achieve displaying the DIV at the top without shifting the rest of the content downward? Thanks very much. |
|||||||