|
CSS - My Displays Correct In Ff3 But Not Ie7...please Help!
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>
Similar Tutorialshey 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 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. 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 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!!! 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>
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. 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! 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. ok, I found the fix here. many thanks anyways. I 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 I've spent hours trying to figure out what is wrong with my page. It loads fine in IE. When I load it in Firefox, the nav menu on the left displays at the bottom of the page (as if my content section were too wide). If I hit refresh enough times, it will appear properly... hit refresh some more and it goes back to the incorrect layout. Additionally, if try to Edit CSS (Ctrl+Shift+E) the page snaps into the correct format. http://snipurl.com/19l6w I've tried everything I can think of to solve this. Any input here would be appreciated. I'm beating my head against the wall on this one and could use some expert help. In full disclosure, I am using a css template site I found on a open source template site. The site renders fine in Firefox and Opera, but is problematic with some pages. Here is one of the pages I am having trouble with in IE: http://worldwidemediaproject.com/tvrating.php You'll notice that in IE it appears like there are a bunch of <br>'s after the TV Stations header. This does not appear in either Firefox or Opera. The strange thing is this one appears fine in IE: http://worldwidemediaproject.com/tvrating.php?id=71&language=all&genre=all but this one doesn't: http://worldwidemediaproject.com/tvrating.php?id=216&language=all&genre=all The only real difference is that the table size is larger in the pages that have display problems. Is there some kind of IE hack that I need to apply? Many thanks.... occasionally in Netscape my CSS code displays on the actual page, which kinda ruins things! This is now the 7th forum I have posted to, please help!! My page is W3C HTML 4.0 transitional and CSS compliant. 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! Hi everyone, I have posted here [HTML Programming] because I'm not entirely sure what forum this particular problem should be put in. I have a fixed menu that I include using php. From looking at the source code I can see that it has definately included the menu. However IE only displays the menu 50% of the time. I have no idea why. At first I thought it was because I have a javascript animation for it to slide down, but I removed that and I still get the same problem. To see what I mean please visit twisted-reality.co.uk using IE and refresh a few times. Firefox, Opera, Safari and Netscape all display the menu fine, but IE feels like it needs to be different. I'm new to this forum but I hope someone can help Twisted-Daemon Hi, my css drop down menu seems to be working fine in firefox, but there are a few problems in IE. It didn't even work in IE7 until I added Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 1. In IE7, if you first hover over the link to get the drop down menu to show, move away, then hover over the menu again, it will show the blank sub menus of the one you last have opened. This is hard to explain. Please see my webpage for what I mean. http://ling.twinner.com.tw/uselink/index.php Move your mouse to the Products link at the top. 2. My menu seems to load slow. Is it because I have many sub menus or is my css not efficient? 3. How do I set the sub menu height to auto? Here is my css: http://ling.twinner.com.tw/uselink/menu_style.css Any suggestion is greatly appreciated. I apologize if this is supposed to be in the HTML forum. Since html code can be viewed from the source I thought I will post the css code to cross check since I couldn't figure out what is causing the problem. So thought I would post it in CSS forum. I have the following site that displays fine in Firefox but is all a mess in IE. http://www.geocities.com/dhaagey08/DhaageyTab2.html Following is the CSS code I am using. ====================================== * { margin: 0; padding: 0; } html { background: #fff url("images/html1.png") repeat-x left top; } body { font-family: arial, sans-serif; font-size: 12px; color: #888888; background: url("images/body.png") repeat-y left top; width: 1000px; margin: 0 auto 30px auto; position: relative; } a img { border: 1px solid #ccc; } a { color: #f48a88; text-decoration: none; } a:hover { visibility: visible; /* IE bug fix */ } a:hover img { border: 1px solid #729AD7; } h1 { font-size: 14px; } h2 { font-size: 12px; } .page { background: url("images/page3.jpg") no-repeat left top; padding: 15px 125px 0px 115px; width: 760px; } .header{ position: relative; width: 760px; height: 170px; left: 5px; top: 0; background: url("images/header1a.jpg") no-repeat left top; } /************* menu1 ******************/ .bar4285801 { width: 345px; height: 35px; position: relative; } .bar4285801 table.tabbar { position: absolute; width: auto; height: auto; top: 0px; left: 45px; } .bar4285801 div { height: 35px; width: 115px; } .bar4285801 div.button { background: url(menu47831178.jpg); } /****************** menu2 ***********************/ .bar4285846 { width: 345px; height: 35px; position: relative; } .bar4285846 table.tabbar { position: relative; width: auto; height: auto; top: -35px; left: 390px; } .bar4285846 div { height: 35px; width: 115px; } .bar4285846 div.button { background: url(menu30455262.jpg); } .main { width: 706px; margin: 0 auto; } .box1 { border: 1px solid #ccc; clear: both; padding: 0 5px 25px 2px; width: 690px; height:350px; position: relative; } .lady { float: left; width:220px; height:350px; background: url("images/lady2s.jpg"); } #right { width: 457px; float: right; padding-bottom: 130px; } .dhaagey { font-family: monotype corsiva; font-size: 30px; color: #89201d; } .contact{ font-family: monotype corsiva; font-size: 18px; color: #89201d; float: right; margin-top: 55px; } .photos { margin-top: 5px; padding-bottom: 8px; } .photos a { width: 106px; height: 140px; float: left; background: #C2D3EE; text-align: center; color: #A2A3A6; text-decoration: none; font-size: 11px; font-weight: bold; margin-right: 14px; } .photos>a { min-height: 148px; height: auto; } .photos a.last, .greybox-background .right a.last { margin-right: 0; } .photos a:hover { color: #f48a88; } .photos a span { display: block; padding-top: 2px; } .photos a>span { padding-top: 5px; } .greybox { border: 1px solid #ccc; margin-bottom: 39px; padding: 5px 0; } .greybox-background { background: url("images/gbback.jpg") repeat-y left top; width: 100%; line-height: 170%; } .greybox-background .left, .greybox-background .right { width: 321px; float: left; padding: 0 10px; } .greybox-background .right { float: left; padding: 0 19px 0 20px; } .greybox-background .right a { display: block; float: left; margin-right: 11px; margin-top: 8px; } .greybox2 { border: 1px solid #ccc; margin-bottom: 15px; padding: 9px 7px; width: 688px; } .greybox2 .preview { float: left; margin-right: 40px; margin-right: 44px; } .greybox2 .preview img { padding: 5px; } .greybox2 .right { float: left; width: 350px; } .greybox2 .right a { float: left; margin: 0 14px 7px 0; } .footer1 { text-align: center; padding: 0 27px 3px 27px; } .footer1 a { color: #872323; text-decoration: none; } .footer1 a:hover { color: #d87126; text-decoration: none; } .footer2 { font-size: 0px; line-height: 0px; height: 15px; background: url("images/footer.png") no-repeat left top; margin-left: 110px; } .cleaner { font-size: 0px; line-height: 0px; height: 0px; clear: both; } ============================================ Any help is greatly appareciated. |
|||||||