|
CSS - Pages Displays Different On Different Systems
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. Similar TutorialsSome of you may have seen my other post where I was trying to encorporate css into a JS menu. After some of your thoughts I decided to scrap that and write it in CSS. I am relatively new to CSS. I am not looking for you to code this for me, but maybe give me some ideas on what to try and why I am breaking things . here is a link to the page with just the code posted below in action: PAGE IS HERE Here is my CSS: Code: /**************** nav coding *****************/
#nav1 { padding: 0; margin: 0; list-style: none; line-height: 18; width: 10em; background: #555555; font: normal 12px Verdana;}
#nav1 ul { padding: 0; margin: 0; list-style: none; line-height: 18; width: 100%; font: normal 12px Verdana;}
#nav1 a { margin: 0; display: block; width: 10em; color: #f2f2f2; border-bottom: 1px solid #c0c0c0; text-decoration: none;}
#nav1 ul li a:hover { color: #f2f2f2; background: #8b8b8b; }
#nav1 li { float: left; width: 10em; background: #555555;/* width needed or else Opera goes nuts */ }
#nav1 li ul { /* second-level lists */
position: absolute; width: 10em; left: -999em; border-left: 1px solid #c0c0c0;
/* using left instead of display to hide menus because display: none isn't read by screen readers */
}
#nav1 li ul ul { /* third-and-above-level lists */ margin: -16px 0 0 10em; }
#nav1 li:hover ul ul, #nav1 li:hover ul ul ul, #nav1 li.sfhover ul ul, #nav1 li.sfhover ul ul ul { left: -999em; }
#nav1 li:hover ul, #nav1 li li:hover ul, #nav1 li li li:hover ul, #nav1 li.sfhover ul, #nav1 li li.sfhover ul, #nav1 li li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}
#nav-menu ul { list-style: none; padding: 0; margin: 0; font: normal 12px Verdana;}
#nav-menu li a{ float: left; margin: 0;}
#nav-menu li a{ background: url(MenuBackground.jpg) #fff left repeat-x; height: 30px; line-height: 18px; float: left;
width: 9em; display: block; border-right: 1px dotted #c0c0c0; color: #f2f2f2; text-decoration: none; text-align: center; }
/* Hide from IE5-Mac \*/
#nav-menu li { float: none; margin: 0;}
/* End hide */
#nav-menu { width: auto; }
here is my page code: Code:
<div id="nav-menu">
<ul>
<li><a href="#">Services</a></li>
<li><a href="#">About us</a></li>
<li style="border-style: none;"><a href="#">Contact us</a></li>
</ul>
</div>
<br><br><br>
<ul id="nav1">
<li><a href="#">Services</a>
<ul>
<li><a href="#">Link 1</a>
<ul>
<li><a href="#">Sub Link 1</a></li>
<li><a href="#">Sub Link 2</a></li>
<li><a href="#">Sub Link 3</a></li>
<li><a href="#">Sub Link 4</a></li>
<li><a href="#">Sub Link 5</a></li>
</ul>
</li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</li>
</ul>
What I am trying to do is make it so that on mouseover the 1 menu system you see, the second menu drops down below whichever element your mouse is on. I keep making it so that my background image is adopted into the lower menu system and I don't want that. I just want the first menu to maintain its look while the second one drops down below it, maintaining its look. (I haven't gotten it to look the way it should in IE yet. FF has a better representation right now) Hi, I plan to use CSS with CMS on my website. I would like to use CSS content management system for the inherent benefits of managing my website myself. I have seen a few websites developed by Imageworksstudio.com using CSS CMS together in a very correct manner. Can any of you please guide me what CSS content management system they have used? Can you point me to any online resources that help in using CMS and CSS to develop a website and make it SEO friendly. Thank You, Rheanna Francis 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!!! 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 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 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 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>
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. 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 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. ok, I found the fix here. many thanks anyways. 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.... 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: 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! 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. 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. |
|||||||