|
CSS - Is This Correct?
XHTML strict (no inline elements in <form)
Code: <form ...> <div> <input ... /> <input ... /> </div> </form> Is the empty div element acceptable? 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 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 in CSS?? thank you 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>
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>
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? 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 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>
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 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? 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; } 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>
I've bee fooling around with something that has no real purpose (but could) to try to understand an image positioning problem that I'm trying to avoid solving with tables. I hacked this CSS out, and it looks exactly and acts exactly like I want, but I can't help thinking it's not correct, especially how I deal with the "up" and "down" control images... Originally, I had thought the way to do this thing would be 5 distinct DIVs inside a container DIV, but as it turned out, one of the five turned into the container for all... This looks the same in FF and IE, which is what I want... The code can be seen in a browser he SiliconSatan.com/test.html Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
<style>
.col_tab_left {
position: relative;
width: 36px;
height: 30px;
left: 0px;
top: 0px;
background-image: url(./images/col_tab_left.gif);
}
.col_tab_middle {
width: 430px;
height: 30px;
position: absolute;
left: 36px;
top: 0px;
background-image: url(./images/col_tab_bg.gif);
text-align: center;
}
.col_tab_right {
width: 26px;
height: 30px;
position: absolute;
left: 466px;
top: 0px;
background-image: url(./images/col_tab_right.gif);
text-align: center;
}
.col_tab_title {
font-family: "Comic Sans MS", san-serif;
font-size: 10pt;
font-weight: bold;
line-height: 30px
}
.block_up {
width: 36px;
height: 30px;
border: 0px solid #003366;
left: 5px;
}
.block_down {
width: 36px;
height: 30px;
border: 0px solid #003366;
position: absolute;
left: 13px;
top: 0px;
}
.image {
position: relative;
display:block;
left: 7px;
top: 12px;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td width="200">This is some text</td>
<td>
<div class="col_tab_left">
<div class="block_up">
<img class="image" src="images/block_up2.gif" width="9" height="9" border="0" alt="">
</div>
<div class="block_down">
<img class="image" src="images/block_down2.gif" width="9" height="9" border="0" alt="">
</div>
<div class="col_tab_middle"><span class="col_tab_title">TEST</span></div>
<div class="col_tab_right"></div>
</div>
</td>
</tr>
</table>
<br>
<div class="col_tab_left">
<div class="block_up">
<img class="image" src="images/block_up2.gif" width="9" height="9" border="0" alt="">
</div>
<div class="block_down">
<img class="image" src="images/block_down2.gif" width="9" height="9" border="0" alt="">
</div>
<div class="col_tab_middle"><span class="col_tab_title">TEST</span></div>
<div class="col_tab_right"></div>
</div>
</body>
</html>
[sorry] 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 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 Hi there developers! im new here and desperately trying to be resonable at developing myself! i basically have an issue with my css, which is causing one of my drop down menus to appear slightly to the right in internet explorer - it looks spot on in firefox. i've googled this soooo much and heard about the 5 pixels problem between any browser and ie, but i cannot seem to fix it with all my changes made. see image - highlighted in red! Code: URL can anyone help me tidy this mess up please? this has taken me so long, because i wanted the locations of the drop downs to stay exactly in proportion when people zoom in and out of their browsers. html code: <div id="columnSubTop"> <div class="submenudropdown"> <div class="floatLeft width25 padL300 padTOP25"> <form action="search_for_vouchers_by_town" method="post" name="search" id="search"> <select name="fldCountyID"> <option value="">Please Select</option> <% While (NOT CountyList.EOF) %> <option value="<%=(CountyList.Fields.Item("fldCountyID").Value)%>"><%=(CountyList.Fields.Item("fldCountyName").Value)%></option> <% CountyList.MoveNext() Wend If (CountyList.CursorType > 0) Then CountyList.MoveFirst Else CountyList.Requery End If %></select> </div> <div class="floatRight width25 padR10 padTOP25"> <select name="fldTownID"> <% While (NOT TownList.EOF) %> <option value="<%=(TownList.Fields.Item("fldTownID").Value)%>"><%=(TownList.Fields.Item("fldTownName").Value)%></option> <% TownList.MoveNext() Wend If (TownList.CursorType > 0) Then TownList.MoveFirst Else TownList.Requery End If %></select> </div> </div> <div class="submenubutton"> <input type="image" src="images/search_button.gif" alt="Submit button" /> </form> </div> </div> CSS code: #columnSubTop { height: 85px; width:940px; margin: 0 auto; float:left; background-image:url(../images/css/subheader.gif); background-position: top left; background-repeat: no-repeat; clear:none; } .submenudropdown{ float:left; width:750px; } .submenubutton{ float:right; margin:0 auto; padding:24px 62px 0 0; } |
|||||||