|
CSS - Is It Correct To Have A <div After A <form Or After A <p ??
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 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 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>
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 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. Is it correct to use in CSS?? thank you 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 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? 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 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>
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. 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'm learning to do most things with CSS and have discovered the IE is inherently evil it seems. It appears that the a items aren't links, the size of the li ul...pretty much all isn't true to what is supposed to be and everything is way out of position. Any help would be appreciated. Thanks If you go to sandrabakescakes dot com / index_.php in IE6 you'll see errors. Too new to post url so here's the css. css Code: Original - css Code <style type="text/css"> body{ background-image: url(images/pagebckgrnd.gif); background-repeat: repeat; padding-top: 2%; padding-right: 0; padding-bottom: 0; padding-left: 0; } html{ margin:0 auto; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; color: #999999; } #container{ width:900px; margin:0 auto; position:relative; } #header{ display: block; width: 900px; height: 171px; background-image: url(images/index_head.png); } #header h1 { font-size: 1em; margin: 0; padding: 0; text-indent: -9999px; text-decoration: none; } #middle { width:900px; background-image: url(images/index_mid.png); background-repeat: no-repeat; float:left; height: 263px; position:relative; } #thumbnails{ float:right; width:232px; padding: 0px; } #thumbnails h2 { font-size: 1em; margin: 0; padding: 0; text-indent: -9999px; text-decoration: none; } #navigation { width:430px; height:155px; right: 0px; top: 69px; position:absolute; } #navigation ul{ width:430px; height:155px; padding:0; position:absolute; } #navigation ul li{ margin:0; padding:0; list-style:none; position:absolute; top:0px } #navigation ul li, #navigation a{ height:155px; display:block; } #navigation ul li a{ text-indent:-9999px; text-decoration:none } #mn1{left:0px;width:130px; background:url(/images/navimage.png) no-repeat 0px 0px; } #mn2{left:140px;width:130px; background:url(/images/navimage.png) no-repeat -152px 0px; } #mn3{left:280px;width:130px; background:url(/images/navimage.png) no-repeat -301px 0px;} #mn1 a:hover{background:url(/images/navimage.png) 0 -155px no-repeat;} #mn2 a:hover{background:url(/images/navimage.png) -152px -155px no-repeat;} #mn3 a:hover{background:url(/images/navimage.png) -301px -155px no-repeat;} #footer{ width:900px; height:97px; position:relative; background-image: url(images/index_footer.png); background-repeat: no-repeat; clear:both } #footer p{ position: absolute; right: 10px; bottom: 55px; } img { border-width: 0; } .image img { margin-left: auto ; margin-right: auto ; padding:12px; display:block; background-color: #ccc; margin-top: 10px; width:600px; } .thumbnail_row { width:195px; float: right; padding:14px; border:0px; } .thumbnail_center, .thumbnail_center img, .thumbnail, .thumbnail img { display:block; float:left; margin: 0 auto; padding: 0 0 0 0; border:0px; } </style> <style type="text/css"> 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 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] at cookcommons the left nav divs are not working in FF but seem to be working fine in IE 7. IE6 does something different as well. I broke the left nav into 3 divs. Basically like this: Nav2 div Link Link Link Nav2 div close Search div search Search div close Nav2 div Link Link Nav2 close And in FF everything under the search gets messed up and pushed up in FF. In IE 6 I think I just have to adjust a margin or padding to make it work. IE7 looks great! Any help is greatly appreciated. |
|||||||