|
CSS - Is It Correct To Use In Css??
Is it correct to use in CSS??
thank you Similar Tutorials<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 XHTML strict (no inline elements in <form) Code: <form ...> <div> <input ... /> <input ... /> </div> </form> Is the empty div element acceptable? 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 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 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>
http://www.rich-carey.com/rc-alpha/index.php?c=files&content=misc A problem with my CSS means the columns arent equal, any ideas? ive tried several things, and JUST got colour on the right side now. Someone said something about problems with floats but i didnt quite udnerstand it 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>
So, my page works correct in firefox, but my divs on the right side show at the top of the page in internet explorer. Firefox: img251.imageshack.us/i/page2uop.jpg Internet Explorer: img846.imageshack.us/i/page1.jpg I'll post my html and css in case you need it: CSS: Code: #wrapper {
width: 80%;
margin-left: auto;
margin-right: auto;
border-style: double;
}
#logo {
border-color: #007500;
border-style: double;
border-width: 5px;
height: 128px;
float: left;
}
#titlewrap {
float: left;
}
#filler {
float: left;
width: 20px;
}
#logo2 {
background: #B3FF00;
border-color: #007500;
float: left;
width: 210px;
border-style: double;
border-width: 5px;
text-align: center;
margin: 10px;
padding: 10px;
}
#title {
clear: both;
float: left;
font-size: 36px;
font-style: italic;
margin: 10px;
}
#links {
clear: both;
float: left;
margin: 10px;
}
#body1 {
background: #CEFBA2;
border-color: #007500;
height: 170px;
clear: both;
float: left;
width: 35%;
border-style: double;
border-width: 4px;
text-align: left;
margin: 10px;
padding: 20px;
}
#body2 {
background: #CEFBA2;
border-color: #007500;
height: 170px;
float: left;
width: 50%;
border-style: double;
border-width: 4px;
margin: 10px;
padding: 20px;
}
#body3 {
background: #CEFBA2;
border-color: #007500;
clear: both;
float: left;
width: 50%;
border-style: double;
border-width: 4px;
margin: 10px;
padding: 20px;
}
#body4 {
background: #CEFBA2;
border-color: #007500;
float: left;
width: 35%;
border-style: double;
border-width: 4px;
margin: 10px;
padding: 20px;
}
#contact {
background: #CEFBA2;
border-color: #007500;
clear: both;
float: left;
width: 92%;
border-style: double;
border-width: 4px;
margin: 10px;
padding: 20px;
}
#foot {
clear: both;
text-align: right;
font-size: 12px;
margin: 10px;
}
HTML: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" href="layout.css">
</head>
<body><div id="wrapper">
<div id="logo"></div>
<div id="filler"></div>
<div id="titlewrap">
<div id="logo2"></div>
<div id="title"></div>
</div>
<div id="links"></div>
<div id="body1"></div>
<div id="body2"></div>
<div id="body3"></div>
<div id="body4"></div>
<div id="foot">
</div>
</div></body>
</html>
I have tested in Mac FF and Safari and PC FF and my page appears correct. In IE7, the images at the bottom (#bottom) don't match up (with #nav). If I delete the 10 px padding on #bottom, it appears correctly in IE7, but not the other browsers. Can anyone tell me why this is happening? Is there a bug fix somewhere? Unfortunately, this forum won't let me post my url because I'm new, so I'm not sure how to describe what is happening without a visual, but here goes: I have a background image that encompasses the entire page. Because of my rollovers on my images at the bottom (contained in #bottom), I kept the background when making the images. The background on the images in #bottom do not match up with the background, thereby creating a disjoint, or "leap," between #nav and #bottom. Why would this happen in IE7 and not FF or Safari? (See first paragraph for padding explanation.) css: @charset "UTF-8"; #outer { width: 723px; background-image: url(images/art_bground.jpg); background-repeat: no-repeat; position:relative; float: none; margin: 0 auto; } #bottom { margin: 0px; height: 312px; padding-top: 10px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; img display: block; } #body { margin-top: 0px; margin-right: 25px; margin-bottom: 0px; margin-left: 260px; height: 208px; padding-top: 25px; padding-bottom: 0px; } a:link { color: #c33b03; text-decoration: none; } a:visited { text-decoration: none; color: #996600; } a:hover { text-decoration: none; color: #6a2e09; } a:active { text-decoration: none; color: #6a2e09; } .text {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #6a2e09;} .navtext { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bolder; color: #c33b03; margin-top: -10px; } .bold { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bolder; color: #c33b03; font-style: normal; } #nav { margin-top: 0px; margin-right: 25px; margin-left: 520px; margin-bottom: 0px; height: 178px; } Hi everyone, Please see this page in IE: shawnessy.ca/test.php The height of the top row (not the <TH> row) of the calendar gets messed up. The page looks fine under Firefox. Basically, I grabbed this calendar from my forum, which on its own, looks fine in IE: shawnessy.ca/forum/ Can anyone give me some suggestions as to how to fix this? Hey all! I tried this forum once before and no one helped me, but I hope someone can help me now. I scrapped the design of the last problem and started over, so now I have new problems. I got a Blogger template off the internet and all of the pages work fine except the homepage and calendar page that I made in Dreamweaver to try to look like the blog pages. In internet explorer, it doesn't work right. It looks okay in Firefox. It looks better in internet explorer with...oh...that google add-on installed...cannot remember what it is called. What can I do to fix the coding. Please help! I am self taught and this is driving me crazy. You have no idea how long it took me to get it to where it is now! www.hanoverlutheran dot com This site is entirely CSS built and is database driven so it is completely dependent on classes and Id's. I have a conflict with <H5> in this page/site template I'm trying to edit. H5 is used for the title in the header and needs to be white. As you can see by the example of the my news section it looks just as I want it (H5 is the bigger bolder text that starts each paragraph) MyNews.jpg Code: <div class="bodyNews"> <h4>My News</h4> <h6> <h5>News 1</h5> Content ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </h6> <h6> <h5>News 2</h5> Content ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </h6> <h6> <h5>News 3</h5> Content ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </h6> </div> And here's the CSS: Code: div.myNews {}
h4 {
font: 15px Georgia,serif;
font-weight: normal;
color: #6b3616;
text-transform: uppercase;
display: block;
margin: 25px 0 2px 0;
}
h5 {
font: 14px Georgia,serif;
font-weight: normal;
color: #6b3616;
margin-right: 4px;
display: inline;
}
h6 {
font: 11px/14px Verdana,sans-serif;
color: #3d412d;
margin: 10px 4px 2px 0;
}
So the problem is the H5 though it looks fine in this news part it messes with the header H5 and I can't change the class there... There must be another way to do this... Can anyone offer an alternative? See the site he Template M With IE, the background of SELECT elements is not respecting the CSS file setting. But IE does respect the CSS for the INPUT element. Netscape 7.1 and Mozilla Firefox work correctly for SELECT and INPUT. Here is a snippet from my stylesheet file: SELECT { FONT-WEIGHT: normal; BACKGROUND: beige; COLOR: darkgreen } INPUT { FONT-WEIGHT: normal; BACKGROUND: beige; COLOR: darkgreen } I have tried #FFFFD8 and #F5F5DC as alternatives to the name "beige" for the SELECT entry. Result is always white. Yet my text boxes show properly as beige so I am confused about why that name is ignored for SELECT elements. Note that I can change the entry to something basic like BACKGROUND: yellow and that displays correctly (but I don't want yellow - I want beige - like the INPUT element). These SELECT and INPUT elements are always in some table such as: <td class=genericinputleft>Starting Date<select name=dd1 etc. Could there be a cascading problem in IE ? Here is the CSS: .genericinputLeft { FONT-WEIGHT: bold; FONT-SIZE: x-small; BACKGROUND: none transparent scroll repeat 0% 0%; COLOR: black; FONT-FAMILY: Arial; text-align: left; vertical-align: top } I have tried commenting out the BACKGROUND entry from the class above but that does not seem to help. Thanks. Well, I'm redesigning my site because the current php management system was thrown together in a hurry just to get it up there. Now I've got time to redo it and I want to do it right. It's a webcomic site. Currently, the site has an XML layout that serves XHTML after a serverside transformation. What I want to do is lay the site out now so I can define my xsl. The basic "gist" of the situation is, i want it to be as accessible as possible(even though blind people may not be able to see the images, they deserve to surf my website.). With that, I want my content to show up before my link area, so they can easily get to the content without listening to a long list of links first. So what I've done in firefox was repositioned the div tags that held the content above the div section that held the link boxes. That's fine and dandy, where's my point? I still want the linkboxes to appear on the lefthand side of the page and the content on the right. In firefox, I used float:right;margin-right:5%; for the content and float:left on the link boxes. It works fine in firefox. The boxes appear on the left and content on the right. However, in IE the content appears on the right, but the link boxes appear on the left of the next line. Here is relelvant code: html Code: Original - html 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"> <head> <title>AdrienComix</title> <style type="text/css"> #body{ margin:0; } .header{ margin-bottom:10px; width:100%; height:15%; color:#000000; background-color:#00BBFF; background:url(http://www.adriencomix.com/res/head.jpg); border:1px dashed; text-align:center; font-size:20pt; } .box{ border:1px dashed; margin-bottom:30px; margin-left:2px; padding-left:5px; width:100%; background-color:#00BBFF; color:#000000; } .left{ width:15%; height:85%; float:left; } .content{ width:74.6%; height:100%; margin-left:5%; float:right; padding-right:5%; } .comic{ text-align:center; padding-top:15px; padding-bottom:15px; } .emp{ text-align:center; padding-top:20px; font-size:150%; font-weight:bold; } </style> </head> <body id="body"> <div class="header"><p>AdrienComix</p></div> <div class="content"> <div class="emp">Happy New Year!</div> <div class="comic"><img src="http://adriencomix.com/res/comics/01012006.JPG" alt="Happy New Year!"/></div> <div class="comments">Happy New Year! It's 2006 now. In a few short days, school starts back up.</div> <div class="copyright">Copyright 2005-2006 Adrien J. Howard of Underscore, Inc. Some images are property of Sega as well as SQUARE ENIX.</div> </div> <div class="left"> <div class="box"> <center><h3>Links</h3></center><br/> <a href="http://www.sluggy.com">Sluggy Freelance</a><br/> <a href="http://www.nuklearpower.com">8-bit Theater</a><br/> <a href="http://www.slackware.com">Slackware Linux</a><br/> <a href="http://www.gnu.org">GNU</a><br/> <a href="http://www.kernel.org">Linux Kernel</a><br/> <a href="http://www.google.com">Google</a> </div> <div class="box"> <center><h3>Archive</h3></center><br/> <a href="http://www.adriencomix.com/index.php?comic=10">#10</a><br/> <a href="http://www.adriencomix.com/index.php?comic=9">#9</a><br/> <a href="http://www.adriencomix.com/index.php?comic=8">#8</a><br/> <a href="http://www.adriencomix.com/index.php?comic=7">#7</a><br/> <a href="http://www.adriencomix.com/index.php?comic=6">#6</a><br/> <a href="http://www.adriencomix.com/index.php?comic=5">#5</a><br/> <a href="http://www.adriencomix.com/index.php?comic=4">#4</a><br/> <a href="http://www.adriencomix.com/index.php?comic=3">#3</a><br/> <a href="http://www.adriencomix.com/index.php?comic=2">#2</a><br/> <a href="http://www.adriencomix.com/index.php?comic=1">#1</a><br/> </div> </div> </body> </html>
<!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">
<head>
<title>AdrienComix</title>
<style type="text/css">
#body{
margin:0;
}
.header{
margin-bottom:10px;
width:100%;
height:15%;
color:#000000;
background-color:#00BBFF;
background:url(http://www.adriencomix.com/res/head.jpg);
border:1px dashed;
text-align:center;
font-size:20pt;
}
.box{
border:1px dashed;
margin-bottom:30px;
margin-left:2px;
padding-left:5px;
width:100%;
background-color:#00BBFF;
color:#000000;
}
.left{
width:15%;
height:85%;
float:left;
}
.content{
width:74.6%;
height:100%;
margin-left:5%;
float:right;
padding-right:5%;
}
.comic{
text-align:center;
padding-top:15px;
padding-bottom:15px;
}
.emp{
text-align:center;
padding-top:20px;
font-size:150%;
font-weight:bold;
}
</style>
</head>
<body id="body">
<div class="header"><p>AdrienComix</p></div>
<div class="content">
<div class="emp">Happy New Year!</div>
<div class="comic"><img src="http://adriencomix.com/res/comics/01012006.JPG" alt="Happy New Year!"/></div>
<div class="comments">Happy New Year! It's 2006 now. In a few short days, school starts back up.</div>
<div class="copyright">Copyright 2005-2006 Adrien J. Howard of Underscore, Inc. Some images are property of Sega as well as SQUARE ENIX.</div>
</div>
<div class="left">
<div class="box">
<center><h3>Links</h3></center><br/>
<a href="http://www.sluggy.com">Sluggy Freelance</a><br/>
<a href="http://www.nuklearpower.com">8-bit Theater</a><br/>
<a href="http://www.slackware.com">Slackware Linux</a><br/>
<a href="http://www.gnu.org">GNU</a><br/>
<a href="http://www.kernel.org">Linux Kernel</a><br/>
<a href="http://www.google.com">Google</a>
</div>
<div class="box">
<center><h3>Archive</h3></center><br/>
<a href="http://www.adriencomix.com/index.php?comic=10">#10</a><br/>
<a href="http://www.adriencomix.com/index.php?comic=9">#9</a><br/>
<a href="http://www.adriencomix.com/index.php?comic=8">#8</a><br/>
<a href="http://www.adriencomix.com/index.php?comic=7">#7</a><br/>
<a href="http://www.adriencomix.com/index.php?comic=6">#6</a><br/>
<a href="http://www.adriencomix.com/index.php?comic=5">#5</a><br/>
<a href="http://www.adriencomix.com/index.php?comic=4">#4</a><br/>
<a href="http://www.adriencomix.com/index.php?comic=3">#3</a><br/>
<a href="http://www.adriencomix.com/index.php?comic=2">#2</a><br/>
<a href="http://www.adriencomix.com/index.php?comic=1">#1</a><br/>
</div>
</div>
</body>
</html>
Is there any way that I can make it appear on the same line in IE without breaking the layout in firefox and keeping the page accessible? Ok ive got this small concept i need to work in order for me to implement it on the actual website. this code works 100% correct to how i want it to in FireFox. I have an image within a table TD tag , but i need the image to float outside the tables borders, i can do this with the margin-right: -20px; In firefox i can still see the full image been displayed, but in IE the image falls behind the table limits and then does not display any more. Please help me sort this one out. Code: <html>
<head>
<title>Untitled</title>
<style>
.test {
margin-right: -30px;
float: right;
z-index: 2;
}
.table{
z-index: 10;
}
</style>
</head>
<body>
<table align="center" width="300" border="1" class="table">
<tr>
<td> </td>
<td><img class="test" src="http://nexxon.galore.co.za/images/stories/animated_slidshow_02gif.gif" /></td>
</tr>
</table>
</body>
</html>
Hi all new member, just learning css! need help targeting my menu system? Html so far! -its a dynamic menu system, and i have no control of the naming system of the li Code: <div class="nav-container"> <ul id="nav"> <li> <a href="http://localhost/">Home</a> </li> <li class="level0 nav-1 level-top first"> <a class="level-top" href="http://localhost/mens.html"> <span>Mens</span> </a> </li> <li class="level0 nav-2 level-top"> <a class="level-top" href="http://localhost/womens.html"> <span>Womens</span> </a> </li> </ul> </div> I need to target the li classes - each one individual to bring in a different image for each when rolled over. Css i have for one of the examples:- .level0 nav-2 level-top li { float:left; padding:0px; font-size:14px; font-weight:bold; color:#000; text-transform:uppercase; background-image:url("navigation.gif"); width:85px;} .level0 nav-2 level-top li a:hover { color:#FDDD15; background-image:url("navigation.gif"); width:85px;background-position:0 -20px;} But its not right, not targetting it! - what is the correct path to target the different nav's? Thanks ok i have a 2 column layout, nothing special but i finally looked at it in IE and the left colum doesn't start until the bottom of the right column. i'm almost sure i'm missing something thats causing this, so i'm askin for a lil assistance. my page: URL css: URL Hi I have been making a world map with hover tooltip effects using css sprites. it works fine on ff and chrome but in ie and opera it is messed up. everything checks out to be valid xhtml and i get no errors listed anywhere. i have heard some issues with older versions of those browsers but my ie is 7 and my opera is 9. i based my map on this tutorial so css is the same except for positioning. http://www.alistapart.com/articles/sprites also the master image is 800 wide and 1224 tall, maybe that is a problem? i ma stuck and dont know what is wrong could anybody take a look and offer some advice to what is wrong or offer a suggestion? thanks, the map i ma referring to can be found at: travelmagoo.com Hi all, below is the code i have in my css, but from some reason my website is showing blue instead of yellow for links can you tell my why this is happening ffff00 is suppose to be yellow, at least that is what Expression web 2 shows. /* Sets the style for unvisited links. */ a, a:link { color: #FFFF00; text-decoration: underline; font-weight: bold; } Do to forum rules i can't post my url, so i know it will be difficult to troubleshoot. but thanks, for all the help you can give me. Bustersnm I have the following page, when the user clicks Reply a form should appear within the box. Works greats in Firefox, but in Internet Explorer the form appears within the next box. Anyone know a work around to get this work in IE? I'm pretty new to CSS and JavaScript, so it may be that I am missing something obvious here. Thank you very much for your help, a google search turned up nothing, nor did hours of trial and error. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Title Goes Here</title>
<style type="text/css" media="screen">
.pbox {
padding : 10px;
background-color : white;
}
.pboxtitle {
position : relative;
border-bottom : 2px solid black;
background-color:gray;
padding : 2px 5px;
}
.wbox {
padding : 1px;
background-color : white;
font-size: 12px;
margin-bottom: 4px;
}
.wboxtitle {
position : relative;
border-bottom : 2px solid black;
background-color: #CDCDCD;
padding : 2px 0px;
font-size: 12px;
height: 13px;
}
.subbox {
padding : 1px;
background-color : white;
font-size: 12px;
margin-bottom: 4px;
}
.subboxtitle {
position : relative;
border-bottom : 2px solid black;
background-color: #CDCDCD;
padding : 2px 0px;
font-size: 12px;
height: 13px;
margin-left: 10px;
}
</style>
<SCRIPT LANGUAGE="JavaScript">
function show(id){
var obj = document.getElementById(id);
obj.style.display = 'block';
}
</SCRIPT>
</head>
<body>
<div class='pboxtitle'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class='pbox'>
<div class='wboxtitle' >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div><div class='wbox' style="width: 100%">tester <a onclick='show("id1"); return false;' href=''>Reply</a></span>
<span style='display:none;' id='id1'><form action='u.php' method='put' >
<textarea name='comment' cols='35' rows='3'></textarea>
<input name='commentid' type='hidden' value='1'>
<input name='submit' type='button' value='Add Comment'></form></span>
</div><div class='wboxtitle' style='float: none;'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div><div class='wbox'>tester<a onclick='show("id2"); return false;' href=''>Reply</a>
<span style='display:none;' id='id2'><form action='u.php' method='put' >
<textarea name='comment' cols='35' rows='3'></textarea>
<input name='commentid' type='hidden' value='2'>
<input name='submit' type='button' value='Add Comment'></form></span>
</div><div class='wboxtitle'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div><div class='wbox'>tester<a onclick='show("id3"); return false;' href=''>Reply</a>
<span style='display:none;' id='id3'><form action='u.php' method='put' >
<textarea name='comment' cols='35' rows='3'></textarea>
<input name='commentid' type='hidden' value='3'>
<input name='submit' type='button' value='Add Comment'></form></span>
</div><div class='wboxtitle'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div><div class='wbox'>tester<a onclick='show("id4"); return false;' href=''>Reply</a>
<div style='display:none;' id='id4'><form action='u.php' method='put' >
<textarea name='comment' cols='35' rows='3'></textarea>
<input name='commentid' type='hidden' value='4'>
<input name='submit' type='button' value='Add Comment'></form></div>
</div>
<div class='wboxtitle'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div><div class='wbox'>tester<a onclick='show("id5"); return false;' href=''>Reply</a>
<span style='display:none;' id='id5'><form action='u.php' method='put' >
<textarea name='comment' cols='35' rows='3'></textarea>
<input name='commentid' type='hidden' value='5'>
<input name='submit' type='button' value='Add Comment'></form></span>
</div>
<div class='wboxtitle'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div><div class='wbox'>tester<a onclick='show("id6"); return false;' href=''>Reply</a>
<span style='display:none;position: relative;' id='id6'><form action='u.php' method='put' >
<textarea name='comment' cols='35' rows='3'></textarea>
<input name='commentid' type='hidden' value='6'>
<input name='submit' type='button' value='Add Comment'></form></span>
</div>
</body>
</html>
|
|||||||