|
CSS - </li> Plus <br /> Displays Differently In Ie6
Hi,
I have an unordered list displaying contact info for several people. For example: name1 address1 phone1 name2 address2 phone2 name3 address3 phone3 I'd like there to be a blank line between each person's info (just like it is displayed above). To do this, I added line breaks after each list item's closing tag. Here is the code: Code: <ul> <li>name1<br />address1<br />phone1<br /></li><br /> <li>name2<br />address2<br />phone2<br /></li><br /> <li>name3<br />address3<br />phone3<br /></li><br /> </ul> In Safari and Firefox (Mac and Win) there is a blank line between each section of contact info (the desired effect). In IE6, there is no blank line. It looks like this: name1 address1 phone1 name2 address2 phone2 name3 address3 phone3 I'm sure there is a fix out there, I just haven't found it yet. Any help is appreciated. - Tim Similar TutorialsI was playing around with the CSS on my blog to try and get the header alligned correctly. In Firefox I added both a bottom and top margin to the #logo to make it align correctly. the bottom margin figure was -45px;. When checking the site in Chrome there was still a large gap under the logo. So after a little trial and error it seemed that Chrome wanted -125px as the bottom margin figure to achieve my desired results. So I've left it at -125px but then back on Firefox the navmenu is now aligned wrong. Any ideas? **EDIT** I can't link to my site so you can see it as I'm a new user. I have a rather perplexing problem. I just created a website locally in CSS and it works fine when I open it locally (i.e., from my harddrive) in either Firefox or IE. But when I upload the HTML, images, and CSS to my webserver, the formatting breaks rather badly. I've checked that the files are exactly the same, so I do really don't know what the problem is. Here is the disfunctional online version: http://www.forma3.com/fs/jmf/index_v0.1.html And what it looks like locally: http://www.forma3.com/fs/jmf/local.png 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>
hey all, i am trying to implement coolmenus dropdown menus on a site but i am having problems. In IE it is fine it is in the rght place, but in mozFF it is positioned at the top of the page wierd here is the CSS for it which i think is possibly the problem Code:
/* CoolMenus 4 - default styles - do not edit */
.clCMAbs{position:absolute; visibility:hidden; left:0; top:0}
/* CoolMenus 4 - default styles - end */
/*Style for the background-bar*/
.clBar{position:absolute; top:auto; width:10; height:10; background-color:yellow; layer-background-color:yellow; visibility:hidden}
/*Styles for level 0*/
.clLevel0,.clLevel0over{position:absolute; padding-top:3px; font-family:georgia; font-size:12px; font-weight:bold; text-align:center; }
.clLevel0{background-color:#667138; layer-background-color:#667138; color:#ffffd2;}
.clLevel0over{background-color:#A4AA54; layer-background-color:#A4AA54; color:#ffffd2;; cursor:pointer; cursor:hand; }
.clLevel0border{position:absolute; visibility:hidden; background-color:#667138; layer-background-color:#667138}
/*Styles for level 1*/
.clLevel1, .clLevel1over{position:absolute; padding:2px; font-family:georgia; font-size:11px; text-align:center;}
.clLevel1{background-color:#667138; layer-background-color:#667138; color:#ffffd2;}
.clLevel1over{background-color:#A4AA43; layer-background-color:#A4AA54; color:#ffffd2; cursor:pointer; cursor:hand; }
.clLevel1border{position:absolute; visibility:hidden; background-color:#A4AA54; layer-background-color:#A4AA54}
/*Styles for level 2*/
.clLevel2, .clLevel2over{position:absolute; padding:2px; font-family:tahoma,arial,helvetica; font-size:10px; font-weight:bold; text-align:center;}
.clLevel2{background-color:Navy; layer-background-color:Navy; color:white;}
.clLevel2over{background-color:#0099cc; layer-background-color:#0099cc; color:#667138; cursor:pointer; cursor:hand; }
.clLevel2border{position:absolute; visibility:hidden; background-color:#006699; layer-background-color:#006699}/* CSS Document */
i can get it right in FF by changing this value in the javascrpt Code: oCMenu.fromTop=0 //this works for IE oCMenu.fromTop=139 // This works for Moz FF i can't get both correct at the same time! I am trying to position this menu in a DIV on my page which has the settings Code:
#TitleBar {
position:absolute;
top: 0px;
left: 0px;
padding: 15px;
padding-left:10px;
width:100%;
/* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
height:170px; /* 14px + 17px + 2px = 33px */
border-style:solid;
border-color: #A4AA54;
border-top: 1px #A4AA54 solid;
border-bottom: 1px #A4AA54 solid;
border-width:1px 1px; /* top and bottom borders: 1px; left and right borders: 0px */
background-color:#A4AA54;
background-image:url(../images/logo/gglogo.JPG);
background-position: 1% 2px;
background-repeat:no-repeat;
z-index:0;
/* This is a fix for IE% */
voice-family: "\"}\"";
voice-family:inherit;
height:170px;
width:100%; /* the correct height */
}
/* "be nice to Opera 5" */
body>#TitleBar {height:170px; width:100%;}
if anyone can help me with this that would be great!! i have posted on the dhtml coolmenus forumy thing but i dont think it is very active, certainly not as good as devshed thanks in advanced RF I had a similar problem earlier this week and it turned out to be solved by changing the encoding of my php files to ASCII instead of the default UTF-8 set by MS Expression Web. The problem I have now is that one of my pages looks wrong in IE7. The same page looks fine in IE8, FireFox 3, Chrome, Opera, and Safari. This is what it looks like in IE7: This is what it looks like in IE8 and all the other browsers mentioned above: The page can be seen he http://dev.asbco.com/products/commercialindustrial/ Any help is greatly appreciated! Thanks! Hello, With following css for header Code: div#header{
height:75px;
background-color:#ffffcc;
}
I am getting three different views in IE, FF, Opera. In IE entire background color is pale yellow, In FF only the line is pale yellow. In opera line and area below it is pale yellow. Here goes goes html. Code: <div id="header"> <h3 align = "center">Welcome to <b>Your Space</b></h3> </div> What is going wrong here? Thank you. My page seems to work in IE7, Firefox & Safari but in IE6 it all is shifted to the right. Any help will be greatly appreciated as I am new to this. Here is my code: Code: .css
body
{
background-color: #000000;
}
#background {
position:absolute;
width:600px;
z-index:1;
left: 300px;
top: 10px;
}
#clientbackground {
position:absolute;
width:600px;
z-index:1;
left: 300px;
top: 10px;
}
#apDiv1 {
position:absolute;
width:90px;
z-index:1;
left: 380px;
top: 90px;
}
#apDiv2 {
position:absolute;
width:78;
z-index:2;
left: 355px;
top: 192px;
}
#apDiv3 {
position:absolute;
width:78;
height:113;
z-index:3;
left: 350px;
top: 313px;
}
#apDiv4 {
position:absolute;
width:97;
height:90;
z-index:4;
left: 362px;
top: 433px;
}
#apDiv5 {
position:absolute;
width:179;
height:230;
z-index:1;
left: 400px;
top: 262px;
}
#apDiv6 {
position:absolute;
width:61;
height:96;
z-index:5;
left: 1015px;
top: 26px;
}
#content {
position:absolute;
width:550;
height:96;
z-index:5;
left: 496px;
top: 146px;
}
.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}
.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}
.thumbnail:hover{
background-color: transparent;
}
.thumbnail:hover img{
border: 1px solid blue;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: none;
padding: 5px;
left: 1200px;
border: none;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 25;
left: 0px; /*position where enlarged image should offset horizontally */
z-index: 50;
}
.html
<html>
<head>
<title>*******</title>
<link rel="stylesheet" type="text/css"
href="style.css" />
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onLoad="MM_preloadImages('images/about.jpg','images/clients.jpg','images/work.jpg','images/facility.jpg','images/client.gif')">
<div id="background"><img src="images/background.gif" width="800" height="600" /></div>
<div id="apDiv1"><a href="about.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','images/about.jpg',1)"><img src="images/about.jpg" name="Image1" width="90" height="94" border="0"></a></div>
<div id="apDiv2"><a href="clients.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','images/clients.jpg',1)"><img src="images/clients.jpg" name="Image2" width="77" height="113" border="0"></a></div>
<div id="apDiv3"><a href="work.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','images/work.jpg',1)"><img src="images/work.jpg" name="Image3" width="78" height="113" border="0"></a></div>
<div id="apDiv4"><a href="facility.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','images/facility.jpg',1)"><img src="images/facility.jpg" name="Image4" width="97" height="90" border="0"></a></div>
<div id="apDiv6"><a href="(URL address blocked: See forum rules)" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','images/client.gif',1)" target = _blank><img src="images/client.gif" name="Image5" width="61" height="96" border="0"></a></div>
</body>
</html>
Thanks for your help!!! If you look at my page here in IE and Firefox, you'll see that the footer is stretched in IE. It's barely showing the image, but flooding over into the center of the page. I have no idea why it'd be doing this. View in IE View in FF Here's the CSS used : Code: #footer {
background: #49515C url(img/header_right.gif) no-repeat 100%;
border-bottom: 5px solid #fff;
border-top: 10px solid #fff;
text-align: center;
color: #fff;
font-size: 0.8em;
padding: 10px;
line-height: 16px;
clear: both;
}
Can anyone see a problem? http://www.lovemeforme.org/alecia/ I've made it so it works perfect in FF, IE, Netscape.. but in Opera it's messed up. Is there anyway I can specialize a stylesheet for just Opera? Also, anyone know of any free services that provide screen shots for all common web browsers. I remember I had a link a while ago, but I've since lost it. Thanks for the help in advance. I have two images, the first (nameplate) i have set to be ontop and centered, whose left side "hits" the side of the window when the window gets small enough like its supposed to. The second is set beneath it (silverplate) and is smaller than nameplate(1500x800). I want this to be centered too so that when the browser is resized it follows the nameplate and doesnt move against it or go out of window. I cant seem to achieve this effect with any combination of positioning and nested divs, the silverplate always goes off the left side of the window and tracks different than the nameplate. Why dont both images behave the same? How would i make them do that? Code: <style>
#nameplate {
top:0px;
height:1500px;
z-index:90;
height:1500px;
overflow:visible;
}
.img {
position:relative;
display:inherit;
margin-left:auto;
margin-right:auto;
}
</style>
</head>
<body bgcolor="#00FF33" style="margin:0px; padding:0px; max-height:1500px; overflow:visible;">
<div id="nameplate">
<img src="Assets/NamePlate.png" style=" z-index:98; opacity:0.5;" class="img" />
<img src="Assets/SilverPlate.png" style="z-index:95; left:-300px; top: -1000px; width:100px; height:100px;" class="img"/>
</div>
I am attempting to put together a site with CSS navigation for the first time. Thanks to people much smarter than I, I've been able to stitch other's lessons into something almost workable. THE PROBLEM I have a horizontal menu with a submenu. This submenu should also display horizontally. It does in FF, but not in either IE6 or IE7. In these browsers, it displays vertically. I have tried a lot of things and finally gave up. I validated my code and was given a pass. I've tried narrowing down the problem and have tried searching for the answer but I just can't figure it out. If needed, you can view the problem at www.foundationfitnesscenter.com/schedule (ignore the crappy header image, it's just there to show an idea for now). The CSS where I feel the problem must be: Code: #nav #schedule-sub,
#nav #education-sub,
#nav #classes-sub {
display:none;
width:90%;
}
body.classes #nav ul#classes-sub a,
body.schedule #nav ul#schedule-sub a,
body.education #nav ul#education-sub a {
background-image:none;
color:#3300FF;
font-size:100%;
font-weight:bold;
line-height:10px;
margin-right:4px;
padding:2px 10px 2px 10px;
text-decoration:none;
}
body.classes #nav ul#classes-sub,
body.schedule #nav ul#schedule-sub {
display:block;
position:absolute;
left:15px;
top:95px;
}
body.education #nav ul#education-sub {
display:block;
position:absolute;
left:175px;
top:95px;
}
The HTML Code: <ul id="nav">
<li class="home-list"><a href="/index.php">Home</a></li>
<li class="classes-list"><a href="../classes/">Classes</a>
<ul id="classes-sub">
<li><a href="../classes/pilates.php">Pilates</a></li>
<li><a href="../classes/dance.php">Dance</a></li>
<li><a href="../classes/gyrokinesis.php">Gyrokinesis</a></li>
</ul>
</li>
<li class="schedule-list"><a href="../schedule/">Schedule</a>
<ul id="schedule-sub">
<li><a href="../schedule/class-schedule">View All Classes</a></li>
<li><a href="../schedule/enroll-private.php">Enroll - Private</a></li>
<li><a href="../schedule/enroll-group.php">Enroll - Group</a></li>
</ul>
</li>
<li class="education-list"><a href="../education/">Education</a>
<ul id="education-sub">
<li><a href="../education/pilates/">Pilates</a></li>
<li><a href="../education/dance/">Dance</a></li>
<li><a href="../education/gyrokinesis/">Gyrokinesis</a></li>
</ul>
</li>
<li class="about-list"><a href="../about/">About</a></li>
<li class="contact-list"><a href="../contact/">Contact</a></li>
</ul>
Ok so i initially put my CSS iwthin my HTML document as it was just going to be a test page. I then thought of expanding it into an actual site so wanted to transfer the CSS coding on and external CSS stylesheet. However when doing this the layers pull to the left and out of line .. any problem causing this? Also .. i know i have used position:absolute; tags, and using them is frowned upon when used on all layers. But without these, once again the layers again, are pulled to the left, any help would be fantastic. Regards, Joe. CSS within the XHTML document: Code: <style type="text/css">
<!--
body {
margin: -10px;
/*/*/margin: 0; /* */
padding: 0;
color: black;
background: white;
background-image: url(images/bg%20copy.png);
}
#content {
position:absolute;
width:200px;
height:78px;
z-index:1;
left: 112px;
top: 0px;
}
#nav {
position:absolute;
border:#000000;
border-width:thin;
width:142px;
height:320px;
z-index:2;
left: 123px;
top: 109px;
}
.style {
background:#A01B1E none repeat scroll 0%;
border:1px solid #000000;
}
#aff {
position:absolute;
width:137px;
height:29px;
z-index:3;
left: 123px;
top: 553px;
}
.style1 {font-size: 12px}
#news1 {
position:absolute;
width:200px;
height:43px;
z-index:4;
left: 307px;
top: 108px;
}
#news2 {
position:absolute;
width:200px;
height:115px;
z-index:5;
left: 307px;
top: 278px;
}
#xtreme {
position:absolute;
width:27px;
height:38px;
z-index:6;
left: 860px;
top: 15px;
}
-->
</style>
Hi there, I have some CSS tabs, but they are displaying differently in IE7 than FF. This is my code: PHP Code: #nav { float:left; width:100%; background:yellow; height: 27px; font-size:93%; line-height:normal; list-style: none; margin: 0px; } #nav li { float:left; background:url("images/tab_left.jpg") no-repeat left top; margin:0; padding:0px; list-style: none; } #nav a, #navheader strong, #nav span { display:block; background:url("images/tab_right.jpg") no-repeat right top; padding:5px 15px 4px 6px; } and my html: PHP Code: <div id="nav"> <ul> <li><a href="#">Home</a></li> <li id="current"><a href="#">News</a></li> <li><a href="#">Products</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </div> Any ideas whats causing these different outcomes? Hello all, I'm trying to make a webpage that has about 200px padding on the left and right side and 0 padding at the top and bottom, i would like my content to be viewed in that small area. I'm wanting the background color where my content will be to be grey but i want the padded sides to stay white. Is this possible? Like this http://www.cssbasics.com/, you see how the sides are grey and the content area is in a different color, how can i do this? Thank you! ok, I found the fix here. many thanks anyways. Thanks for taking the time to read my question. I have a MainBox that I have all my page in. <div id="MainBox"></div> I had a height set and both IE and FF displayed ok, but if the content was higher than the box, FF expanded and IE didn't. So I took the height off and IE expaned and FF shrunk to nothing. What's up with that? I've attached the code and the one pic. What can I do to get them to display the same? right now all files go in the same folder. Thanks, Brad I designed a site,caringfriendsinc.com . Everything displays fine in Firefox, but in IE7 the images in the center of the services page are spaced apart just a little bit. It is noticeable around the edges. I can't seem to figure out how to fix it. Thanks in advance. I have a project in Visual Studio 2008, ASP.Net, 2.0. We are going from IE6 to IE8 and I'm making the changes for this move. I did all these changes by deploying the files to a test web server because I still had IE6 on my machine. When I publish to our web server the pages render like they should. I got IE8 last night so I figured I could just test it out on my box. When I run it off my box, the pages look all screwed up. I don't understand how they can look fine on the web server but not on my box. The same version of IE8 is installed on the test box I'm working with and my machine. Anyone ever encountered this or know of anything to check? If you have questions or need more info, ask. The page with the problem is this one: http://www.yazmin.net/teamintraining/photos.php When the page loads in IE (I'm using v6, but this seems to be happening in all versions of IE), you can see my introduction text display, but then it looks like another div is being loaded and the text promptly dissappears. I don't have this problem in other browsers. Below is the relevant CSS and HTML code: CSS: Code:
#content {
background-image: url(/teamintraining/images/bkg.gif);
margin: 30px 13em 0 3em;
padding-right: 60px;
}
#navigation {
color:#006600;
}
.img-shadow {
float:left;
background: url(/teamintraining/images/shadowAlpha.png) no-repeat bottom right !important;
background: url(/teamintraining/images/shadow.gif) no-repeat bottom right;
margin: 10px 0 0 10px !important;
margin: 10px 0 0 5px;
}
.img-shadow img {
display: block;
position: relative;
background-color: #fff;
border: 1px solid #a9a9a9;
margin: -6px 6px 6px -6px;
padding: 4px;
}
HTML: Code:
<body>
<br><h2>Welcome to Jason and Yazmin Wickham's Team In Training Update Site!</h2><br><br>
<div id="main">
<div id="menu">
<div align="center"><?php include("includes/navigation.htm"); ?><p> </p></div>
</div>
<div id="content">
<h1>Photo Gallery</h1>
<p>As Jason and I go through training, we will make an effort to post pictures here for viewing.</p>
<p><?php echo $gallery->getThumbnailsDisplay() ?></p>
<br style="clear:both" />
</div>
</div>
</body>
Any ideas? Thanks! Hi: Could someone be kind enough to point out what I should do to fix this problem? 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>TASK SELECTION FORM</title>
<style type="text/css">
form {display:inline;font-family: Arial;font-weight: bold;font-size: 12px;color: #000000;}
legend {color:#000000;}
.heading {font-weight: bold;font-size: 15px;color:#000000;}
.npt {width:35%;float: center;}
#f1 {font-family: Arial;font-weight: bold;font-size: 17px;color: #ffffcc;}
#f2 {background-color:#99ccff;}
#f3, #f4, #f5, #f6, #f7, #f8 {background-color:#ffffcc;}
#f2 {width: 240px;height: 425px;border: 5px ridge #777;padding: 20px;margin: 0px auto;text-align:right;background-color:#99ccff;float: center;}
#f3 {width: 215px;height: 40px;border: 1px ridge #777;padding: 10px;margin: 0px auto;text-align:right;background-color:#ffffcc;float: center;}
#f4 {width: 215px;height: 40px;border: 1px ridge #777;padding: 10px;margin: 0px auto;text-align:right;background-color:#ffffcc;float: center;}
#f5 {width: 215px;height: 40px;border: 1px ridge #777;padding: 10px;margin: 0px auto;text-align:right;background-color:#ffffcc;float: center;}
#f6 {width: 215px;height: 40px;border: 1px ridge #777;padding: 10px;margin: 0px auto;text-align:right;background-color:#ffffcc;float: center;}
#f7 {width: 215px;height: 40px;border: 1px ridge #777;padding: 10px;margin: 0px auto;text-align:right;background-color:#ffffcc;float: center;}
#f8 {width: 215px;height: 40px;border: 1px ridge #777;padding: 10px;margin: 0px auto;text-align:right;background-color:#ffffcc;float: center;}
.button {width:100px;margin-right:6px;}
</style>
</head>
<body bgcolor="#6699cc">
<div id="f1">
<center>
<legend>WELCOME!</legend>
<br>
<br>
<legend>KINDLY SELECT A TASK FROM THE TABLE BELOW</legend>
<br>
<hr width="50%" size="2" color="black">
<br>
</center>
</div>
<div id="f2">
<center>
<div class="heading">TASK SELECTION FORM</div>
<br>
</center>
<div id="f3">
<form method="POST" action="job_sheet_1.html">
<fieldset>
<div class="npt"><input type="submit" name="job_sheet" value=" CREATE JOB SHEET "></div>
</fieldset>
</form>
</div>
<div id="f4">
<form method="POST" action="create_job_sheet.html">
<fieldset>
<div class="npt"><input type="submit" name="create_job_sheet" value=" PRINT JOB SHEET "></div>
</fieldset>
</form>
</div>
<div id="f5">
<form method="POST" action="work_sheet.php">
<fieldset>
<div class="npt"><input type="submit" name="work_sheet" value=" CREATE WORK SHEET "></div>
</fieldset>
</form>
</div>
<div id="f6">
<form method="POST" action="admin_passwd.html">
<fieldset>
<div class="npt"><input type="submit" name="admin_passwd" value=" ADD NEW USER "></div>
</fieldset>
</form>
</div>
<div id="f7">
<form method="POST" action="delete_record.php">
<fieldset>
<div class="npt"><input type="submit" name="delete" value=" DELETE RECORD "></div>
</fieldset>
</form>
</div>
<div id="f8">
<form method="POST" action="taskselectionform.php">
<fieldset>
<div class="npt"><input type="submit" name="exit" value=" EXIT PROGRAM "></div>
</fieldset>
</form>
</div>
</div>
</body>
</head>
</html>
In IE 6.0 the display is jagged. Thanks for your help! |
|||||||