|
CSS - Opera 6 (mac) Changing Display Css Property With Js
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 Similar TutorialsI've got such annoying thing when using border property for button: when I click on the button, which border is defined in CSS (i.e. not 'none' and has some width - 1px or more) I see some ghost rectangles appearing in certain areas of the page. These rectangles are just a garbage on screen, coz when I resize the page or make some other things like clicking on other button, it disappears... What's that and how can I beat it? Here's the problem: aparently Opera places an inverse color highlight on links that receive the keyboard focus (see Javascript Development: How do I hide focus on Opera?), and I'd like to hide it. CSS3 property
Code: outline-style is useless here, and I've also tried setting the JScript Code: hideFocus property, but aparently this only works on IE. In fact, I've tried everything I can think of except blurring the link, which would completely defeat my purpose. I tried Javascript Development and got nothing, so maybe the answer is not Javascript. Is there possibly some proprietary CSS extension in Opera that would hide the highlight? If so, what is it and how do I use it? Hello ppl, I have a problem about 6 div's which are displayed inline. Everything is OK in Opera and IE but in firefox everything is wrong .. all the divs are almoust in the same place , one over another here is the link http://www.immo-land.ro/test/div-inline.html and below is the code which I wrote for every DIV Code: <div style="border: 1px solid #c5732a; width: 164px; height: 150px; padding: 95 0 0 0; margin: 3px 3px 3px 3px; display: inline; background-image: url(../images/immo-land-apartamente-garsoniere.jpg); background-repeat: no-repeat"> <a href="http://localhost/immoland/vanzare-apartamente.php" style="background: #C5732A; width: 100%;">Apartamente</a> <br> Text here </div> any ideea why is all that mess in firefox ? 10x in advance See ya all here is the site http://142.177.157.241:8080/bikers/ Well, I have some work to do about opera and IE since they are slow in the browsers making or the standards compliance. Even Opera8 doesn't suport my site and I think that was just released not too long ago. I think I'm going to be changing my browser of choice from Firefox to Netscape 8. I have the beta right now and it looks awesome and has all the functionality of Firefox I want plus it makes it easy to change between IE and netscape without actualy going to IE to see how my site looks. Two birds with one stone. 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! 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> 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"> </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"> </li> </ul></div> </div> <div id="content"> <p>Here is some text</p> <p>Here is some more text </p> </div> </body> </html> Hey, I got a webpage that looks like it should in both IE 6.0 and firefox 2.0. Now i went testing it in opera and it has a problem with some div positions. Here is how it looks in firefox and IE: Internet explorer:http://img442.imageshack.us/img442/8176/iexz2.jpg firefox:http://img361.imageshack.us/img361/5503/firefoxqc0.jpg And this is how it looks in Opera 9.10:http://img442.imageshack.us/img442/5125/operauw7.jpg The buttons signout, new contact and contact list are shifted to the low. I use this code on every page do display the header with the buttons ( the red part is the div with the buttons in it. Code:
<body>
<div class="containingTitles">
<div class="titleNavDiv">
<b>Hello, stefan.</b>
</div>
<div class="titleContentDiv">
<form action="search_contact.php" name="search" id="search" method="get">
<div style="float: left; width: 35%; margin: 0%; padding: 0%;">
<input type="text" style="width: 50%" name="sq" value="" id="sq">
<input type="submit" name="s" value="Search" id="s">
</div>
</form>
<form name="new_contact" id="new_contact" method="get" action="new_contact.php">
<div style="float: left; width: 22%; margin: 0%; padding: 0%; text-align: right;">
<input type="submit" name="nc" value="New Contact" id="nc">
</div>
</form>
<form name="contact_list" id="contact_list" method="get" action="contact_list.php">
<div style="float: left; width: 22%; margin: 0%; padding: 0%;">
<input type="submit" name="cl" value="Contact List" id="cl">
</div>
</form>
<form name="logout" id="logout" method="get" action="logout.php">
<div style="float: left; width: 20%; margin: 0%; padding: 0%; text-align: right;">
<input type="submit" name="lo" id="lo" value="Sign out">
</div>
</form>
</div>
</div>
<div class="navigationDiv">
<div class="unselectedContact"><a href="contact_info.php?contact_id=102">Username1</a></div>
<div class="unselectedContact"><a href="contact_info.php?contact_id=102">Username2</a></div>
<div class="selectedContact"><a href="contact_info.php?contact_id=102">Username3</a></div>
etc.
</div>
<div class="contentDiv">
----- contents of the page -----
</div>
</div>
And belowis the css code i use to float the divs into position. And here you can see the division of the pages and which class belongs to which div: http://img353.imageshack.us/img353/1503/layoutai3.jpg css Code: Original - css Code body{ margin: 0; padding-left: 0%; padding-right: 0%; padding-top: 0%; padding-bottom: 0%; background: url(background.jpg) 22% 0; } .containingTitles{ float: left; width: 100%; margin: 0%; padding: 0%; background-color: #4D3D4D; color: white; overflow: hidden; } .titleNavDiv{ float: left; width: 20%; margin: 0%; padding-left: 2%; padding-right: 0%; padding-top: 1%; padding-bottom: 1%; overflow: hidden; } .titleContentDiv{ float: left; width: 77%; margin: 0; padding-left: 0%; padding-right: 0%; padding-top: 1%; padding-bottom: 1%; overflow: hidden; } .navigationDiv{ float: left; width: 22%; margin: 0; padding-left: 0%; padding-right: 0%; padding-top: 0%; padding-bottom: 0%; overflow: hidden; color: #FFFFFF; background-color: #4D3D4D; } .contentDiv{ float: left; width: 76%; margin: 0; padding-left: 2%; padding-right: 0%; padding-top: 0%; padding-bottom: 0%; overflow: hidden; color: #000000; background-color: #BFACBF; }
hope you can tell me why this happens. Thanks in advance. 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. 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 I'm including some images within a UL. I've coded them in there to float. IE displays the list as I want but NN and Opera won't play along. In fact they both "get it wrong" in different ways. What am I doing wrong? (as you can see it is for a course and it is important to me to get it right not just good enough). Here's the address. The CSS coding is on the actual page for easy viewing. link 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. Is there such a thing as using an alt property for <img> tag? This would be awfully useful for SEO Will the -moz property ever become a valid CSS property. when I validate my CSS on w3.org I get errors. I remove all propertys that have a -moz in front of it and it is 100% valid. ALSO ... Is there a way to mask parts of the css from the validator or have a separate CSS file that can be masked from the validator to make it appear to be 100% valid.. Thanks I'm trying to create some links that swap background images when you mouseover them. The non-CSS solution (which looks exactly how I want it to look) is located he http://84.9.221.75/domains/backingt...Musicindex.html My attempt at creating a CSS equivalent of those links is located on this page: http://84.9.221.75/domains/backingt...Musicindex.html I just need some help with the CSS I'm using on the latter page...I read up a little on how to do this, but it's obvious I'm still doing something wrong... I need the buttons and the text inside the buttons to line up and appear like they do in the first URL....can anyone give me some pointers here? Thank you. Thanks for all the continued help/support. . . Makes learning CSS so much easier! Link: www.vairlinecms.com Question: I set the html up like this on purpose to grasp the concept. <p> tags are block level containers. So each new set of <p> tags should equal start on new line. w/the float property holding a value of left, it floats all content to the left. Since each instance of float occurs in its own container...the two different <p> sets should not be affected. In short, the password: paragraph should be on a new line, not both on the same line. There should be no need to clear it because they are in their own containers - which are block level. Where is my logic/understanding of CSS flawed? HTML: Code: <div id="clientLoginBoxBody">
<form action=#">
<br />
<p class="user">Username:</p>
<p class="pass">Password:</p>
</form>
</div>
CSS: Code: #clientLoginBoxBody p.user, p.pass {
float: left;
margin: 0;
margin-left: 10px;
padding: 0;
font-size: 12px;
text-align: right;
}
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? This style is use useful or not @property-group title-style() { color: #004080; font-weight: bold; } @property-group standard-vmargins() { margin: 1.33ex 0; } title, subtitle, titleabbrev { display: block; property-group: title-style(); property-group: standard-vmargins(); } This is not support IE... I am trying to figure out how I can get this red curve to align to the bottom of the page, while also being able to move up and down with the size of the browser window. http://www.woodrichwebworks.com/psa/psa_comps/bycor/html/redtest.html Any help would be great. Ok what i want to happen is that when person clicks on a link i want a div to appear/be visible underneath that link. But i want that div to not take any space unless i click on a link. I recently did something similar BUT the div was taking the space but was just hidden. |
|||||||